[Bootstrap 4] Phần 5: Màu sắc trong Bootstrap 4

Màu sắc văn bản

Bootstrap 4 có 4 lớp bối cảnh có thể dùng để định nghĩa “ý nghĩa bằng màu sắc”, đó là: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (mặc định là màu văn bản chính của trang web, thường màu đen) và .text-light. Sau đây, bạn có thể xem ví dụ để nhận biết các màu sắc của các lớp.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Các màu sắc bối cảnh --- dammio.com</h2>
  <p>Sử dụng các lớp bối cảnh để cung cấp "ý nghĩa thông qua màu sắc.</p>
  <p class="text-muted">Văn bản có nghĩa là câm lặng</p>
  <p class="text-primary">Văn bản có nghĩa là quan trọng.</p>
  <p class="text-success">Văn bản có nghĩa là thành công.</p>
  <p class="text-info">Văn bản thể hiện thông tin.</p>
  <p class="text-warning">Văn bản thể hiện cảnh báo.</p>
  <p class="text-danger">Văn bản thể hiện nguy hiểm.</p>
  <p class="text-secondary">Văn bản phụ.</p>
  <p class="text-dark">Văn bản có màu xám đem.</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 màu xám trắng (trên nền trắng).</p>
  <p class="text-white">Văn bản màu trắng (trên nền trắng).</p>
</div>

</body>
</html>

Các lớp bối cảnh cũng có thể áp dụng với liên kết và thêm một màu nền màu đen khi người dùng rê chuột lên liên kết.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Các màu sắc liên kết bối cảnh --- dammio.com</h2>
  <p>Hover over the links.</p>
  <a href="#" class="text-muted">Liên kết câm lặng.</a>
  <a href="#" class="text-primary">Liên kết chính.</a>
  <a href="#" class="text-success">Liên kết thành công.</a>
  <a href="#" class="text-info">Liên kết thông tin.</a>
  <a href="#" class="text-warning">Liên kết cảnh báo.</a>
  <a href="#" class="text-danger">Liên kết nguy hiểm.</a>
  <a href="#" class="text-secondary">Liên kết phụ.</a>
  <a href="#" class="text-dark">Liên kết xám tối.</a>
  <a href="#" class="text-body">Liên kết mặc định (đen).</a>
  <a href="#" class="text-light">Liên kết xám sáng.</a>
</div>

</body>
</html>

Chúng ta cũng có thể áp dụng 50% độ mờ (opacity) cho văn bản màu trắng hoặc đen với các lớp: .text-black-50 hay .text-white-50.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Màu sắc văn bản theo độ mờ (opacity) --- dammio.com</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>

</body>
</html>

Màu nền

Các lớp dùng để định nghĩa màu nền là: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark và .bg-light. Lưu ý màu nền không áp dụng cho màu chữ, do đó, trong một số trường hợp bạn phải lớp .text-* cùng với màu nền để định nghĩa màu chữ.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Màu nền --- dammio.com</h2>
  <p>Use the contextual background classes to provide "meaning through colors".</p>
  <p>Note that you can also add a .text-* class if you want a different text color:</p>
  <p class="bg-primary text-white">This text is important.</p>
  <p class="bg-success text-white">This text indicates success.</p>
  <p class="bg-info text-white">This text represents some information.</p>
  <p class="bg-warning text-white">This text represents a warning.</p>
  <p class="bg-danger text-white">This text represents danger.</p>
  <p class="bg-secondary text-white">Secondary background color.</p>
  <p class="bg-dark text-white">Dark grey background color.</p>
  <p class="bg-light text-dark">Light grey background color.</p>
</div>

</body>
</html>

Kết luận

Như vậy, bạn đã học các lớp mặc định để định nghĩa màu chữ, màu liên kết và màu nền trong Boostrap 4. Ngoài ra, bạn phải tự định nghĩa màu sắc khác nếu muốn. Mời bạn theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [Bootstrap 4] Phần 9: Các cảnh báo (Alerts) trong Bootstrap

Trích dẫn bài viết

APA:
Dammio. (2018). [Bootstrap 4] Phần 5: Màu sắc trong Bootstrap 4. https://www.dammio.com/2018/07/16/bootstrap-4-phan-5-mau-sac-trong-bootstrap-4.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[Bootstrap 4] Phần 5: Màu sắc trong Bootstrap 4}, year = {2018}, url = {https://www.dammio.com/2018/07/16/bootstrap-4-phan-5-mau-sac-trong-bootstrap-4}, urldate = {2024-09-06} }

Kết nối

Màu sắc văn bản

Màu nền

Kết luận