確保引入Bootstrap的CSS和JS文件，可使用CDN鏈接；2. 創(chuàng)建基本折疊效果時(shí)，使用data-bs-toggle="collapse"和data-bs-target屬性關(guān)聯(lián)觸發(fā)按鈕與目標(biāo)元素，目標(biāo)元素需添加collapse類(lèi)；3. 可用帶href屬性的鏈接替代按鈕實(shí)現(xiàn)相同功能，href值需指向目標(biāo)元素ID；4. 通過(guò)為多個(gè)元素設(shè)置相同類(lèi)名並用data-bs-target指定該類(lèi)，可實(shí)現(xiàn)一鍵同時(shí)控制多個(gè)折疊區(qū)域；5. 製作手風(fēng)琴效果時(shí)，使用accordion容器並為每個(gè)折疊面板設(shè)置data-bs-parent指向容器ID，確保僅一個(gè)面板展開(kāi)，初始展開(kāi)可用show類(lèi)；6. 可通過(guò)JavaScript實(shí)例化Collapse對(duì)象進(jìn)行編程控制，如調(diào)用show()或hide()方法；正確設(shè)置ID和類(lèi)名，避免衝突，動(dòng)畫(huà)基於CSS過(guò)渡實(shí)現(xiàn)，無(wú)需額外JS動(dòng)畫(huà)庫(kù)，適用於響應(yīng)式設(shè)計(jì)。

Using Bootstrap's Collapse feature is a simple way to show and hide content with smooth animations—no JavaScript coding required if you stick to data attributes. It's commonly used for collapsible navigation bars, accordions, and toggleable content sections. Here's how to use it effectively.

1. Include Bootstrap

Before using Collapse, make sure Bootstrap (CSS and JS) is properly included in your project. You can use the CDN:

 <!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JS (includes Popper and Bootstrap JS) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Note: The bundle version includes Popper, which is required for components like tooltips and popovers, though Collapse works without it.

2. Basic Collapse Example

To create a basic toggleable collapse, use data-bs-toggle="collapse" and data-bs-target (or href for links) to target the collapsible element.

 <!-- Button to toggle collapse -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
  Toggle Content
</button>

<!-- Collapsible content -->
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This content will expand and collapse smoothly.
  </div>
</div>

• Clicking the button will show/hide the card.
• The id of the content ( collapseExample ) must match the data-bs-target value.

3. Using Links Instead of Buttons

You can also use an anchor tag:

 <a class="btn btn-info" data-bs-toggle="collapse" href="#collapseExample" role="button">
  Toggle with Link
</a>

This works the same way—just make sure the href points to the correct ID.

4. Multiple Targets

You can toggle multiple collapse elements at once by targeting multiple selectors:

 <button class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
  Toggle All
</button>

<div class="collapse multi-collapse" id="section1">
  <div class="card card-body">Section 1</div>
</div>

<div class="collapse multi-collapse" id="section2">
  <div class="card card-body">Section 2</div>
</div>

Now clicking the button will toggle both sections.

5. Accordion (Multiple Collapsibles)

For an accordion where only one item is open at a time, use Bootstrap's built-in accordion component:

 <div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Section 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
      <div class="accordion-body">
        Content for section 1.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
        Section 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
      <div class="accordion-body">
        Content for section 2.
      </div>
    </div>
  </div>
</div>

Key points:

• Wrap items in a container with class="accordion" and assign it an ID.
• Each collapsible panel uses data-bs-parent="#myAccordion" to ensure only one is open at a time.
• Use show class to make a panel open by default.

6. Optional: Control with JavaScript

While data attributes are enough for most cases, you can also trigger collapse via JavaScript:

 var myCollapse = document.getElementById('collapseExample');
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
});

// Manually show
bsCollapse.show();

// Manually hide
bsCollapse.hide();

Useful for integrating with other logic or events.

Common Tips

• Make sure your target element has the collapse class. Use show to make it visible by default.
• Avoid conflicting IDs—each collapsible element should have a unique ID if not grouped.
• The animation is CSS-based (transition on height ), so it's smooth and doesn't require JS animation libraries.

Basically, Bootstrap Collapse is easy to set up with minimal markup. Use data-bs-toggle and data-bs-target , ensure proper IDs, and you're good to go. Whether it's a simple toggle or a full accordion, it works reliably across devices.

以上是如何使用bootstrap崩潰的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！