pembolehubah CSS

Bootstrap termasuk kira-kira dua dozen sifat tersuai CSS (pembolehubah) dalam CSS terkumpulnya, dengan berdozen lagi dalam proses untuk penyesuaian yang lebih baik pada asas setiap komponen. 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-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --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-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", 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));
}

Pembolehubah komponen

Kami juga mula menggunakan sifat tersuai sebagai pembolehubah setempat untuk pelbagai komponen. Dengan cara ini kami boleh 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 .

We’re also using CSS variables across our grids—primarily for gutters—with more component usage coming in the future.

Examples

CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.

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