16.1 簡單例子
手風琴（Accordion）組件非常類似于選項卡，只不過它不是橫向排列，而是豎向排列，結合自帶的JavaScript插件無需手寫js就可以實現折疊的垂直內容。手風琴通常用于后臺面板垂直導航菜單、前臺折疊消息等。 手風琴組建的效果和第9節 Bootstrap對網頁排版做了哪些顛覆設計中的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>滑動窗口</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> ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進酒》《梁甫吟》《早發白帝城》等多首。
</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>
，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現實主義詩人，
與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠，被后人稱為“詩圣”，他的詩被稱為“詩史”。
杜甫創作了《登高》《春望》《北征》《三吏》《三別》等名作。
</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>
，字樂天，號香山居士，又號醉吟先生，祖籍山西太原。
是唐代偉大的現實主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。
有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼16.2 手風琴組件結構
16.2.1 容器
手風琴組件必須包含在accordion容器中
<div class="accordion">..</div>
復制代碼16.2.2 手風琴條目
一個手風琴組件有許多個條目，如上面的例子，下面就是一個條目。每個條目都包含標題和內容。
<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>
，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現實主義詩人，
與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠，被后人稱為“詩圣”，他的詩被稱為“詩史”。
杜甫創作了《登高》《春望》《北征》《三吏》《三別》等名作。
</div>
</div>
</div>
復制代碼16.2.3 條目標題
下面代碼就是條目的標題，它包含一個h2標簽和一個按鈕，事實上你只需要修改以下按鈕中的文字和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>
復制代碼16.2.4 條目內容
如下代碼就是條目的內容，同樣的你只需要最外層id和data-bs-target的值相對應即可。
條目內容可以放任何html代碼和文字、列表、圖片等。
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
杜甫（712年—770年
，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現實主義詩人，
與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠，被后人稱為“詩圣”，他的詩被稱為“詩史”。
杜甫創作了《登高》《春望》《北征》《三吏》《三別》等名作。
</div>
</div>
復制代碼16.3 緊鄰風格
刪除默認背景色、一些邊框和一些圓角，以使手風琴與其父容器緊鄰。只需要在容器中添加accordion-flush即可。
<div class="accordion accordion-flush">
復制代碼如下代碼顯示了兩種風格的不同，注意看下面那個上下左右邊框及四個角。另外需要注意兩個手風琴組件在同一個頁面要定義不同的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>滑動窗口</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> ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進酒》《梁甫吟》《早發白帝城》等多首。
</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>
，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現實主義詩人，
與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠，被后人稱為“詩圣”，他的詩被稱為“詩史”。
杜甫創作了《登高》《春望》《北征》《三吏》《三別》等名作。
</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>
，字樂天，號香山居士，又號醉吟先生，祖籍山西太原。
是唐代偉大的現實主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。
有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。
</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> ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進酒》《梁甫吟》《早發白帝城》等多首。
</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>
，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現實主義詩人，
與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠，被后人稱為“詩圣”，他的詩被稱為“詩史”。
杜甫創作了《登高》《春望》《北征》《三吏》《三別》等名作。
</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>
，字樂天，號香山居士，又號醉吟先生，祖籍山西太原。
是唐代偉大的現實主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。
有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼16.4 手風琴組件使用列表
手風琴組件條目內容可以是列表，一般常用在后臺導航面板和前臺側邊折疊新聞。你可以使用文本通用類設置文字對齊格式。或者使用css重新定義列表顯示的樣式。
<!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>手風琴組件</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">
網站管理
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" 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="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">
<ul>
<li>普通會員</li>
<li>VIP會有</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
復制代碼今天的課程就到這里，請關注我，及時學習 俺老劉原創的《Bootstrap5零基礎到精通》第17節 Bootstrap5警告框Alerts組件用法。