Oñemoambuévo v5-pe

Ejesareko ha ehesa’ỹijo umi ñemoambue Bootstrap vore ypykue, kuatiañe’ẽ ha componente-kuérape nepytyvõ hag̃ua rembohasa hag̃ua v4-gui v5-pe.

Ko páhinape

v5.2.0 rehegua

Diseño oñembopyahúva

Bootstrap v5.2.0 oguereko peteĩ diseño sutil ñembopyahu peteĩ puñado componente ha propiedad-pe g̃uarã proyecto tuichakue javeve, ojehecharamovéva umi border-radiusvalor refinado rupive umi botón ha control formulario rehegua . Ore kuatiañe’ẽ avei oñembopyahu peteĩ ñanduti renda pyahu reheve, kuatiañe’ẽ ñemohenda isensíllova ndoityvéimava umi sección barra lateral rehegua, ha techapyrã ojehecharamovéva Bootstrap Icons rehegua .

Hetave CSS mba’ekuaarã

Rombopyahu opaite ore componente roipuru hag̃ua CSS mbaꞌekuaarã. Sass omopyenda gueteri opa mbaꞌe, peteĩteĩva componente oñembopyahu oike hag̃ua CSS mbaꞌekuaarã umi componente base clase-pe (techapyrã, .btn), ohejáva hetave Bootstrap jeporupyre tiempo real-pe. Umi ñeguenohẽ oúvape, jasegíta ñambotuichave ñande jepuru CSS mbaꞌekuaarã ñande ñemohenda, formulario, pytyvõhára ha tembipururãme. Emoñe’ẽve umi mba’ekuaarã CSS rehegua peteĩteĩva componente-pe umi kuatiañe’ẽ página-pe.

Ore CSS variable jepuru ndojejapói’imiva’erã Bootstrap 6 peve.Roipotaitéramo jepe romoĩmbaite ko’ãva opaite mba’épe, ha’ekuéra oguereko riesgo omoheñóivo ñemoambue ñembyai. Techapyrã, ñemboguapy $alert-border-width: var(--bs-border-width)ore código fuente-pe omboja’o potencial Sass nde código-pe rejapo $alert-border-width * 2ramo peteĩ mba’ére.

Péicha, ikatuhápe, roñeha’ãta gueteri hetave CSS mba’ekuaarã gotyo, ha katu ehechakuaa ore implementación ikatu oñemboty’imi v5-pe.

Pyahu`_maps.scss`

Bootstrap v5.2.0 oikuaauka peteĩ vore pyahu Sass rehegua orekóva _maps.scss. Oguenohẽ heta Sass mapa-gui _variables.scssomyatyrõ hag̃ua peteĩ mbaꞌe ndojeporúi haguépe umi ñembopyahu peteĩ mapa ypykue rehegua umi mapa secundario ombopukúvape. Techapyrã, ñembopyahu to $theme-colorsndojeporúikuri ambue mapa tema rehegua oñemopyendáva $theme-colors, ombotývo tembiaporã rape personalización clave rehegua. Mbykyhápe, Sass oguereko peteĩ limitación ojepuru rire peteĩ variable térã mapa por defecto , ndaikatúi oñembopyahu. Oĩ peteĩ mbaꞌe vai ojoguáva umi CSS mbaꞌekuaarã ndive ojepuru jave oñembosakoꞌi hag̃ua ambue CSS mbaꞌekuaarã.

Péva ha’e mba’érepa umi personalización variable Bootstrap-pe oúva’erã rire @import "functions", ha katu mboyve @import "variables"ha hembýva ñande pila importación rehegua. Upéicha avei ojejapo umi mapa Sass-pe —rembogueva’erã umi mba’e’oka ojepokuaa mboyve. Ko'ã mapa oñembohasa pyahúpe _maps.scss:

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

Nde Bootstrap CSS ñemopu’ã jeporupyre ko’áĝa ojehechava’erã peteĩ mba’e péichagua peteĩ mapa jegueru añónte reheve.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Utilidades pyahu

font-weightUmi utilidad oñembotuicháva oike .fw-semiboldhag̃ua umi fuente seminegrita-pe g̃uarã.
Oñembotuichave border-radiusumi purupyrã oike hag̃ua mokõi tuichakue pyahu, .rounded-4ha .rounded-5, hetave opción-pe g̃uarã.

Umi kámbio adicional

