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

Component variables

Tave kutangawo kushandisa zvivakwa zvetsika sezvimiro zvenzvimbo kune akasiyana mazvikamu. Nenzira iyi tinogona kudzikisa yedu yakaunganidzwa CSS, ive nechokwadi kuti masitaera haagarwe munzvimbo dzakaita sematafura akaiswa matendere, uye kubvumira kumwe kugadziridza zvakare uye kuwedzera kweBootstrap zvikamu mushure meSass kuunganidzwa.

Tarisa uone zvinyorwa zvetafura yedu kuti uwane nzwisiso yemashandisiro atinoita CSS zvinosiyana .

Isu tiri kushandisawo maCSS akasiyana pane yedu grids-kunyanya kune magutter-nekuwedzera kwechikamu kushandiswa kuri kuuya mune ramangwana.

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. Mukati menguva, unogona kushandisa izvi zvakasiyana mune mamwe mamiriro eCSS, pamwe neJavaScript yako.