CSS caochladairean

Tha Bootstrap a’ toirt a-steach mòran de thogalaichean àbhaisteach CSS (caochladairean) anns an CSS cruinnichte aige airson gnàthachadh fìor-ùine gun fheum air Sass ath-chruinneachadh. Bheir iad sin cothrom furasta air luachan a thathas a’ cleachdadh gu cumanta leithid na dathan cuspaireil againn, puingean brisidh, agus cruachan cruth bun-sgoile nuair a bhios tu ag obair ann an neach-sgrùdaidh do bhrobhsair, ann am bogsa gainmhich còd, no ann an prototyping coitcheann.

Tha na togalaichean àbhaisteach againn uile air an ro-leasachanbs- gus còmhstrithean le CSS treas-phàrtaidh a sheachnadh.

Caochladairean root

Seo na caochladairean a tha sinn a’ toirt a-steach (thoir an aire gu bheil :rootfeum orra) a gheibhear thuige an àite sam bith a tha CSS Bootstrap air a luchdachadh. Tha iad suidhichte anns an _root.scssfhaidhle againn agus air an toirt a-steach do na faidhlichean dist cruinnichte againn.

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

Caochladairean co-phàirteach

Tha Bootstrap 5 a’ sìor fhàs a’ cleachdadh thogalaichean àbhaisteach mar chaochladairean ionadail airson diofar phàirtean. San dòigh seo bidh sinn a’ lughdachadh ar CSS cruinnichte, a’ dèanamh cinnteach nach eil stoidhlichean air an sealbhachadh ann an àiteachan leithid bùird neadachaidh, agus a’ ceadachadh beagan ath-shuidheachadh agus leudachadh de cho-phàirtean Bootstrap às deidh Sass a chuir ri chèile.

Thoir sùil air na sgrìobhainnean bùird againn airson beagan tuigse air mar a tha sinn a’ cleachdadh caochladairean CSS . Bidh na bàraichean-seòlaidh againn cuideachd a’ cleachdadh caochladairean CSS mar v5.2.0. Tha sinn cuideachd a’ cleachdadh caochladairean CSS thairis air na cliathan againn - gu sònraichte airson cutairean a’ ghriod CSS roghnach ùr - le barrachd cleachdaidh de cho-phàirtean ri thighinn san àm ri teachd.

Far an gabh sin dèanamh, sònraichidh sinn caochladairean CSS aig ìre na bun-phàirt (me, .navbarairson navbar agus na fo-phàirtean aige). Bidh seo a’ lughdachadh tomhas càite agus ciamar a nì thu gnàthachadh, agus a’ ceadachadh atharrachaidhean furasta leis an sgioba againn ann an ùrachaidhean san àm ri teachd.

Ro-leasachan

Bidh a’ mhòr-chuid de chaochladairean CSS a’ cleachdadh ro-leasachan gus tubaistean leis a’ chòd-chòd agad fhèin a sheachnadh. Tha an ro-leasachan seo a bharrachd air an --fheadhainn a tha a dhìth air gach caochladair CSS.

Gnàthaich an ro-leasachan tron $prefix​​​​chaochladair Sass. Gu gnàthach, tha e air a shuidheachadh gu bs-(thoir fa-near don dash slaodadh).

Eisimpleirean

Tha caochladairean CSS a’ tabhann sùbailteachd coltach ri caochladairean Sass, ach às aonais feum air cruinneachadh mus tèid a thoirt don bhrobhsair. Mar eisimpleir, an seo tha sinn ag ath-shuidheachadh cruth-clò na duilleige againn agus stoidhlichean ceangail le caochladairean CSS.

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

Briseadh-clèithe

Fhad ‘s a bhios sinn a’ toirt a-steach na puingean brisidh clèithe againn mar chaochladairean CSS (ach a-mhàin xs), bi mothachail nach obraich caochladairean CSS ann an ceistean meadhanan . Tha seo le dealbhadh anns an t-sònrachadh CSS airson caochladairean, ach faodaidh e atharrachadh anns na bliadhnaichean ri teachd le taic airson env()caochladairean. Thoir sùil air an fhreagairt Stack Overflow seo airson ceanglaichean feumail. Anns an eadar-ama, faodaidh tu na caochladairean sin a chleachdadh ann an suidheachaidhean CSS eile, a bharrachd air an JavaScript agad.