Bootstrap - Collapse: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những thành phần hữu ích nhất của Bootstrap: Collapse. Hãy tưởng tượng nó như một trò ma thuật cho trang web của bạn - bây giờ bạn thấy nó, bây giờ bạn không thấy! Hãy cùng bắt đầu hành trình thú vị này.

Bootstrap - Collapse

Collapse là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu rõCollapse là gì. Hãy tưởng tượng bạn có một bài viết dài trên trang web của bạn, nhưng bạn không muốn làm cho khách truy cập của bạn cảm thấy choáng ngợp với tất cả văn bản cùng một lúc. Đó là lúc Collapse ra tay cứu nguy! Nó cho phép bạn ẩn và hiển thị nội dung chỉ với một cú nhấp chuột, làm cho trang web của bạn trở nên tương tác và thân thiện với người dùng hơn.

Ví dụ cơ bản

Hãy bắt đầu với một ví dụ cơ bản để làm quen.

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Nhấp vào tôi để tiết lộ bí mật!
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Bí mật là... bạn thật tuyệt vời khi học Bootstrap!
</div>
</div>

Hãy phân tích điều này:

Chúng ta có một nút (được thiết kế như một liên kết) để kích hoạt sự gập lại.
Thuộc tính data-bs-toggle="collapse" cho biết rằng yếu tố này kiểm soát một khu vực có thể gập lại.
href="#collapseExample" chỉ đến ID của nội dung có thể gập lại.
Nội dung có thể gập lại được bao bọc trong một thẻ div với lớp collapse và một ID khớp với href trong nút.

Khi bạn nhấp vào nút, ma thuật JavaScript của Bootstrap sẽ xảy ra, và voila! Nội dung của bạn sẽ xuất hiện hoặc biến mất.

Gập lại theo chiều ngang

Bây giờ, hãy làm cho事情 thú vị hơn với một sự gập lại theo chiều ngang. Nó giống như nội dung của bạn đang chơi ẩn và seek, nhưng theo chiều ngang!

<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Chuyển đổi gập lại-width
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
Đây là một nội dung mẫu cho sự gập lại theo chiều ngang. Nó bị ẩn theo mặc định và hiển thị khi được kích hoạt.
</div>
</div>
</div>

Những khác biệt chính ở đây là:

Chúng ta sử dụng lớp collapse-horizontal cùng với collapse.
Chúng ta đã đặt một chiều rộng cụ thể cho nội dung có thể gập lại.
Thẻ div ngoài với min-height đảm bảo rằng các yếu tố khác không nhảy lung tung khi sự gập lại được chuyển đổi.

Nhiều nút và mục tiêu

Bây giờ, hãy tạo nên một bản giao hưởng của các yếu tố gập lại! Chúng ta có thể có nhiều nút kiểm soát các khu vực gập lại khác nhau (hoặc cùng một khu vực).

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Chuyển đổi yếu tố đầu tiên</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Chuyển đổi yếu tố thứ hai</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Chuyển đổi cả hai yếu tố</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Một nội dung mẫu cho yếu tố gập lại đầu tiên của ví dụ gập lại đa.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Một nội dung mẫu cho yếu tố gập lại thứ hai của ví dụ gập lại đa.
</div>
</div>
</div>
</div>

Đây là những gì đang xảy ra:

Chúng ta có ba nút: hai nút kiểm soát các yếu tố gập lại riêng lẻ, và một nút kiểm soát cả hai.
Nút thứ ba sử dụng .multi-collapse để nhắm đến cả hai khu vực gập lại.
Mỗi khu vực gập lại có cả một ID duy nhất và lớp multi-collapse.

Khả năng truy cập

Là những nhà phát triển có trách nhiệm, chúng ta cần đảm bảo rằng các trang web của chúng ta khả năng truy cập cho tất cả mọi người. Thành phần Collapse của Bootstrap đi kèm với các tính năng khả năng truy cập内置, nhưng chúng ta có thể cải thiện chúng:

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#accessibleCollapse" aria-expanded="false" aria-controls="accessibleCollapse">
Nút Gập lại Khả năng Truy cập
</button>

<div class="collapse" id="accessibleCollapse">
<div class="card card-body">
Nội dung này bị ẩn nhưng khả năng truy cập cho người dùng screen reader.
</div>
</div>

Các tính năng khả năng truy cập chính:

Thuộc tính aria-expanded cho biết cho screen reader biết liệu nội dung gập lại có hiển thị hay không.
Thuộc tính aria-controls liên kết nút với nội dung gập lại.

Bảng phương thức

Dưới đây là bảng các phương thức Gập lại mà bạn có thể sử dụng trong JavaScript:

Phương thức	Mô tả
`collapse('toggle')`	Chuyển đổi một yếu tố gập lại
`collapse('show')`	Hiển thị một yếu tố gập lại
`collapse('hide')`	Ẩn một yếu tố gập lại
`collapse('dispose')`	Hủy bỏ sự gập lại của một yếu tố

Để sử dụng các phương thức này, bạn sẽ làm điều gì đó như sau:

var myCollapsible = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapsible, {
toggle: false
})
bsCollapse.show()

Và thế là xong, các bạn! Bạn đã thành thạo nghệ thuật của Bootstrap Collapse. Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngại thử nghiệm với các ví dụ này. Trước khi bạn biết điều đó, bạn sẽ tạo ra các trang web có thể gập lại và 展开 như origami!

Chúc các bạn lập trình vui vẻ, và mong rằng sự gập lại của bạn luôn mượt mà và các nút chuyển đổi luôn nhạy!

Credits: Image by storyset

Hướng Dẫn Trước:

Bootstrap - nút đóng

Hướng Dẫn Tiếp Theo:

Bootstrap - Thả xuống