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-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", 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));
  --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;
}

Mga variable nga sangkap

Nagsugod usab kami sa paggamit sa naandan nga mga kabtangan ingon mga lokal nga variable alang sa lainlaing mga sangkap. Niining paagiha mamenosan namo ang among gihugpong nga CSS, pagsiguro 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 paghugpong sa Sass.

Tan-awa ang among dokumentasyon sa lamesa para sa pipila ka pagsabot kung giunsa namo paggamit ang mga variable sa CSS .

Gigamit usab namo ang mga variable sa CSS sa among mga grids—labi na alang sa mga kanal-nga adunay dugang nga paggamit sa component nga moabut sa umaabot.

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.