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 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-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;
}
Awọn oniyipada paati
Bootstrap 5 n pọ si ni lilo awọn ohun-ini aṣa bi awọn oniyipada agbegbe fun ọpọlọpọ awọn paati. Ni ọna yii a 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 . Awọn navbars wa tun lo awọn oniyipada CSS bi ti v5.2.0. A tun n lo awọn oniyipada CSS kọja awọn akoj wa—nipataki fun awọn gọọti ijade-ni titun CSS grid — pẹlu lilo paati diẹ sii nbọ ni ọjọ iwaju.
Nigbakugba ti o ba ṣee ṣe, a yoo fi awọn oniyipada CSS si ipele paati ipilẹ (fun apẹẹrẹ, .navbarfun navbar ati awọn ẹya-ara rẹ). Eyi dinku lafaimo lori ibiti ati bii o ṣe le ṣe akanṣe, ati gba laaye fun awọn iyipada irọrun nipasẹ ẹgbẹ wa ni awọn imudojuiwọn ọjọ iwaju.
Apejuwe
Pupọ julọ awọn oniyipada CSS lo asọtẹlẹ kan lati yago fun ikọlu pẹlu koodu koodu tirẹ. Ipilẹṣẹ ìpele yii wa ni afikun si --eyi ti o nilo lori gbogbo oniyipada CSS.
Ṣe akanṣe ìpele nipasẹ $prefixoniyipada Sass. Nipa aiyipada, o ti ṣeto si bs-(ṣe akiyesi dash itọpa).
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ọ. Lakoko, o le lo awọn oniyipada wọnyi ni awọn ipo CSS miiran, bakannaa ninu JavaScript rẹ.