Cara Menggunakan Keruntuhan Bootstrap untuk Soalan Lazim

Sertakan bootstrap melalui CDN dengan CSS dan JavaScript untuk fungsi runtuh. 2. Struktur FAQ menggunakan data-bs-toggle = "runtuh" ​​dan ID unik untuk setiap jawapan. 3. Butang gaya dengan CSS tersuai untuk meningkatkan penampilan dan jarak. 4. Secara pilihan menggunakan komponen akordion dengan data-ibu-ibu untuk membenarkan hanya satu item terbuka pada satu masa. Setiap sasaran data-BS mesti sepadan dengan ID Elemen Keruntuhan yang sepadan, memastikan bundle bootstrap dimasukkan, dan menguji responsif, kerana keruntuhan berfungsi dengan lancar merentasi peranti.

Menggunakan ciri keruntuhan Bootstrap untuk bahagian FAQ adalah cara yang bersih dan cekap untuk mengatur kandungan, menjadikannya mudah bagi pengguna untuk mengembangkan dan meruntuhkan jawapan. Berikut adalah cara untuk menetapkan langkah demi langkah menggunakan Bootstrap 5 (berfungsi dengan versi yang paling moden).

1. Sertakan bootstrap dalam projek anda

Pertama, pastikan bootstrap dihubungkan dengan betul dalam HTML anda. Anda boleh menggunakan CDN:

 <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script>

Ini termasuk CSS dan JavaScript (diperlukan untuk fungsi runtuh).

2. Struktur Markup FAQ

Gunakan accordion bootstrap atau komponen collapse biasa. Untuk FAQ yang mudah dan bersih, anda boleh menggunakan item yang dilipat individu tanpa tingkah laku JavaScript akordion penuh (seperti yang lain-closing orang lain).

Berikut adalah contoh asas menggunakan data-bs-toggle="collapse" :

 <div class = "container my-4">
  <h2> Soalan Lazim </h2>

  <!-Soalan 1->
  <div class = "mb-3">
    <butang kelas = "BTN BTN-LINK TEXT-START P-0" TYPE = "BUTTON" DATA-BS-TOGGLE = "CRUTSE" DATA-BS-TARGET = "#Jawapan1">
      Apa itu Bootstrap?
    </butang>
  </div>
  <div class = "collapse" id = "answer1">
    <p> Bootstrap adalah rangka kerja CSS percuma dan sumber terbuka yang diarahkan pada pembangunan web front-end yang responsif, mudah alih. </P>
  </div>

  <!-Soalan 2->
  <div class = "mb-3">
    <Button Class = "BTN BTN-LINK TEXT-START P-0" TYPE = "BUTTON" DATA-BS-TOGGLE = "CRURTSE" DATA-BS-TARGET = "#Answer2">
      Bagaimana keruntuhan berfungsi?
    </butang>
  </div>
  <div class = "collapse" id = "answer2">
    <p> Plugin JavaScript Runtuh membolehkan anda bertukar -tukar penglihatan kandungan. Ia dengan lancar menghidupkan ketinggian dari 0 ke auto. </P>
  </div>

  <!-Soalan 3->
  <div class = "mb-3">
    <Button Class = "BTN BTN-LINK TEXT-START P-0" TYPE = "BUTTON" DATA-BS-TOGGLE = "CRUTSE" DATA-BS-TARGET = "#Jawapan3">
      Bolehkah saya mempunyai banyak jawapan terbuka?
    </butang>
  </div>
  <div class = "collapse" id = "answer3">
    <p> Ya! Tidak seperti akordion, persediaan ini membolehkan beberapa item dibuka sekaligus kerana kami tidak menggunakan kumpulan akordion. </P>
  </div>
</div>

3. Gaya Soalan Lazim untuk ux yang lebih baik

Lalai btn-link mungkin kelihatan digariskan atau terlalu halus. Tambahkan CSS tersuai untuk meningkatkan penampilan:

 <yaya>
  .btn-link {
    Teks-penyerapan: Tiada;
    Font-Weight: 500;
    Warna: #212529;
  }
  .btn-link: hover {
    Warna: #007BFF;
    Teks-penyerapan: Tiada;
  }
  .Collapse .Collapse {
    margin-top: 1rem;
  }
</gaya>

Ini menghilangkan garis bawah, meningkatkan keadaan hover, dan menambah jarak.

4. Pilihan: Gunakan tingkah laku akordion (satu terbuka pada satu masa)

Jika anda lebih suka hanya satu FAQ item yang dibuka pada satu masa, gunakan komponen accordion Bootstrap sebaliknya. Balut item dalam ibu bapa dengan data-bs-parent :

 <div class = "accordion" id = "faqaccordion">

  <div class = "accordion-item">
    <h3 class = "accordion-header">
      <Button class = "Accordion-button runtuh" ​​Type = "Button" Data-bs-toggle = "runtuh" ​​data-bs-target = "#q1">
        Apa itu Bootstrap?
      </butang>
    </h3>
    <div id = "q1" class = "accordion-collapse collapse" data-bs-parent = "#faqaccordion">
      <div class = "accordion-body">
        Bootstrap adalah kerangka CSS percuma dan sumber terbuka ...
      </div>
    </div>
  </div>

  <!-Ulangi untuk item lain->

</div>

Ini secara automatik menutup item lain apabila dibuka.

Perkara utama untuk diingat

• Pastikan setiap data-bs-target sepadan dengan id elemen keruntuhan.
• Gunakan kelas collapsed pada butang apabila kandungan mula tersembunyi (Bootstrap menggunakan ini untuk gaya).
• Sertakan bundle bootstrap penuh (bukan hanya CSS) - keruntuhan memerlukan JavaScript.
• Ujian Responsiveness - Keruntuhan berfungsi hebat di mudah alih.

Pada asasnya, keruntuhan Bootstrap menjadikan bahagian FAQ mudah dan interaktif dengan kod minimum. Sama ada anda menggunakan keruntuhan mandiri atau akordion, ia fleksibel dan kelihatan profesional dari kotak.

Atas ialah kandungan terperinci Cara Menggunakan Keruntuhan Bootstrap untuk Soalan Lazim. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!