Thu gọn Bootstrap 4
Có thể thu gọn cơ bản
Có thể thu gọn rất hữu ích khi bạn muốn ẩn và hiển thị lượng lớn nội dung:
Ví dụ
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Hãy tự mình thử »Ví dụ giải thích
Lớp .collapse
biểu thị phần tử có thể thu gọn (trong ví dụ của chúng tôi là <div>); đây là nội dung sẽ được hiển thị hoặc ẩn chỉ bằng một cú nhấp chuột.
Để kiểm soát (hiển thị/ẩn) nội dung có thể thu gọn, hãy thêm thuộc tính data-toggle="collapse"
vào phần tử <a> hoặc <button>. Sau đó thêm thuộc tính data-target="#id"
để kết nối nút với nội dung có thể thu gọn (<div id="demo">).
Lưu ý: Đối với phần tử <a>, bạn có thể sử dụng thuộc tính href
thay vì thuộc tính data-target
:
Ví dụ
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Hãy tự mình thử » Theo mặc định, nội dung có thể thu gọn sẽ bị ẩn. Tuy nhiên, bạn có thể thêm lớp .show
để hiển thị nội dung theo mặc định:
Đàn xếp
Ví dụ sau đây cho thấy một đàn accordion đơn giản bằng cách mở rộng thành phần thẻ.
Lưu ý: Sử dụng thuộc tính data-parent
để đảm bảo rằng tất cả các phần tử có thể thu gọn bên dưới phần tử gốc được chỉ định sẽ bị đóng khi một trong các mục có thể thu gọn được hiển thị.
Ví dụ
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
Hãy tự mình thử »Hoàn thành tham chiếu thu gọn Bootstrap 4
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện thu gọn, hãy truy cập Tài liệu tham khảo thu gọn JS Bootstrap 4 của chúng tôi.