pembolehubah CSS

Bootstrap menyertakan banyak sifat tersuai CSS (pembolehubah) dalam CSS terkumpulnya untuk penyesuaian masa nyata tanpa perlu menyusun semula Sass. Ini memberikan akses mudah kepada nilai yang biasa digunakan seperti warna tema, titik putus dan susunan fon utama kami apabila bekerja dalam pemeriksa penyemak imbas anda, kotak pasir kod atau prototaip umum.

Semua sifat tersuai kami diawali denganbs- untuk mengelakkan konflik dengan CSS pihak ketiga.

Pembolehubah akar

Berikut ialah pembolehubah yang kami sertakan (perhatikan bahawa :rootdiperlukan) yang boleh diakses di mana-mana sahaja CSS Bootstrap dimuatkan. Ia terletak dalam _root.scssfail kami dan disertakan dalam fail dist terkumpul 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;
}

Pembolehubah komponen

Bootstrap 5 semakin menggunakan sifat tersuai sebagai pembolehubah tempatan untuk pelbagai komponen. Dengan cara ini kami mengurangkan CSS terkumpul kami, memastikan gaya tidak diwarisi di tempat seperti jadual bersarang dan membenarkan beberapa penggayaan semula asas dan lanjutan komponen Bootstrap selepas kompilasi Sass.

Sila lihat dokumentasi jadual kami untuk mendapatkan sedikit pandangan tentang cara kami menggunakan pembolehubah CSS . Navbar kami juga menggunakan pembolehubah CSS pada v5.2.0. Kami juga menggunakan pembolehubah CSS merentas grid kami—terutamanya untuk menyekat grid CSS ikut serta baharu— dengan lebih banyak penggunaan komponen akan datang pada masa hadapan.

Apabila boleh, kami akan menetapkan pembolehubah CSS pada peringkat komponen asas (cth, .navbaruntuk bar nav dan sub-komponennya). Ini mengurangkan tekaan tentang tempat dan cara untuk menyesuaikan, dan membolehkan pengubahsuaian mudah oleh pasukan kami dalam kemas kini masa hadapan.

Awalan

Kebanyakan pembolehubah CSS menggunakan awalan untuk mengelakkan perlanggaran dengan pangkalan kod anda sendiri. Awalan ini adalah tambahan kepada --yang diperlukan pada setiap pembolehubah CSS.

Sesuaikan awalan melalui $prefixpembolehubah Sass. Secara lalai, ia ditetapkan kepada bs-(perhatikan sempang mengekor).

Contoh

Pembolehubah CSS menawarkan fleksibiliti yang serupa dengan pembolehubah Sass, tetapi tanpa memerlukan kompilasi sebelum disampaikan kepada penyemak imbas. Sebagai contoh, di sini kami menetapkan semula gaya fon dan pautan halaman kami dengan pembolehubah CSS.

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

Titik putus grid

Walaupun kami memasukkan titik putus grid kami sebagai pembolehubah CSS (kecuali untuk xs), maklum bahawa pembolehubah CSS tidak berfungsi dalam pertanyaan media . Ini adalah dengan reka bentuk dalam spesifikasi CSS untuk pembolehubah, tetapi mungkin berubah pada tahun-tahun akan datang dengan sokongan untuk env()pembolehubah. Lihat jawapan Stack Overflow ini untuk beberapa pautan yang berguna. Sementara itu, anda boleh menggunakan pembolehubah ini dalam situasi CSS lain, serta dalam JavaScript anda.