Jadual Kandungan

1 Contoh mudah

2 Struktur komponen akordion

2.1 Bekas

2.2 Entri akordion

2.3 Tajuk entri

2.4 Kandungan entri

3 Di sebelah gaya

4 Senarai penggunaan komponen akordion

Rumah

hujung hadapan web

Tutorial Bootstrap

Penjelasan mendalam tentang cara menggunakan komponen akordion dalam Bootstrap (contoh)

青燈夜游

Nov 26, 2021 pm 07:51 PM

bootstrap

Bagaimana untuk menambah akordion dalam

Bootstrap? Artikel berikut akan menerangkan cara menggunakan komponen akordion Bootstrap5 melalui contoh kod saya harap ia akan membantu anda!

Penjelasan mendalam tentang cara menggunakan komponen akordion dalam Bootstrap (contoh)

1 Contoh mudah

Komponen Akordion sangat serupa dengan tab, kecuali ia tidak disusun secara mendatar, tetapi secara menegak, digabungkan dengan JavaScript yang disertakan pemalam boleh merealisasikan kandungan menegak terlipat tanpa tulisan tangan js. Akordion biasanya digunakan dalam menu navigasi menegak panel belakang, mesej runtuh bahagian hadapan, dsb. [Cadangan berkaitan: "tutorial 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>  ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進酒》《梁甫吟》《早發(fā)白帝城》等多首。
        </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>
          ，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現(xiàn)實主義詩人，
          與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠，被后人稱為“詩圣”，他的詩被稱為“詩史”。
          杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。
        </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> 
          ，字樂天，號香山居士，又號醉吟先生，祖籍山西太原。
          是唐代偉大的現(xiàn)實主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。
          有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。
        </div>
        </div>
        </div>
        </div>

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

Penjelasan mendalam tentang cara menggunakan komponen akordion dalam Bootstrap (contoh)

2 Struktur komponen akordion

2.1 Bekas

Komponen akordion mesti dimasukkan ke dalam bekas akordion

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

2.2 Entri akordion

Komponen akordion mempunyai banyak entri, seperti contoh di atas, dan yang berikut ialah satu entri. Setiap entri mengandungi tajuk dan kandungan.

<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>

2.3 Tajuk entri

Kod berikut ialah tajuk entri Ia mengandungi tag h2 dan butang, anda hanya perlu mengubah suai teks berikut butang dan nilai data-bs-target Hanya.

 <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 Kandungan entri

Kod berikut ialah kandungan entri Begitu juga, anda hanya memerlukan id paling luar untuk sepadan dengan nilai data-bs-target.

Kandungan entri boleh mengandungi sebarang kod html dan teks, senarai, gambar, dsb.

<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>

3 Di sebelah gaya

Alih keluar warna latar belakang lalai, beberapa jidar dan beberapa sudut bulat untuk membuat akordion betul-betul di sebelah bekas induknya. Hanya tambah akordion-flush ke dalam bekas.

<div class="accordion accordion-flush">

Kod berikut menunjukkan perbezaan antara dua gaya Perhatikan bahagian atas, bawah, kiri, kanan dan empat sudut di bawah. Di samping itu, perlu diingatkan bahawa dua komponen akordion mesti menentukan ID yang berbeza pada halaman yang sama, jika tidak, mudah untuk mengawal kekeliruan.

<!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>  ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進酒》《梁甫吟》《早發(fā)白帝城》等多首。
        </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>
          ，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現(xiàn)實主義詩人，
          與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠，被后人稱為“詩圣”，他的詩被稱為“詩史”。
          杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。
        </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> 
          ，字樂天，號香山居士，又號醉吟先生，祖籍山西太原。
          是唐代偉大的現(xiàn)實主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。
          有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。
        </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>  ，字太白，號青蓮居士，又號“謫仙人”，是唐代偉大的浪漫主義詩人，被后人譽為“詩仙”。代表作有《望廬山瀑布》《行路難》《蜀道難》《將進酒》《梁甫吟》《早發(fā)白帝城》等多首。
        </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>
          ，字子美，原籍湖北襄陽，后徙河南鞏縣。唐代偉大的現(xiàn)實主義詩人，
          與李白合稱“李杜”。杜甫在中國古典詩歌中的影響非常深遠，被后人稱為“詩圣”，他的詩被稱為“詩史”。
          杜甫創(chuàng)作了《登高》《春望》《北征》《三吏》《三別》等名作。
        </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> 
          ，字樂天，號香山居士，又號醉吟先生，祖籍山西太原。
          是唐代偉大的現(xiàn)實主義詩人，白居易的詩歌題材廣泛，形式多樣，語言平易通俗，有“詩魔”和“詩王”之稱。
          有《白氏長慶集》傳世，代表詩作有《長恨歌》、《賣炭翁》、《琵琶行》等。
        </div>
        </div>
        </div>
        </div>
        
        
      </div>
     <script  ></script>
  </body>
</html>

Penjelasan mendalam tentang cara menggunakan komponen akordion dalam Bootstrap (contoh)

4 Senarai penggunaan komponen akordion

Kandungan kemasukan komponen akordion boleh menjadi senarai, yang biasanya digunakan dalam panel navigasi latar belakang dan hadapan- berita lipat tepi hujung. Anda boleh memformat penjajaran teks menggunakan kelas generik teks. Atau gunakan css untuk mentakrifkan semula gaya paparan senarai.

<!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>
        <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">
          網(wǎng)站管理
        </button>
        </h2>
        <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>
        <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>

Penjelasan mendalam tentang cara menggunakan komponen akordion dalam Bootstrap (contoh)

Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap! !

Atas ialah kandungan terperinci Penjelasan mendalam tentang cara menggunakan komponen akordion dalam Bootstrap (contoh). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Panduan Membina Rumput Wonder | Uma Musume Pretty Derby

1 bulan yang lalu By Jack chen

<??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka

1 bulan yang lalu By DDD

Panduan Suhu Rimworld Odyssey untuk Kapal dan Gravtech

3 minggu yang lalu By Jack chen

Mejiro Ryan Build Guide | Uma Musume Pretty Derby

4 minggu yang lalu By Jack chen

Rimworld Odyssey Cara Ikan

3 minggu yang lalu By Jack chen

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Laravel

1601

Tutorial PHP

1502

276

Tunjukkan Lagi

Related knowledge

Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Cara Mengesahkan Tarikh Bootstrap Apr 07, 2025 pm 03:06 PM

Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.

Cara melihat tarikh bootstrap Apr 07, 2025 pm 03:03 PM

Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.

Cara mendapatkan bar carian bootstrap Apr 07, 2025 pm 03:33 PM

Cara menggunakan Bootstrap untuk mendapatkan nilai bar carian: Menentukan ID atau nama bar carian. Gunakan JavaScript untuk mendapatkan elemen DOM. Mendapat nilai elemen. Lakukan tindakan yang diperlukan.

Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

10 alat terkini untuk pemaju web May 07, 2025 pm 04:48 PM

Reka bentuk pembangunan web adalah bidang kerjaya yang menjanjikan. Walau bagaimanapun, industri ini juga menghadapi banyak cabaran. Memandangkan lebih banyak perniagaan dan jenama beralih ke pasaran dalam talian, pemaju web mempunyai peluang untuk menunjukkan kemahiran mereka dan berjaya dalam kerjaya mereka. Walau bagaimanapun, apabila permintaan untuk pembangunan web terus berkembang, bilangan pemaju juga semakin meningkat, mengakibatkan persaingan yang semakin sengit. Tetapi ia menarik bahawa jika anda mempunyai bakat dan kehendak, anda sentiasa dapat mencari cara baru untuk membuat reka bentuk dan idea yang unik. Sebagai pemaju web, anda mungkin perlu terus mencari alat dan sumber baru. Alat dan sumber baru ini bukan sahaja menjadikan pekerjaan anda lebih mudah, tetapi juga meningkatkan kualiti kerja anda, dengan itu membantu anda memenangi lebih banyak perniagaan dan pelanggan. Trend pembangunan web sentiasa berubah.

Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

See all articles

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Penjelasan mendalam tentang cara menggunakan komponen akordion dalam Bootstrap (contoh)

1 Contoh mudah

2 Struktur komponen akordion

2.1 Bekas

2.2 Entri akordion

2.3 Tajuk entri

2.4 Kandungan entri

3 Di sebelah gaya

4 Senarai penggunaan komponen akordion

Alat AI Hot

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

Artikel Panas

Alat panas

Notepad++7.3.1

SublimeText3 versi Cina

Hantar Studio 13.0.1

Dreamweaver CS6

SublimeText3 versi Mac

Topik panas