Hướng dẫn bootstrap background color

Question

Mục lục

Nội dung chính Show

Mục lục
1- Text Color (Mầu chữ)
2- Background Color (Mầu nền)
3- TODO (Gradien)
Background color
Background gradient

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- Text Color (Mầu chữ)

Text Colors:

text-color-example


.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50

Link Colors:

Tất cả các lớp ở trên (Ngoại trừ .text-white & .text-muted) có thể áp dụng cho các Link để thiết lập mầu chữ cho Link. Bootstrap hỗ trợ các trạng thái hover và focus tương ứng cho mỗi mầu nói trên.

text-color-link-example


Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link
Muted link
White link

2- Background Color (Mầu nền)

Tương tự như mầu chữ (Text color), Bootstrap cũng cung cấp các lớp để thiết lập mầu nền cho phần tử.

bg-color-example


.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

3- TODO (Gradien)

Color

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

 class="text-primary">.text-primary
 class="text-secondary">.text-secondary
 class="text-success">.text-success
 class="text-danger">.text-danger
 class="text-warning">.text-warning
 class="text-info">.text-info
 class="text-light bg-dark">.text-light
 class="text-dark">.text-dark
 class="text-muted">.text-muted
 class="text-white bg-dark">.text-white

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no link styling.

 href="#" class="text-primary">Primary link
 href="#" class="text-secondary">Secondary link
 href="#" class="text-success">Success link
 href="#" class="text-danger">Danger link
 href="#" class="text-warning">Warning link
 href="#" class="text-info">Info link
 href="#" class="text-light bg-dark">Light link
 href="#" class="text-dark">Dark link
 href="#" class="text-muted">Muted link
 href="#" class="text-white bg-dark">White link

Background color

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

 class="p-3 mb-2 bg-primary text-white">.bg-primary


 class="p-3 mb-2 bg-secondary text-white">.bg-secondary
 class="p-3 mb-2 bg-success text-white">.bg-success
 class="p-3 mb-2 bg-danger text-white">.bg-danger
 class="p-3 mb-2 bg-warning text-dark">.bg-warning
 class="p-3 mb-2 bg-info text-white">.bg-info
 class="p-3 mb-2 bg-light text-dark">.bg-light
 class="p-3 mb-2 bg-dark text-white">.bg-dark
 class="p-3 mb-2 bg-white text-dark">.bg-white

Background gradient

When $enable-gradients is set to true, you’ll be able to use .bg-gradient- utility classes. By default, $enable-gradients is disabled and the example below is intentionally broken. This is done for easier customization from the moment you start using Bootstrap. Learn about our Sass options to enable these classes and more.

.bg-gradient-primary

.bg-gradient-secondary

.bg-gradient-success

.bg-gradient-danger

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-dark

 class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary
 class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary
 class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success
 class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger
 class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning
 class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info
 class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light
 class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark

Dealing with specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a

with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

programming bootstrap Bootstrap background color Text color Bootstrap Color Bootstrap Background-color CSS Width Bootstrap Font-size Bootstrap

Hướng dẫn bootstrap background color

Mục lục

1- Text Color (Mầu chữ)

2- Background Color (Mầu nền)

3- TODO (Gradien)

Color

Background color

Background gradient

Dealing with specificity

Conveying meaning to assistive technologies

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội