CSS ƒe tɔtrɔwo
Zã Bootstrap ƒe CSS ƒe nɔnɔme tɔxɛwo hena aɖaŋuwɔwɔ kple ŋgɔyiyi kabakaba kple ŋgɔyiyi.
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-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;
}
Kpeɖeŋutɔ ƒe tɔtrɔwo
Míele egɔme dzem hã be míazã nɔnɔme tɔxɛwo abe teƒea ƒe tɔtrɔwo na akpa vovovowo ene. Mɔ sia dzi míate ŋu aɖe míaƒe CSS si míeƒo ƒu la dzi akpɔtɔ, akpɔ egbɔ be womexɔ atsyãwo ƒe dome le teƒewo abe kplɔ̃ siwo wotsɔ ƒo ƒui ene o, eye míaɖe mɔ ɖe Bootstrap ƒe akpawo ƒe tɔtrɔ 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íele CSS ƒe tɔtrɔwo hã zãm le míaƒe grids katã me—vevietɔ na gutters—kple akpa geɖe zazã le etsɔme.
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.