CSS zvakasiyana

Bootstrap inosanganisira akawanda eCSS tsika zvivakwa (zvinosiyana) mune yayo yakaunganidzwa CSS yechokwadi-nguva yekusarudzika pasina chikonzero chekudzorera Sass. Izvi zvinopa nyore kuwana kune anowanzo shandiswa kukosha senge yedu dingindira mavara, mabreakpoints, uye ekutanga font stacks paunenge uchishanda mubrowser yako inspector, kodhi sandbox, kana general prototyping.

Yese yedu tsika zvivakwa prefixedbs- nekudzivirira kunetsana nevechitatu bato CSS.

Root variables

Heano mavhezheni atinosanganisa (ona kuti izvo :rootzvinodiwa) zvinogona kuwanikwa chero kupi Bootstrap's CSS yakarodha. Iwo ari _root.scssmufaira redu uye anosanganisirwa mune edu akanyorwa dist mafaera.

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

Component variables

Bootstrap 5 iri kuwedzera kushandisa zvivakwa zvetsika sezvimiro zvemuno zveakasiyana zvikamu. Nenzira iyi tinodzikisira CSS yedu yakaunganidzwa, tive nechokwadi chekuti masitaera haagarwe munzvimbo dzakaita sematafura akaiswa matendere, uye tinobvumira kumwe kugadziridza zvakare uye kuwedzera kweBootstrap zvikamu mushure meSass kuunganidzwa.

Tarisa uone zvinyorwa zvetafura yedu kuti uwane nzwisiso yemashandisiro atinoita CSS zvinosiyana . Mabhawa edu anoshandisawo CSS vhezheni sev5.2.0. Isu tiri kushandisa zvakare CSS zvinosiyana pane yedu grids-kunyanya kune magutter iyo itsva opt-in CSS grid - ine zvimwe zvekushandisa zvinouya mune ramangwana.

Pese pazvinogoneka, tinopa CSS zvinosiyana padanho rechikamu (semuenzaniso, .navbarnavbar uye madiki-zvikamu). Izvi zvinoderedza kufungidzira kuti papi uye sei kugadzirisa, uye zvinobvumira kugadziridzwa kuri nyore nechikwata chedu mune ramangwana zvigadziriso.

Prefix

Zvizhinji zveCSS zvinosiyana zvinoshandisa prefix kudzivirira kudhumhana necodebase yako. Ichi chivakashure chiri kuwedzera kune --icho chinodiwa pane yega yega CSS shanduko.

Gadzirisa prefix kuburikidza $prefixneSass kusiyanisa. Nekumisikidza, yakaiswa ku bs-(ona iyo trailing dash).

Mienzaniso

CSS zvinosiyana zvinopa kuchinjika kwakafanana kune maSass akasiyana, asi pasina kudikanwa kwekubatanidza isati yapihwa kune browser. Semuenzaniso, pano tiri kusetazve mafonti epeji redu uye masitaera ekubatanidza ane CSS zvinosiyana.

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

Grid breakpoints

Nepo isu tichisanganisira yedu grid breakpoints seCSS zvinosiyana (kunze kwe xs), ziva kuti maCSS akasiyana haashande mumidhiya mibvunzo . Izvi ndezvekugadzirwa muCSS spec yezvakasiyana, asi zvinogona kuchinja mumakore anouya nerutsigiro env()rwezvakasiyana. Tarisa iyi Stack Overflow mhinduro kune mamwe anobatsira malink. Zvichakadaro, unogona kushandisa izvi zvakasiyana mune mamwe mamiriro eCSS, pamwe neJavaScript yako.