CSS variables

Ang Bootstrap naglakip sa daghang CSS custom properties (variables) sa iyang compiled CSS para sa real-time customization nga wala na kinahanglana nga i-recompile ang Sass. Naghatag kini og dali nga pag-access sa kasagarang gigamit nga mga kantidad sama sa among mga kolor sa tema, mga breakpoint, ug panguna nga mga stack sa font kung nagtrabaho sa inspektor sa imong browser, usa ka code sandbox, o kinatibuk-ang prototyping.

Ang tanan namon nga naandan nga mga kabtangan gi-prefixbs- aron malikayan ang mga panagsumpaki sa ikatulo nga partido nga CSS.

Root variables

Ania ang mga variable nga among gilakip (timan-i nga ang :rootgikinahanglan) nga mahimong ma-access bisan asa ang Bootstrap's CSS gikarga. Naa sila sa among _root.scssfile ug gilakip sa among gihugpong nga mga file.

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

Mga variable nga sangkap

Ang Bootstrap 5 labi nga naggamit sa mga naandan nga kabtangan ingon mga lokal nga variable alang sa lainlaing mga sangkap. Niining paagiha mamenosan namo ang among gihugpong nga CSS, masiguro nga ang mga estilo dili mapanunod sa mga lugar sama sa mga nested table, ug tugotan ang pipila ka batakang restyling ug pagpalapad sa mga sangkap sa Bootstrap human sa Sass compilation.

Tan-awa ang among dokumentasyon sa lamesa para sa pipila ka pagsabot kung giunsa namo paggamit ang CSS variables . Ang among mga navbar naggamit usab ug CSS variables sa v5.2.0. Gigamit usab namo ang mga variable sa CSS sa among mga grids—panguna alang sa mga gutter sa bag-ong opt-in CSS grid —nga adunay dugang nga paggamit sa component nga moabut sa umaabot.

Kon mahimo, mag-assign kami ug CSS variables sa base component level (pananglitan, .navbarpara sa navbar ug sa mga sub-component niini). Gipamenos niini ang pagtag-an kung asa ug kung giunsa ang pag-customize, ug gitugotan ang dali nga pagbag-o sa among team sa umaabot nga mga update.

Prefix

Kadaghanan sa mga variable sa CSS naggamit ug prefix aron malikayan ang pagbangga sa imong kaugalingong codebase. Kini nga prefix dugang sa --gikinahanglan sa matag CSS variable.

Ipasibo ang prefix pinaagi sa $prefixSass variable. Sa kasagaran, kini gibutang sa bs-(timan-i ang trailing dash).

Mga pananglitan

Ang mga variable sa CSS nagtanyag parehas nga kadali sa mga variable ni Sass, apan wala kinahanglana ang pagtipon sa wala pa i-serve sa browser. Pananglitan, dinhi among gi-reset ang font sa among panid ug mga istilo sa link nga adunay mga variable nga CSS.

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

Mga breakpoint sa grid

Samtang gilakip namo ang among grid breakpoints isip CSS variables (gawas sa xs), hibaloi nga ang CSS variables dili mugana sa media query . Kini pinaagi sa disenyo sa CSS spec para sa mga variable, apan mahimong mausab sa umaabot nga mga tuig nga adunay suporta alang sa env()mga variable. Tan-awa kining Stack Overflow nga tubag alang sa pipila ka makatabang nga mga link. Sa kasamtangan, mahimo nimong gamiton kini nga mga variable sa ubang mga sitwasyon sa CSS, ingon man sa imong JavaScript.