Ba variables ya CSS

Bootstrap ezali na pene na douzaine mibale ya ba propriétés personnalisées ya CSS (variables) na CSS na yango oyo esangisi, na ba douzaines mosusu na nzela mpo na kobongisa personnalisation na base ya composant moko. 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-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));
}

Ba variables ya composant

Tobandi mpe kosalela ba propriétés personnalisées lokola ba variables locales mpo na ba composants ndenge na ndenge. Na ndenge oyo tokoki kokitisa CSS na biso oyo esangisi, kosala ete ba styles ezala na héritage te na bisika lokola ba tableaux encastrés, mpe kopesa nzela na mwa restyling ya base mpe ko extend ba composants ya Bootstrap sima ya compilation ya Sass.

Tala mikanda na biso ya tableau mpo na mwa bososoli ya lolenge nini tozali kosalela ba variables ya CSS .

Tozali mpe kosalela ba variables ya CSS na kati ya ba grille na biso —liboso mpo na ba gouttières —na bosaleli mingi ya ba composants oyo ezali koya na mikolo ekoya.

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