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

Diphetogo tša dikarolo

Re thoma gape go šomiša dithoto tša tlwaelo bjalo ka diphetogo tša selegae tša dikarolo tše di fapanego. Ka tsela ye re ka fokotša CSS ya rena ye e kgobokeditšwego, ra netefatša gore ditaele ga di abelwe mafelong a go swana le ditafola tše di tsentšwego ka gare ga sehlaga, gomme ra 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 .

Re šomiša gape diphetogo tša CSS go ralala le digridi tša rena—kudukudu bakeng sa di-gutter—ka tšhomišo e ntši ya dikarolo yeo e tlago nakong e tlago.

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.