Omotenonde $enable-container-classesopción pyahu. — Ko’áĝa ojeporavo jave CSS Grid ñemohenda experimental-pe, .container-*oñemboheko gueteri mbo’esyrykuéra, ndaha’éiramo ko jeporavorã oñemohendava’ekue false. Umi mbaʼyru avei koʼág̃a omantene umi valor orekóva canalización.
Componente Offcanvas ko'ágã oreko variación ombohováiva . Pe mbo’esyry ypykue .offcanvasopyta iñambue’ỹre —oñomi contenido opaite jehechaukaha rupi. Ikatu hag̃uáicha ombohovái, emoambue upe .offcanvasclase oimeraẽ .offcanvas-{sm|md|lg|xl|xxl}clase-pe.
Umi divisor de mesa ijyvatevéva ko'ágã opt-in. — Roipe’a pe frontera ijyvatevéva ha hasyvéva oñemboyke hag̃ua umi cuadro aty apytépe ha rombohasa peteĩ clase opcional ikatúvape reipuru, .table-group-divider. Ehecha umi kuatiahaipyre cuadro rehegua techapyrãramo.
Scrollspy ojehai jey ojepuru hag̃ua Intersection Observer API , he’iséva natekotevẽvéimaha envoltura tuvakuéra relativo, omboykeoffsetconfig ha hetave mba’e. Eheka ne Scrollspy implementación-kuéra oĩporãve ha ojoaju hag̃ua nav resaltado-pe.
Popovers ha tembipuru’i ñe’ẽmondo ko’áĝa oipuru CSS mba’ekuaarã. Oĩ CSS mbaꞌekuaarã oñembopyahúva iñirũnguéra Sass-gui omboguejy hag̃ua mbaꞌekuaarã. Upéicha rupi, mbohapy mbaꞌekuaarã oñemboyke ko ñeguenohẽme: $popover-arrow-color, $popover-arrow-outer-color, ha $tooltip-arrow-color.
Oñemoĩve .text-bg-{color}pytyvõhára pyahu. Emohenda rangue peteĩteĩ .text-*ha .bg-*utilidad-kuéra, ko’áĝa ikatu eipuru umi .text-bg-*pytyvõhára emohenda hag̃ua peteĩ background-colororekóva primer plano ojoavyva color.
Oñemoĩ .form-check-reversemodificador ombojere hag̃ua etiqueta ñemohenda ha umi casilla/radio ojoajúva hese.
Oñemoĩve umi columna rayada oipytyvõva umi cuadro-pe .table-striped-columnsclase pyahu rupive.

Peteĩ lista completa umi ñemoambue rehegua, ehecha proyecto v5.2.0 GitHub -pe .

v5.1.0 rehegua

Oñemoĩve pytyvõ experimental CSS Grid ñemohendarãme g̃uarã . — Kóva haꞌehína peteĩ tembiapo ojejapóva, ha neíra gueteri oĩ ojepuru hag̃ua producción-pe, ha katu ikatu reike pe mbaꞌe pyahúpe Sass rupive. Ojeporu hag̃ua, embogue pe cuadrícula ñepyrũrã, emohenda $enable-grid-classes: falseha emboguata CSS Rejilla emohenda rupi $enable-cssgrid: true.
Oñembopyahu umi navbar oipytyvõ hag̃ua offcanvas. — Oñemoĩ umi cajón offcanvas oimeraẽva navbar -pe umi clase ombohováiva reheve .navbar-expand-*ha algún marcado fuera de lona reheve.
Oñemoĩve componente tenda’i pyahu . — Ore componente ipyahuvéva, peteĩ tape ome’ẽ hag̃ua bloque temporal contenido añetegua rangue oipytyvõva ohechauka hag̃ua peteĩ mba’e ojekarga gueteriha nde sitio térã app-pe.
Plugin de collapso ko’áĝa oipytyvõ collapso horizontal . — Emoĩve .collapse-horizontalnde .collapserehe emboguejy hag̃ua pe widthrangue pe height. Ejehekýi kundahára ñembojegua jey rehe emohendavo peteĩ min-heighttérã height.
Oñemoĩve pila pyahu ha umi pytyvõhára regla vertical rehegua. — Eipuru pyaꞌe heta flexbox mbaꞌekuaarã emoheñói pyaꞌe hag̃ua ñemohenda jeporupyre pilakuéra ndive . Eiporavo umi pila horizontal ( .hstack) ha vertical ( .vstack) apytégui. Oñemoĩve umi divisor vertical ojoguáva umi <hr>elemento-pe umi pytyvõhára pyahu.vr ndive .
Oñemoĩve umi mba’e’oka pyahu :rootCSS atyguasu rehegua. — Oñemoĩ heta CSS mbaꞌekuaarã pyahu :rootnivel-pe ojejoko hag̃ua <body>estilo-kuéra. Hetave oĩ umi tembiaporãme, ñande purupyrã ha componente rupi, ha katu ko’áĝa g̃uarã emoñe’ẽ CSS mba’ekuaarã vore Personalizar -pe .
Oñemoambue mbaꞌeporã saꞌi ha tapykuehoha rehegua ojepuru hag̃ua CSS mbaꞌekuaarã, ha oñembojoapy jehaipyre opacidad ha tapykuehoha mbaꞌeporã pyahu . — .text-* ha .bg-*umi purupyrã koꞌág̃a oñemopuꞌa CSS mbaꞌekuaarã ha rgba()saꞌi saꞌi mbaꞌekuaarã reheve, ohejáva ndéve emohenda pyaꞌe hag̃ua oimeraẽva tembipururã opacidad rehegua purupyrã pyahu reheve.
Oñemoĩ techapyrã pyahu fragmento rehegua oñemopyendáva ohechauka hag̃ua mbaꞌeichaitépa ojejapokuaa ñande componente-kuéra. — Emoinge listo reipuru hag̃ua componente personalizado ha ambue diseño patrón común ore Snippets techapyrã pyahu reheve . Oike ipype , ñemboguejyha , lista aty ha modal .
Ojepe’a umi estilo de posicionamiento ndojeporúiva umi popover ha herramienta -gui ko’ãva oñemanehágui Popper añoite. $tooltip-marginha'e deprecado ha oñemohenda nullproceso-pe.

