Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
in English

CSS varyab

Sèvi ak pwopriyete koutim CSS Bootstrap pou konsepsyon ak devlopman rapid ak pi devan.

Nan paj sa a

Bootstrap gen ladan anpil pwopriyete CSS (varyab) nan CSS konpile li yo pou personnalisation an tan reyèl san yo pa bezwen rekonpile Sass. 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.

Varyab rasin

Isit la yo se varyab yo nou enkli (note 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-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;
}

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—sitou 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);
}

Griy breakpoints

Pandan ke nou enkli pwen kadriyaj nou yo kòm varyab CSS (eksepte pou xs), ou dwe konnen ke varyab CSS pa travay nan demann medya yo . Sa a se pa konsepsyon nan espèk CSS pou varyab, men li ka chanje nan ane k ap vini yo ak sipò pou env()varyab. Tcheke repons Stack Overflow sa a pou kèk lyen itil. Antretan, ou ka itilize varyab sa yo nan lòt sitiyasyon CSS, osi byen ke nan JavaScript ou.