Hướng dẫn và ví dụ tiện ích Bootstrap Color
Xem thêm các chuyên mục:
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
Text Colors:
text-color-example
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
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
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
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
<div class="p-2 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-2 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-2 mb-2 bg-success text-white">.bg-success</div>
<div class="p-2 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-2 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-2 mb-2 bg-info text-white">.bg-info</div>
<div class="p-2 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-2 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-2 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-2 mb-2 bg-transparent text-dark">.bg-transparent</div>
*
