Mefuta e fapaneng ea CSS

Bootstrap e kenyelletsa lintho tse ngata tse tloaelehileng tsa CSS (liphetoho) ho CSS ea eona e hlophisitsoeng bakeng sa ho iketsetsa nako ea sebele ntle le tlhoko ea ho bokella Sass hape. Tsena li fana ka phihlello e bonolo ea boleng bo sebelisoang hangata joalo ka mebala ea sehlooho sa rona, li-breakpoints, le mekotla ea litlhaku ea mantlha ha u sebetsa ho mohlahlobi oa sebatli sa hau, "code sandbox", kapa prototyping ka kakaretso.

Mehaho eohle ea rona e hlophisitsoe pelebs- ho qoba likhohlano le batho ba bang ba CSS.

Mefuta e fapaneng ea motso

Mona ke mefuta e fapaneng eo re e kenyelletsang (hlokomela hore :roote ea hlokahala) e ka fumanehang kae kapa kae CSS ea Bootstrap e kentsoeng. Li fumaneha _root.scssfaeleng ea rona 'me li kenyelelitsoe ho lifaele tsa rona tse hlophisitsoeng tsa dist.

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

Mefuta e fapaneng ea likarolo

Bootstrap 5 e ntse e tsoela pele ho sebelisa thepa ea moetlo joalo ka mefuta ea lehae bakeng sa likarolo tse fapaneng. Ka tsela ena re fokotsa CSS ea rona e hlophisitsoeng, re etsa bonnete ba hore setaele ha se futsitsoe libakeng tse kang litafole tse behiloeng, 'me re lumella ho lokisoa le ho atolosoa ha likarolo tsa Bootstrap ka mor'a ho bokelloa ha Sass.

Sheba litokomane tsa rona tsa tafole bakeng sa temohisiso ea hore na re sebelisa mefuta-futa ea CSS joang . Li-navbar tsa rona le tsona li sebelisa mefuta-futa ea CSS ho tloha ho v5.2.0. Re boetse re sebelisa mefuta-futa ea CSS ho pholletsa le li-grids tsa rona-haholo-holo bakeng sa li-gutters grid e ncha ea ho kena ea CSS -e nang le ts'ebeliso e eketsehileng ea likarolo tse tlang nakong e tlang.

Nako le nako ha ho khonahala, re tla abela mefuta-futa ea CSS boemong ba karolo ea motheo (mohlala, .navbarbakeng sa navbar le likaroloana tsa eona). Sena se fokotsa ho hakanya hore na u ka itloaetsa hokae le hore na u ka e etsa joang, 'me se lumella sehlopha sa rona hore ho be bonolo ho etsa lintlafatso nakong e tlang.

Sehlongoapele

Mefuta e mengata ea CSS e sebelisa sehlongoapele ho qoba ho thulana le codebase ea hau. Sehlomathiso sena se tlatselletsa ho --se hlokahalang ho mofuta o mong le o mong oa CSS.

Iketsetse sehlongwapele ka $prefixmokgwa wa Sass. Ka kamehla, e behiloe ho bs-(hlokomela thalo e latelang).

Mehlala

Mefuta e fapaneng ea CSS e fana ka phetoho e tšoanang ho mefuta ea Sass, empa ntle le tlhoko ea ho bokella pele e fuoa sebatli. Mohlala, mona re seta bocha fonte ea leqephe la rona le lihokelo tsa setaele ka mefuta ea CSS.

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

Li-breakpoints tsa grid

Ha re ntse re kenyelletsa li-breakpoints tsa grid e le mefuta-futa ea CSS (ntle le bakeng sa xs), hlokomela hore mefuta-futa ea CSS ha e sebetse lipotsong tsa mecha ea litaba . Sena se entsoe ka moralo ho CSS spec bakeng sa mefuta e fapaneng, empa e ka fetoha lilemong tse tlang ka tšehetso ea env()mefuta e fapaneng. Sheba karabo ena ea Stack Overflow bakeng sa lihokelo tse thusang. Khabareng, u ka sebelisa mefuta ena maemong a mang a CSS, hammoho le JavaScript ea hau.