Hướng dẫn bootstrap button color

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- Bootstrap Button

Bootstrap đã xây dựng sẵn một vài lớp Css để tạo một Button, với một vài kiểu dáng (style) dành cho các mục đích ngữ cảnh khác nhau. Trong đó lớp chính là .btn, và một vài lớp bổ xung để thiết lập màu sắc, kích thước, trạng thái...

Simple Button

Simple Button

Có một vài lớp Css bổ xung để thiết lập màu sắc cho Button, hoặc làm cho Button hiển thị như một Link. Bạn có thể sử dụng nó trong các ngữ cảnh khác nhau.

• btn-primary
• btn-secondary
• btn-success
• btn-danger
• btn-warning
• btn-info
• btn-light
• btn-dark
• btn-link

button-example.html

   
      
      
      
   
   

      

         Primary
         Secondary
         Success
         Danger
         Warning
         Info
         Light
         Dark
         Link
      

      
      
      
   

 

Các lớp .btn, .btn-* được thiết kế cho các thẻ (tag) , tuy nhiên bạn cũng có thể sử dụng nó cho các thẻ , ,

, , mặc dù có thể nó sẽ hiển thị hơi khác nhau với các trình duyệt khác nhau.

Chú ý: Nếu bạn muốn tạo một Button với các thẻ khác

bạn nên sử dung thêm thuộc tính role="button", thuộc tính (attribute) này là gợi ý có ích đối với các thiết bị như Screen Reader (Thiết bị đọc màn hình dành cho người mù).

Button (A tag)

Button (Button tag)

Button (Span tag)

2- Outline buttons

Trong Bootstrap, mặc định các Button đều có mầu nền, nếu bạn muốn có một Button đơn giản, không mầu nền, hãy sử dụng các lớp .btn-outline-*.

outline buttons

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

3- Kích thước Button

Mặc định các Button trong Bootstrap có một kích thước vừa (Medium). Sử dụng lớp .btn-sm nếu bạn muốn có Button kích thước nhỏ hơn, sử dụng lớp .btn-lg nếu bạn muốn có Button với kích thước lớn.

Small Size .btn-sm
Medium Size .btn-md (Default)
(Default)
Large Size .btn-lg

Lớp .btn-block giúp cho chiều rộng của Button lấp đầy (fill) chiều rộng của phần tử cha.

.btn-block
.btn-block

4- Trạng thái active & disabled

.active

Sử dụng lớp .active để làm cho một Button có trạng thái giống như nó đang được kích hoạt (active). Với Bootstrap một Button ở trạng thái "active" sẽ có mầu đậm hơn so với chính nó khi ở trạng thái thông thường.

Bạn có thể xem hình dưới đây để xem sự khác biệt giữa một Button ở trạng thái kích hoạt và chính nó ở trạng thái thông thường:

.active

.btn-primary .active
.btn-primary


.btn-outline-primary .active
.btn-outline-primary


.btn-succes .active
.btn-succes


.btn-outline-success .active
.btn-outline-success

.disabled

Sử dụng lớp .disabled để vô hiệu hóa một Button, người dùng sẽ không thể tương tác với Button này.

.disabled

.btn-primary .disabled
.btn-primary


.btn-outline-primary .disabled
.btn-outline-primary


.btn-succes .disabled
.btn-succes


.btn-outline-success .disabled
.btn-outline-success