CSS променливи

Bootstrap вклучува околу дваесетина сопствени својства (променливи) на CSS во составениот CSS, со уште десетици на патот за подобрено прилагодување на основа по компонента. Тие обезбедуваат лесен пристап до најчесто користените вредности како што се боите на нашите теми, точките на прекин и примарните купови на фонтови кога работите во инспекторот на вашиот прелистувач, кутијата за песок со кодови или општите прототипови.

Сите наши сопствени својства се со префикс заbs- да се избегнат конфликти со CSS од трета страна.

Корени променливи

Еве ги променливите што ги вклучуваме (забележете дека тоа :rootе потребно) до кои може да се пристапи секаде каде што е вчитан CSS на Bootstrap. Тие се наоѓаат во нашата _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-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --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-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));
}

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

Исто така, почнуваме да ги користиме сопствените својства како локални променливи за различни компоненти. На овој начин можеме да го намалиме нашиот компајлиран CSS, да обезбедиме стиловите да не се наследуваат на места како вгнездени табели и да дозволиме некои основни рестилирање и проширување на компонентите на Bootstrap по компилацијата на Sass.

Погледнете ја документацијата на нашата табела за малку увид во тоа како ги користиме CSS променливите .

Ние, исто така, користиме CSS променливи низ нашите мрежи - првенствено за олуци - со поголема употреба на компоненти во иднина.

Примери

CSS променливите нудат слична флексибилност како променливите на Sass, но без потреба од компилација пред да бидат сервирани на прелистувачот. На пример, овде го ресетираме фонтот на нашата страница и стиловите на врски со CSS променливи.

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