Bootstrap 5 Đóng gọn

Cuộn lại cơ bản

Khi bạn muốn ẩn và hiển thị một lượng lớn nội dung, thành phần cuộn lại rất hữu ích:

Mô hình

<button data-bs-toggle="collapse" data-bs-target="#demo">Cherry Blossom</button>
<div id="demo" class="collapse">
  <p>Ngày đẹp tìm hoa ở bờ sông Xích Thủy, cảnh vật không biên giới trở nên mới.</p>
  <p>Ngẫu nhiên nhận ra mặt của gió mùa xuân, ngàn đỏ trăm hồng luôn là mùa xuân.</p>
</div>

Thử ngay

Giải thích ví dụ

.collapse Lớp chỉ dẫn phần tử có thể cuộn lại (trong ví dụ của chúng ta là <div>). Bằng cách nhấp vào nút, bạn có thể hiển thị hoặc ẩn nội dung.

Để kiểm soát (hiển thị/ẩn) nội dung có thể cuộn lại, hãy thêm data-bs-toggle="collapse" Thuộc tính thêm vào phần tử <a> hoặc <button>. Sau đó thêm data-bs-target="#id" Thuộc tính để kết nối nút và nội dung có thể cuộn lại (<div id="demo">).

Chú thích:Đối với phần tử <a>, bạn có thể sử dụng href Thuộc tính thay thế data-bs-target Thuộc tính:

Mô hình

<a href="#demo" data-bs-toggle="collapse">Cherry Blossom</a>
<div id="demo" class="collapse">
  <p>Ngày đẹp tìm hoa ở bờ sông Xích Thủy, cảnh vật không biên giới trở nên mới.</p>
  <p>Ngẫu nhiên nhận ra mặt của gió mùa xuân, ngàn đỏ trăm hồng luôn là mùa xuân.</p>
</div>

Thử ngay

Mặc định, nội dung có thể cuộn lại là ẩn. Nhưng, bạn có thể thêm .show Lớp để hiển thị mặc định nội dung:

Mô hình

<div id="demo" class="collapse show">
  <p>Ngày đẹp tìm hoa ở bờ sông Xích Thủy, cảnh vật không biên giới trở nên mới.</p>
  <p>Ngẫu nhiên nhận ra mặt của gió mùa xuân, ngàn đỏ trăm hồng luôn là mùa xuân.</p>
</div>

Thử ngay

Accordion (手风琴)

Dưới đây là ví dụ mở rộng thành phần card để hiển thị mộtaccordian đơn giản.

Chú thích:Sử dụng data-bs-parent Thuộc tính đảm bảo khi hiển thị một mục cuộn nào đó, tất cả các mục cuộn trong mục cha sẽ được đóng.

Mô hình

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        Mục tin có thể cuộn #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Mùa xuân</h3>
        <p>Ngày đẹp tìm hoa ở bờ sông Xích Thủy, cảnh vật không biên giới trở nên mới.</p>
        <p>Ngẫu nhiên nhận ra mặt của gió mùa xuân, ngàn đỏ trăm hồng luôn là mùa xuân.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        Mục tin có thể cuộn #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Thơ ngắn mùa hè</h3>
        <p>Màu hồng và tím đã trở thành bụi, tiếng c crowing báo hiệu mùa hè mới.</p>
        <p>Đi giữa đường mận và đậu đen không dừng lại, mới biết mình là người của thời bình.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        Mục tin có thể cuộn #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Đi lên núi</h3>
        <p>Đi thẳng lên dốc đá lạnh, nơi có nhà trong đám mây.</p>
        <p>Ngồi dừng xe yêu phong cảnh hoàng hôn, lá phong đỏ hơn hoa tháng hai.</p>
      </div>
    </div>
  </div>
</div>

Thử ngay