Main content ah kal rawh Docs navigation ah kal rawh
in English

CSS a danglamna tur a awm

Bootstrap-a CSS custom properties hmang la, design leh development rang leh hmalam thlir thei tur a ni.

Bootstrap hian a compiled CSS-ah hian CSS custom property (variables) dozen hnih vel a dah tel a, per-component basis-a customization tihchangtlunna tur dozen dang a awm bawk. Hengte hian i browser inspector, code sandbox, emaw general prototyping-a hnathawh hunah kan theme color, breakpoint, leh primary font stack ang chi value hman tlanglawn tak takte awlsam taka hmuh theihna a pe a ni.

Kan custom property zawng zawng hibs- third party CSS nena inrem lohna tur prefixed vek a ni.

Root variable te chu

:rootHetah hian Bootstrap-a CSS load awmna hmun apiangah access theih tur variable kan dah tel (note that the is required) te chu kan rawn tarlang e. Kan _root.scssfile ah hian an awm a, kan compiled dist file ah te pawh an tel ve bawk.

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

Component hrang hrang a awm thei

Component hrang hrang tana local variable atan custom property kan hmang tan bawk. Chutiang chuan kan compiled CSS kan tihtlem thei a, nested table ang hmunah styles inherited a nih loh nan kan enfiah thei a, Sass compilation zawhah Bootstrap components basic restyling leh extending thenkhat kan phalsak thei bawk.

CSS variable kan hman dan tur hriatna engemaw chen kan table documentation hi en la .

Kan grid hrang hrangah CSS variable kan hmang bawk—a bik takin gutters atan—nakin lawkah component hman tam zawk a awm dawn a ni.

Entirna te

CSS variable hian Sass-a variable ang chiah hian flexibility a pe a, mahse browser-a serve hmain compilation a ngai lo. Entirnan, hetah hian kan page font leh link style te chu CSS variable hmangin kan reset a.

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