spremenljivke CSS

Bootstrap vključuje približno dva ducata lastnosti (spremenljivk) CSS po meri v svoj prevedeni CSS, z več desetimi drugimi na poti za izboljšano prilagajanje na podlagi posamezne komponente. Ti omogočajo enostaven dostop do običajno uporabljenih vrednosti, kot so naše barve teme, prelomne točke in primarni skladi pisav, ko delate v inšpektorju brskalnika, peskovniku kode ali splošnem izdelavi prototipov.

Vse naše lastnosti po meri imajo predpono,bs- da se izognemo konfliktom s CSS tretjih oseb.

Korenske spremenljivke

Tukaj so spremenljivke, ki jih vključimo (upoštevajte, da :rootje zahtevana), do katerih lahko dostopate kjer koli je naložen CSS Bootstrapa. Nahajajo se v naši _root.scssdatoteki in vključeni v naše prevedene datoteke dist.

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

Spremenljivke komponent

Prav tako začenjamo uporabljati lastnosti po meri kot lokalne spremenljivke za različne komponente. Na ta način lahko zmanjšamo naš prevedeni CSS, zagotovimo, da slogi niso podedovani na mestih, kot so ugnezdene tabele, in omogočimo nekaj osnovnega preoblikovanja in razširitve komponent Bootstrap po prevajanju Sass.

Oglejte si dokumentacijo naše tabele za nekaj vpogleda v to, kako uporabljamo spremenljivke 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);
}