ЦСС променљиве

Боотстрап укључује многа ЦСС прилагођена својства (варијабле) у свом преведеном ЦСС-у за прилагођавање у реалном времену без потребе за поновним компајлирањем Сасс-а. Они омогућавају лак приступ често коришћеним вредностима као што су наше боје теме, тачке прекида и примарни скупови фонтова када радите у инспектору вашег претраживача, заштићеном окружењу кода или општем прототипу.

Сва наша прилагођена својства имају префиксbs- да би се избегли сукоби са ЦСС-ом треће стране.

Коријенске варијабле

Ево променљивих које укључујемо (имајте на уму да :rootје обавезна) којима се може приступити било где да се учита Боотстрап-ов ЦСС. Они се налазе у нашој _root.scssдатотеци и укључени су у наше компајлиране дист датотеке.

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

Компонентне променљиве

Боотстрап 5 све више користи прилагођена својства као локалне променљиве за различите компоненте. На овај начин смањујемо наш компајлирани ЦСС, осигуравамо да се стилови не наслеђују на местима као што су угнежђене табеле и дозвољавамо неко основно рестилизовање и проширење Боотстрап компоненти након Сасс компилације.

Погледајте нашу табелу документацију за увид у то како користимо ЦСС променљиве . Наше навигационе траке такође користе ЦСС променљиве од в5.2.0. Такође користимо ЦСС променљиве у нашим мрежама—првенствено за олуке, нову ЦСС мрежу за избор— са више коришћења компоненти у будућности.

Кад год је то могуће, доделићемо ЦСС променљиве на нивоу основне компоненте (нпр. .navbarза навигациону траку и њене подкомпоненте). Ово смањује нагађање о томе где и како да се прилагоди, и омогућава лаке измене нашег тима у будућим ажурирањима.

Префикс

Већина ЦСС променљивих користи префикс да би се избегле колизије са вашом сопственом базом кода. Овај префикс је додатак префиксу --који је потребан за сваку ЦСС променљиву.

Прилагодите префикс преко $prefixпроменљиве Сасс. Подразумевано је подешено на bs-(обратите пажњу на цртицу на крају).

Примери

ЦСС променљиве нуде сличну флексибилност као и Сасс-ове варијабле, али без потребе за компилацијом пре него што се сервирају у претраживач. На пример, овде ресетујемо фонт и стилове везе на нашој страници помоћу ЦСС променљивих.

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

Преломне тачке мреже

Иако наше тачке прекида у мрежи укључујемо као ЦСС променљиве (осим за xs), имајте на уму да ЦСС променљиве не функционишу у медијским упитима . Ово је дизајнирано у ЦСС спецификацији за варијабле, али се може променити у наредним годинама уз подршку за env()варијабле. Погледајте овај одговор на преклапање стека за неке корисне везе. У међувремену, ове варијабле можете користити у другим ЦСС ситуацијама, као иу свом ЈаваСцрипт-у.