Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
Check
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.

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

Varyab konpozan

Bootstrap 5 ap de pli zan pli sèvi ak pwopriyete koutim kòm varyab lokal pou divès konpozan. Nan fason sa a nou redwi 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 . Navbar nou yo itilize tou varyab CSS apati v5.2.0. Nou ap itilize tou varyab CSS atravè kadriyaj nou yo—premyèman pou goutyè nouvo kadriyaj CSS opt-in— ak plis itilizasyon konpozan ap vini nan lavni.

Chak fwa sa posib, nou pral bay varyab CSS nan nivo eleman debaz (pa egzanp, .navbarpou navbar ak sub-konpozan li yo). Sa a diminye devine sou ki kote ak ki jan yo Customize, epi pèmèt modifikasyon fasil pa ekip nou an nan mizajou nan lavni.

Prefiks

Pifò varyab CSS yo itilize yon prefiks pou evite kolizyon ak pwòp baz kod ou. Prefiks sa a se anplis de sa --ki nesesè sou chak varyab CSS.

Customize prefiks la atravè $prefixvaryab Sass la. Pa default, li mete sou bs-(nòt priz final la).

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 mete 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 la pou varyab, men li ka chanje nan ane k ap vini 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.