Màu chữ trong bootstrap 5

10/12
Thạch
Bootstrap 5
0
318

Bootstrap 5 có một số class theo ngữ cảnh, được sử dụng để ngầm biểu đạt một ý nghĩa nhất định qua màu sắc.

Bài 4: Typography trong Bootstrap 5
Các class cho màu sắc của chữ gồm có: .text-muted , .text-primary , .text-success , .text-info , .text-warning , .text-danger , .text-secondary , .text-white , .text-dark , .text-body (màu body mặc định thường là đen) và .text-light :

Hãy chạy file dưới đây để xem các class cho màu sắc của chữ ở bên trên sẽ hiển thị màu sắc văn bản như thế nào bạn nhé.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Màu sắc theo ngữ cảnh</h2>
  <p>Sử dụng các class theo ngữ cảnh để cung cấp những ý nghĩa thông qua màu sắc:</p>
  <p class="text-muted">Văn bản bị muted.</p>
  <p class="text-primary">Văn bản quan trọng.</p>
  <p class="text-success">Văn bản chỉ ra sự thành công.</p>
  <p class="text-info">Văn bản đại diện cho một số thông tin.</p>
  <p class="text-warning">Văn bản này là cảnh báo.</p>
  <p class="text-danger">Văn bản thông báo 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 đen.</p>
  <p class="text-body">Màu body mặc định (thường là màu đen).</p>
  <p class="text-light">Văn bản màu xám nhạt (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>

Bạn sẽ nhận được màu sắc tương ứng như dưới đây:

Bạn cũng có thể thêm độ mờ opacity 50% cho văn bản đen hoặc trắng với các class .text-black-50 hoặc .text-white-50:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap trên Sinitc</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Tạo độ mờ cho màu chữ</h2>
  <p>Thêm độ mờ 50% cho màu chữ đen hoặc trắng với class .text-black-50 hay .text-white-50:</p>
  <p class="text-black-50">Chữ đen với opacity 50% trên nền trắng</p>
  <p class="text-white-50 bg-dark">Chữ trắng với opacity 50% trên nền đen</p>
</div>

</body>
</html>

Với file HTML trên bạn sẽ thấy kết quả như sau:

Màu nền trong Bootstrap 5

Class cho màu nền gồm có: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark và .bg-light.

Lưu ý rằng, màu nền sẽ không thiết lập màu chữ, vì vậy, trong một số trường hợp, bạn sẽ cần sử dụng class màu nền cùng với class .text-*.

Hãy cùng xem code ví dụ dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Màu nền theo ngữ cảnh</h2>
  <p>Sử dụng các class màu nền theo ngữ cảnh.</p>
  <p class="bg-primary text-white">Văn bản quan trọng.</p>
  <p class="bg-success text-white">Văn bản chỉ ra sự thành công.</p>
  <p class="bg-info text-white">Văn bản chứa thông tin.</p>
  <p class="bg-warning text-white">Văn bản này là cảnh báo.</p>
  <p class="bg-danger text-white">Văn bản thông báo 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 đen.</p>
  <p class="bg-light text-dark">Màu nền xám trắng.</p>
</div>

</body>
</html>

Ta sẽ được kết quả như hình dưới đây:

Màu link trong Bootstrap 4

Trong Bootstrap 4 các class text này có thể được sử dụng trên các link, làm cho màu của nó tối hơn một chút khi di chuột vào. Bạn có thể thấy điều đó khi chạy đoạn code dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Sinitc.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.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Màu sắc link theo ngữ cảnh</h2>
  <p>Di chuột qua link để xem sự thay đổi màu sắc.</p>
  <a href="#" class="text-muted">Link bị muted.</a>
  <a href="#" class="text-primary">Link chính.</a>
  <a href="#" class="text-success">Link thành công.</a>
  <a href="#" class="text-info">Link thông tin.</a>
  <a href="#" class="text-warning">Link cảnh báo.</a>
  <a href="#" class="text-danger">Link nguy hiểm.</a>
  <a href="#" class="text-secondary">Link phụ.</a>
  <a href="#" class="text-dark">Link màu xám đen.</a>
  <a href="#" class="text-body">Link màu body/đen.</a>
  <a href="#" class="text-light">Link màu xám.</a>
</div>

Khi đó các link sẽ hiển thị như dưới đây:

Lưu ý: Các hiệu ứng link này khi thử trên Bootstrap 5 thì không thấy thay đổi màu sắc như trên Bootstrap 4.

Sau khi nắm vững các class màu này, bạn đã có thể tùy biến được màu sắc nội dung trong website của mình rồi đó vì với hệ thống màu này đã đủ những màu cơ bản nhất. Hãy tiếp tục theo dõi các bài sau để học Bootstrap 5 một cách có hệ thống nhé!