Hướng dẫn bootstrap button active css - nút bootstrap hoạt động css
Ngày đăng:15/10/2022
Trả lời:0
Lượt xem:103
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. 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 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... đã 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
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. 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
Button Example
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. .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ẻ , ,
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
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.
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.
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
.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.