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

Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của Bootstrap Accordions. Là một giáo viên máy tính gần gũi, tôi rất vui mừng được hướng dẫn các bạn trong hành trình này. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ đầu và dần dần xây dựng!

Bootstrap - Accordion

Bootstrap Accordion là gì?

Trước khi chúng ta đi vào chi tiết, hãy nói về accordion là gì trong thiết kế web. Hãy tưởng tượng một cây organ musical - nó mở rộng và co lại, tiết lộ các phần khác nhau. Đó chính xác là điều mà Bootstrap Accordion làm trên một trang web! Đây là một cách tuyệt vời để tổ chức nội dung, cho phép người dùng hiển thị và ẩn các phần khi cần.

Cách hoạt động

Bootstrap Accordion được xây dựng bằng cách kết hợp HTML, CSS và JavaScript (đừng lo lắng, Bootstrap xử lý phần lớn JavaScript cho chúng ta!). Nó bao gồm một loạt các phần có thể gập lại hoặc mở ra bằng cách nhấp vào tiêu đề của chúng.

Dưới đây là một số thành phần chính:

Bộ chứa ngoài (thường là một <div> với lớp accordion)
Các mục accordion cá nhân (mỗi mục trong một <div> với lớp accordion-item)
Tiêu đề cho mỗi mục (thường là các phần tử <h2> với lớp accordion-header)
Các nút trong tiêu đề để kích hoạt mở rộng/gập lại
Các bảng nội dung hiển thị/ẩn khi nhấp (trong các phần tử <div> với lớp accordion-collapse)

Bây giờ, hãy cùng xem điều này trong hành động!

Ví dụ cơ bản

Dưới đây là một ví dụ đơn giản về Bootstrap Accordion:

<div class="accordion" id="basicAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Mục Accordion #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#basicAccordion">
<div class="accordion-body">
Đây là nội dung của mục accordion đầu tiên.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Mục Accordion #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#basicAccordion">
<div class="accordion-body">
Đây là nội dung của mục accordion thứ hai.
</div>
</div>
</div>
</div>

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

Chúng ta bắt đầu với một <div> có lớp accordion. Đây là bộ chứa chính.
Trong đó, chúng ta có các accordion-item div cho mỗi phần có thể gập lại.
Mỗi mục có một tiêu đề (accordion-header) với một nút điều khiển hành động gập lại/mở rộng.
Nội dung được đặt trong một <div> với các lớp accordion-collapse và collapse.
Các thuộc tính data-bs-toggle="collapse" và data-bs-target="#collapseOne" trên nút liên kết nó với bảng nội dung div.

Mẹo nhỏ: Lưu ý cách mục đầu tiên có class="accordion-collapse collapse show" và aria-expanded="true"? Điều này có nghĩa là nó sẽ mở bằng mặc định khi trang tải.

Accordion không viền

Muốn có một giao diện hiện đại hơn mà không có viền? Bootstrap có thể giúp bạn với accordion flush:

<div class="accordion accordion-flush" id="flushAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Mục Accordion Flush #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#flushAccordion">
<div class="accordion-body">Đây là mục đầu tiên của accordion flush.</div>
</div>
</div>
<!-- Thêm các mục khác khi cần -->
</div>

Sự khác biệt chính ở đây là việc thêm lớp accordion-flush vào bộ chứa chính. Điều này loại bỏ màu nền mặc định và một số viền, mang lại giao diện sạch sẽ hơn.

Accordion luôn mở

Mặc định, các accordion của Bootstrap sẽ đóng các mục khác khi một mục mới được mở. Nhưng nếu bạn muốn giữ cho nhiều mục mở cùng lúc? Dưới đây là cách:

<div class="accordion" id="alwaysOpenAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingAlwaysOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAlwaysOne" aria-expanded="true" aria-controls="collapseAlwaysOne">
Mục Luôn Mở #1
</button>
</h2>
<div id="collapseAlwaysOne" class="accordion-collapse collapse show" aria-labelledby="headingAlwaysOne">
<div class="accordion-body">Mục này có thể mở khi các mục khác được mở.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingAlwaysTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAlwaysTwo" aria-expanded="false" aria-controls="collapseAlwaysTwo">
Mục Luôn Mở #2
</button>
</h2>
<div id="collapseAlwaysTwo" class="accordion-collapse collapse" aria-labelledby="headingAlwaysTwo">
<div class="accordion-body">Mục này cũng có thể mở độc lập.</div>
</div>
</div>
</div>

Mẹo nhỏ ở đây? Chúng ta đã loại bỏ thuộc tính data-bs-parent khỏi các bảng nội dung div. Điều này cho biết Bootstrap không tự động đóng các mục khác khi một mục được mở.

Khả năng truy cập

Khả năng truy cập rất quan trọng trong phát triển web. Các accordion của Bootstrap có các tính năng khả năng truy cập tích hợp sẵn, nhưng điều quan trọng là phải sử dụng chúng đúng cách:

Sử dụng các mức tiêu đề chính xác (<h2>, <h3>, v.v.) cho tiêu đề accordion.
Bao gồm các thuộc tính aria-expanded trên các nút (đặt thành "true" khi mở, "false" khi đóng).
Sử dụng aria-controls trên các nút để liên kết chúng với các bảng nội dung div.
Thêm aria-labelledby vào các bảng nội dung, tham chiếu đến các tiêu đề tương ứng.

Dưới đây là bảng tóm tắt các thuộc tính khả năng truy cập chính:

Thuộc tính	Địa điểm	Mục đích
aria-expanded	Nút	Chỉ ra nếu phần được mở
aria-controls	Nút	Liên kết nút với nội dung
aria-labelledby	Bảng nội dung	Liên kết nội dung với tiêu đề

Nhớ rằng, những thuộc tính này không chỉ để trang trí - các công cụ trợ giúp và các công nghệ khác dựa vào chúng để điều hướng accordion của bạn một cách chính xác.

Kết luận

Và thế là bạn đã bắt đầu hành trình vào thế giới của Bootstrap Accordions. Từ cấu trúc cơ bản đến các yếu tố khả năng truy cập, bạn现在已经 có công cụ để tạo nội dung tổ chức, tương tác trên trang web của mình.

Nhớ rằng, thực hành làm cho hoàn hảo. Hãy thử tạo các accordion của riêng bạn, kết hợp các phong cách khác nhau, và quan trọng nhất, hãy vui vẻ với nó! Ai biết, bạn có thể tìm thấy một giai điệu mới trong phát triển web. (Xin lỗi, tôi không thể résist một chút hài hước về accordion!)

Chúc mừng coding, và cho đến lần gặp lại, hãy tiếp tục mở rộng kiến thức của bạn - giống như một accordion!

Credits: Image by storyset

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

Bootstrap - Hình ảnh

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

Bootstrap - Thông báo