Ba variables ya CSS

Bootstrap ezali na ba propriétés personnalisées ya CSS mingi (variables) na CSS na yango oyo esangisi mpo na personnalisation en temps réel sans besoin ya ko recompiler Sass. Yango epesaka accès facile na ba valeurs oyo esalemaka mingi lokola ba couleurs ya thème na biso, ba points de rupture, na ba stacks ya ba fonts ya liboso tango ozali kosala na inspecteur ya navigateur na yo, sandbox ya code, to prototyping général.

Ba propriétés na biso nionso ya personnalisé ezali préfixé nabs- pona ko éviter ba conflits na CSS ya troisième partie.

Ba variables ya misisa

Tala ba variables oyo tozali ko kotisa (notez que le :rootezali requis) oyo ekoki ko accéder partout que CSS ya Bootstrap ezali chargé. Bazali na kati ya _root.scssfichier na biso mpe ekotisami na ba fichiers dist na biso oyo esangisi.

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

Ba variables ya composant

Bootstrap 5 ezali kosala mingi mingi kosalela ba propriétés personnalisées lokola ba variables locales mpo na ba composants ndenge na ndenge. Na ndenge oyo tokitisaka CSS na biso oyo to compilé, tosala que ba styles e hériter te na bisika lokola ba tableaux encastrés, mpe to permettre mua restyling ya base mpe extending ya ba composants ya Bootstrap après compilation ya Sass.

Tala mikanda na biso ya tableau mpo na mwa bososoli ya lolenge nini tozali kosalela ba variables ya CSS . Ba navbars na biso pe esalelaka ba variables CSS à partir ya v5.2.0. Tozali mpe kosalela ba variables ya CSS na kati ya ba grille na biso —liboso mpo na ba gouttières grille ya sika ya opt-in CSS —na bosaleli mingi ya ba composants oyo ezali koya na mikolo ekoya.

Soki likoki ezali, tokopesa ba variables ya CSS na niveau ya composante ya base (par exemple, .navbarpona navbar na ba sous-composants na yango). Yango ekitisaka devinette na esika mpe ndenge nini kosala personnalisation, mpe epesaka nzela na ba modifications faciles na équipe na biso na ba mises à jour oyo ekoya.

Liboso ya maloba

Ba variables mingi ya CSS esalelaka préfixe mpo na koboya ba collisions na codebase na yo moko. Prefixe oyo ezali en plus ya --oyo esengeli na variable nionso ya CSS.

Personnaliser préfixe na nzela ya $prefixvariable Sass. Na ndenge ya libela, etiamaki na bs-(yebá na esika oyo ezali nsima).

Bandakisa

Ba variables ya CSS epesaka flexibilité ya ndenge moko na ba variables ya Sass, kasi sans besoin ya compilation avant ya ko servir na navigateur. Par exemple, awa tozali ko réinitialiser ba styles ya fonte na lien ya page na biso na ba variables CSS.

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

Ba points ya rupture ya grille

Atako tozali kokɔtisa ba points de rupture na biso ya grille lokola ba variables ya CSS (longola kaka xs), yeba ete ba variables ya CSS esalaka te na ba requêtes ya media . Yango ezali na nzela ya bokeli na spec ya CSS mpo na ba variables, kasi ekoki kobongwana na bambula oyo ezali koya na lisungi mpo na env()ba variables. Tala eyano oyo ya Stack Overflow mpo na mwa ba liens ya lisungi. Na kati ya ntango yango, okoki kosalela ba variables oyo na ba situations mosusu ya CSS, mpe na JavaScript na yo.