¿Reipotavépa informasión? Emoñe’ẽ pe v5.1.0 kuatiahaipyre blog-pe.

¡Hey upépe! Umi ñemoambue ñande peteĩha Bootstrap 5 ñeguenohẽ tuichavévape, v5.0.0, ojehai kuatiáre ko’ápe. Ndohechaukái hikuái umi cambio adicional ojehechaukáva yvate.

Umi dependencia rehegua

Ojeity jQuery-pe.
Oñembopyahu Popper v1.x-gui Popper v2.x-pe.
Omyengovia Libsass Dart Sass rehe ore compilador Sass oñemeꞌevaꞌekue Libsass-pe oñemboyke haguéicha.
Ojegueraha Jekyll-gui Hugo-pe omopu’ã haguére ore kuatiañe’ẽ

Navegador pytyvõ

Omboguejy Internet Explorer 10 ha 11
Ojeity Microsoft Edge < 16 (Edge legado) .
Ojeity Firefox < 60
Ojeity Safari < 12
Ojeity iOS Safari < 12
Ojeity Cromo < 60

Kuatiakuéra oñemoambue

Ojejapo jey página de inicio, docs ñemohenda ha ipypegua.
Oñemoĩve Guía de Parcelas pyahu .
Oñemoĩve sección pyahu Personalizar , omyengoviáva v4 página Tema rehegua , detalle pyahu Sass rehegua, opción configuración global rehegua, esquema de colores, variables CSS ha hetave mbaꞌe reheve.
Oñemohenda jey opaite formulario kuatiañe’ẽ Formularios vore pyahúpe , omboja’óvo contenido umi página oñecentravévape.
Upéicha avei, oñembopyahu pe sección Diseño , ojehechauka porãve hag̃ua contenido cuadrícula rehegua.
Oñembohéra jey “Navs” componente página “Navs & Tabs”-pe.
Oñembohéra jey página “Cheques” “Cheques & radios”-pe.
Ojapo jey navbar ha omoĩ peteĩ subnav pyahu ndahasýi hag̃ua ojere hag̃ua ore tenda ha docs versión rehe.
Oñemoĩve teclado rape pyahu jeheka rendaguépe g̃uarã: Ctrl + /.

Sass rehegua

Roity umi Sass mapa ñembojoaju por defecto ikatu hag̃uáicha ndahasýi ojeipe’a hag̃ua umi valor redundante. Eñongatu ne akãme ko’áĝa redefiniva’erã opaite mba’ekuaarã umi mapa Sass-pe ha’eháicha $theme-colors. Ehecháke mba'éichapa oñembohovái umi mapa Sass rehegua .
OityvyróvaOñembohéra jey color-yiq()función ha umi variable color-contrast()ojoajúva ndojejoajuvéimagui espacio color YIQ rehe. Ehecha #30168.
- $yiq-contrasted-thresholdoñembohéra jey $min-contrast-ratio.
- $yiq-text-darkha $yiq-text-lightoñembohéra peteĩteĩ $color-contrast-darkha $color-contrast-light.
OityvyróvaUmi parámetro mixins consulta medios rehegua oñemoambue peteĩ enfoque lógicovévape g̃uarã.
- media-breakpoint-down()oipuru pe punto de ruptura ijeheguiete pe punto de ruptura oúva rangue (techapyrã, media-breakpoint-down(lg)umi media-breakpoint-down(md)targets jehechaukaha michĩvéva rangue lg).
- Upéicha avei, mokõiha parámetro en media-breakpoint-between()oipuru avei pe punto de ruptura ijeheguiete pe punto de ruptura oúva rangue (techapyrã, umi targets jehechaukaha media-between(sm, lg)rangue ha ).media-breakpoint-between(sm, md)smlg
OityvyróvaOjepe’a umi estilo de impresión ha $enable-print-stylesvariable. Umi mbo’esyry jehechaukarã impresión rehegua oĩ gueteri ijerére. Ehecha #28339 .
OityvyróvaOjeity color(), theme-color(), ha gray()umi función oîva umi variable favor-pe. Ehecha #29083 .
Oityvyróvatheme-color-level()Función oñembohéra jey ha color-level()koꞌág̃a omoneĩ oimeraẽva saꞌi reipotáva umi $theme-colorsaꞌi añoite rangue. Ehecha #29083 Eñangareko: color-level() ojeity upe rire v5.0.0-alpha3.
OityvyróvaOñembohéra jey $enable-prefers-reduced-motion-media-queryha $enable-pointer-cursor-for-buttonsto $enable-reduced-motionha $enable-button-pointersmbykymi haguã.
OityvyróvaOjepe’a pe bg-gradient-variant()mixin. Eipuru .bg-gradientmboꞌepy emoĩ hag̃ua gradiente elementokuérape umi .bg-gradient-*mboꞌepy oñembohekopyréva rangue.
Oityvyróva Ojepe’a umi mixin ojepuru’ỹva’ekue yma:
- hover, hover-focus, plain-hover-focus, hahover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(avei omboguejy pe clase de utilidad asociada, .text-hide)
- visibility()
- form-control-focus()
OityvyróvaOñembohéra jey scale-color()función to shift-color()ani hag̃ua ojoaju Sass función escalado color rehegua ndive.
box-shadowmixins koꞌág̃a oheja nullvalor ha oguejy noneheta argumento-gui. Ehecha #30394 .
Pe border-radius()mixin ko’áĝa oguereko peteĩ valor por defecto.

