首頁 >web前端 >Bootstrap教程 >深入解說Bootstrap中手風琴組件的使用方法（實例）
深入解說Bootstrap中手風琴組件的使用方法（實例）
- 青灯夜游轉載
- 2021-11-26 19:51:053365瀏覽
Bootstrap中怎麼加入手風琴？以下這篇文章透過程式碼實例來跟大家講解Bootstrap5手風琴組件的用法，希望對大家有幫助！
1 簡單範例
手風琴（Accordion）元件非常類似於選項卡，只不過它不是橫向排列，而是垂直排列，結合自附的JavaScript插件無需手寫js即可實現折疊的垂直內容。手風琴通常用於後檯面板垂直導航選單、前台折疊訊息等。 【相關推薦：《bootstrap教學》】
<!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>滑动窗口</title>
</head>
<body>
<div>
<br><br><br>
<div id="accordionExample">
<div>
<h2 id="headingOne">
<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>
<strong>李白（701年－762年）</strong> ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。
</div>
</div>
</div>
<div>
<h2 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>
<strong>杜甫（712年—770年）</strong>
，字子美，原籍湖北襄阳，后徙河南巩县。唐代伟大的现实主义诗人，
与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。
杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。
</div>
</div>
</div>
<div>
<h2 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>
<strong>白居易（772年－846年）</strong>
，字乐天，号香山居士，又号醉吟先生，祖籍山西太原。
是唐代伟大的现实主义诗人，白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。
有《白氏长庆集》传世，代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
#2 手風琴組件結構
2.1 容器
#手風琴組件必須包含在accordion容器中
<div class="accordion">..</div>
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>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>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>3 緊鄰風格
刪除預設背景色、一些邊框和一些圓角，以使手風琴與其父容器緊鄰。只需要在容器中加入accordion-flush即可。
<div class="accordion accordion-flush">
如下程式碼顯示了兩種風格的不同，注意看下面那個上下左右邊框及四個角落。另外要注意兩個手風琴組件在同一個頁面要定義不同的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>滑动窗口</title>
</head>
<body>
<div>
<br><br><br>
<div id="accordionExample">
<div>
<h2 id="headingOne">
<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>
<strong>李白（701年－762年）</strong> ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。
</div>
</div>
</div>
<div>
<h2 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>
<strong>杜甫（712年—770年）</strong>
，字子美，原籍湖北襄阳，后徙河南巩县。唐代伟大的现实主义诗人，
与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。
杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。
</div>
</div>
</div>
<div>
<h2 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>
<strong>白居易（772年－846年）</strong>
，字乐天，号香山居士，又号醉吟先生，祖籍山西太原。
是唐代伟大的现实主义诗人，白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。
有《白氏长庆集》传世，代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。
</div>
</div>
</div>
</div>
<br><br><br>
<div class="accordion accordion-flush" id="accordionExample2">
<div>
<h2 id="headingOne2">
<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>
<strong>李白（701年－762年）</strong> ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。
</div>
</div>
</div>
<div>
<h2 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>
<strong>杜甫（712年—770年）</strong>
，字子美，原籍湖北襄阳，后徙河南巩县。唐代伟大的现实主义诗人，
与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。
杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。
</div>
</div>
</div>
<div>
<h2 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>
<strong>白居易（772年－846年）</strong>
，字乐天，号香山居士，又号醉吟先生，祖籍山西太原。
是唐代伟大的现实主义诗人，白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。
有《白氏长庆集》传世，代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
4 手風琴組件使用列表
手風琴組件條目內容可以是列表，一般常用在後台導航面板和前台側邊折疊新聞。你可以使用文字通用類別來設定文字對齊格式。或使用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>手风琴组件</title>
</head>
<body>
<div>
<br><br><br>
<div id="accordionExample">
<div>
<h2 id="headingOne">
<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>
<ul>
<li>分类管理</li>
<li>文章列表</li>
<li>添加文章</li>
</ul>
</div>
</div>
</div>
<div>
<h2 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>
<ul>
<li>网站设置</li>
<li>风格选择</li>
<li>插件管理</li>
</ul>
</div>
</div>
</div>
<div>
<h2 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>
<ul>
<li>普通会员</li>
<li>VIP会有</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
更多關於bootstrap的相關知識，可在：bootstrap基礎教學！ ！
以上是深入解說Bootstrap中手風琴組件的使用方法（實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除