CSS-variabloj
Uzu la CSS kutimajn propraĵoj de Bootstrap por rapida kaj antaŭvida dezajno kaj disvolviĝo.
Bootstrap inkluzivas multajn CSS-proprajn ecojn (variablojn) en sia kompilita CSS por realtempa personigo sen neceso rekompili Sass. Ĉi tiuj havigas facilan aliron al kutime uzataj valoroj kiel niaj etoskoloroj, rompopunktoj kaj primaraj tiparaj stakoj kiam vi laboras en la inspektisto de via retumilo, koda sablokesto aŭ ĝenerala prototipado.
Ĉiuj niaj kutimaj propraĵoj estas antaŭfiksitajbs- por eviti konfliktojn kun triaj CSS.
Radikaj variabloj
Jen la variabloj, kiujn ni inkluzivas (notu, ke la :rootestas bezonata), alireblaj ie ajn la CSS de Bootstrap estas ŝarĝita. Ili troviĝas en nia _root.scssdosiero kaj inkluzivitaj en niaj kompilitaj dist dosieroj.
: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;
}
Komponantaj variabloj
Bootstrap 5 pli kaj pli uzas kutimajn ecojn kiel lokajn variablojn por diversaj komponantoj. Tiel ni reduktas nian kompilitan CSS, certigas, ke stiloj ne estas hereditaj en lokoj kiel nestitaj tabeloj, kaj permesas iun bazan resttigon kaj plilongigon de Bootstrap-komponentoj post Sass-kompilo.
Rigardu nian tabeldokumentaron por iom da kompreno pri kiel ni uzas CSS-variablojn . Niaj navbaroj ankaŭ uzas CSS-variablojn ekde v5.2.0. Ni ankaŭ uzas CSS-variablojn tra niaj kradoj—ĉefe por defluiloj la nova elekt-en CSS-krado —kun pli da komponentuzado venos estonte.
Kiam ajn ebla, ni asignos CSS .navbar-variablojn ĉe la baza komponentnivelo (ekz. por navbar kaj ĝiaj subkomponentoj). Ĉi tio reduktas divenon pri kie kaj kiel personecigi, kaj permesas facilajn modifojn de nia teamo en estontaj ĝisdatigoj.
Prefikso
Plej multaj CSS-variabloj uzas prefikson por eviti koliziojn kun via propra kodbazo. Ĉi tiu prefikso estas aldone al --tio, kio estas bezonata en ĉiu CSS-variablo.
Agordu la prefikson per la $prefixvariablo Sass. Defaŭlte, ĝi estas agordita al bs-(notu la poststreketon).
Ekzemploj
CSS-variabloj ofertas similan flekseblecon al la variabloj de Sass, sed sen la bezono de kompilo antaŭ esti servataj al la retumilo. Ekzemple, ĉi tie ni restarigas la tiparon kaj ligilstilojn de nia paĝo kun CSS-variabloj.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Kradaj rompopunktoj
Dum ni inkluzivas niajn kradromppunktojn kiel CSS-variablojn (krom xs), konsciu, ke CSS-variabloj ne funkcias en amaskomunikilaj demandoj . Ĉi tio estas laŭ dezajno en la CSS-specifo por variabloj, sed eble ŝanĝiĝos en venontaj jaroj kun subteno por env()variabloj. Rigardu ĉi tiun Stack Overflow-respondon por iuj helpemaj ligiloj. Dume, vi povas uzi ĉi tiujn variablojn en aliaj CSS-situacioj, same kiel en via JavaScript.