Bootstrap 4 Thu gọn
Cơ bản có thể thu gọn
Collapsibles rất hữu ích khi bạn muốn ẩn và hiển thị một lượng lớn nội dung:
Thí dụ
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Giải thích ví dụ
Lớp .collapsechỉ ra một phần tử có thể thu gọn (một <div> trong ví dụ của chúng ta); đây là nội dung sẽ được hiển thị hoặc ẩn bằng một lần nhấp vào nút.
Để kiểm soát (hiển thị / ẩn) nội dung có thể thu gọn, hãy thêm data-toggle="collapse"thuộc tính vào phần tử <a> hoặc <button>. Sau đó, thêm data-target="#id"thuộc tính để kết nối nút với nội dung có thể thu gọn (<div id = "demo">).
Lưu ý: Đối với các phần tử <a>, bạn có thể sử dụng hrefthuộc tính thay vì data-target
thuộc tính:
Thí dụ
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Theo mặc định, nội dung thu gọn được ẩn. Tuy nhiên, bạn có thể thêm .showlớp để hiển thị nội dung theo mặc định:
Thí dụ
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Accordion
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 data-parentthuộc tính để đảm bảo rằng tất cả các phần tử có thể thu gọn trong 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ị.
Thí 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>
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 pháp và sự kiện thu gọn, hãy truy cập Tài liệu tham khảo thu gọn Bootstrap 4 JS của chúng tôi .