Bootstrap中手風(fēng)琴組件的使用方法是什么

這篇文章主要介紹“Bootstrap中手風(fēng)琴組件的使用方法是什么”，在日常操作中，相信很多人在Bootstrap中手風(fēng)琴組件的使用方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Bootstrap中手風(fēng)琴組件的使用方法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

目前創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、阿榮網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

1 簡單例子

手風(fēng)琴（Accordion）組件非常類似于選項卡，只不過它不是橫向排列，而是豎向排列，結(jié)合自帶的JavaScript插件無需手寫js就可以實現(xiàn)折疊的垂直內(nèi)容。手風(fēng)琴通常用于后臺面板垂直導(dǎo)航菜單、前臺折疊消息等。

<!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>
        <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>  ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進(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)實主義詩人，
          與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠(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> 
          ，字樂天，號香山居士，又號醉吟先生，祖籍山西太原。
          是唐代偉大的現(xiàn)實主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。
          有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。
        </div>
        </div>
        </div>
        </div>

      </div>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中手風(fēng)琴組件的使用方法是什么

2 手風(fēng)琴組件結(jié)構(gòu)

2.1 容器

手風(fēng)琴組件必須包含在accordion容器中

<div class="accordion">..</div>

2.2 手風(fēng)琴條目

一個手風(fēng)琴組件有許多個條目，如上面的例子，下面就是一個條目。每個條目都包含標(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)實主義詩人，
          與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠(yuǎn)，被后人稱為“詩圣”，他的詩被稱為“詩史”。
          杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。
        </div>
        </div>
        </div>

2.3 條目標(biāo)題

下面代碼就是條目的標(biāo)題，它包含一個h3標(biāo)簽和一個按鈕，事實上你只需要修改以下按鈕中的文字和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>

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)實主義詩人，
          與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠(yuǎn)，被后人稱為“詩圣”，他的詩被稱為“詩史”。
          杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。
        </div>
        </div>

3 緊鄰風(fēng)格

刪除默認(rèn)背景色、一些邊框和一些圓角，以使手風(fēng)琴與其父容器緊鄰。只需要在容器中添加accordion-flush即可。

<div class="accordion accordion-flush">

如下代碼顯示了兩種風(fēng)格的不同，注意看下面那個上下左右邊框及四個角。另外需要注意兩個手風(fēng)琴組件在同一個頁面要定義不同的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>
        <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>  ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進(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)實主義詩人，
          與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠(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> 
          ，字樂天，號香山居士，又號醉吟先生，祖籍山西太原。
          是唐代偉大的現(xiàn)實主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。
          有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。
        </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>  ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進(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)實主義詩人，
          與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠(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> 
          ，字樂天，號香山居士，又號醉吟先生，祖籍山西太原。
          是唐代偉大的現(xiàn)實主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。
          有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。
        </div>
        </div>
        </div>
        </div>
        
        
      </div>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中手風(fēng)琴組件的使用方法是什么

4 手風(fēng)琴組件使用列表

手風(fēng)琴組件條目內(nèi)容可以是列表，一般常用在后臺導(dǎo)航面板和前臺側(cè)邊折疊新聞。你可以使用文本通用類設(shè)置文字對齊格式。或者使用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">
          會員管理
        </button>
        </h3>
        <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中手風(fēng)琴組件的使用方法是什么

！

到此，關(guān)于“Bootstrap中手風(fēng)琴組件的使用方法是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

新聞標(biāo)題：Bootstrap中手風(fēng)琴組件的使用方法是什么
網(wǎng)站URL：http://muchs.cn/article26/jchhjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、微信小程序、響應(yīng)式網(wǎng)站、微信公眾號、網(wǎng)站營銷、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容