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

Mefuta e fapaneng ea likarolo

Re boetse re qala ho sebelisa thepa ea moetlo joalo ka mefuta ea lehae bakeng sa likarolo tse fapaneng. Ka tsela ena re ka fokotsa CSS ea rona e hlophisitsoeng, ra etsa bonnete ba hore setaele ha se futsitsoe libakeng tse kang litafole tse behiloeng, 'me ra 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 .

Re boetse re sebelisa mefuta-futa ea CSS ho pholletsa le marang-rang a rona - haholo-holo bakeng sa li-gutters - ka tšebeliso ea likarolo tse ngata e tlang nakong e tlang.

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. Ha nako e ntse e ea, u ka sebelisa mefuta ena maemong a mang a CSS, hammoho le JavaScript ea hau.