CSS a danglamna tur a awm

Bootstrap hian a compiled CSS ah hian CSS custom property (variables) tam tak a dah tel a, chu chu Sass recompile ngai lovin real-time customization atan a ni. Hengte hian i browser inspector, code sandbox, emaw general prototyping-a hnathawh hunah kan theme color, breakpoint, leh primary font stack ang chi value hman tlanglawn tak takte awlsam taka hmuh theihna a pe a ni.

Kan custom property zawng zawng hibs- third party CSS nena inrem lohna tur prefixed vek a ni.

Root variable te chu

:rootHetah hian Bootstrap-a CSS load awmna hmun apiangah access theih tur variable kan dah tel (note that the is required) te chu kan rawn tarlang e. Kan _root.scssfile ah hian an awm a, kan compiled dist file ah te pawh an tel ve bawk.

: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 hrang hrang a awm thei

Bootstrap 5 hian component hrang hrang tan local variable atan custom property a hmang nasa hle. Chutiang chuan kan compiled CSS kan tihtlem a, nested table ang hmunah styles inherited a nih loh nan kan enfiah a, Sass compilation zawhah Bootstrap components basic restyling leh extending thenkhat kan phalsak bawk.

CSS variable kan hman dan tur hriatna engemaw chen kan table documentation hi en la . Kan navbar te hian v5.2.0 atanga CSS variable te pawh kan hmang bawk . Kan grid hrang hrangah CSS variable kan hmang bawk—a bul berah chuan gutters the new opt-in CSS grid— nakin lawkah component hman tam zawk a awm dawn a ni.

A theih phawt chuan base component level-ah CSS variable kan assign ang (eg, .navbarnavbar leh a sub-component te tan). Hei hian khawiah nge customize tur tih leh engtin nge tih tur tih guessing a tihtlem a, nakin lawka update-ah pawh kan team-in awlsam taka siam danglam theihna a siam bawk.

Prefix tih a ni

CSS variable tam zawk hian prefix an hmang a, chu chu i codebase nena inhnaih lohna tur a ni. He prefix hi --CSS variable tin a that’s required bakah a ni.

$prefixSass variable hmangin prefix chu customize rawh. Default-ah chuan bs-(trailing dash kha note rawh) ah a set a ni.

Entirna te

CSS variable te hian Sass-a variable te ang bawkin flexibility an pe a, mahse browser-a an rawn thawn hmain compilation a ngai lo. Entirnan, hetah hian kan page font leh link style te chu CSS variable hmangin kan reset a.

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

Grid breakpoint te a awm

Kan grid breakpoint te chu CSS variable anga kan dah lai hian ( , tih loh chu xs), media query ah CSS variable te hian hna an thawk lo tih hre reng ang che . Hei hi variable hrang hrangte tana CSS spec-a design hmanga siam a ni a, mahse kum lo awm turteah chuan env()variable support-na nen a danglam thei. Link \angkai tak tak hmuh theih nan he Stack Overflow chhanna hi en la . Chutih lai chuan heng variable te hi CSS situation dang ah te, i JavaScript ah te pawh i hmang thei bawk.