16.1 簡(jiǎn)單例子
手風(fēng)琴（Accordion）組件非常類似于選項(xiàng)卡，只不過它不是橫向排列，而是豎向排列，結(jié)合自帶的JavaScript插件無(wú)需手寫js就可以實(shí)現(xiàn)折疊的垂直內(nèi)容。手風(fēng)琴通常用于后臺(tái)面板垂直導(dǎo)航菜單、前臺(tái)折疊消息等。 手風(fēng)琴組建的效果和第9節(jié) Bootstrap對(duì)網(wǎng)頁(yè)排版做了哪些顛覆設(shè)計(jì)中的9.2.16 摘要 類似。
<!doctype html>
<html lang="zh-CN">
<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 class="container">
<br><br><br>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
李白
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>李白（701年－762年）</strong> ，字太白，號(hào)青蓮居士，又號(hào)“謫仙人”，是唐代偉大的浪漫主義詩(shī)人，被后人譽(yù)為“詩(shī)仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進(jìn)酒》《梁甫吟》《早發(fā)白帝城》等多首。
</div>
</div>
</div>
<div class="accordion-item">
<h2 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>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>杜甫（712年—770年）</strong>
，字子美，原籍湖北襄陽(yáng)，后徙河南鞏縣。唐代偉大的現(xiàn)實(shí)主義詩(shī)人，
與李白合稱“李杜”。杜甫在中國(guó)古典詩(shī)歌中的影響非常深遠(yuǎn)，被后人稱為“詩(shī)圣”，他的詩(shī)被稱為“詩(shī)史”。
杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
白居易
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>白居易（772年－846年）</strong>
，字樂天，號(hào)香山居士，又號(hào)醉吟先生，祖籍山西太原。
是唐代偉大的現(xiàn)實(shí)主義詩(shī)人，白居易的詩(shī)歌題材廣泛，形式多樣，語(yǔ)言平易通俗，有“詩(shī)魔”和“詩(shī)王”之稱。
有《白氏長(zhǎng)慶集》傳世，代表詩(shī)作有《長(zhǎng)恨歌》、《賣炭翁》、《琵琶行》等。
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼16.2 手風(fēng)琴組件結(jié)構(gòu)
16.2.1 容器
手風(fēng)琴組件必須包含在accordion容器中
<div class="accordion">..</div>
復(fù)制代碼16.2.2 手風(fēng)琴條目
一個(gè)手風(fēng)琴組件有許多個(gè)條目，如上面的例子，下面就是一個(gè)條目。每個(gè)條目都包含標(biāo)題和內(nèi)容。
<div class="accordion-item">
<h2 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>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>杜甫（712年—770年）</strong>
，字子美，原籍湖北襄陽(yáng)，后徙河南鞏縣。唐代偉大的現(xiàn)實(shí)主義詩(shī)人，
與李白合稱“李杜”。杜甫在中國(guó)古典詩(shī)歌中的影響非常深遠(yuǎn)，被后人稱為“詩(shī)圣”，他的詩(shī)被稱為“詩(shī)史”。
杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。
</div>
</div>
</div>
復(fù)制代碼16.2.3 條目標(biāo)題
下面代碼就是條目的標(biāo)題，它包含一個(gè)h2標(biāo)簽和一個(gè)按鈕，事實(shí)上你只需要修改以下按鈕中的文字和data-bs-target的值即可。
<h2 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>
</h2>
復(fù)制代碼16.2.4 條目?jī)?nèi)容
如下代碼就是條目的內(nèi)容，同樣的你只需要最外層id和data-bs-target的值相對(duì)應(yīng)即可。
條目?jī)?nèi)容可以放任何html代碼和文字、列表、圖片等。
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
杜甫（712年—770年
，字子美，原籍湖北襄陽(yáng)，后徙河南鞏縣。唐代偉大的現(xiàn)實(shí)主義詩(shī)人，
與李白合稱“李杜”。杜甫在中國(guó)古典詩(shī)歌中的影響非常深遠(yuǎn)，被后人稱為“詩(shī)圣”，他的詩(shī)被稱為“詩(shī)史”。
杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。
</div>
</div>
復(fù)制代碼16.3 緊鄰風(fēng)格
刪除默認(rèn)背景色、一些邊框和一些圓角，以使手風(fēng)琴與其父容器緊鄰。只需要在容器中添加accordion-flush即可。
<div class="accordion accordion-flush">
復(fù)制代碼如下代碼顯示了兩種風(fēng)格的不同，注意看下面那個(gè)上下左右邊框及四個(gè)角。另外需要注意兩個(gè)手風(fēng)琴組件在同一個(gè)頁(yè)面要定義不同的id，否則容易控制混亂。
<!doctype html>
<html lang="zh-CN">
<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 class="container">
<br><br><br>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
李白
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>李白（701年－762年）</strong> ，字太白，號(hào)青蓮居士，又號(hào)“謫仙人”，是唐代偉大的浪漫主義詩(shī)人，被后人譽(yù)為“詩(shī)仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進(jìn)酒》《梁甫吟》《早發(fā)白帝城》等多首。
</div>
</div>
</div>
<div class="accordion-item">
<h2 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>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>杜甫（712年—770年）</strong>
，字子美，原籍湖北襄陽(yáng)，后徙河南鞏縣。唐代偉大的現(xiàn)實(shí)主義詩(shī)人，
與李白合稱“李杜”。杜甫在中國(guó)古典詩(shī)歌中的影響非常深遠(yuǎn)，被后人稱為“詩(shī)圣”，他的詩(shī)被稱為“詩(shī)史”。
杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
白居易
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>白居易（772年－846年）</strong>
，字樂天，號(hào)香山居士，又號(hào)醉吟先生，祖籍山西太原。
是唐代偉大的現(xiàn)實(shí)主義詩(shī)人，白居易的詩(shī)歌題材廣泛，形式多樣，語(yǔ)言平易通俗，有“詩(shī)魔”和“詩(shī)王”之稱。
有《白氏長(zhǎng)慶集》傳世，代表詩(shī)作有《長(zhǎng)恨歌》、《賣炭翁》、《琵琶行》等。
</div>
</div>
</div>
</div>
<br><br><br>
<div class="accordion accordion-flush" id="accordionExample2">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne2">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne">
李白
</button>
</h2>
<div id="collapseOne2" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample2">
<div class="accordion-body">
<strong>李白（701年－762年）</strong> ，字太白，號(hào)青蓮居士，又號(hào)“謫仙人”，是唐代偉大的浪漫主義詩(shī)人，被后人譽(yù)為“詩(shī)仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進(jìn)酒》《梁甫吟》《早發(fā)白帝城》等多首。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo">
杜甫
</button>
</h2>
<div id="collapseTwo2" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample2">
<div class="accordion-body">
<strong>杜甫（712年—770年）</strong>
，字子美，原籍湖北襄陽(yáng)，后徙河南鞏縣。唐代偉大的現(xiàn)實(shí)主義詩(shī)人，
與李白合稱“李杜”。杜甫在中國(guó)古典詩(shī)歌中的影響非常深遠(yuǎn)，被后人稱為“詩(shī)圣”，他的詩(shī)被稱為“詩(shī)史”。
杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree">
白居易
</button>
</h2>
<div id="collapseThree2" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample2">
<div class="accordion-body">
<strong>白居易（772年－846年）</strong>
，字樂天，號(hào)香山居士，又號(hào)醉吟先生，祖籍山西太原。
是唐代偉大的現(xiàn)實(shí)主義詩(shī)人，白居易的詩(shī)歌題材廣泛，形式多樣，語(yǔ)言平易通俗，有“詩(shī)魔”和“詩(shī)王”之稱。
有《白氏長(zhǎng)慶集》傳世，代表詩(shī)作有《長(zhǎng)恨歌》、《賣炭翁》、《琵琶行》等。
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼16.4 手風(fēng)琴組件使用列表
手風(fēng)琴組件條目?jī)?nèi)容可以是列表，一般常用在后臺(tái)導(dǎo)航面板和前臺(tái)側(cè)邊折疊新聞。你可以使用文本通用類設(shè)置文字對(duì)齊格式?；蛘呤褂胏ss重新定義列表顯示的樣式。
<!doctype html>
<html lang="zh-CN">
<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 class="container">
<br><br><br>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
文章管理
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul>
<li>分類管理</li>
<li>文章列表</li>
<li>添加文章</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 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">
網(wǎng)站管理
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul>
<li>網(wǎng)站設(shè)置</li>
<li>風(fēng)格選擇</li>
<li>插件管理</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" 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>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul>
<li>普通會(huì)員</li>
<li>VIP會(huì)有</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復(fù)制代碼今天的課程就到這里，請(qǐng)關(guān)注我，及時(shí)學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第17節(jié) Bootstrap5警告框Alerts組件用法。