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

Newidynnau cydran

Mae Bootstrap 5 yn gwneud defnydd cynyddol o briodweddau arfer fel newidynnau lleol ar gyfer gwahanol gydrannau. Fel hyn rydym yn lleihau ein CSS wedi'i lunio, yn sicrhau nad yw arddulliau'n cael eu hetifeddu mewn mannau fel byrddau nythu, ac yn caniatáu rhywfaint o ail-stystio ac ymestyn cydrannau Bootstrap ar ôl llunio Sass.

Edrychwch ar ein dogfennaeth tabl i gael cipolwg ar sut rydym yn defnyddio newidynnau CSS . Mae ein barrau llywio hefyd yn defnyddio newidynnau CSS fel v5.2.0. Rydym hefyd yn defnyddio newidynnau CSS ar draws ein gridiau - yn bennaf ar gyfer cwteri, y grid CSS optio i mewn newydd - gyda mwy o ddefnydd o gydrannau yn y dyfodol.

Lle bynnag y bo modd, byddwn yn aseinio newidynnau CSS ar lefel y gydran sylfaenol (ee, .navbarar gyfer bar llywio a'i is-gydrannau). Mae hyn yn lleihau dyfalu ar ble a sut i addasu, ac yn caniatáu ar gyfer addasiadau hawdd gan ein tîm mewn diweddariadau yn y dyfodol.

Rhagddodiad

Mae'r rhan fwyaf o newidynnau CSS yn defnyddio rhagddodiad i osgoi gwrthdrawiadau â'ch cronfa god eich hun. Mae'r rhagddodiad hwn yn ychwanegol at yr --hyn sy'n ofynnol ar bob newidyn CSS.

Addaswch y rhagddodiad trwy'r $prefixnewidyn Sass. Yn ddiofyn, mae wedi'i osod i bs-(nodwch y llinell doriad).

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.