Zosintha za CSS

Bootstrap imaphatikizapo zinthu zambiri za CSS (zosinthika) mu CSS yake yopangidwa kuti isinthe nthawi yeniyeni popanda kufunika kobwezeranso Sass. Izi zimapereka mwayi wosavuta kuzinthu zomwe zimagwiritsidwa ntchito nthawi zambiri monga mitundu yathu yamutu, ma breakpoint, ndi mafonti oyambira mukamagwira ntchito yoyang'anira msakatuli wanu, bokosi la sandbox, kapena ma prototyping wamba.

Makhalidwe athu onse amakhazikitsidwabs- kuti apewe mikangano ndi CSS yachitatu.

Zosintha za mizu

Nawa zosintha zomwe timaphatikiza (zindikirani kuti :rootndizofunikira) zomwe zitha kupezeka kulikonse komwe Bootstrap's CSS yadzaza. Zili mufayilo yathu _root.scssndipo zikuphatikizidwa m'mafayilo athu opangidwa ndi dist.

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

Zosintha zamagulu

Bootstrap 5 ikugwiritsa ntchito kwambiri katundu wamba ngati zosintha zapagawo zosiyanasiyana. Mwanjira iyi timachepetsa CSS yathu yopangidwa, kuwonetsetsa kuti masitayelo satengera malo ngati matebulo okhala ndi zisa, ndikulola kukonzanso ndikukulitsa zida za Bootstrap pambuyo pophatikiza Sass.

Yang'anani pa tebulo lathu zolembedwa kuti muzindikire momwe timagwiritsira ntchito zosintha za CSS . Ma navbar athu amagwiritsanso ntchito zosintha za CSS monga za v5.2.0. Tikugwiritsanso ntchito zosintha za CSS pama gridi athu-makamaka magutter opt-in CSS grid - ndikugwiritsa ntchito zina zambiri mtsogolo.

Ngati n'kotheka, tidzagawa zosintha za CSS pagawo loyambira (mwachitsanzo, .navbarpa navbar ndi zigawo zake zazing'ono). Izi zimachepetsa kulingalira za komwe mungasinthe komanso momwe mungasinthire, ndikulola kuti gulu lathu lisinthidwe mosavuta pazosintha zamtsogolo.

Mawu Oyamba

Mitundu yambiri ya CSS imagwiritsa ntchito mawu oyamba kuti apewe kugundana ndi codebase yanu. Chiyambi ichi ndikuwonjezera pa --zomwe zimafunikira pakusintha kulikonse kwa CSS.

Sinthani mwamakonda anu poyambira kudzera pakusintha kwa $prefixSass. Mwachikhazikitso, yakhazikitsidwa ku bs-(onani mzere wotsatira).

Zitsanzo

Zosintha za CSS zimapereka kusinthasintha kofanana ndi zosintha za Sass, koma popanda kufunika kophatikiza musanatumizidwe kwa osatsegula. Mwachitsanzo, apa tikukhazikitsanso mafonti atsamba lathu ndi masitayelo olumikizirana ndi CSS.

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

Grid breakpoints

Ngakhale tikuphatikiza ma breakpoints athu a gridi monga zosintha za CSS (kupatula xs), dziwani kuti zosintha za CSS sizigwira ntchito pamafunso azama media . Izi ndizomwe zimapangidwa mu CSS spec zamitundumitundu, koma zitha kusintha m'zaka zikubwerazi ndi chithandizo env()chamitundumitundu. Onani yankho la Stack Overflow la maulalo othandiza. Pakadali pano, mutha kugwiritsa ntchito zosinthazi muzochitika zina za CSS, komanso mu JavaScript yanu.