溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Bootstrap中手風(fēng)琴組件的使用方法是什么”，在日常操作中，相信很多人在Bootstrap中手風(fēng)琴組件的使用方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”Bootstrap中手風(fēng)琴組件的使用方法是什么”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
手風(fēng)琴（Accordion）組件非常類似于選項(xiàng)卡，只不過它不是橫向排列，而是豎向排列，結(jié)合自帶的JavaScript插件無需手寫js就可以實(shí)現(xiàn)折疊的垂直內(nèi)容。手風(fēng)琴通常用于后臺(tái)面板垂直導(dǎo)航菜單、前臺(tái)折疊消息等。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>滑動(dòng)窗口</title> </head> <body> <div> <br><br><br> <div id="accordionExample"> <div> <h3 id="headingOne"> <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 李白 </button> </h3> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div> <strong>李白（701年－762年）</strong> ，字太白，號(hào)青蓮居士，又號(hào)“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽(yù)為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進(jìn)酒》《梁甫吟》《早發(fā)白帝城》等多首。 </div> </div> </div> <div> <h3 id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 杜甫 </button> </h3> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div> <strong>杜甫（712年—770年）</strong> ，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現(xiàn)實(shí)主義詩人， 與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠(yuǎn)，被后人稱為“詩圣”，他的詩被稱為“詩史”。 杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。 </div> </div> </div> <div> <h3 id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 白居易 </button> </h3> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div> <strong>白居易（772年－846年）</strong> ，字樂天，號(hào)香山居士，又號(hào)醉吟先生，祖籍山西太原。 是唐代偉大的現(xiàn)實(shí)主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。 有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。 </div> </div> </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
手風(fēng)琴組件必須包含在accordion容器中
<div class="accordion">..</div>
一個(gè)手風(fēng)琴組件有許多個(gè)條目，如上面的例子，下面就是一個(gè)條目。每個(gè)條目都包含標(biāo)題和內(nèi)容。
<div class="accordion-item"> <h3 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 杜甫 </button> </h3> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>杜甫（712年—770年）</strong> ，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現(xiàn)實(shí)主義詩人， 與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠(yuǎn)，被后人稱為“詩圣”，他的詩被稱為“詩史”。 杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。 </div> </div> </div>
下面代碼就是條目的標(biāo)題，它包含一個(gè)h3標(biāo)簽和一個(gè)按鈕，事實(shí)上你只需要修改以下按鈕中的文字和data-bs-target的值即可。
<h3 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 杜甫 </button> </h3>
如下代碼就是條目的內(nèi)容，同樣的你只需要最外層id和data-bs-target的值相對(duì)應(yīng)即可。
條目內(nèi)容可以放任何html代碼和文字、列表、圖片等。
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> 杜甫（712年—770年 ，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現(xiàn)實(shí)主義詩人， 與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠(yuǎn)，被后人稱為“詩圣”，他的詩被稱為“詩史”。 杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。 </div> </div>
刪除默認(rèn)背景色、一些邊框和一些圓角，以使手風(fēng)琴與其父容器緊鄰。只需要在容器中添加accordion-flush即可。
<div class="accordion accordion-flush">
如下代碼顯示了兩種風(fēng)格的不同，注意看下面那個(gè)上下左右邊框及四個(gè)角。另外需要注意兩個(gè)手風(fēng)琴組件在同一個(gè)頁面要定義不同的id，否則容易控制混亂。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>滑動(dòng)窗口</title> </head> <body> <div> <br><br><br> <div id="accordionExample"> <div> <h3 id="headingOne"> <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 李白 </button> </h3> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div> <strong>李白（701年－762年）</strong> ，字太白，號(hào)青蓮居士，又號(hào)“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽(yù)為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進(jìn)酒》《梁甫吟》《早發(fā)白帝城》等多首。 </div> </div> </div> <div> <h3 id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 杜甫 </button> </h3> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div> <strong>杜甫（712年—770年）</strong> ，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現(xiàn)實(shí)主義詩人， 與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠(yuǎn)，被后人稱為“詩圣”，他的詩被稱為“詩史”。 杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。 </div> </div> </div> <div> <h3 id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 白居易 </button> </h3> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div> <strong>白居易（772年－846年）</strong> ，字樂天，號(hào)香山居士，又號(hào)醉吟先生，祖籍山西太原。 是唐代偉大的現(xiàn)實(shí)主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。 有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。 </div> </div> </div> </div> <br><br><br> <div class="accordion accordion-flush" id="accordionExample2"> <div> <h3 id="headingOne2"> <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne"> 李白 </button> </h3> <div id="collapseOne2" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample2"> <div> <strong>李白（701年－762年）</strong> ，字太白，號(hào)青蓮居士，又號(hào)“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽(yù)為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進(jìn)酒》《梁甫吟》《早發(fā)白帝城》等多首。 </div> </div> </div> <div> <h3 id="headingTwo2"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo"> 杜甫 </button> </h3> <div id="collapseTwo2" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample2"> <div> <strong>杜甫（712年—770年）</strong> ，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現(xiàn)實(shí)主義詩人， 與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠(yuǎn)，被后人稱為“詩圣”，他的詩被稱為“詩史”。 杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。 </div> </div> </div> <div> <h3 id="headingThree2"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree"> 白居易 </button> </h3> <div id="collapseThree2" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample2"> <div> <strong>白居易（772年－846年）</strong> ，字樂天，號(hào)香山居士，又號(hào)醉吟先生，祖籍山西太原。 是唐代偉大的現(xiàn)實(shí)主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。 有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。 </div> </div> </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
手風(fēng)琴組件條目內(nèi)容可以是列表，一般常用在后臺(tái)導(dǎo)航面板和前臺(tái)側(cè)邊折疊新聞。你可以使用文本通用類設(shè)置文字對(duì)齊格式。或者使用css重新定義列表顯示的樣式。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>手風(fēng)琴組件</title> </head> <body> <div> <br><br><br> <div id="accordionExample"> <div> <h3 id="headingOne"> <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 文章管理 </button> </h3> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div> <ul> <li>分類管理</li> <li>文章列表</li> <li>添加文章</li> </ul> </div> </div> </div> <div> <h3 id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 網(wǎng)站管理 </button> </h3> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div> <ul> <li>網(wǎng)站設(shè)置</li> <li>風(fēng)格選擇</li> <li>插件管理</li> </ul> </div> </div> </div> <div> <h3 id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 會(huì)員管理 </button> </h3> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div> <ul> <li>普通會(huì)員</li> <li>VIP會(huì)有</li> </ul> </div> </div> </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
！
到此，關(guān)于“Bootstrap中手風(fēng)琴組件的使用方法是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