Sistema de color rehegua

Pe sistema de color omba'apova'ekue ndive color-level()ha $theme-color-intervalojeipe'ava'ekue a favor sistema de colores pyahu rehe. Opaite lighten()ha darken()tembiaporã oĩva ñande código base-pe oñemyengovia tint-color()ha shade-color(). Koꞌã tembiapo ombojeheꞌavaꞌerã pe saꞌi morotĩ térã morotĩva ndive omoambue rangue iligero peteĩ cantidad fija reheve. Pe shift-color()otintáta térã omoĩta peteĩ color odependévo iparámetro de peso haʼépa positivo térã negativo. Ehecha #30622 -pe reikuaave hag̃ua.
Oñemoĩve tinte ha sombra pyahu opaite color-pe g̃uarã, omeꞌeva nueve color separado peteĩteĩva color base-pe g̃uarã, Sass variable pyahu ramo.
Oñemoporãve pe contraste de color. Oñembotapykue relación contraste color rehegua 3:1 guive 4.5:1 peve ha oñembopyahu umi color hovy, hovy, cian ha rosa oasegura hag̃ua WCAG 2.1 AA contraste. Avei omoambue ore color contraste color de $gray-900a $black.
Oipytyvõ hag̃ua ore sistema de colores, romoĩkuri personalizado tint-color()ha shade-color()función pyahu oñembojehe’a hag̃ua ore color-kuéra hekopete.

Rejilla ñembopyahu

¡Punto de ruptura pyahu! Oñemoĩve xxlpunto de ruptura pyahu 1400pxha yvate gotyo. Ndaipóri ñemoambue opaite ambue punto de ruptura-pe.
Umi canalización oñemyatyrõva. Umi canalización ko’áĝa oñemohenda rems-pe, ha ijyvyku’ive v4-gui ( 1.5rem, térã haimete 24px, oguejy guive 30px). Péva omohenda ñande sistema de red canalización ñande utilidad espaciado ndive.
- Oñemoĩve clase de canalización pyahu ( .g-*, .gx-*, ha .gy-*) oñekontrola hag̃ua umi canalización horizontal/vertical, umi canalización horizontal ha umi canalización vertical.
- OityvyróvaOñemoambue héra .no-guttersto .g-0ombojoaju haguã umi utilidad canalización pyahu.
Umi vore position: relativendojeporúivéima, upévare ikatu remoĩvaꞌerã .position-relativepeteĩ elemento-pe emoĩjey hag̃ua upe jepokuaa.
OityvyróvaOmboguejy heta .order-*clase heta jey ndojeporúiva. Ko'ágã rome'ê añoite .order-1to .order-5fuera de la caja.
OityvyróvaOmboguejy .mediacomponente ikatúgui ojejapo jey fácilmente umi utilidad ndive. Ehecha #28265 ha flex utilities página peteĩ techapyrãme g̃uarã .
Oityvyróva bootstrap-grid.cssko’áĝa ojepuru box-sizing: border-boxcolumna-pe añoite oñembopyahu rangue pe caja-dimensionamiento global. Péicha, ñande estilo cuadrícula rehegua ikatu ojepuru hetave hendápe oñembotapykue’ỹre.
$enable-grid-classesndodesactivavéima generación de clases de contenedores. Ehecha #29146.
Ombopyahu make-colmixin ñepyrũrãme umi vore jojahápe peteĩ tuichakue oje’éva’ỹre.

Contenido, Reinicio, ha mba’e

