Bootstrap - Nhóm Nút: Hướng Dẫn Dành Cho Người Mới Bắt Đầu

Xin chào các bạn nhà phát triển web! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của Nhóm Nút Bootstrap. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi rất vui mừng được dẫn đường cho 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ừ cơ bản và dần dần tiến lên. Hãy bắt đầu nào!

Nhóm Nút Là Gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu qua về nhóm nút là gì. Hãy tưởng tượng bạn đang tạo một remote điều khiển cho tivi. Thay vì để tất cả các nút rải rác khắp nơi, bạn sẽ nhóm các nút tương tự lại với nhau. Đó chính xác là điều chúng ta làm trong thiết kế web với nhóm nút!

Nhóm nút trong Bootstrap cho phép chúng ta tập hợp các nút liên quan lại với nhau, tạo ra một giao diện tổ chức hơn và hấp dẫn về thị giác. Đó như thể cho các nút của bạn một ngôi nhà ấm cúng nơi chúng có thể sống cùng nhau hòa thuận.

Ví Dụ Cơ Bản

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

<div class="btn-group" role="group" aria-label="Ví dụ cơ bản">
<button type="button" class="btn btn-primary">Trái</button>
<button type="button" class="btn btn-primary">Giữa</button>
<button type="button" class="btn btn-primary">Phải</button>
</div>

Mã này tạo ra một nhóm ba nút có nhãn "Trái", "Giữa" và "Phải". Hãy phân tích nó:

1. Chúng ta bao bọc các nút của mình trong một <div> với lớp btn-group.
2. Thuộc tính role="group" giúp các trình đọc màn hình hiểu rằng các nút này có liên quan.
3. aria-label cung cấp mô tả cho nhóm nút.
4. Mỗi <button> có các lớp btn và btn-primary, cho chúng phong cách nút của Bootstrap.

Khi bạn chạy mã này, bạn sẽ thấy ba nút xanh đậm nằm cùng nhau như đậu trong vỏ.

Mixture of Styles

Bây giờ, hãy làm cho mọi thứ thú vị hơn một chút. Trong thế giới thực, không phải tất cả các nút đều alike. Một số quan trọng hơn những nút khác, và chúng ta có thể thể hiện điều này một cách trực quan:

<div class="btn-group" role="group" aria-label="Mixture of styles">
<button type="button" class="btn btn-danger">Xóa</button>
<button type="button" class="btn btn-warning">Cảnh báo</button>
<button type="button" class="btn btn-success">Chấp nhận</button>
</div>

Trong ví dụ này, chúng ta sử dụng các lớp màu khác nhau của Bootstrap:

• btn-danger cho nút đỏ "Xóa"
• btn-warning cho nút vàng "Cảnh báo"
• btn-success cho nút xanh "Chấp nhận"

Điều này tạo ra một nhóm nút nổi bật, mỗi nút có mã màu tương ứng với chức năng của nó. Nó như một đèn giao thông cho trang web của bạn!

Outlined Styles

Đôi khi, bạn muốn các nút của mình trở nên tinh tế hơn. Đó là khi các phong cách viền được sử dụng:

<div class="btn-group" role="group" aria-label="Outlined styles">
<button type="button" class="btn btn-outline-primary">Chính</button>
<button type="button" class="btn btn-outline-secondary">Phụ</button>
<button type="button" class="btn btn-outline-info">Thông tin</button>
</div>

Bằng cách sử dụng btn-outline-* thay vì btn-*, chúng ta có các nút với viền và văn bản có màu, nhưng nền trong suốt. Chúng hoàn hảo cho khi bạn muốn một touch nhẹ nhàng trong thiết kế của mình.

Checkbox and Radio Button Groups

Bây giờ, hãy làm cho mọi thứ trở nên tương tác hơn. Bootstrap cho phép chúng ta tạo các nhóm nút hoạt động như các nút checkbox hoặc radio:

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Mã này tạo ra một nhóm ba nút hoạt động như các checkbox. Bạn có thể nhấp vào nhiều nút và chúng sẽ ở trong trạng thái "nhấn" cho đến khi bạn nhấp vào chúng lần nữa. Đó như một danh sách công việc ngay trong nhóm nút của bạn!

Button Toolbar

Đôi khi, bạn cần nhóm các nhóm nút lại với nhau. Đó là khi các thanh công cụ nút được sử dụng:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">6</button>
</div>
</div>

Điều này tạo ra một thanh công cụ với ba nhóm nút. Nó như việc tổ chức các dụng cụ nhà bếp - đũa trong một ngăn, thìa trong ngăn khác, và rằng món đồ lạ lùng mà cô chú của bạn tặng bạn trong một vị trí đặc biệt.

Kích Thước

Giống như con người, các nút có nhiều kích thước khác nhau. Bootstrap làm cho việc thay đổi kích thước nhóm nút của bạn trở nên dễ dàng:

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-dark">Trái</button>
<button type="button" class="btn btn-outline-dark">Giữa</button>
<button type="button" class="btn btn-outline-dark">Phải</button>
</div>

Bằng cách thêm btn-group-lg vào container, chúng ta làm cho tất cả các nút lớn hơn. Bạn cũng có thể sử dụng btn-group-sm cho các nút nhỏ hơn. Nó như Goldilocks - bạn có thể tìm thấy kích thước phù hợp!

Nesting

Đôi khi, bạn cần một nhóm nút trong nhóm nút. Bootstrap có bạn covered:

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>

<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Liên kết dropdown</a></li>
<li><a class="dropdown-item" href="#">Liên kết dropdown</a></li>
</ul>
</div>
</div>

Điều này tạo ra một nhóm nút với hai nút thông thường và một nút dropdown. Nó như những con búp bê Nga, nhưng với các nút!

Vertical Variation

Cuối cùng, hãy lật mọi thứ ngang với các nhóm nút dọc:

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Nút</button>
<button type="button" class="btn btn-primary">Nút</button>
<button type="button" class="btn btn-primary">Nút</button>
<button type="button" class="btn btn-primary">Nút</button>
<button type="button" class="btn btn-primary">Nút</button>
</div>

Bằng cách sử dụng btn-group-vertical thay vì btn-group, chúng ta xếp các nút của mình dọc. Nó hoàn hảo cho khi bạn muốn các nút của mình tạo thành một tháp thay vì một dòng!

Kết Luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của Nhóm Nút Bootstrap, từ các ví dụ cơ bản đến các biến thể dọc. Nhớ rằng, thực hành làm nên hoàn hảo, vì vậy đừng ngại thử nghiệm với các ví dụ này. Kết hợp và match các phong cách, kích thước và bố cục khác nhau để tạo ra các nhóm nút phù hợp với dự án của bạn.

Phát triển web là về sáng tạo và giải quyết vấn đề, và nhóm nút chỉ là một trong nhiều công cụ trong bộ công cụ của bạn. Hãy tiếp tục học, tiếp tục viết mã, và quan trọng nhất, hãy vui vẻ! Đến gặp lại lần sau, chúc các bạn viết mã vui vẻ!

Credits: Image by storyset