variabel CSS

Bootstrap menyertakan banyak properti kustom (variabel) CSS dalam CSS yang dikompilasi untuk penyesuaian waktu nyata tanpa perlu mengkompilasi ulang Sass. Ini memberikan akses mudah ke nilai yang umum digunakan seperti warna tema, titik putus, dan tumpukan font utama saat bekerja di inspektur browser, kotak pasir kode, atau pembuatan prototipe umum.

Semua properti kustom kami diawali denganbs- untuk menghindari konflik dengan CSS pihak ketiga.

Variabel akar

Berikut adalah variabel yang kami sertakan (perhatikan bahwa :rootini diperlukan) yang dapat diakses di mana saja CSS Bootstrap dimuat. Mereka berada di _root.scssfile kami dan termasuk dalam file dist terkompilasi kami.

: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;
}

Variabel komponen

Bootstrap 5 semakin memanfaatkan properti khusus sebagai variabel lokal untuk berbagai komponen. Dengan cara ini kami mengurangi CSS yang dikompilasi, memastikan gaya tidak diwariskan di tempat-tempat seperti tabel bersarang, dan mengizinkan beberapa penataan ulang dasar dan perluasan komponen Bootstrap setelah kompilasi Sass.

Lihat dokumentasi tabel kami untuk beberapa wawasan tentang bagaimana kami menggunakan variabel CSS . Navbar kami juga menggunakan variabel CSS pada v5.2.0. Kami juga menggunakan variabel CSS di seluruh grid kami—terutama untuk talang, grid CSS opt-in baru —dengan lebih banyak penggunaan komponen yang akan datang di masa mendatang.

Bila memungkinkan, kami akan menetapkan variabel CSS pada tingkat komponen dasar (misalnya, .navbaruntuk navbar dan sub-komponennya). Ini mengurangi menebak di mana dan bagaimana menyesuaikan, dan memungkinkan modifikasi mudah oleh tim kami di pembaruan mendatang.

Awalan

Sebagian besar variabel CSS menggunakan awalan untuk menghindari tabrakan dengan basis kode Anda sendiri. Awalan ini merupakan tambahan dari --yang diperlukan pada setiap variabel CSS.

Sesuaikan awalan melalui $prefixvariabel Sass. Secara default, ini diatur ke bs-(perhatikan tanda hubung).

Contoh

Variabel CSS menawarkan fleksibilitas yang mirip dengan variabel Sass, tetapi tanpa perlu kompilasi sebelum disajikan ke browser. Misalnya, di sini kita mengatur ulang font halaman dan gaya tautan dengan variabel CSS.

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

Titik putus jaringan

Meskipun kami menyertakan breakpoint grid kami sebagai variabel CSS (kecuali untuk xs), perlu diketahui bahwa variabel CSS tidak berfungsi di kueri media . Ini dirancang dalam spesifikasi CSS untuk variabel, tetapi dapat berubah di tahun-tahun mendatang dengan dukungan untuk env()variabel. Lihat jawaban Stack Overflow ini untuk beberapa tautan bermanfaat. Sementara itu, Anda dapat menggunakan variabel ini dalam situasi CSS lain, serta dalam JavaScript Anda.