Kỹ thuật Collapse là một tính năng quan trọng trong Bootstrap giúp ẩn/hiện nội dung trên trang web một cách linh hoạt. Bài viết này sẽ giới thiệu sơ lược về cách sử dụng Collapse trong Bootstrap và cách áp dụng nó vào thiết kế các box hiển thị nội dung.
Collapse cơ bản
Collapse hoạt động thông qua thư viện Collapse của Bootstrap, cho phép ẩn/hiện một phần tử nội dung theo các quy tắc nhất định. Khi một phần tử nội dung đang ẩn, Bootstrap sẽ thực hiện hiệu ứng hiện thị bằng cách thay đổi chiều cao của phần tử từ 0 đến chiều cao quy định. Khi hiệu ứng hoàn thành, phần tử sẽ được hiển thị.
Ngược lại, khi một phần tử nội dung đang hiển thị, Bootstrap sẽ thực hiện hiệu ứng ẩn bằng cách thay đổi chiều cao của phần tử về 0. Khi hiệu ứng hoàn thành, phần tử sẽ được ẩn đi.
Để tạo một box mặc định ẩn, ta sử dụng lớp .collapse. Nếu muốn mặc định hiển thị, ta sử dụng lớp .collapse.show.
Phần tử kích hoạt
Để kích hoạt một phần tử nội dung ẩn/hiện, ta cần một phần tử bấm vào. Phần tử này có thể là phần tử <a> hoặc <button>. Ta cần đặt thuộc tính data-toggle="collapse" để Bootstrap nhận biết được. Sau đó, ta lựa chọn phần tử cần ẩn/hiện thông qua thuộc tính data-target="id hoặc lớp cần ẩn/hiện". Nếu sử dụng <a>, có thể sử dụng href="id cần ẩn/hiện".
Dưới đây là một ví dụ đơn giản:
<a href="#boxnoidung" aria-expanded="false" data-toggle="collapse">Bấm vào đây</a>
<button aria-expanded="false" class="btn btn-outline-danger" data-toggle="collapse" data-target="#boxnoidung">Bấm vào đây</button>
<div class="collapse mt-4" id="boxnoidung">
<div class="card card-body bg-warning">
<p class="card-text">Nội dung hiển thị!</p>
</div>
</div>Trong ví dụ trên, chúng ta tạo ra một box với id là “boxnoidung”. Box này sẽ ẩn/hiện khi ta bấm vào link hoặc nút bấm. Do box mặc định là ẩn, nên ở link và nút bấm có thêm thuộc tính aria-expanded="false".
Accordion – ẩn/hiện từng nội dung trong tập hợp
Accordion là một giao diện cho phép ẩn/hiện từng nội dung trong một tập hợp. Để sử dụng Accordion, ta tạo ra các Card và áp dụng Collapse như đã mô tả ở phần trước.
Ví dụ dưới đây sẽ giúp bạn hiểu rõ hơn:
<div class="accordion" id="myaccordion" style="max-width: 320px">
<div class="card">
<div class="card-header btn" data-toggle="collapse" data-target="#noidungcard1" aria-expanded="true" data-parent="#myaccordion">
Header của Card 1
</div>
<div class="card-body collapse show" data-toggle="collapse" aria-expanded="false" id="noidungcard1">
<h5 class="card-title">Tiêu đề Card 1</h5>
<h6 class="card-subtitle mb-1 text-muted">Ví dụ mẫu sử dụng Card</h6>
<p class="card-text">Nội dung bên trong Card 1</p>
</div>
</div>
<div class="card">
<div class="card-header btn" data-toggle="collapse" data-target="#noidungcard2" data-parent="#myaccordion">
Header của Card 2
</div>
<div class="card-body collapse" data-toggle="collapse" aria-expanded="false" id="noidungcard2">
<h5 class="card-title">Tiêu đề Card 2</h5>
<h6 class="card-subtitle mb-1 text-muted">Ví dụ mẫu sử dụng Card</h6>
<p class="card-text">Nội dung văn bản trong .card-body này sử dụng .card-text.</p>
<a href="#" class="btn btn-primary">Nút bấm</a>
</div>
</div>
<div class="card">
<div class="card-header btn" data-toggle="collapse" data-target="#noidungcard3" data-parent="#myaccordion">
Header của Card 3
</div>
<div class="card-body collapse" data-toggle="collapse" aria-expanded="false" id="noidungcard3">
<h5 class="card-title">Tiêu đề Card 3</h5>
<h6 class="card-subtitle mb-1 text-muted">Ví dụ mẫu sử dụng Card 3</h6>
<p class="card-text text-danger">Nội dung văn bản trong .card-body này sử dụng .card-text.</p>
</div>
</div>
</div>Với cấu trúc trên, bạn có thể tạo ra nhiều Card tương tự và gộp chúng vào một phần tử là .accordion. Các Card sẽ ẩn/hiện phần nội dung tương ứng khi ta nhấp vào phần Header. Đảm bảo rằng Card đầu tiên đã được thiết lập mặc định hiển thị nội dung.
Thông qua Collapse và Accordion, bạn có thể tạo ra các hiệu ứng ẩn/hiện nội dung đáng chú ý trên trang web của mình. Hy vọng bài viết này giúp bạn hiểu rõ hơn về việc sử dụng Collapse trong kỹ thuật Bootstrap.
Nguồn: https://tenrenvietnam.com
Danh mục: a1
