Tiếng Việt

Hướng dẫn Bootstrap

Bố cục Bootstrap

Nội dung Bootstrap

Thành phần Bootstrap

Bootstrap Forms

Trợ giúp Bootstrap

Tiện ích Bootstrap

Demos Bootstrap

Bootstrap - CSS Biến số: Hướng dẫn cho người mới bắt đầu

Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của các biến số CSS trong Bootstrap. Đừng lo lắng nếu bạn là người mới bắt đầu; tôi sẽ hướng dẫn bạn từng bước như thể chúng ta đang ngồi cùng nhau trong một lớp học ấm cúng. Hãy bắt đầu hành trình thú vị này!

Bootstrap - CSS Variables

什么是 CSS Variables?

Trước khi chúng ta nhảy vào các biến số cụ thể của Bootstrap, hãy hiểu qua về CSS variables là gì. CSS variables, còn được gọi là CSS custom properties, cho phép bạn lưu trữ các giá trị cụ thể để sử dụng lại trong suốt stylesheet của bạn. Hãy tưởng tượng chúng như những hộp nhỏ chứa màu sắc yêu thích, kích thước, hoặc bất kỳ giá trị CSS nào khác của bạn.

Root Variables

Trong Bootstrap, root variables là nền tảng của toàn bộ hệ thống biến số. Chúng được xác định trong selector :root, đại diện cho mức cao nhất của cây tài liệu của bạn.

:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
}

Những biến số này xác định các màu cơ bản được sử dụng suốt toàn bộ Bootstrap. Ví dụ, --bs-blue là màu xanh cơ bản của Bootstrap. Bạn có thể sử dụng các biến số này trong CSS của riêng bạn như sau:

.my-element {
color: var(--bs-blue);
}

Default Variables

Bootstrap cũng cung cấp một bộ các biến số mặc định được sử dụng để thiết kế các thành phần khác nhau. Những biến số này thường tham chiếu đến các biến số root mà chúng ta vừa thấy.

:root {
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-gray-600);
--bs-success: var(--bs-green);
--bs-info: var(--bs-cyan);
--bs-warning: var(--bs-yellow);
--bs-danger: var(--bs-red);
--bs-light: var(--bs-gray-100);
--bs-dark: var(--bs-gray-900);
}

Ở đây, --bs-primary được đặt thành sử dụng giá trị của --bs-blue. Điều này cho phép dễ dàng thay đổi chủ đề và duy trì sự nhất quán trên toàn dự án.

Dark Mode Variables

Bootstrap 5 đã giới thiệu hỗ trợ chế độ tối tích hợp sử dụng các biến số CSS. Những biến số này thay đổi giá trị của chúng khi chế độ tối được kích hoạt.

[data-bs-theme="dark"] {
--bs-body-color: #adb5bd;
--bs-body-bg: #212529;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255,255,255;
}

Khi thuộc tính data-bs-theme="dark" được áp dụng cho một phần tử (thường là <html> hoặc <body>), những biến số này sẽ thay thế các biến số tương ứng trong chế độ sáng, ngay lập tức chuyển đổi trang web của bạn sang chế độ tối. Đ酷, phải không?

Component Variables

Các thành phần của Bootstrap cũng sử dụng các biến số CSS để thiết kế. Điều này giúp dễ dàng tùy chỉnh từng thành phần mà không ảnh hưởng đến các thành phần khác.

.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
}

Những biến số này kiểm soát mọi khía cạnh của的外观 của một nút chính. Muốn thay đổi màu khi di chuột? Chỉ cần điều chỉnh --bs-btn-hover-bg!

Prefix

Bootstrap sử dụng tiền tố bs- cho tất cả các biến số của mình để tránh xung đột với các biến số tùy chỉnh của bạn hoặc từ các thư viện khác. Nếu bạn đang tạo các biến số của riêng mình, việc sử dụng tiền tố riêng của bạn là một thực hành tốt.

:root {
--my-awesome-color: #ff69b4;
}

Examples

Hãy áp dụng kiến thức của chúng ta vào thực tế với một vài ví dụ:

  1. Thay đổi màu chính:
:root {
--bs-primary: #ff69b4; /* Màu hồng nóng là màu xanh mới! */
}
  1. Tạo một nút tùy chỉnh:
.btn-awesome {
--bs-btn-color: #fff;
--bs-btn-bg: var(--my-awesome-color);
--bs-btn-border-color: var(--my-awesome-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #ff1493; /* Màu hồng đậm hơn khi di chuột */
--bs-btn-hover-border-color: #ff1493;
}
  1. Điều chỉnh nền của thân trong chế độ tối:
[data-bs-theme="dark"] {
--bs-body-bg: #000; /* Nền đen hoàn toàn */
}

Focus Variables

Bootstrap cũng cung cấp các biến số cho các trạng thái focus, đảm bảo khả năng truy cập trên toàn trang web:

:root {
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}

Những biến số này kiểm soát外观 của vòng focus xung quanh các phần tử tương tác.

Grid Breakpoints

Cuối cùng nhưng không kém phần quan trọng, hệ thống lưới responsive của Bootstrap cũng được kiểm soát bởi các biến số CSS:

:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
--bs-breakpoint-md: 768px;
--bs-breakpoint-lg: 992px;
--bs-breakpoint-xl: 1200px;
--bs-breakpoint-xxl: 1400px;
}

Những biến số này xác định các độ rộng mà bố cục của bạn sẽ thay đổi để phù hợp với các kích thước màn hình khác nhau.

Summary

Dưới đây là bảng tham khảo nhanh các loại biến số CSS chính mà chúng ta đã覆盖:

Loại Biến Số Mục Đích Ví Dụ
Root Variables Xác định giá trị cơ bản --bs-blue: #0d6efd;
Default Variables Đặt màu chủ đề --bs-primary: var(--bs-blue);
Dark Mode Variables Điều khiển chế độ tối --bs-body-bg: #212529;
Component Variables Thiết kế thành phần cụ thể --bs-btn-bg: var(--bs-primary);
Focus Variables Điều khiển trạng thái focus --bs-focus-ring-width: 0.25rem;
Grid Breakpoints Xác định các điểm breakpoint --bs-breakpoint-md: 768px;

Và thế là bạn đã bước đầu vào thế giới của các biến số CSS trong Bootstrap. Nhớ rằng, chìa khóa để thành thạo này là thực hành. Hãy thử thay đổi các biến số trong các dự án của bạn và xem chúng ảnh hưởng như thế nào đến thiết kế của bạn. Chúc may mắn và đừng quên vui vẻ khi làm việc!

Credits: Image by storyset

Hướng Dẫn Trước:
Bootstrap - RTL
Hướng Dẫn Tiếp Theo:
Bootstrap - Chế độ Màu