RFS ko’áĝa oñembohapéma ñepyrũrãme. Umi iñakãrapuꞌa oipurúvafont-size()mixin omohendavaꞌerã ijeheguiete ikuérafont-sizeescala-pe jehechaukaha ndive. Ko mba’ekuaarã ha’eva’ekue yma opt-in v4 ndive.
OityvyróvaOñemoambue ore tipografía jehechaukarã omyengovia hag̃ua ore $display-*variable ha peteĩ $display-font-sizesmapa Sass reheve. Avei ojeipe a umi $display-*-weightvariable individual petet s $display-font-weightha oñemohendava font-sizeekue rehegua.
Oñemoĩ mokõi .display-*rubro tuichakue pyahu, .display-5ha .display-6.
Umi joajuha oñembohape por defecto (ndaha’éi hover-pe añónte), ndaha’éiramo umi componente específico pehẽngue.
Ojejapo jey umi cuadro oñembopyahu hag̃ua ijestilokuéra ha oñemopuꞌa jey hag̃ua umi mbaꞌekuaarã CSS reheve ojejokove hag̃ua estilo rehe.
OityvyróvaUmi tabla anidado ndoheredavéima umi estilo.
Oityvyróva .thead-lightha .thead-darkojeity umi .table-*clase variante favor-pe ikatúva ojeporu opaite elemento cuadro rehegua ( thead, tbody, tfoot, tr, thha td).
OityvyróvaPe table-row-variant()mixin oñembohéra jey table-variant()ha omoneĩ 2 parámetro añoite: $color(color réra) ha $value(código color). Pe frontera color ha acento colorkuéra oñecalcula ijeheguiete umi variable factor cuadro rehegua rehe.
Embojaꞌo umi variable acolchado celda mesa rehegua -yha -x.
OityvyróvaOguejy .pre-scrollableclase. Ehecha #29135
Oityvyróva .text-*umi utilidad nomoĩvéima umi estado hover ha enfoque umi enlace-pe. .link-*umi mbo’esyry pytyvõhára ikatu ojeporu hendaguépe. Ehecha #29267
OityvyróvaOguejy .text-justifyclase. Ehecha #29793
Oityvyróva <hr>umi elemento koꞌág̃a oipuru heightrangue borderoipytyvõ porãve hag̃ua sizeatributo. Kóva avei ombokatupyry ojeporu hag̃ua umi utilidad acolchado rehegua ojejapo hag̃ua divisor ijyvatevéva (techapyrã, <hr class="py-1">).
Emoĩjey ñepyrũrã horizontal padding-lefton <ul>ha <ol>elementokuéra kundahára por defecto 40pxguive 2rem.
Oñemoĩve $enable-smooth-scroll, ojeporúva scroll-behavior: smoothglobalmente—ndaha’éiramo umi puruhára ojeruréva movimiento oñemboguejýva prefers-reduced-motionconsulta medios de comunicación rupive. Ehecha #31877

RTL rehegua

Umi variable específica dirección horizontal rehegua, utilidad ha mixin opavave oñembohéra jey ojepuru hag̃ua propiedad lógica ojejuhúvaicha umi flexbox ñemohendapyrépe—techapyrã, startha ha endrendaguépe .leftright

Umi Formulario rehegua

¡Oñembojoapy umi formulario flotante pyahu! Romoherakuãma etiqueta Flotante techapyrã umi componente formulario oipytyvõmbaitévape. Ehecha pe páhina pyahu Etiquetas flotantes rehegua.
Oityvyróva Umi elemento forma nativa ha personalizada oñembojoajúva. Oñembojoaju umi vore, radio, selección ha ambue entrada oguerekóva clase nativa ha personalizada v4-pe. Ko’áĝa haimete opaite ñande elemento formulario rehegua ha’e enteramente personalizado, hetave tekotevẽ’ỹre HTML personalizado.
- .custom-control.custom-checkboxha'e ko'ágã .form-check.
- .custom-control.custom-custom-radioha'e ko'ágã .form-check.
- .custom-control.custom-switchha'e ko'ágã .form-check.form-switch.
- .custom-selectha'e ko'ágã .form-select.
- .custom-fileha .form-fileoñemyengoviáma umi estilo personalizado rehe .form-control.
- .custom-rangeha'e ko'ágã .form-range.
- Ojeity nativo .form-control-fileha .form-control-range.
OityvyróvaOjeity .input-group-appendha .input-group-prepend. Ko’áĝa ikatu emoĩnte umi botón ha .input-group-textmitã directo ramo umi aty jeikerã rehegua.
Pe radio frontera Falta ymaite guive aty jeike rehegua oguerekóva mbaꞌevai retroalimentación validación rehegua ipahápe oñemyatyrõ oñembojoapývo peteĩ .has-validationclase adicional umi grupo entrada rehegua oguerekóva validación.
Oityvyróva Ojeity umi clase diseño específico formulario rehegua ore sistema cuadrícula-pe g̃uarã. Eipuru ñande red ha umi utilidad .form-group, .form-row, térã rangue .form-inline.
OityvyróvaUmi etiqueta formulario rehegua ko’áĝa oikotevẽ .form-label.
Oityvyróva .form-textnomohendavéima display, ohejáva ndéve emoheñói ñe’ẽñemi pytyvõrã vore ryepýpe térã emboty reipotáicha remoambuévo añoite elemento HTML.
Umi control formulario rehegua ndojepuruvéima oñemboguapy heightikatúramo, upéva rangue ojediferi min-heightoñemyatyrõ hag̃ua personalización ha compatibilidad ambue componente ndive.
Umi icono validación rehegua ndojepuruvéima <select>s ndive multiple.
Oñemohenda jey Sass vore ypykue guýpe scss/forms/, oikehápe umi estilo aty jeikerã.

Umi componente rehegua

Umi paddingvalor oñembojoajúva umi alerta, pan ra’ỹi, tarjeta, desplegable, lista aty, modal, popover ha tembipuru’i ñe’ẽmondo rehegua oñemopyenda hag̃ua ñande $spacervariable-pe. Ehecha #30564 .

