Color trong Bootstrap 5:
Trong Bootstrap 5, bạn có thể tùy chỉnh màu sắc của các thành phần và phần tử trong trang web của mình bằng cách sử dụng các lớp màu và biến màu được xác định sẵn trong framework. Dưới đây là một số cách sử dụng màu sắc trong Bootstrap 5:
1. Lớp Màu Văn Bản:
Các lớp màu văn bản cho phép bạn thay đổi màu chữ của văn bản.
html
<p class="text-primary">This is primary text.</p>
<p class="text-success">This is success text.</p>
<p class="text-danger">This is danger text.</p>
2. Lớp Màu Nền:
Các lớp màu nền giúp bạn thay đổi màu nền của các phần tử.
html
<div class="bg-primary">Background color primary</div>
<div class="bg-success">Background color success</div>
<div class="bg-danger">Background color danger</div>
3. Lớp Màu Chỉ Số:
Các lớp màu chỉ số cho phép bạn áp dụng màu cho các số hoặc chỉ số.
html
<span class="text-primary">Price: $<span class="price">50</span></span>
4. Biến Màu:
Bootstrap 5 cung cấp các biến màu tùy chỉnh cho các màu chính của giao diện. Bạn có thể sử dụng các biến màu này để tùy chỉnh các thành phần theo ý muốn.
css
<style>
.custom-primary {
color: var(--bs-primary);
background-color: var(--bs-primary-bg);
}
</style>
5. Tùy Chỉnh Biến Màu:
Bạn có thể tùy chỉnh các biến màu chính của Bootstrap bằng cách ghi đè các giá trị biến màu trong tệp CSS của bạn.
css
<style>
:root {
--bs-primary: #008000; /* Đổi màu primary thành xanh lá cây */
--bs-primary-bg: #f0f0f0; /* Đổi màu nền primary */
}
</style>
6. Biến Màu Chắn Số:
Các biến màu chắn số tương tự như biến màu, nhưng được sử dụng để tùy chỉnh các giá trị số.
css
<style>
:root {
--bs-blue-700: #0069d9; /* Tùy chỉnh màu xanh 700 */
}
</style>
Đây chỉ là một số cách cơ bản để sử dụng màu sắc trong Bootstrap 5. Bootstrap cung cấp nhiều tùy chọn khác để tùy chỉnh và sử dụng màu sắc theo ý muốn. Bạn có thể tìm hiểu thêm thông tin chi tiết trong tài liệu chính thức của Bootstrap.
Dưới đây là một ví dụ cụ thể về cách sử dụng màu sắc trong Bootstrap 5:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Bootstrap 5 Color Example</title>
<style>
.custom-primary {
color: var(--bs-primary);
background-color: var(--bs-primary-bg);
}
.custom-success {
color: var(--bs-success);
background-color: var(--bs-success-bg);
}
.custom-danger {
color: var(--bs-danger);
background-color: var(--bs-danger-bg);
}
</style>
</head>
<body>
<div class="container mt-5">
<p class="text-primary">This is primary text.</p>
<p class="text-success">This is success text.</p>
<p class="text-danger">This is danger text.</p>
<div class="bg-primary text-light p-2">Background color primary</div>
<div class="bg-success text-dark p-2">Background color success</div>
<div class="bg-danger text-light p-2">Background color danger</div>
<span class="text-primary">Price: $<span class="price">50</span></span>
</div>
<div class="container-fluid bg-dark text-light mt-5 p-4">
<p class="fs-4">Custom Colors:</p>
<p class="custom-primary">Custom primary text.</p>
<p class="custom-success">Custom success text.</p>
<p class="custom-danger">Custom danger text.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Trong ví dụ trên:
- Chúng tôi sử dụng các lớp màu văn bản như
text-primary,text-success,text-dangerđể thay đổi màu chữ của văn bản. - Chúng tôi sử dụng các lớp màu nền như
bg-primary,bg-success,bg-dangerđể thay đổi màu nền của các phần tử. - Chúng tôi sử dụng biến màu tùy chỉnh bằng cách tạo các lớp
custom-primary,custom-success,custom-dangerđể thay đổi cả màu chữ và nền.
Vui lòng lưu ý rằng để sử dụng biến màu tùy chỉnh, bạn cần tạo tệp CSS riêng và thêm các tùy chỉnh màu của bạn vào đó.