Thu gọn Bootstrap
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 .in để hiển thị nội dung theo mặc định:
Bảng điều khiển có thể gập lại
Ví dụ sau đây cho thấy một bảng có thể thu gọn:
Ví 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> Hãy tự mình thử »Nhóm danh sách có thể thu gọn
- Một
- Hai
- Ba
Phần sau đây hiển thị một bảng điều khiển có thể thu gọn với một nhóm danh sách bên trong:
Ví 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> Hãy tự mình thử »Đàn xếp
Ví dụ sau đây cho thấy một chiếc đà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 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 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> Hãy tự mình thử »Tham khảo thu gọn Bootstrap hoàn chỉnh
Để 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 Bootstrap JS của chúng tôi.