Acordeón rehegua

Oñemoĩve componente pyahu acordeón rehegua .

Alerta rehegua

Umi alerta ko’áĝa oguereko techapyrã orekóva icono .
Ojepe’a umi estilo personalizado <hr>s-pe g̃uarã peteĩteĩva alerta-pe oipurúma guive hikuái currentColor.

Insignia-kuéra rehegua

OityvyróvaOmboguejy opaite .badge-*mbo’esyry sa’y rehegua umi utilidad fondo rehegua (techapyrã, eipuru .bg-primaryrangue .badge-primary).
OityvyróvaOjeity .badge-pill—eipuru pe .rounded-pillutilidad hendaguépe.
OityvyróvaOjepeꞌa umi estilo hover ha enfoque rehegua <a>ha <button>elemento-kuérape g̃uarã.
Oñembohetave acolchado por defecto umi insignia .25em/ .5emguive .35em/ peve .65em.

Pan ra’ỹi

Oñemohesakãve mbujape rykue jehechauka por defecto oipeꞌa rupi padding, background-color, ha border-radius.
Oñemoĩve CSS mba’ekuaarã pyahu jeporupyre --bs-breadcrumb-dividerñembohekorã ndahasýivape g̃uarã tekotevẽ’ỹre oñembojoaju jey CSS.

Umi botón rehegua

Oityvyróva Umi botón ñembohasa , oguerekóva vore’i térã radio, noikotevẽvéima JavaScript ha oguereko marca pyahu. Nañaikotevẽvéima peteĩ elemento envoltura rehegua, ñamoĩve ,.btn-checkha<input>oimeraẽva.btnclase ndive oĩva<label>. Ehecha #30650 . Umi docs kóvape g̃uarã oñembohasa ore página Botones-gui Formularios sección pyahúpe.
Oityvyróva Ojeity .btn-blockumi servicio público-pe guarã. Eipuru rangue .btn-block, .btnembojere ne botón .d-gridha peteĩ .gap-*utilidad reheve espacia hag̃ua tekotevẽháicha. Embohasa umi clase ombohováivape reguerekove haĝua control hesekuéra. Emoñe’ẽ umi docs peteĩ techapyrãme g̃uarã.
Oñemoambue ore button-variant()ha button-outline-variant()mixins oipytyvõ hag̃ua parámetro adicional.
Umi botón oñembopyahúva oasegura hag̃ua contraste oñembohetavéva umi estado hover ha activo-pe.
Umi botón oñemboykéva ko’áĝa oguereko pointer-events: none;.

Tarjeta rehegua

OityvyróvaOjeity .card-decka favor ore rejilla-pe. Embojere ne tarjetakuéra mbo’esyry columna-pe ha emoĩ peteĩ .row-cols-*mba’yru túva rehegua emoheñói jey hag̃ua tarjeta baraja (ha katu oguerekove control alineación ombohováiva rehe).
OityvyróvaOjeity .card-columnsa favor de la Albañilería. Ehecha #28922 .
OityvyróvaOmyengovia pe .cardacordeón oñemopyendáva peteĩ componente Acordeón pyahu reheve .

Carrusel rehegua

Oñemoĩve .carousel-darkvariante pyahu jehaipyre iñypytũvape g̃uarã, control ha indicador-kuérape g̃uarã (iporãiterei umi fondo hesakãvévape g̃uarã).
Omyengovia umi chevron icono umi control carrusel rehegua umi SVG pyahu Bootstrap Icons -gui .

Oñemboty pe botón

OityvyróvaOñemoambue héra .closepeteĩ .btn-closetéra sa’ive genérico-pe g̃uarã.
Umi mbotyha ko’áĝa oipuru peteĩ background-image(SVG oñemboguapýva) peteĩ rangue ×HTML-pe, ohejáva ojejapo hag̃ua ñemboheko ndahasýiva tekotevẽ’ỹre ojepoko ne marca rehe.
Oñemoĩve .btn-close-whitevariante pyahu oiporúva filter: invert(1)ombohapéva umi icono omboyke contraste yvatevéva umi fondo iñypytũvéva rehe.

Ñembyaipa

Ojepe'a anclaje de rollo umi acordeón-pe guarã.

Umi desplegable rehegua

Oñemoĩve .dropdown-menu-darkvariante pyahu ha umi variable ojoajúva umi desplegable iñypytũva ojejerurévape g̃uarã.
Oñemoĩve mba’ekuaarã pyahu $dropdown-padding-x.
Ombopytũ pe divisor desplegable oñemyatyrõ hag̃ua contraste.
OityvyróvaOpaite mbaꞌe ojehúva pe desplegable-pe g̃uarã koꞌág̃a oñemboguata pe botón desplegable-pe ha upéi oñembopupu elemento túva peve.
Umi menú desplegable koꞌág̃a oguereko peteĩ data-bs-popper="static"atributo oñemboguapyvaꞌekue pe desplegable ñemohenda oĩ jave estático, térã desplegable oĩ jave navbar-pe. Kóva omoĩve ore JavaScript ha ñanepytyvõ jaipuru hag̃ua umi estilo ñemohenda jeporupyre jajoko’ỹre Popper ñemohenda.
OityvyróvaOjeity flipopción plugin desplegable-pe g̃uarã oipytyvõva configuración Popper nativa. Koꞌág̃a ikatu embogue pe jepokuaa jere rehegua embohasávo peteĩ matriz vacía fallbackPlacementsopción rehegua modificador jere rehegua.
Umi menú desplegable ikatu ko’áĝa ojepyso peteĩ autoCloseopción pyahu reheve oñemboguata hag̃ua auto close comportamiento . Ikatu eipuru ko opción emoneĩ hag̃ua clic menú desplegable ryepýpe térã okaháre ikatu hag̃uáicha interactivo.
Umi dropdown koꞌág̃a oipytyvõ .dropdown-items oñembojeguáva <li>s-pe.

