Impinduka za CSS
Koresha ibikoresho bya CSS ya Bootstrap kugirango wihute kandi ureba imbere igishushanyo mbonera.
Bootstrap ikubiyemo ibintu byinshi bya CSS byihariye (variable) muri CSS yakusanyirijwe mugihe nyacyo cyo kwihitiramo bidakenewe gusubiramo Sass. Ibi bitanga uburyo bworoshye kubintu bisanzwe bikoreshwa nkamabara yinsanganyamatsiko, gucamo, hamwe nimyandikire yibanze mugihe ukorera mugenzuzi wa mushakisha yawe, agasanduku kode, cyangwa prototyping rusange.
Imitungo yacu yose yihariye yashyizwe hamwebs- kugirango twirinde amakimbirane nundi muntu CSS.
Impinduka zumuzi
Dore impinduka dushyiramo (menya ko :rootibisabwa) zishobora kuboneka ahantu hose CSS ya Bootstrap yuzuye. Ziri muri _root.scssdosiye yacu kandi yashyizwe muri dosiye zacu za kure.
: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;
}
Ibihinduka
Bootstrap 5 igenda ikoresha imitungo yihariye nkibihinduka byaho mubice bitandukanye. Ubu buryo turagabanya CSS twakusanyije, tumenye neza ko imisusire itarazwe ahantu nkameza yubatswe, kandi twemerera gusubiramo no kwagura ibice bya Bootstrap nyuma yo gukusanya Sass.
Gira icyo ureba kumeza yacu kugirango tumenye uburyo dukoresha impinduka za CSS . Navbars yacu nayo ikoresha CSS ihinduka nkuko v5.2.0. Turimo kandi dukoresha impinduka za CSS murwego rwacu - cyane cyane kumiyoboro mishya ya opt-in ya gride ya CSS - hamwe nibindi bikoresho bizakoreshwa mugihe kizaza.
Igihe cyose bishoboka, tuzagenera CSS impinduka kurwego rwibanze (urugero, .navbarkuri navbar nibice byayo). Ibi bigabanya gukeka aho nuburyo bwo kwihitiramo, kandi bikemerera guhinduka byoroshye nitsinda ryacu mugihe kizaza.
Ijambo ryibanze
Impinduka nyinshi za CSS zikoresha prefix kugirango wirinde kugongana na codebase yawe. Iyi prefix yiyongereye --kubisabwa kuri buri CSS ihinduka.
Hindura prefix ukoresheje $prefiximpinduka ya Sass. Mburabuzi, yashyizweho kuri bs-(andika umurongo ukurikira).
Ingero
Impinduka za CSS zitanga ihinduka risa nimpinduka za Sass, ariko bidakenewe gukusanya mbere yo guhabwa mushakisha. Kurugero, hano turimo dusubiramo imyandikire yurupapuro rwacu hamwe nuburyo bwo guhuza hamwe na CSS ihinduka.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Imiyoboro ya interineti
Mugihe dushyiramo ibice bya grid nkibihinduka bya CSS (usibye xs), menya ko CSS ihinduka idakora mubibazo byitangazamakuru . Nibishushanyo mbonera bya CSS kubihinduka, ariko birashobora guhinduka mumyaka iri imbere hamwe ninkunga kubihinduka env(). Reba iki gisubizo cya Stack Kurenga kubisobanuro bimwe bifasha. Hagati aho, urashobora gukoresha izi mpinduka mubindi bihe bya CSS, kimwe no muri JavaScript yawe.