CSS varyab

Bootstrap gen ladan anviwon de douzèn pwopriyete koutim CSS (varyab) nan CSS konpile li yo, ak plizyè douzèn plis sou wout pou personnalisation amelyore sou yon baz pou chak eleman. Sa yo bay aksè fasil nan valè yo souvan itilize tankou koulè tèm nou yo, pwen breakpoints, ak pil font prensipal lè w ap travay nan enspektè navigatè w la, yon sandbox kòd, oswa pwototip jeneral.

Tout pwopriyete koutim nou yo gen prefiksbs- pou evite konfli ak CSS twazyèm pati.

Rasin varyab

Isit la yo se varyab yo nou enkli (remake byen ke :rootse obligatwa) ki ka jwenn aksè nenpòt kote CSS Bootstrap a chaje. Yo sitiye nan _root.scssdosye nou an epi yo enkli nan dosye konpile dist nou yo.

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

Varyab konpozan

Nou ap tou kòmanse sèvi ak pwopriyete koutim kòm varyab lokal pou divès konpozan. Nan fason sa a nou ka diminye CSS konpile nou an, asire ke estil yo pa eritye nan kote tankou tab enbrike, epi pèmèt kèk restyling debaz ak pwolonje nan eleman Bootstrap apre konpilasyon Sass.

Fè yon gade nan dokiman tablo nou an pou kèk insight sou fason nou ap itilize CSS varyab .

Nou ap itilize tou varyab CSS atravè kadriyaj nou yo—premyèman pou goutyè—ak plis itilizasyon konpozan ap vini nan lavni.

Egzanp yo

Varyab CSS yo ofri menm jan fleksibilite ak varyab Sass yo, men san yo pa bezwen konpilasyon anvan yo sèvi nan navigatè a. Pou egzanp, isit la nou ap reset font paj nou an ak estil lyen ak varyab CSS.

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