Login

Học Bootstrap 4

  Trang Chủ / Tin tức / Học Bootstrap 4

Màu sắc (color) trong Bootstrap 4

Chắc chắn trang trí màu sắc trong văn bản là một phần không thể thiếu và vô cùng quan trọng để làm cho website của bạn trở nên đặc sắc và hấp dẫn. Trong bài này, chúng ta sẽ cùng đi qua các class được cung cấp sẵn bởi bootstrap 4 hỗ trợ việc chỉnh sửa màu sắc  cho văn bản trong trang web của bạn nhé.

Màu sắc text

Boostrap 4 hỗ trợ các class mẫu để trang trí màu sắc cho văn bản như:

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

Sau đây là cách Bootstrap 4 CSS cho các class trên:

.text-white {
  color: #fff !important;
}
 
.text-primary {
  color: #007bff !important;
}
 
.text-secondary {
  color: #6c757d !important;
}
 
.text-success {
  color: #28a745 !important;
}
 
.text-info {
  color: #17a2b8 !important;
}
 
.text-warning {
  color: #ffc107 !important;
}
 
.text-danger {
  color: #dc3545 !important;
}
 
.text-light {
  color: #f8f9fa !important;
}
 
.text-dark {
  color: #343a40 !important;
}
 
.text-body {
  color: #212529 !important;
}
 
.text-muted {
  color: #6c757d !important;
}

Ví dụ hiển thị của các class trên như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap 4</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">
  <p class="text-muted">Văn bản bình thườ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 đen.</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 định dạng này cũng được áp dụng với liên kết và thêm trạng thái hover khi đưa chuột lên liên kết, các trạng thái được CSS như sau:

a.text-primary:hover, a.text-primary:focus {
  color: #0062cc !important;
}
 
a.text-secondary:hover, a.text-secondary:focus {
  color: #545b62 !important;
}
 
a.text-success:hover, a.text-success:focus {
  color: #1e7e34 !important;
}
 
a.text-info:hover, a.text-info:focus {
  color: #117a8b !important;
}
 
a.text-warning:hover, a.text-warning:focus {
  color: #d39e00 !important;
}
 
a.text-danger:hover, a.text-danger:focus {
  color: #bd2130 !important;
}
 
a.text-light:hover, a.text-light:focus {
  color: #dae0e5 !important;
}
 
a.text-dark:hover, a.text-dark:focus {
  color: #1d2124 !important;
}

Ví dụ về các thẻ <a> liên kết:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap 4</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">
  <p>Hover over the links.</p>
  <a href="#" class="text-muted">Liên kết câm.</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, như sau:

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}
 
.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

Màu nền

Các class mẫu dùng để định nghĩa màu nền là:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light.
  • .bg-tranparent

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 sử dụng class .text-* cùng với màu nền để định nghĩa màu chữ.

Bootstrap 4 quy định CSS như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
.bg-primary {
  background-color: #007bff !important;
}
 
a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #0062cc !important;
}
 
.bg-secondary {
  background-color: #6c757d !important;
}
 
a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #545b62 !important;
}
 
.bg-success {
  background-color: #28a745 !important;
}
 
a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: #1e7e34 !important;
}
 
.bg-info {
  background-color: #17a2b8 !important;
}
 
a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #117a8b !important;
}
 
.bg-warning {
  background-color: #ffc107 !important;
}
 
a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #d39e00 !important;
}
 
.bg-danger {
  background-color: #dc3545 !important;
}
 
a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #bd2130 !important;
}
 
.bg-light {
  background-color: #f8f9fa !important;
}
 
a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #dae0e5 !important;
}
 
.bg-dark {
  background-color: #343a40 !important;
}
 
a.bg-dark:hover, a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #1d2124 !important;
}
 
.bg-white {
  background-color: #fff !important;
}
 
.bg-transparent {
  background-color: transparent !important;
}


Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap 4</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">
  <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

Vậy là các bạn đã nắm được các class và thuộc tính bên trong class về màu sắc do bootstrap 4 cung cấp. Hi vọng các bạn sẽ thực hành nhiều và áp dụng vào trong thực tế. Tất nhiên trong quá trình làm, sẽ không tránh khỏi việc bạn phải định nghĩa màu sắc riêng ngoài những gì Bootstrap 4 cung cấp.

Các bạn cũng có thể đăng ký để tham gia các khóa học lập trình offline của FullStack Academy

bootstrap bootstrap 4 màu sắc trong bootstrap 4 color bootstrap 4

Danh Mục Lập Trình

Baobinh.net
TIN LIÊN QUAN
DANH MỤC GIAO DIỆN

Bài viết ngẫu nhiên

Danh mục lập trình