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