Button group trong Bootstrap 4

• 26-06-2020 11:05:34
• by: baobinhnet

Chào các bạn, hôm nay chúng ta cùng đến với bài học mới, trong bài học này, chúng ta sẽ học liên quan đến button group, để có thể hiểu được phần này, bạn nền tìm hiểu thêm về button trong bootstrap 4 mà mình giới thiệu trong bài học trước. Sau đây, chúng ta sẽ đến với bài học ngày hôm nay.

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:

Class	Mô tả
.btn-group	Dùng để khai báo mặc định button group
.btn-toolbar	Tạ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-vertical	Tạ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.




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.
 

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.

 

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

Hi vọng sau bài này, các bạn có thể sử dụng button một cách linh hoạt hơn và ứng dụng được vào các dự án của mình tốt nhất. Cảm ơn bạn đã theo dõi. Hẹn gặp lại các bạn trong bài học tiếp theo.

---

• Posted by baobinhnet
• 2020-06-26 10:49:40