Mefuta e fapaneng ea CSS

Bootstrap e kenyelletsa hoo e ka bang likarolo tse peli tsa thepa ea CSS (mefuta e fapaneng) ho CSS ea eona e hlophisitsoeng, e nang le tse ling tse ngata tse ntseng li le teng bakeng sa ntlafatso e ntlafalitsoeng motheong oa karolo ka 'ngoe. 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-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --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));
}

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