Athróga CSS

Áiríonn Bootstrap go leor airíonna saincheaptha CSS (athróga) ina CSS tiomsaithe le haghaidh saincheaptha fíor-ama gan gá le Sass a ath-thiomsú. Soláthraíonn siad seo rochtain éasca ar luachanna a úsáidtear go coitianta ar nós ár ndathanna téama, ár bristephointí, agus stoic chló príomhúla agus tú ag obair i gcigire do bhrabhsálaí, i mbosca gainimh cód, nó i bhfréamhshamhlú ginearálta.

Déantar ár n-airíonna saincheaptha go léir a réamhshocrúbs- chun coinbhleachtaí le CSS tríú páirtí a sheachaint.

Athróga fréamhacha

Seo iad na hathróga atá san áireamh againn (tabhair faoi deara go :rootbhfuil siad riachtanach) ar féidir rochtain a fháil orthu áit ar bith a bhfuil CSS Bootstrap lódáilte. Tá siad lonnaithe inár _root.scssgcomhad agus cuimsítear iad inár gcomhaid chiníochais tiomsaithe.

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

Athróga Comhpháirte

Tá Bootstrap 5 ag baint níos mó úsáide as airíonna saincheaptha mar athróga áitiúla do chomhpháirteanna éagsúla. Ar an mbealach seo déanaimid ár CSS tiomsaithe a laghdú, a chinntiú nach bhfaightear stíleanna le hoidhreacht in áiteanna cosúil le táblaí neadaithe, agus ceadaítear roinnt athshonrú agus síneadh bunúsacha ar chomhpháirteanna Bootstrap tar éis tiomsú Sass.

Breathnaigh ar ár gcáipéisíocht tábla chun léargas a fháil ar an gcaoi a bhfuil athróga CSS á n-úsáid againn . Úsáideann ár mbarraí nascleanúna athróga CSS mar v5.2.0 freisin. Tá athróga CSS á n-úsáid againn freisin thar ár ngreillí - go príomha le haghaidh gáitéir an eangach CSS nua rogha an diúltaithe - agus úsáid níos mó comhpháirteanna ag teacht amach anseo.

Nuair is féidir, sannfaimid athróga CSS ag an mbunleibhéal comhpháirte (m.sh. .navbardo navbar agus a chuid fo-chomhpháirteanna). Laghdaíonn sé seo buille faoi thuairim maidir le cén áit agus conas a shaincheapadh, agus ceadaíonn sé do mhodhnuithe éasca ag ár bhfoireann i nuashonruithe amach anseo.

Réimír

Úsáideann formhór na n-athróg CSS réimír chun imbhuailtí le do bhunachar cód féin a sheachaint. Tá an réimír seo sa bhreis ar an réimír atá --ag teastáil ar gach athróg CSS.

Saincheap an réimír tríd an $prefixathróg Sass. De réir réamhshocraithe, tá sé socraithe chun bs-(tabhair faoi deara an dash rian).

Samplaí

Cuireann athróga CSS solúbthacht cosúil le hathróga Sass ar fáil, ach gan gá le tiomsú sula ndéantar iad a sheirbheáil ar an mbrabhsálaí. Mar shampla, anseo táimid ag athshocrú cló ár leathanaigh agus stíleanna naisc le hathróga CSS.

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

Brisphointí eangaí

Cé go gcuirimid ár bristephointí eangaí san áireamh mar athróga CSS (seachas i gcás xs), bí ar an eolas nach n-oibríonn athróga CSS le fiosrúcháin ó na meáin chumarsáide . Déantar é seo de réir dearadh sa shonraíocht CSS d’athróga, ach d’fhéadfadh sé athrú sna blianta amach romhainn le tacaíocht d’ env()athróga. Seiceáil an freagra Stack Overflow seo le haghaidh roinnt nasc cabhrach. Idir an dá linn, is féidir leat na hathróga seo a úsáid i gcásanna CSS eile, agus i do JavaScript freisin.