Umi mbaꞌekuaarã CSS rehegua

Bootstrap omoinge heta CSS mbaꞌekuaarã jeporupyre (variables) iCSS oñembohekopyrévape oñemboheko hag̃ua ára añeteguápe tekotevẽ’ỹre oñembojoaju jey Sass. Ko’ãva ome’ẽ jeike ndahasýiva umi valor ojeporúva jepi ore tema sa’y, punto de ruptura ha pila fuente primaria-icha oñemba’apo jave ne kundahára inspector-pe, peteĩ código sandbox térã prototipo general-pe.

Opaite ore mba’ekuaarã jeporupyre oñemboguapybs- mboyve ani hag̃ua ojoavy CSS mbohapýha ndive.

Umi mba’ekuaarã hapo rehegua

Ko’ápe oĩ umi mba’e’oka ñamoĩva (ñañatendéke pe :rootoñeikotevẽha) ikatúva ojeike oimehápe Bootstrap CSS ojekargahápe. Ha’ekuéra oĩ ore _root.scssrembiapokue ryepýpe ha oike ore rembiapokue dist oñembohekopyrévape.

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

Umi variable componente rehegua

Bootstrap 5 oipuru ohóvo umi propiedad personalizada variable local ramo opaichagua componente-pe g̃uarã. Péicha romboguejy ore CSS oñembohekopyréva, roñangareko umi estilo ndojeheredaiha umi tenda taꞌãngamýi anidado-icha, ha roheja algún reestilo básico ha oñembotuichave umi componente Bootstrap rehegua Sass oñemboheko rire.

Ejesarekomína ore kuatiañe’ẽ kuatiarogue rehe reikuaa hag̃ua mba’éichapa jaipuru hína CSS mba’ekuaarã . Ñande navbar oipuru avei CSS mbaꞌekuaarã v5.2.0 guive. Avei roipuru hína umi mba’e’oka CSS ore rejilla rupi —tenonderãite umi canalización-pe g̃uarã pe rejilla CSS opt-in pyahu —hetave componente jepuru oúva tenonderãme.

Ikatu jave, ñameꞌeta CSS mbaꞌekuaarã componente base nivel-pe (techapyrã, .navbarnavbar ha umi subcomponente-kuérape g̃uarã). Kóva omboguejy adivinación moõ ha mba’éichapa oñemboheko, ha oheja umi modificación ndahasýiva ore equipo-pe umi actualización oúvape.

Ñe’ẽpehẽtai

Hetave CSS mbaꞌekuaarã oipuru peteĩ ñeꞌepyrũrã ani hag̃ua ojoavy nde código ryru tee ndive. Ko ñe’ẽpehẽtai oñemoĩve pe --oñeikotevẽva opaite CSS mba’ekuaarã rehe.

Emohenda ñepyrũrã $prefixSass mbaꞌekuaarã rupive. Por defecto, oñemohenda bs-(eñatendéke pe guión rapykuéri).

Tembiecharã

Umi CSS mbaꞌekuaarã oikuaveꞌe peteĩchagua flexibilidad Sass mbaꞌekuaarã ndive, ha katu natekotevẽi oñemboheko oñembohasa mboyve kundahárape. Techapyrã, ko’ápe ñamoĩjey ñande página letra ha estilo enlace rehegua umi variable CSS reheve.

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

Umi punto de ruptura de rejilla rehegua

Ñamoinge aja ñande punto de ruptura cuadrícula rehegua CSS mbaꞌekuaarã ramo (ndahaꞌeiramo xs), eikuaa porãke umi CSS mbaꞌekuaarã nombaꞌapóiha umi mbaꞌekuaarã ñeporandurãme . Kóva haꞌehína diseño rupive CSS spec-pe umi variable-pe g̃uarã, ha katu ikatu oñemoambue umi arýpe oúvape oipytyvõvo umi env()variable-pe g̃uarã. Ehecháke ko Pila Desbordamiento mbohovái peteĩ enlace oipytyvõva rehegua. Upe aja, ikatu eipuru ko’ã mba’e’oka ambue CSS situación-pe, avei nde JavaScript-pe.