Newidynnau CSS

Mae Bootstrap yn cynnwys llawer o briodweddau arfer CSS (newidynnau) yn ei CSS a luniwyd ar gyfer addasu amser real heb yr angen i ail-grynhoi Sass. Mae'r rhain yn darparu mynediad hawdd i werthoedd a ddefnyddir yn gyffredin fel ein lliwiau thema, torbwyntiau, a phentyrrau ffontiau cynradd wrth weithio yn arolygydd eich porwr, blwch tywod cod, neu brototeipio cyffredinol.

Mae ein holl eiddo personol wedi'u rhagddodi â nhwbs- er mwyn osgoi gwrthdaro â CSS trydydd parti.

Newidynnau gwraidd

Dyma'r newidynnau rydyn ni'n eu cynnwys (sylwch fod :rooteu hangen) y gellir eu cyrchu unrhyw le y mae CSS Bootstrap wedi'i lwytho. Maent wedi'u lleoli yn ein _root.scssffeil ac wedi'u cynnwys yn ein ffeiliau dist a luniwyd.

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

Newidynnau cydran

Rydym hefyd yn dechrau defnyddio priodweddau arfer fel newidynnau lleol ar gyfer gwahanol gydrannau. Fel hyn gallwn leihau ein CSS wedi'i llunio, sicrhau nad yw arddulliau'n cael eu hetifeddu mewn mannau fel byrddau nythu, a chaniatáu rhywfaint o ailosod ac ymestyn cydrannau Bootstrap ar ôl llunio Sass.

Edrychwch ar ein dogfennaeth tabl i gael cipolwg ar sut rydym yn defnyddio newidynnau CSS .

Rydym hefyd yn defnyddio newidynnau CSS ar draws ein gridiau - ar gyfer cwteri yn bennaf - gyda mwy o ddefnydd o gydrannau yn y dyfodol.

Enghreifftiau

Mae newidynnau CSS yn cynnig hyblygrwydd tebyg i newidynnau Sass, ond heb fod angen eu crynhoi cyn eu cyflwyno i'r porwr. Er enghraifft, dyma ni'n ailosod ffont ein tudalen ac arddulliau cyswllt gyda newidynnau CSS.

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

Torbwyntiau grid

Er ein bod yn cynnwys ein torbwyntiau grid fel newidynnau CSS (ac eithrio xs), byddwch yn ymwybodol nad yw newidynnau CSS yn gweithio mewn ymholiadau cyfryngau . Mae hyn yn ôl dyluniad yn y fanyleb CSS ar gyfer newidynnau, ond gall newid yn y blynyddoedd i ddod gyda chefnogaeth i env()newidynnau. Edrychwch ar yr ateb Stack Overflow hwn am rai dolenni defnyddiol. Yn y cyfamser, gallwch ddefnyddio'r newidynnau hyn mewn sefyllfaoedd CSS eraill, yn ogystal ag yn eich JavaScript.