Biến CSS pdf

Bootstrap bao gồm nhiều thuộc tính tùy chỉnh CSS (biến) trong CSS đã biên dịch của nó để tùy chỉnh theo thời gian thực mà không cần biên dịch lại Sass. Chúng cung cấp khả năng truy cập dễ dàng vào các giá trị thường được sử dụng như màu chủ đề, điểm dừng và ngăn xếp phông chữ chính của chúng tôi khi làm việc trong trình kiểm tra của trình duyệt, hộp cát mã hoặc nguyên mẫu chung

Tất cả các thuộc tính tùy chỉnh của chúng tôi đều có tiền tố là bs- để tránh xung đột với CSS của bên thứ ba

Biến gốc

Dưới đây là các biến mà chúng tôi đưa vào (lưu ý rằng cần phải có ______4_______) có thể được truy cập ở bất kỳ đâu mà CSS của Bootstrap được tải. Chúng nằm trong tệp _root.scss của chúng tôi và được bao gồm trong các tệp dist đã biên dịch của chúng tôi

: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;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

biến thành phần

Bootstrap 5 đang tăng cường sử dụng các thuộc tính tùy chỉnh làm biến cục bộ cho các thành phần khác nhau. Bằng cách này, chúng tôi giảm CSS đã biên dịch của mình, đảm bảo các kiểu không được kế thừa ở những nơi như bảng lồng nhau và cho phép một số cấu trúc lại cơ bản và mở rộng các thành phần Bootstrap sau khi biên dịch Sass

Hãy xem tài liệu bảng của chúng tôi để biết một số. Của chúng tôi kể từ v5. 2. 0. Chúng tôi cũng đang sử dụng các biến CSS trên các lưới của mình—chủ yếu dành cho các máng xối lưới CSS chọn tham gia mới—với việc sử dụng nhiều thành phần hơn trong tương lai

Bất cứ khi nào có thể, chúng tôi sẽ gán các biến CSS ở cấp thành phần cơ sở (e. g. , .navbar cho thanh điều hướng và các thành phần phụ của nó). Điều này làm giảm việc đoán vị trí và cách tùy chỉnh, đồng thời cho phép nhóm của chúng tôi dễ dàng sửa đổi trong các bản cập nhật trong tương lai

Tiếp đầu ngữ

Hầu hết các biến CSS đều sử dụng tiền tố để tránh xung đột với cơ sở mã của riêng bạn. Tiền tố này bổ sung cho -- bắt buộc phải có trên mọi biến CSS

Tùy chỉnh tiền tố thông qua biến Sass $prefix. Theo mặc định, nó được đặt thành bs- (lưu ý dấu gạch ngang ở cuối)

ví dụ

Các biến CSS cung cấp tính linh hoạt tương tự như các biến của Sass, nhưng không cần biên dịch trước khi được cung cấp cho trình duyệt. Ví dụ: ở đây chúng tôi đang đặt lại phông chữ và kiểu liên kết của trang bằng các biến CSS

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

Điểm ngắt lưới

Mặc dù chúng tôi bao gồm các điểm ngắt lưới dưới dạng các biến CSS (ngoại trừ xs), hãy lưu ý rằng các biến CSS không hoạt động trong các truy vấn phương tiện. Điều này là do thiết kế trong thông số kỹ thuật CSS dành cho biến, nhưng có thể thay đổi trong những năm tới với sự hỗ trợ cho biến

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}