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

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

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 wana, okoki kosalela ba variables oyo na ba situations mosusu ya CSS, mpe na JavaScript na yo.