Trong bài học này chúng ta sẽ bắt tay vào tìm hiểu về màu sắc (color) trong Bootstrap 4, cụ thể là cách dùng các lớp bối cảnh của Bootstrap 4 để định nghĩa màu sắc cho văn bản, màn nền trên trang web,. Không lan man nữa chúng ta bắt tay vào làm việc thôi nào.
Màu văn bản (Text color)
Bootstrap 4 có một số lớp ngữ cảnh có thể được sử dụng để cung cấp "ý nghĩa thông qua màu sắc".
Các lớp cho màu văn bản là: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-risk, .text-Secondary, .text-white, .text- dark, .text-body (màu nội dung mặc định / thường là màu đen) và .text-light:
Ví dụ:
<div class = "container"> <h2> Màu theo ngữ cảnh </h2> <p> Sử dụng các lớp ngữ cảnh để cung cấp "ý nghĩa thông qua màu sắc": </p> <p class = "text-muted"> Văn bản này bị tắt tiếng. </p> <p class = "text-primary"> Văn bản này quan trọng. </p> <p class = "text-success"> Văn bản này cho biết thành công. </p> <p class = "text-info"> Văn bản này thể hiện một số thông tin. </p> <p class = "text-warning"> Văn bản này thể hiện một cảnh báo. </p> <p class = "text-risk"> Văn bản này thể hiện sự nguy hiểm. </p> <p class = "text-Secondary"> Văn bản phụ. </p> <p class = "text-dark"> Văn bản này có màu xám đậm. </p> <p class = "text-body"> Màu văn bản mặc định (thường là màu đen). </p> <p class = "text-light"> Văn bản này có màu xám nhạt (trên nền trắng). </p> <p class = "text-white"> Văn bản này có màu trắng (trên nền trắng). </p> </div>
Các lớp văn bản theo ngữ cảnh cũng có thể được sử dụng trên các liên kết, các lớp này sẽ thêm màu tối hơn khi di chuột.
<div class="container"> <h2>Contextual Link Colors</h2> <p>Hover over the links.</p> <a href="#" class="text-muted">Muted link.</a> <a href="#" class="text-primary">Primary link.</a> <a href="#" class="text-success">Success link.</a> <a href="#" class="text-info">Info link.</a> <a href="#" class="text-warning">Warning link.</a> <a href="#" class="text-danger">Danger link.</a> <a href="#" class="text-secondary">Secondary link.</a> <a href="#" class="text-dark">Dark grey link.</a> <a href="#" class="text-body">Body/black link.</a> <a href="#" class="text-light">Light grey link.</a> </div>
Bạn cũng có thể thêm độ mờ 50% cho văn bản đen hoặc trắng với các lớp .text-black-50 hoặc .text-white-50:
<div class="container"> <h2>Màu sắc văn bản theo độ mờ (opacity)</h2> <p>Thêm 50% opacity cho văn trắng hoặc đen với .text-black-50 hay .text-white-50</p> <p class="text-black-50">Văn bản màu đen với 50% opacity trên nền trắng</p> <p class="text-white-50 bg-dark">Văn bản màu trắng với 50% opacity trên nền đen</p> </div>
Màu nền (Background Colors)
Các lớp cho màu nền là: .bg-primary, .bg-Success, .bg-info, .bg-warning, .bg-risk, .bg-Secondary, .bg-dark và .bg-light.
Lưu ý rằng màu nền không đặt màu văn bản, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng chúng cùng với lớp .text- *.
<div class = "container"> <h2> Nền theo ngữ cảnh </h2> <p> Sử dụng các lớp nền theo ngữ cảnh để cung cấp "ý nghĩa thông qua màu sắc". </p> <p> Lưu ý rằng bạn cũng có thể thêm lớp .text- * nếu bạn muốn có màu văn bản khác: </p> <p class = "bg-primary text-white"> Văn bản này quan trọng. </p> <p class = "bg-success text-white"> Văn bản này cho biết thành công. </p> <p class = "bg-info text-white"> Văn bản này thể hiện một số thông tin. </p> <p class = "bg-warning text-white"> Văn bản này thể hiện một cảnh báo. </p> <p class = "bg-danger text-white"> Văn bản này thể hiện sự nguy hiểm. </p> <p class = "bg-secondary text-white"> Màu nền phụ. </p> <p class = "bg-dark text-white"> Màu nền xám đậm. </p> <p class = "bg-light text-dark"> Màu nền xám nhạt. </p> </div>
Kết quả:
Lời kết:
Ngoài các lớp ngữ cảnh để định nghĩa màu chữ, màu nền trong Bootstrap 4 trên chúng ta hoàn toàn có thể tự định nghĩa theo ý thích của mình nếu muốn. Có gì chưa hiểu các bạn hãy comment bên dưới nhé. Chúc các bạn học tốt!
