Diphetogo tša CSS

Bootstrap e akaretša dithoto tše dintši tša tlwaelo tša CSS (diphetogo) ka go CSS ya yona yeo e kgobokeditšwego bakeng sa go tlwaetša ka nako ya kgonthe ntle le go nyakega ga go kgoboketša gape Sass. Tše di fa phihlelelo ye bonolo go dikelo tše di šomišwago ka tlwaelo go swana le mebala ya rena ya sehlogo, dintlha tša go kgaotša, le mekgobo ya difonte tša mathomo ge o šoma ka go mohlahlobi wa sephephediši sa gago, lepokisi la santa la khoutu, goba prototype ya kakaretšo.

Dithoto tša rena ka moka tša tlwaelo di hlomilwe pele kabs- go efoga dithulano le CSS ya mokgatlo wa boraro.

Diphetogo tša modu

Mona ke diphetogo tšeo re di akaretšago (hlokomela gore the :roote a nyakega) tšeo di ka fihlelelwago kae goba kae moo CSS ya Bootstrap e imelwago gona. Di hwetšwa ka gare ga _root.scssfaele ya rena gomme di akaretšwa ka gare ga difaele tša rena tša dist tše di kgobokeditšwego.

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

Diphetogo tša dikarolo

Bootstrap 5 e diriša ka go oketšega dithoto tša tlwaelo bjalo ka diphetogo tša selegae bakeng sa dikarolo tše di fapa-fapanego. Ka tsela ye re fokotša CSS ya rena ye e kgobokeditšwego, re netefatša gore ditaele ga di abelwe mafelong a go swana le ditafola tše di tsentšwego ka gare ga sehlaga, gomme re dumelela go setaele gape ga motheo le go katološa dikarolo tša Bootstrap ka morago ga go kgoboketšwa ga Sass.

Lebelela ditokomane tša rena tša tafola bakeng sa temogo e itšego ya kamoo re dirišago diphetogo tša CSS . Di-navbar tša rena gape di diriša diphetogo tša CSS go tloga go v5.2.0. Re boetse re sebelisa CSS diphetolo ho pholletsa le grids rona-kudukudu bakeng sa gutters e ncha kgetha-ka CSS keriti —ka tshebediso ya karolo e eketsehileng tla nakong e tlang.

Nako le nako ge go kgonega, re tla abela diphetogo tša CSS maemong a karolo ya motheo (mohlala, .navbarbakeng sa navbar le dikarolo tša yona tše dinyenyane). Se se fokotša go phopholetša gore o ka tlwaetša kae le bjang, gomme se dumelela diphetogo tše bonolo ke sehlopha sa rena ka diapdeite tša ka moso.

Sehlongwapele

Bontši bja diphetogo tša CSS di šomiša hlogo ya go efoga go thulana le codebase ya gago. Sehlongwapele se ke tlaleletšo go --seo se nyakegago go phetogo ye nngwe le ye nngwe ya CSS.

Tlwaetša sehlongwapele ka $prefixphetogo ya Sass. Ka default, e behiloe ho bs-(hlokomela dash morao).

Mehlala

Diphetogo tša CSS di fa go fetofetoga mo go swanago le diphetogo tša Sass, eupša ntle le go nyakega ga go kgoboketša pele di fiwa sephephediši. Go fa mohlala, mo re seta gape fonte ya letlakala la rena le mekgwa ya kgokagano ka diphetogo tša CSS.

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

Dintlha tša go kgaotša tša keriti

Le ge re akaretša dintlha tša rena tša go kgaotša keriti bjalo ka diphetogo tša CSS (ntle le xs), ela hloko gore diphetogo tša CSS ga di šome dipotšišong tša boraditaba . Se ke ka tlhamo ka go CSS spec ya diphetogo, eupša e ka fetoga mo mengwageng ye e tlago ka thekgo ya env()diphetogo. Lekola karabo ye ya Stack Overflow bakeng sa dikgokagano tše dingwe tše di thušago. Mo nakong ye, o ka šomiša diphetogo tše maemong a mangwe a CSS, gammogo le ka go JavaScript ya gago.