Buzz
Trong bài học này, Mytour sẽ chỉ bạn cách tạo Nhóm Nút trong Bootstrap. Ngoài ra, bạn có thể tham khảo thêm một số bài học khác trên Mytour để hiểu rõ hơn về Danh Sách Nhóm trong Bootstrap.
Nhóm Nút trong Bootstrap
1. Tạo Nhóm Nút trong Bootstrap
2. Tạo Nút trong thanh Công Cụ
3. Đặt Chiều Cao cho Nhóm Nút
4. Nhóm Nút Nằm Trong Nhau
5. Sắp Xếp Nhóm Nút Theo Chiều Dọc
6. Cân Chỉnh Nhóm Nút Một Cách Linh Hoạt
1. Tạo Nhóm Nút trong Bootstrap
Ngoài khả năng tạo và chỉnh sửa các nút thông qua việc áp dụng các lớp đã định trước, Bootstrap cung cấp tính năng cho phép người dùng nhóm các nút lại với nhau trên cùng một dòng bằng cách sử dụng Nhóm Nút.
Để tạo Nhóm Nút trong Bootstrap, chỉ cần sử dụng lớp .btn bao quanh các nút và áp dụng lớp .btn-group lên phần tử div chứa chúng.
Ví dụ: dưới đây là minh họa cách tạo Nhóm Nút trong Bootstrap:
Kết quả cuối cùng sẽ có dạng như sau:
2. Tạo các nút trong thanh Toolbar
Bên cạnh đó, bạn có thể gom nhóm các nút lại với nhau để tạo thành các thành phần phức tạp, như nút trong thanh công cụ.
Để thêm các nút vào thanh công cụ, hãy đặt chúng vào một nhóm Nút bằng cách sử dụng thẻ div và áp dụng lớp .btn-toolbar như sau:
Kết quả sẽ hiển thị như sau:
3. Chỉ định chiều cao cho Nhóm Nút
Thay vì thiết lập kích thước cho từng nút trong nhóm, bạn chỉ cần áp dụng lớp kích thước cho Nhóm Nút bằng cách sử dụng .btn-group-lg hoặc .btn-group-sm trực tiếp cho phần tử .btn-group để có nút lớn hơn hoặc nhỏ hơn, như ví dụ dưới đây:
Dưới đây là hình ảnh hiển thị kết quả:
4. Nhóm Nút lồng nhau
Bạn cũng có thể đặt Nhóm Nút vào bên trong một Nhóm Nút khác.
Ví dụ: Trong ví dụ dưới đây, chúng ta mô tả cách đặt Nhóm Nút trong một Nhóm Nút khác để tạo menu thả xuống trong nhóm nút.
Dưới đây là hình ảnh hiển thị kết quả:
5. Sắp xếp Nhóm Nút theo chiều dọc
Nếu bạn muốn, chúng ta có thể sắp xếp Nhóm Nút hiển thị theo chiều dọc thay vì chiều ngang. Để thực hiện điều này, chỉ cần thay thế lớp .btn-group bằng lớp .btn-group-vertical như trong ví dụ dưới đây:
Dưới đây là hình ảnh hiển thị kết quả:
6. Tối ưu hóa Bố cục Nhóm Nút
Cuối cùng, chúng ta có thể mở rộng Nhóm Nút để chiếm đầy chiều rộng trang web bằng cách sử dụng lớp tiện ích .d-flex cho phần tử .btn-group. Trong trường hợp này, các nút sẽ được phân bổ chiều rộng đồng đều.
Dưới đây là hình ảnh hiển thị kết quả:
Trong bài học Bootstrap này, Mytour vừa giới thiệu về cách tối ưu hóa Bố cục Nhóm Nút. Nếu có thắc mắc hoặc câu hỏi, đừng ngần ngại để lại ý kiến trong phần bình luận dưới bài viết.
Trong phần tiếp theo, Mytour sẽ hướng dẫn bạn chi tiết về sử dụng hình ảnh trong Bootstrap.
