CSS ƒe tɔtrɔwo

Bootstrap de CSS ƒe nɔnɔme tɔxɛ geɖewo (trɔtrɔwo) eƒe CSS si woƒo ƒu me hena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔ evɔ mahiã be woagbugbɔ aƒo Sass nu ƒu o. Esiawo naa mɔnukpɔkpɔ bɔbɔe be nàkpɔ asixɔxɔ siwo wozãna zi geɖe abe míaƒe tanya ƒe amadedewo, breakpoints, kple ŋɔŋlɔdzesi gbãtɔwo ƒe ƒuƒoƒo ne èle dɔ wɔm le wò web-browser ƒe inspector, code sandbox, alo general prototyping me.

Wotsɔa míaƒe nɔnɔme tɔxɛwo katã doa ŋgɔ nabs- be míaƒo asa na masɔmasɔ kple ame etɔ̃lia ƒe CSS.

Ke ƒe tɔtrɔwo

Trɔtrɔ siwo míetsɔ de eme (de dzesii be the :rootis required) siwo woateŋu akpɔ le afisiafi si Bootstrap ƒe CSS la le lae nye esi. Wole míaƒe _root.scssfaɛl me eye wole míaƒe dist faɛl siwo míeƒo ƒu la me.

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

Kpeɖeŋutɔ ƒe tɔtrɔwo

Bootstrap 5 le nɔnɔme tɔxɛwo zãm geɖe wu abe teƒea ƒe tɔtrɔwo na akpa vovovowo ene. Mɔ sia dzi míeɖea míaƒe CSS si míeƒo ƒu la dzi kpɔtɔna, míekpɔa egbɔ be womexɔ atsyãwo ƒe dome le teƒewo abe kplɔ̃ siwo wotsɔ ƒo ƒui ene o, eye míeɖea mɔ ɖe Bootstrap ƒe akpa aɖewo ƒe nɔnɔme yeye kple kekeɖenu vevi aɖewo ŋu le Sass ƒe nuƒoƒoƒu vɔ megbe.

Lé ŋku ɖe míaƒe kplɔ̃dzi nuŋlɔɖiwo ŋu hena gɔmesese aɖewo le alesi míele CSS tɔtrɔwo zãm ŋu . Míaƒe navbarwo hã zãa CSS tɔtrɔwo abe v5.2.0 ene. Míele CSS tɔtrɔwo hã zãm le míaƒe grids katã me—vevietɔ na gutters the new opt-in CSS grid —kple akpa geɖe zazã le etsɔme.

Ɣesiaɣi si wòanya wɔ la, míade dɔ asi na CSS ƒe tɔtrɔwo le gɔmeɖoanyi ƒe akpa ƒe ɖoɖo nu (le kpɔɖeŋu me, .navbarna navbar kple eƒe akpa suewo). Esia ɖea alesi woatrɔ asi le eŋu le kple alesi woatrɔ asi le eŋu ƒe akɔntabubu dzi kpɔtɔna, eye wònaa míaƒe ƒuƒoƒoa te ŋu trɔa asi le eŋu bɔbɔe le asitɔtrɔ siwo woawɔ le etsɔme me.

Ŋgɔdonya

CSS ƒe tɔtrɔ akpa gãtɔ zãa ŋgɔdonya tsɔ ƒoa asa na ƒoƒo kple wò ŋutɔ wò codebase. Prefix sia kpe ɖe --that's required on every CSS variable ŋu.

Trɔ asi le ŋgɔdonya ŋu to $prefixSass ƒe tɔtrɔ dzi. Le gɔmedzedzea me la, woɖoe ɖe bs-(de dzesi fli si le megbe).

Kpɔɖeŋuwo

CSS ƒe tɔtrɔwo naa asitɔtrɔ le nɔnɔmewo ŋu abe Sass ƒe tɔtrɔwo ene, gake mehiã be woaƒo wo nu ƒu hafi atsɔ wo ana web-browser la o. Le kpɔɖeŋu me, afisia míele míaƒe axaa ƒe nuŋɔŋlɔ kple kadodo ƒe atsyãwo gbugbɔ ɖom kple CSS tɔtrɔwo.

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

Grid ƒe gbagbãƒewo

Togbɔ be míetsɔ míaƒe grid breakpoints de eme abe CSS tɔtrɔwo ene (negbe xs), nyae be CSS tɔtrɔwo mewɔa dɔ le media biabiawo me o . Esia nye to ɖoɖowɔwɔ me le CSS spec na tɔtrɔwo, gake ateŋu atrɔ le ƒe siwo gbɔna me kple kpekpeɖeŋu na env()tɔtrɔwo. Kpɔ Stack Overflow ƒe ŋuɖoɖo sia hena kadodo aɖewo siwo akpe ɖe ŋuwò. Le ɣeyiɣi sia me la, àteŋu azã tɔtrɔ siawo le CSS nɔnɔme bubuwo me, kpakple le wò JavaScript me.