CSS variables

Bootstrap plures CSS proprietates consuetudo (variabiles) in suis compilatis CSS comprehendit pro real-time customizatione sine necessitate recompensandi Sass. Hae accessum facilem praebent ad valores communiter usus sicut thema colorum, fracturae, et primariae fontis acervos cum operantur in inspectore navigatri, codicem sandbox, seu prototypum generale.

Omnes nostrae consuetudinis possessiones praefixae suntbs- ad conflictationes vitandas cum tertia factione CSS.

Radix variabilis

Hic variabiles sunt quae includuntur (nota quod :rootrequiri) potest accessi usquam Bootstrap CSS oneratus. In tabulario nostro sita sunt et in _root.scsstabulariis nostris compilata continetur.

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

Component variables

Bootstrap 5 magis magis magisque utens proprietatibus consuetudinibus quam variabilibus localibus pro variis componentibus. Hoc modo CSS compilata nostra reducimus, ut styli in locis quasi tabulis nidificatis non possideantur, et aliquas praecipuas sedes in compositione Bootstrap extendere et post Sass compilationem patiantur.

Inspice tabulam nostram documenta quaedam perspicientia quomodo CSS variabiles utimur . Navbartae nostri etiam variantibus CSS utebantur, ut v5.2.0. Etiam CSS variabiles per grids nostras adhibemus - praesertim ad canales novas optationis in CSS gridis - cum pluribus componentibus usu venientibus in futurum.

Quotiens fieri potest, variabiles CSS in gradu basis componentis (exempli gratia .navbarpro navbar et sub-componentibus) dabimus. Hoc coniecturam reducit ubi et quomodo mos est, et permittit faciles modificationes nostris quadrigis in futuris updates.

Praefixum

Plurimae variabiles CSS praepositione utuntur ad collisiones vitandas cum codice tuo proprio. Haec praepositio praeter id --quod in singulis CSS variabile requiritur.

Mos praepositionis per $prefixSass variabilis. Defalta, suus posuit ad bs-(nota trahens offendas).

Exempla

Variabiles CSS similem flexibilitatem praebent variabilibus Sass, sed sine necessitate compilationem antequam navigatro ministratur. Exempli gratia, hic fontam paginae nostrae et stylos nexus cum CSS variabilibus collocamus.

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

Eget breakpoints

Dum includimus cinematographicas nostras ut CSS variabiles (praeterquam xs), scias CSS variabiles in quaestionibus instrumentis non operari . Hoc consilium in CSS spec- tantium variabilium est, sed in annis venientibus cum auxilio env()variabilium mutare potest. Reprehendo sicco hoc Stack superfluum responsum aliquot nexus utiles. Interim his variabilibus in aliis CSS condicionibus uti potes, ac in JavaScript.