Jumbotrón rehegua

OityvyróvaOmboguejy componente jumbotrón ikatúgui ojejapo jey umi utilidad ndive. Ehecha ore Jumbotron techapyrã pyahu peteĩ demostración rehegua.

Aty lista rehegua

Oñemoĩ .list-group-numberedmodificador pyahu umi aty lista-pe.

Navs ha tabs rehegua

Oñemoĩve nullmbaꞌekuaarã pyahu font-size, font-weight, color, ha mboꞌepype :hover colorg̃uarã ..nav-link

Navbars rehegua

OityvyróvaUmi Navbar koꞌág̃a oikotevẽ peteĩ mbaꞌeryru hyepýpe (oñemohesakãve hag̃ua drásticamente umi mbaꞌe ojejeruréva espaciado ha CSS oñeikotevẽva).
OityvyróvaPe .activeclase ndaikatuvéima ojeporu .nav-items rehe, ojepuruva era directamente .nav-links rehe.

Fuera de lona rehegua

Oñemoĩve componente offcanvas pyahu .

Paginación rehegua

Umi enlace paginación rehegua koꞌág̃a oguereko personalizable margin-leftoñembojere dinámicamente opaite esquina-pe ojeipeꞌa jave ojuehegui.
Oñemoĩ transitions umi enlace paginación rehegua.

Popovers rehegua

OityvyróvaOñemoambue héra ore plantilla popover por defecto-pe .arrow..popover-arrow
whiteListOpción oñembohéra jey allowList.

Hiladores rehegua

Umi hilador ko’áğa omomba’eguasu prefers-reduced-motion: reduceombovevýivo umi animación. Ehecha #31882 .
Oñemoporãve alineación vertical hilador rehegua.

Tostadas rehegua

Umi brindis ikatu ko'ágã oñemohenda peteîme oipytyvõvo posicionamiento .toast-containerservicios públicos .
Oñemoambue tostadas duración por defecto 5 segundo-pe.
Ojepe’a overflow: hiddentostadas-gui ha oñemyengovia border-radiuss hekopete orekóva calc()funciones.

Tembipururã ñe’ẽmondo

OityvyróvaOñemoambue héra .arrowore .tooltip-arrowplantilla tembipuru’i ñe’ẽñemi ñepyrũme.
OityvyróvaPe valor por defecto pe-pe g̃uarã fallbackPlacementsoñemoambue oñemohenda ['top', 'right', 'bottom', 'left']porãve hag̃ua umi elemento popper rehegua.
OityvyróvawhiteListOpción oñembohéra jey allowList.

Utilidades rehegua

OityvyróvaOmbohéra jey heta purupyrã oipuru hag̃ua mbaꞌekuaarã réra lógico réra dirección rehegua rangue oñembojoapývo RTL pytyvõ:
- Oñembohéra jey .left-*ha .right-*to .start-*ha .end-*.
- Oñembohéra jey .float-leftha .float-rightto .float-startha .float-end.
- Oñembohéra jey .border-leftha .border-rightto .border-startha .border-end.
- Oñembohéra jey .rounded-leftha .rounded-rightto .rounded-startha .rounded-end.
- Oñembohéra jey .ml-*ha .mr-*to .ms-*ha .me-*.
- Oñembohéra jey .pl-*ha .pr-*to .ps-*ha .pe-*.
- Oñembohéra jey .text-leftha .text-rightto .text-startha .text-end.
OityvyróvaOmbogue umi márgen negativo por defecto.
Oñemoĩve .bg-bodymbo’esyry pyahu oñemboguapy pya’e hag̃ua pe <body>'s fondo elemento adicional-pe.
Oñemoĩve umi utilidad posición pyahu rehegua top, right, bottom, ha left. Umi valor oike 0, 50%, ha 100%peteĩteĩva propiedad-pe g̃uarã.
Oñemoĩ pyahu .translate-middle-x& .translate-middle-yutilidad umi elemento oñemohendavaꞌekue absoluto/fijo mbytépe horizontalmente térã verticalmente.
Oñemoĩve umi border-widthutilidad pyahu .
OityvyróvaOñemoambue .text-monospacehéra .font-monospace.
OityvyróvaOjepe’a .text-hideha’égui peteĩ método anticuado oñeñomi hag̃ua jehaipyre ndojepuruvéimava’erã.
Oñemoĩve tembipururã purupyrãme .fs-*g̃uarã font-size(RFS oñembohapéva reheve). Koꞌãva oipuru peteĩchagua escala HTML rubro por defecto ndive (1-6, tuicháva guive michĩ peve), ha ikatu oñemoambue Sass mapa rupive.
OityvyróvaOñembohéra jey .font-weight-*utilidad- .fw-*kuérape ha’eháicha brevedad ha consistencia.
OityvyróvaOñembohéra jey .font-style-*utilidad- .fst-*kuérape ha’eháicha brevedad ha consistencia.
Oñemoĩ .d-gridojehechauka hag̃ua mbaꞌeporã ha mbaꞌeporã pyahu gap( .gap) CSS Grid ha flexbox ñemohendarãme g̃uarã.
OityvyróvaOjepe’a .rounded-smha rounded-lg, ha oñemoinge peteĩ escala pyahu mbo’esyry rehegua .rounded-0, .rounded-3. Ehecha #31687 .
Oñemoĩve line-heightutilidad pyahu: .lh-1, .lh-sm, .lh-baseha .lh-lg. Ehecha ko'ápe .
Omomýi .d-noneutilidad ore CSS-pe ome’ẽ hag̃ua chupe ipohýive ambue utilidad jehechaukarã ári.
Ombohape .visually-hidden-focusablepytyvõhára ombaꞌapo hag̃ua avei mbaꞌeryru rehe, oipurúvo :focus-within.

