Button [A tag] Button [Button 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-*. 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. 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 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. .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: 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 để 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