Athróga CSS

Áiríonn Bootstrap thart ar dhá dhosaen airíonna saincheaptha CSS (athróga) ina CSS tiomsaithe, agus mórán eile ar an mbealach le haghaidh saincheaptha feabhsaithe ar bhonn comhpháirte. 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-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --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-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));
}

Athróga Comhpháirte

Táimid ag tosú freisin ar úsáid a bhaint as airíonna saincheaptha mar athróga áitiúla le haghaidh comhpháirteanna éagsúla. Ar an mbealach seo is féidir linn ár CSS tiomsaithe a laghdú, a chinntiú nach bhfaightear stíleanna le hoidhreacht in áiteanna cosúil le táblaí neadaithe, agus ligean do roinnt athshonrú bunúsach agus síneadh a chur le comhphá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 .

Tá athróga CSS á n-úsáid againn freisin thar ár ngreillí - go príomha le haghaidh gáitéir - agus úsáid níos mó comhpháirteanna ag teacht amach anseo.

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