Pytyvõhára

Oityvyróva Umi pytyvõhára embed ombohováiva oñembohéra jey umi pytyvõhára ratio -pe orekóva clase réra pyahu ha teko oñemyatyrõva, avei peteĩ CSS mbaꞌekuaarã oipytyvõva.
- Umi clase oñembohéra jey oñemoambue byhaguã xen relación de aspecto-pe. Por ehémplo, .ratio-16by9haʼe koʼág̃a .ratio-16x9.
- Roity pe .embed-responsive-itemha elemento aty jeporavoha peteĩ jeporavoha isensíllova favor-pe .ratio > *. Natekotevẽvéima clase, ha pe ratio pytyvõhára koꞌág̃a ombaꞌapo oimeraẽva elemento HTML ndive.
- $embed-responsive-aspect-ratiosSass mapa oñembohéra jey ha oñembohape $aspect-ratiosivalór oike hag̃ua mboꞌepy réra ha porcentaje key: valuepar ramo.
- Koꞌág̃a oñemboheko umi CSS mbaꞌekuaarã ha oñemoinge peteĩteĩva mbaꞌekuaarãme g̃uarã Sass mapa-pe. Emoambue pe --bs-aspect-ratiombaꞌekuaarã oĩva pe .ratioemoheñói hag̃ua oimeraẽva aspecto ratio jeporupyre .
Oityvyróva Umi mbo’esyry “Lector de pantalla” ha’e ko’áĝa mbo’esyry “okañýva ojehechaháicha” .
- Omoambue Sass rembiapokue guive scss/helpers/_screenreaders.scssa pevescss/helpers/_visually-hidden.scss
- Oñembohéra jey .sr-onlyha .sr-only-focusablea .visually-hiddenha.visually-hidden-focusable
- Oñembohéra jey sr-only()ha sr-only-focusable()mixins visually-hidden()ha visually-hidden-focusable().
bootstrap-utilities.cssko’ágã oike avei ñane pytyvõhára. Umi pytyvõhára natekotevẽvéima ojegueru umi construcción personalizada-pe.

JavaScript rehegua

Omboguejy jQuery dependencia ha ohai jey umi plugin oĩ hag̃ua JavaScript jepiguápe.
OityvyróvaUmi atributo marandu rehegua opaite JavaScript plugin-pe g̃uarã ko’áĝa oñemboheko hérape oipytyvõ hag̃ua ojehechakuaa hag̃ua Bootstrap rembiapo mbohapýha tapicha ha ne código-gui. Por ehémplo, jaipuru data-bs-togglerangue data-toggle.
Opaite plugin ikatu ko’áĝa omoneĩ peteĩ CSS jeporavoha peteĩha argumento ramo. Ikatu embohasa peteĩ elemento DOM térã oimeraẽva CSS jeporavoha añetegua emoheñói hag̃ua peteĩ instancia pyahu plugin rehegua:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigikatu oñembohasa peteĩ tembiaporãicha omoneĩva Bootstrap Popper ñemboheko tee peteĩ argumento ramo, ikatu hag̃uáicha embojoaju ko ñemboheko tee nde rapére. Ojeporu umi desplegable, popover ha tembipuru’i ñe’ẽmondo rehe.
Pe valor por defecto pe-pe g̃uarã fallbackPlacementsoñemoambue oñemohenda ['top', 'right', 'bottom', 'left']porãve hag̃ua umi elemento Popper rehegua. Ojeporu umi desplegable, popover ha tembipuru’i ñe’ẽmondo rehe.
Ojepeꞌa subrayado umi método estático público-gui haꞌeháicha _getInstance()→ getInstance().