Bài 16: Button group trong Bootstrap 4

0
334

Xin chào các bạn, hôm nay mình sẽ tiếp tục hướng dẫn các bạn về Button Group trong Bootstrap 4 nhé. Để có thể hiểu rõ bài viết này thì mình cần các bạn phải xem qua lại bài Tạo button trong bootstrap 4 vì đây là bài nâng cao để làm việc với button trong bootstrap 4. Nghe từ group thì các bạn đã phần nào hình dung ra được Button Group bootstrap 4 sẽ mang đến cho chúng ta điều gì?

Button Group

Chúng ta sẽ có một cái bảng sơ lược các thuộc tính mà btn-group hỗ trợ như sau:

ClassMô tả
.btn-groupDùng để khai báo mặc định button group
.btn-toolbarTạo ra button dạng danh sách nằm ngang và dính liền
.btn-group-lg
.btn-group-sm
.btn-group-xs
Tạo ra button group có các kích cỡ lớn nhỏ & vừa
.btn-group-verticalTạo ra button group ở dạng nằm dọc

Tiếp theo chúng ta sẽ tìm hiểu từng class xem nó stylesheet ra sao.

Bao bọc 1 danh sách các Button là class .btn-group để tạo ra một Button Group.

Class .btn-group sẽ làm cho các button nằm sát nhau trên 1 hàng.

Ví dụ:

Lưu ý: Đối với <div class=”btn-group”> bạn nên sử dụng các thuộc tính role, aria-label, mặc dù điều này không bắt buộc nhưng nó là code thân thiện với các thiết bị như Screen Reader.

Kết quả hiển thị như sau:

Button Group dọc

Các bạn sử dụng lớp .btn-group-vertical để tạo một Button Group thẳng đứng.Class này có nhiệm vụ tạo ra hàng loạt button nằm dọc đứng trên cùng một hàng. Khác với class btn-group thì ở vi dụ này chúng ta có thể khai báo class btn-group-vertical làm class cha mà không cần phải lồng class giống như các ví dụ ở trên.

Button Group với Dropdown

Các Dropdown Menu cũng có thể tham gia vào trong một Button Group.

Ví dụ:

Button Group Toolbar

Class này có thuộc tính giống với class btn-groupvì thế mình sẽ không giải thích sâu về nó. Cách khai báo để dùng thì nó là div cha và btn-group là div con bao bọc bên trong là các button.

Ví dụ:

Kết luận

Ở bài tiếp theo chúng ta sẽ tiếp tục tìm hiểu thêm về menu trong bootstrap 4 hỗ trợ. Hy vọng thông qua bài viết này thì các bạn đã có thể tạo ra cho mình các button tùy ý theo ý đồ của các bạn.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây