ViệtChào bạn! Button group trong Bootstrap 5 là một tính năng hữu ích giúp bạn nhóm nhiều nút (button) lại với nhau để tạo thành một nhóm thao tác liền mạch và chuyên nghiệp. Chúng thường được sử dụng trong các giao diện quản trị, điều hướng hoặc các thanh công cụ giúp tối ưu trải nghiệm người dùng.
Bài viết này CodeTutHub sẽ hướng dẫn bạn cách sử dụng button group trong Bootstrap 5, từ cơ bản đến nâng cao, giúp bạn dễ dàng áp dụng vào dự án của mình.
1. Button group cơ bản
Bootstrap 5 cung cấp class btn-group giúp nhóm các nút lại với nhau một cách dễ dàng. Các nút trong nhóm vẫn giữ được kiểu dáng của Bootstrap nhưng hiển thị như một khối thống nhất.
Ví dụ, nhóm ba nút với màu btn-primary như sau:
<div class="btn-group" role="group" aria-label="Basic button group">
<button type="button" class="btn btn-primary">Nút 1</button>
<button type="button" class="btn btn-primary">Nút 2</button>
<button type="button" class="btn btn-primary">Nút 3</button>
</div>2. Button group theo chiều dọc
Mặc định, button group sắp xếp theo hàng ngang. Nếu bạn muốn hiển thị các nút theo chiều dọc, sử dụng class btn-group-vertical.
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-secondary">Nút 1</button>
<button type="button" class="btn btn-secondary">Nút 2</button>
<button type="button" class="btn btn-secondary">Nút 3</button>
</div>3. Button group có dropdown
Bạn có thể kết hợp button group với dropdown để tạo nhóm nút có nhiều tùy chọn hơn. Điều này rất hữu ích khi bạn muốn cung cấp các hành động phụ mà không làm rối giao diện.
<div class="btn-group" role="group">
<button type="button" class="btn btn-info">Hành động</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
<li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
<li><a class="dropdown-item" href="#">Tùy chọn 3</a></li>
</ul>
</div>4. Button group với Radio & Checkbox
4.1. Button group với Radio button
<div class="btn-group" role="group" aria-label="Radio button group">
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="option1">Tùy chọn 1</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-outline-primary" for="option2">Tùy chọn 2</label>
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
<label class="btn btn-outline-primary" for="option3">Tùy chọn 3</label>
</div>4.2. Button group với Checkbox
<div class="btn-group" role="group" aria-label="Checkbox button group">
<input type="checkbox" class="btn-check" id="check1" autocomplete="off">
<label class="btn btn-outline-success" for="check1">Chọn 1</label>
<input type="checkbox" class="btn-check" id="check2" autocomplete="off">
<label class="btn btn-outline-success" for="check2">Chọn 2</label>
<input type="checkbox" class="btn-check" id="check3" autocomplete="off">
<label class="btn btn-outline-success" for="check3">Chọn 3</label>
</div>5. Kích thước của Button group
Bootstrap 5 cho phép thay đổi kích thước của button group bằng cách sử dụng các lớp btn-group-lg, btn-group-sm để phù hợp với bố cục trang web.
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-dark">Nút Lớn</button>
<button type="button" class="btn btn-dark">Nút Lớn</button>
</div>
<div class="btn-group btn-group-sm mt-3" role="group">
<button type="button" class="btn btn-warning">Nút Nhỏ</button>
<button type="button" class="btn btn-warning">Nút Nhỏ</button>
</div>Kết luận
Button group trong Bootstrap 5 là một công cụ mạnh mẽ giúp bạn nhóm các nút lại với nhau một cách trực quan và hiệu quả. Bằng cách áp dụng các tùy chỉnh như button group dọc, kết hợp dropdown, sử dụng radio và checkbox, bạn có thể linh hoạt xây dựng giao diện web tối ưu cho trải nghiệm người dùng.
Nếu bạn có bất kỳ thắc mắc hoặc ý kiến đóng góp nào, hãy để lại bình luận bên dưới để cùng trao đổi. Chúc bạn thành công trong các dự án phát triển web của mình!
