CSS nisqa tikraqkuna

Bootstrap achka CSS sapanchasqa propiedades (variables) huñusqa CSS kaqninpi chiqa pacha ruwanapaq mana Sass kaqmanta huñunapaq necesidadniyuq. Kaykunaqa sapa kuti llamk'achisqa chanikunaman mana sasa yaykuyta qunku imaynachus tema llimp'iyku, pakikunayku chaymanta ñawpaq letra pilakuna llamk'achkanki maskaqniyki qhawaqpi, huk código rit'i caja kaqpi utaq prototipo general kaqpi.

Llapan sapanchasqa propiedadesniyku ñawpaqchasqa kankubs- mana kimsa kaq CSS kaqwan ch'aqwaykunata ruwanapaq.

Saphi tikraqkuna

Kaypi tikraqkuna churasqayku (qhaway chaymanta chay :rootmañasqa kachkan) chaymanta maypipas Bootstrap kaqpa CSS kargasqa kachkan chayman yaykuyta atikun. Paykunaqa willañiqiykupi tarikunku _root.scsschaymanta huñusqa dist willañiqiykupi churasqa.

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

Componente nisqa variables nisqakuna

Bootstrap 5 aswanta ruwachkan sapanchasqa propiedades kaqmanta llamk'achiyta llaqta variables hina imaymana componentes kaqpaq. Kayhina huñusqa CSSniyku pisiyachiyku, estilokuna mana herenciayuq kasqankuta qhawayku kay anidado tablakuna hina kitikunapi, chaymanta wakin sapsi wakmanta ruwayta chaymanta Bootstrap componentekuna mast'ariyta Sass huñusqamanta qhipaman saqiyku.

Tabla qillqaykupi qhaway wakin qhawaypaq imayna CSS tikraqkunata llamk'achisqaykumanta . Navbarniykupas CSS tikraqkunata v5.2.0 kaqmanta llamk'achinku. Hinallataq CSS tikraqkunata tukuy rejillaykupi llamk'achkayku —ñawpaqta canales kaqpaq musuq opt-in CSS rejilla kaqpi —aswan componente llamk'achiyta hamuq pachapi hamuqwan.

Mayk'aq atikuqtin, CSS tikraqkunata base componente patapi churasaqku (kayhina, .navbarnavbar kaqpaq chaymanta sub-componentesninpaq). Kayqa maypi chaymanta imayna ruwanamanta adivinayta pisiyachin, chaymanta hamuq musuqyachiykunapi equipoykumanta mana sasa tikraykunata saqin.

Ñawpaq simi

Yaqa llapan CSS tikraqkunam huk ñawpaq simita llamk'achinku, kikinpa codigo-base nisqawan mana tupanakunaykipaq. --Kay ñawpaq simiqa sapa CSS tikraqpi mañasqa kaqmanta yapasqa kachkan .

$prefixSass variable nisqawan ñawpaq simita ruway . Ñawpaqmanta, bs-(qhipa chiruta qhaway).

Ejemplos

CSS tikraqkuna Sass tikraqkunaman rikch'aq flexibilidadta qun, ichaqa mana huñusqa necesidadniyuq manaraq maskaqman sirwisqa kachkaptin. Ejemplopaq, kaypi p'anqaykupa letranta chaymanta t'inki estilokunata CSS tikraqkunawan musuqmanta churachkayku.

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

Puntos de ruptura de rejilla

Sichus rejilla p'akisqaykukunata CSS tikraq hina churayku (mana xs), yachay CSS tikraq mana llamk'ankuchu willay mast'ariy tapuykunapi . Kayqa CSS spec kaqpi tikraqkunapaq ruwaywan kachkan, ichaqa hamuq watakunapi tikrakunman env()tikraqkunapaq yanapakuywan. Kay Pila Desbordamiento kutichiyta qhaway wakin yanapakuq t'inkikuna kaqpaq. Chaykama, kay tikraqkuna wak CSS situacionkunapi llamk'achiy atikunki, chaymanta JavaScript kaqpi.