Ụdị mgbanwe CSS
Jiri njirimara omenala Bootstrap CSS maka imewe na mmepe ngwa ngwa na n'ihu.
Bootstrap gụnyere ọtụtụ njirimara omenala CSS (mgbanwe) na CSS achịkọtara maka nhazi oge na-enweghị mkpa ịchịkọta Sass. Ndị a na-enye ohere dị mfe iji nweta ụkpụrụ ndị a na-ejikarị dị ka agba isiokwu anyị, ebe nkwụsịtụ, na nchịkọta mkpụrụedemede bụ isi mgbe ị na-arụ ọrụ n'ime onye nyocha ihe nchọgharị gị, igbe igbe koodu, ma ọ bụ ihe nlegharị anya izugbe.
A na-edobe nghazi omenala anyị niile kabs- ọ ghara inwe esemokwu anyị na CSS ndị ọzọ.
Mgbọrọgwụ mgbanwe
Nke a bụ mgbanwe ndị anyị gụnyere (rịba ama na :rootachọrọ) nke enwere ike ịnweta ebe ọ bụla Bootstrap's CSS na-ebu. Ha dị na _root.scssfaịlụ anyị ma tinye ha na faịlụ dist anyị achịkọtara.
: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;
}
Akụkụ akụkụ
Anyị na-amalitekwa iji akụrụngwa omenala dị ka mgbanwe mpaghara maka ihe dị iche iche. N'ụzọ dị otú a, anyị nwere ike ibelata CSS anyị achịkọtara, hụ na anaghị eketa ụdị n'ebe dị ka tebụl akwu, ma kwe ka ụfọdụ nhazigharị na ịgbatị ngwa Bootstrap ka emechara Sass.
Leba anya na akwụkwọ tebụl anyị maka ụfọdụ nghọta ka anyị si eji mgbanwe CSS .
Anyị na-ejikwa mgbanwe CSS n'ofe grid anyị—nke izizi maka gọọlụ—nwere ihe akụrụngwa ndị ọzọ na-abịa n'ọdịnihu.
Ihe atụ
Ụdị mgbanwe CSS na-enye ụdị mgbanwe mgbanwe nke Sass, mana na-enweghị mkpa nke nchịkọta tupu e zigara ya na ihe nchọgharị ahụ. Dịka ọmụmaatụ, ebe a, anyị na-emegharị font ibe anyị yana njikọ na mgbanwe CSS.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
Ebe nkwụsịtụ grid
Mgbe anyị na-agụnye ebe nkwụsịtụ grid anyị dị ka mgbanwe CSS (ma e wezụga xs), mara na mgbanwe CSS adịghị arụ ọrụ na ajụjụ mgbasa ozi . Nke a bụ site na imewe na CSS spec maka mgbanwe, mana ọ nwere ike gbanwee n'afọ ndị na-abịa site na nkwado maka env()mgbanwe. Lelee azịza Stack Overflow a maka njikọ ụfọdụ na-enyere aka. Ka ọ dị ugbu a, ịnwere ike iji mgbanwe ndị a na ọnọdụ CSS ndị ọzọ, yana Javascript gị.