Bootstrap 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 .inlớp để hiển thị nội dung theo mặc định:
Thí dụ
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Bảng điều khiển có thể thu gọn
Ví dụ sau đây cho thấy một bảng điều khiển có thể thu gọn:
Thí dụ
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Nhóm danh sách có thể thu gọn
- One
- Two
- Three
Sau đây là bảng điều khiển có thể thu gọn với một nhóm danh sách bên trong:
Thí dụ
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</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 bảng điều khiển.
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 class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
Hoàn thành Tham chiếu Thu gọn Bootstrap
Để 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 JS Bootstrap của chúng tôi .