CSS oniyipada
Lo awọn ohun-ini aṣa CSS Bootstrap fun apẹrẹ ti n wo ni iyara ati siwaju ati idagbasoke.
Bootstrap pẹlu ọpọlọpọ awọn ohun-ini aṣa CSS (awọn oniyipada) ninu CSS rẹ ti o ṣajọ fun isọdi akoko gidi laisi iwulo lati ṣajọpọ Sass. Iwọnyi pese iraye si irọrun si awọn iye ti a lo nigbagbogbo bii awọn awọ akori wa, awọn aaye fifọ, ati awọn akopọ fonti akọkọ nigbati o n ṣiṣẹ ni olubẹwo ẹrọ aṣawakiri rẹ, apoti iyanrin koodu kan, tabi afọwọṣe gbogbogbo.
Gbogbo awọn ohun-ini aṣa wa jẹ iṣaju pẹlubs- lati yago fun awọn ija pẹlu CSS ẹnikẹta.
Gbongbo oniyipada
Eyi ni awọn oniyipada ti a pẹlu (ṣe akiyesi pe o :rootnilo) ti o le wọle si nibikibi Bootstrap's CSS ti kojọpọ. Wọn wa ninu _root.scssfaili wa ati pe o wa ninu awọn faili disiki ti a ṣajọ.
: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;
}
Awọn oniyipada paati
A tun bẹrẹ lati lo awọn ohun-ini aṣa bi awọn oniyipada agbegbe fun ọpọlọpọ awọn paati. Ni ọna yii a le dinku CSS ti a kojọpọ, rii daju pe awọn aṣa ko ni jogun ni awọn aaye bii awọn tabili itẹle, ati gba diẹ ninu isọdọtun ipilẹ ati faagun awọn paati Bootstrap lẹhin akopọ Sass.
Wo iwe tabili wa fun oye diẹ si bi a ṣe nlo awọn oniyipada CSS .
A tun nlo awọn oniyipada CSS kọja awọn akoj wa — ni akọkọ fun awọn gọta—pẹlu lilo paati diẹ sii ti nbọ ni ọjọ iwaju.
Awọn apẹẹrẹ
Awọn oniyipada CSS nfunni ni irọrun ti o jọra si awọn oniyipada Sass, ṣugbọn laisi iwulo fun akopọ ṣaaju ki o to ṣiṣẹ si ẹrọ aṣawakiri naa. Fún àpẹrẹ, níhìn-ín a tún ń ṣàtúntò fọ́ntì ojú-ewé wa àti àwọn ọ̀nà ìsopọ̀ pẹ̀lú àwọn oniyipada CSS.
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--bs-blue);
}
akoj breakpoints
Lakoko ti a ṣafikun awọn aaye fifọ akoj wa bi awọn oniyipada CSS (ayafi fun xs), ṣe akiyesi pe awọn oniyipada CSS ko ṣiṣẹ ninu awọn ibeere media . Eyi jẹ nipasẹ apẹrẹ ni pato CSS fun awọn oniyipada, ṣugbọn o le yipada ni awọn ọdun ti n bọ pẹlu atilẹyin fun env()awọn oniyipada. Ṣayẹwo idahun Stack Overflow yii fun diẹ ninu awọn ọna asopọ iranlọwọ. Ni akoko diẹ, o le lo awọn oniyipada wọnyi ni awọn ipo CSS miiran, bakannaa ninu JavaScript rẹ.