Saltar al contenido principal Salta a docs navegación
Check
in English

v5 nisqaman astakuspa

Bootstrap pukyuta willañiqikunaman, qillqakunaman chaymanta componentekunaman tikraykunata qatiy chaymanta qhaway v4 kaqmanta v5 kaqman astakunaykipaq yanapasunaykipaq.

Kay p'anqapi

v5.2.0 nisqa

Diseño refrescado

Bootstrap v5.2.0 huk sutil diseño musuqchayta huk maki componentekuna chaymanta propiedades tukuy proyectopi ruwan, aswan riqsisqa ch'uyanchasqa border-radiuschanikuna botones kaqpi chaymanta formulario kamachiykunapi . Qillqaykupas musuq wasi p'anqawan musuqchasqa kachkan, aswan sasan docs churaywan manaña lado barra t'aqakunata urmachinchu, chaymanta aswan riqsisqa ejemplokuna Bootstrap Iconos kaqmanta .

Aswan CSS tikraqkuna

Llapan componenteykuta musuqyachirqayku CSS tikraqkunata llamk'achinapaq. Sass tukuy imata takyachichkaptinraq, sapa componenta musuqchasqa CSS tikraqkunata componente base clasekunapi churananpaq (kayhina, .btn), aswan chiqa pacha Bootstrap kaqmanta ruwayta saqin. Qhipa lluqsichiykunapi, CSS tikraqkuna llamk'achiyninchikta mast'arisaqkupuni churasqaykuman, formulariokunaman, yanapakuqkunaman chaymanta yanapakuyniykuman. Aswanta ñawiriy CSS tikraqkunamanta sapa componente kaqpi sapan qillqa p'anqakunapi.

CSS tikraq llamk'achiyninchik huk chhika mana hunt'asqa kanqa Bootstrap 6 kaqkama.Mientras munayku kayta hunt'asqa ruwayta tukuy tablapi, paykuna ruwanku riesgota ruwanku p'akiy tikraykunata ruwanankupaq. Ejemplopaq, $alert-border-width: var(--bs-border-width)pukyuta codigoykupi churayqa Sass atikuqta kikin codigoykipi pakikun sichus $alert-border-width * 2imarayku ruwachkarqanki.

Chayhina, maypipas atikun, aswan CSS tikraqkunaman tanqasaqkupuni, ichaqa ama hina kaspa riqsiy ruwayniyku v5 kaqpi pisi limitasqa kanman.

Musuq_maps.scss

Bootstrap v5.2.0 musuq Sass willañiqita riqsichirqa _maps.scss. Askha Sass mapakunamanta hurqun _variables.scsshuk sasachakuy allichanapaq maypi huk ñawpaq mapaman musuqyachiykuna mana iskay kaq mapakunaman mast'ariqman churasqachu karqan. Ejemplopaq, kunanchasqakuna $theme-colorsmana wak tema mapakunaman ruwasqachu karqanku chaymanta $theme-colors, llave ruwanakuna llamkanakuna p'akispa. Pisi rimaypi, Sass huk limitacionniyuq maypi huk kuti huk ñawpaqmanta tikraq utaq mapa llamk'achisqa , mana musuqyachiyta atikunmanchu. Huk CSS tikraqkunawan huk rikch'aq pantay kan huk CSS tikraqkunata ruwanapaq llamk'achisqa kaqtin.

Kaymi imarayku Bootstrap kaqpi tikraq ruwanakuna qhipaman hamunanku tiyan @import "functions", ichaqa ñawpaq @import "variables"chaymanta puchuq apamuy pilaykumanta. Sass mapakunapipas kaqllataqmi —manaraq yachasqa kachkaptinku ñawpaqmanta churasqakunatam llallinayki. Kay mapakunam musuqman astasqa kachkan _maps.scss:

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

Sapanchasqa Bootstrap CSS ruwasqaykikuna kunan kayhinata huk sapaq mapakuna apamuywan rikch'akunan tiyan.

  // 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

Musuq utilidadkuna

Huk cambiokuna

  • Musuq $enable-container-classesakllanata riqsichisqa. — Kunanqa prueba CSS Grid churanaman akllachkaspa, .container-*clasekuna huñusqaraq kanqa, mana kay akllana false. Contenedorkunapas kunanqa canal valorninkutam waqaychanku.

  • Offcanvas componente kunan kutichiq variacionesniyuq . Ñawpaq .offcanvasclase mana tikrasqa qhipakuchkan —llapa qhaway punkukunapi willayta pakan. Kutichinanpaqqa chay .offcanvasclaseta mayqin .offcanvas-{sm|md|lg|xl|xxl}clasemanpas tikray.

  • Aswan rakhu mesa rakiqkuna kunan opt-in kanku. — Aswan rakhu chaymanta aswan sasa llalliq frontera tabla qutukunapuramanta hurqurqayku chaymanta huk akllana claseman kuyuchirqayku mayqinkunatachus ruwayta atikunki, .table-group-divider. Huk ejemplopaq tabla docs nisqapi qhaway.

  • Scrollspy wakmanta qillqasqa kachkan Intersection Observer API llamk'achinapaq , chaymanta niyta munan manaña relativo tayta wrappers necesitankichu,offsetconfig deprecates, chaymanta aswan. Scrollspy implementacionniykikunata maskay aswan chiqan chaymanta mana kaqlla kananpaq nav resaltasqankupi.

  • Popovers chaymanta yanapakuy yuyaychaykuna kunan CSS tikraqkunata llamk'achinku. Wakin CSS tikraqkuna Sass kaqninkumanta musuqchasqa kanku tikraqkunap yupayninta pisiyachinapaq. Chayhina kaptinqa, kimsa tikraqkunam kay lluqsichiypi manaña llamk'achisqachu: $popover-arrow-color, $popover-arrow-outer-color, chaymanta $tooltip-arrow-color.

  • Musuq .text-bg-{color}yanapaqkunata yapasqa. Sapanchasqa .text-*chaymanta .bg-*yanapakuykunata churanaykimantaqa, kunan yanapaqkunata llamk'achiy atikunki.text-bg-* huk background-colorchiqninakuq ñawpaq kaqwan churayta color.

  • Tikraq yapasqa .form-check-reverseetiquetakunap chaymanta tinkisqa qhaway qutukuna/radiokunap ordenninta tikranapaq.

  • Yapachisqa rayayuq columnakuna yanapakuy tablakunaman musuq .table-striped-columnsclase kaqnintakama.

Huk hunt'asqa lista tikraykunamanta, qhaway v5.2.0 llamk'ayta GitHub kaqpi .

v5.1.0 nisqa

  • CSS Grid churanapaq prueba yanapakuy yapasqa . — Kayqa huk llamkana ruwasqa kachkan, chaymanta manaraq ruwaypaq wakichisqachu kachkan, ichaqa musuq ruwanaman Sass kaqnintakama akllayta atikunki. Chayta atichinaykipaq, ñawpaqmanta ruwasqa llikata mana llamk'achiy, churaspa $enable-grid-classes: falsechaymanta CSS llikata atichiy churaspa $enable-cssgrid: true.

  • Navbars musuqchasqa offcanvas yanapanapaq. — Yanapakuy offcanvas cajones mayqin navbar kaqpipas kutichiq .navbar-expand-*clasekunawan chaymanta wakin offcanvas markawan.

  • Musuq tiyanapaq componente yapasqa . — Aswan musuq componenteyku, huk ñan bloqueokuna temporal quypaq chiqa contenidopa rantinpi yanapakuypaq imapas sitioykipi utaq appniykipi cargakuchkaqtaraq rikuchinanpaq.

  • Collapse plugin kunan yanapan horizontal colapso . — Yanapay .collapse-horizontalqampaq .collapsekaqta urmachinaykipaq widthchaypa rantinpi height. Ama navegador kaqmanta pintaychu huk min-heightutaq height.

  • Musuq pila chaymanta sayaq kamachiy yanapaqkunata yapasqa. — Utqaylla achka flexbox kaqninkunata churay pilakunawan utqaylla sapanchasqa churanakunata ruwanapaq . Horizontal ( .hstack) y vertical ( .vstack) pilakunamanta akllay. Musuq yanapaqkunawan<hr> elementokunaman rikch'akuq sayaq rakiqkunata yapay ..vr

  • Musuq tukuy pacha :rootCSS tikraqkunata yapasqa. — Yapachisqa achka musuq CSS tikraqkunata :rootpataman <body>estilokuna kamachinapaq. Aswan llamkanakunapi kachkanku, chaymanta tukuy yanapakuyniykupi chaymanta componentesniykupi, ichaqa kunankama ñawiriy CSS tikraqkunata Ruway t'aqapi .

  • CSS tikraqkunata llamk'achinapaq llimp'i chaymanta qhipa yanapakuykunata allichasqa, chaymanta musuq qillqa opacidad chaymanta qhipa opacidad yanapakuykunata yapasqa. — .text-* chaymanta .bg-*yanapakuykuna kunan CSS tikraqkunawan chaymanta rgba()llimp'i chanikunawan ruwasqa kanku, mayqin yanapakuytapas musuq opacidad yanapakuykunawan mana sasachu ruwayta atikunki.

  • Musuq fragmento ejemplokuna yapasqa imayna componentesniyku ruwayta rikuchinapaq. — Aysay listo ruwasqa componentekuna llamk'achinapaq chaymanta wak común diseño ruwanakuna musuq Fragmentos ejemplokunaykuwan . Chakikunata , urayk'aqkunata , lista huñukunata , modalkunata ima churan .

  • Mana llamk'achisqa churana estilokuna popovers kaqmanta chaymanta yanapakuykunamanta hurqusqa kaykuna Popper sapallanmanta ruwasqa kasqanrayku. $tooltip-marginha sido deprecado y establecido a nullen el proceso.

¿Aswan willakuykunata munankichu? Ñawinchay v5.1.0 blog qillqasqata.

¡Hey chaypi! Bootstrap 5 kaqpa ñawpaq hatun lluqsichisqaykuman tikraykuna, v5.0.0, uraypi qillqasqa kachkan. Paykunaqa mana hawapi rikuchisqa yapasqa tikraykunata rikuchinkuchu.

Dependenciakuna

  • Urmasqa jQuery.
  • Popper v1.x kaqmanta Popper v2.x kaqman yapasqa.
  • Libsass Dart Sass kaqwan tikrasqa imaynachus Sass compiladorniyku qusqa Libsass mana llamk'achisqa karqa.
  • Jekyllmanta Hugoman astakurqan qillqayku ruwasqaykumanta

Navegadorpa yanapakuynin

  • Internet Explorer 10 chaymanta 11 urmachisqa
  • Urmachisqa Microsoft Edge < 16 (Legacy Edge) .
  • Firefox < 60 nisqamanta urmachisqa
  • Urmasqa Safari < 12
  • Urmachisqa iOS Safari < 12
  • Urmasqa Cromo < 60

Qillqakuna tikray

  • Wakmanta ruwasqa qallariy p'anqa, docs churay, chaymanta chaki.
  • Musuq Paquete pusaq yapasqa .
  • Musuq Ruway t'aqa yapasqa , v4 kaqpa Tema p'anqanpa rantinpi , musuq willakuykunawan Sass kaqpi, tukuypaq ruwana akllanakuna, llimp'i esquemakuna, CSS tikraqkuna chaymanta aswan.
  • Llapan formulario qillqakunata musuq Formulariokuna t'aqaman musuqmanta wakichisqa , aswan t'inkisqa p'anqakunaman willayta t'aqaspa.
  • Chaynallataq, musuqyachisqa Layout t'aqa , aswan sut'ita rejilla contenidota aychachaypaq.
  • “Navs” componente p’anqata “Navs & Tabs” kaqman musuq sutichasqa.
  • “Cheques” nisqa p’anqata “Cheques & radios” nisqaman tikrasqa.
  • Navbar kaqmanta ruwasqa chaymanta musuq subnav yapasqa aswan facil sitioykupi chaymanta docs layakuna muyuriqpi purinapaq.
  • Maskana pampapaq musuq teclado llalliq ñan yapasqa: Ctrl + /.

Sass

  • Sass mapa huñusqakuna ñawpaqmanta churasqa zanjayku aswan facil redundante chanikunata hurqunapaq. Yuyaypi hap'iy kunan llapa chanikunata Sass mapakunapi imayna sut'inchanayki tiyan $theme-colors. Sass mapakunawan imayna ruwanamanta qhaway .

  • PakispaRenombrado color-yiq()función y variables relacionadas a color-contrast()como ya no es relacionado con espacio de colores YIQ. Qaway #30168 nisqapi.

    • $yiq-contrasted-thresholdsutiwanmi sutichasqa kachkan $min-contrast-ratio.
    • $yiq-text-darkhinaspapas $yiq-text-lightchayman hinam sutichasqa kanku $color-contrast-darkhinaspa $color-contrast-light.

  • PakispaMedia tapuy mixins parámetros huk aswan lógico enfoque kaqpaq tikrasqa.

    • media-breakpoint-down()kikin p'akiy puntota llamk'achin qatiq p'akiypa media-breakpoint-down(lg)rantinpi (kayhina, media-breakpoint-down(md)metakuna qhaway punkukuna aswan huch'uymantaqa lg).
    • Chaynallataq, iskay kaq parámetro in media-breakpoint-between()kaqpipas kikin p'akiy puntota llamk'achin qatiq p'akiypa rantinpi (kayhina, media-between(sm, lg)chaymanta media-breakpoint-between(sm, md)targets qhaway punkukuna chawpipi smchaymanta lg).

  • PakispaEstilos de impresión y $enable-print-stylesvariable nisqakunata hurqusqa. Imprimiyta qhaway clasekuna kunankamapas kachkan. Qaway #28339 .

  • PakispaUrmachisqa color(), theme-color(), chaymanta gray()ruwaykuna variables nisqap allinninpaq. Qaway #29083 nisqapi .

  • PakispaRuway sutichasqaman chaymanta kunan theme-color-level()ima color-level()llimp'i munasqaykita chaskikun llimp'ikunallamanta ranti $theme-color. Qaway #29083 Qhaway: color-level() qhipaman urmachisqa karqan v5.0.0-alpha3.

  • PakispaRenombrado $enable-prefers-reduced-motion-media-queryy $enable-pointer-cursor-for-buttonsa $enable-reduced-motiony $enable-button-pointerspara brevedad.

  • PakispaMixinta hurqusqa bg-gradient-variant(). Chay claseta llamk'achiy .bg-gradient, elementokunaman gradientekunata yapanaykipaq, paqarichisqa .bg-gradient-*clasekunap rantinpi.

  • Pakispa Ñawpaq mana riqsisqa mixinkuna hurqusqa:

    • hover, hover-focus, plain-hover-focus, yhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(hinallataq chaywan tinkisqa utilidad claseta urmachirqa, .text-hide)
    • visibility()
    • form-control-focus()

  • PakispaRuwayman musuq sutichasqa , Sass kikin llimp'i escala ruwanawan mana tupananpaq scale-color().shift-color()

  • box-shadowmixins kunan chanikunata saqin chaymanta achka argumentokunamanta nullurmay . Qaway #30394 nisqapi .none

  • Kunanqa border-radius()mixin nisqaqa ñawpaqmanta churasqa chaniyuqmi.

Sistema de colores

  • Chay llimp'i sistema mayqinchus llamk'arqan color-level()chaymanta $theme-color-intervalhuk musuq llimp'i sistemap allinninpaq hurqusqa karqan. Llapan lighten()chaymanta darken()ruwanakuna codebaseykupi chaymanta tikrasqa tint-color()kanku shade-color(). Kay ruwaykuna llimp’ita yuraqwan yanawan chaqrunqa, manataq llamp’u kayninta huk takyasqa chhikawan tikranqachu. Chay shift-color()huk llimp'ita tinte utaq llantuy kanqa, llasaynin parámetro positivo utaq negativo kasqanman hina. Aswan sut'inchaykunapaq #30622 nisqapi qhaway.

  • Musuq tintekuna chaymanta llimp'ikuna sapa llimp'ipaq yapasqa, sapa sapsi llimp'ipaq isqun sapaq llimp'ikunata quspa, musuq Sass tikraq hina.

  • Allinchasqa colorkuna contraste. Bumped color contraste ratio 3:1 kaqmanta 4.5:1 kaqkama chaymanta musuqchasqa azul, verde, cian, chaymanta rosa colores kaqmanta WCAG 2.1 AA contraste kaqmanta garantizananpaq. Hinallataqmi color contraste colorniykutapas cambiarqanikumanta $gray-900.$black

  • Color sistemayku yanapanapaq, musuq costumbre tint-color()chaymanta shade-color()ruwanakuna yapasqayku llimp'iyku allinta chaqrunapaq.

Rejilla musuqyachiykuna

  • ¡Musuq punto de ruptura! Musuq xxlruphay puntopaq yapasqa 1400pxchaymanta wichayman. Mana tukuy wak pakikukunapi tikray.

  • Allinchasqa canales. Kanalkuna kunan rems nisqapi churasqa, aswan k'ititaq v4 ( 1.5rem, icha yaqa 24px, uraymanta 30px). Kayqa sistema de red nisqaykupa canales nisqakunatam utilidades de espaciamiento nisqaykuwan tupachin.

    • Musuq clase de canalización ( .g-*, .gx-*, chaymanta .gy-*) yapasqa canales horizontales/verticales, canales horizontales, canales verticales nisqakunata kamachinapaq.
    • PakispaMusuq canalización utilidadkunawan tupananpaq .no-gutterssutichasqa ..g-0

  • Sapaqchasqakunaqa manañam llamk'achisqachu, chayrayku wakin elementokunaman position: relativeyapanayki kanman chay ruwayta kutichipunaykipaq..position-relative

  • PakispaUrmachirqa achka .order-*clasekunata, chaykunam achka kutipi mana servichikuq karqa. Kunanqa fuera de la caja nisqallatam .order-1quyku ..order-5

  • PakispaComponente urmachisqa .mediaimaynachus utilidadkunawan facilmente replicasqa kanman. Qaway #28265 chaymanta flex yanapakuykuna p'anqata huk rikch'anapaq .

  • Pakispa bootstrap-grid.csskunanqa box-sizing: border-boxsapanchasqa qutu-tuichayninta musuqmanta churanamantaqa, sapaqchasqallaman churakun. Chayhina, rejilla estiloykuqa aswan kitikunapi mana hark'asqa llamk'achiy atikun.

  • $enable-grid-classesmanañam harkanchu waqaychana clasekuna mirachiyta. Qaway #29146 nisqapi.

  • Mixinta musuqchasqa make-colñawpaqmanta kaqlla columnakunaman mana huk nisqa sayayniyuq.

Contenido, Reboot, hukkunapas

  • RFS kunan ñawpaqmanta atichisqa kachkan. Umakuna mixin kaqwan llamk'achkankufont-size()kikinmanta allichanqa paykunapfont-sizeescalanman qhawanawan. Kay ruwana ñawpaqta v4 kaqwan opt-in karqa.

  • PakispaRikuchiy tipografía nisqaykumanta allinchasqa, $display-*variablesniykumanta tikranapaq chaymanta huk $display-font-sizesSass mapawan. $display-*-weightHinallataqmi sapakama variables nisqakunata huk sapallapaq hurqusqa hinaspa s $display-font-weightallichasqa .font-size

  • Iskay musuq .display-*umalliq sayaykunata yapasqa, .display-5chaymanta .display-6.

  • T'inkikunaqa ñawpaqmanta chirusqa kachkan (mana hover kaqllapichu), mana wakin componentes kaqmanta kaptin.

  • Wakmanta ruwasqa tablakuna estilonku musuqyachinapaq chaymanta CSS tikraqkunawan wakmanta ruwanapaq aswan kamachiypaq estilomanta.

  • PakispaAnidado tablakuna manaña estilokunata herencianchu.

  • Pakispa .thead-lighthinaspapas .thead-darkurmachisqa kanku a favor de las .table-*clases variantes que pueden ser utilizados para todos los elementos de tabla ( thead, tbody, tfoot, tr, thy td).

  • Pakispatable-row-variant()Mixin sutichasqa kachkan chaymanta table-variant()2 parámetrosllata chaskikun: $color(color suti) chaymanta $value(color código). Frontera llimp'i chaymanta acento llimp'ikuna kikinmanta yupasqa kanku tabla factor variables kaqpi.

  • Tabla celda relleno variables nisqakunata -ychaymanta -x.

  • PakispaClase urmasqa .pre-scrollable. Qaway #29135 nisqapi

  • Pakispa .text-*utilidadkuna manaña hover chaymanta enfoque estadokuna t'inkikunaman yapankuchu. .link-*chaypa rantinpiqa yanapakuq clasekunatam servichikunmanku. Qaway #29267 nisqapi

  • PakispaClase urmasqa .text-justify. Qaway #29793 nisqapi

  • Pakispa <hr>elementokuna kunan llamk'achinku heightranti borderaswan allin yanapanapaq sizeatributota. Kayqa atichillantaqmi acolchado yanapakuykunata llamk'achiyta aswan rakhu rakiqkunata ruwanapaq (kayhina, <hr class="py-1">).

  • Ñawpaqmanta churasqa horizontal padding-lefton <ul>chaymanta <ol>elementokunata maskaqpa ñawpaqmanta 40pxchurasqamanta 2rem.

  • Yapachisqa $enable-smooth-scroll, mayqinchus tukuypaq ruwakun scroll-behavior: smooth—mana llamk'aqkuna pisiyachisqa kuyuyta mañachkanku prefers-reduced-motionwillay mast'ariq tapuywan. Qaway #31877

RTL nisqa

  • Horizontal dirección específicas variables, utilidades chaymanta mixins llapa sutichasqa kanku propiedades lógicas kaqwan llamk'anankupaq imaynachus flexbox churaykunapi tarikunku hina —kayhina, startchaymanta chaymanta endrantipi .leftright

Formas

  • ¡Musuq unupi puriq formulariokunata yapasqa! Floating etiquetas ejemplota hunt'asqa yanapasqa formulario componentekunaman promocionarqayku. Musuq Flotante etiquetas nisqa p'anqata qhaway.

  • Pakispa Elementos de forma nativa y personalizada nisqakuna huñusqa. Checkboxes, radiokuna, akllanakuna chaymanta wak yaykuykuna mayqinkunachus v4 kaqpi nativo chaymanta sapanchasqa clasekunayuq karqanku hukllachasqa kanku. Kunanqa yaqa llapan formulario elementoykuqa tukuyninpi ruwasqa kachkan, aswan achka mana HTML ruwasqa necesidadniyuq.

    • .custom-control.custom-checkboxkunanmi kachkan .form-check.
    • .custom-control.custom-custom-radiokunanmi kachkan .form-check.
    • .custom-control.custom-switchkunanmi kachkan .form-check.form-switch.
    • .custom-selectkunanmi kachkan .form-select.
    • .custom-filehinaspapas .form-filehawanpi ruwasqa estilokunawanmi tikrasqa kanku .form-control.
    • .custom-rangekunanmi kachkan .form-range.
    • Urmasqa nativo .form-control-filey .form-control-range.

  • PakispaUrmachisqa .input-group-appendhinaspa .input-group-prepend. Kunanqa botonesllata yapayta atinki chaymanta .input-group-textyaykuna qutukunamanta chiqan wawakuna hina.

  • Chiqaqchay kutichiy pantasqawan yaykusqa huñupi unaymanta chinkasqa frontera radiyu tukukuypi allichasqa huk yapasqa clase yapaywan .has-validationyaykusqa qutukunaman chiqaqchaywan.

  • Pakispa Urmachisqa formulario-específico diseño clasekuna sistemayku rejillapaq. Rejillaykuta chaymanta utilidadniykuta llamk'achiy .form-group, .form-row, utaq .form-inline.

  • PakispaFormulario etiquetakuna kunan mañakun .form-label.

  • Pakispa .form-textmanaña displaychuranchu , HTML elementota tikraspalla inline utaq harkay yanapakuy qillqata ruwayta atikunki.

  • Formulario kamachiykuna manaña heightatikuq kaqtin allichasqa llamk'achkanchu, aswanpas min-heighthuk componentekunawan ruwayta allinchaypaq chaymanta tupachiy allinchaypaq diferir.

  • Chiqaqchay iconokuna manaña <select>s con multiple.

  • Pukyu Sass willañiqikunata musuqmanta allichasqa scss/forms/, nisqapi yaykusqa huñu estilokuna.

Componentes nisqakuna

  • Huñusqa paddingchanikuna alertakuna, t'anta miskikuna, tarjetakuna, urayk'aqkuna, lista qutukuna, modales, popovers chaymanta yanapakuykuna yanapakuyniykupaq $spacertikraqniykupi sayasqa kanankupaq. Qaway #30564 nisqapi .

Acordeón

Alertakuna

Insignias

  • PakispaLlapan .badge-*llimp'i clasekunata qhipa yanapakuykunapaq urmachisqa (kayhina, llamk'achiy .bg-primaryranti .badge-primary).

  • PakispaUrmachisqa .badge-pill—chaypa .rounded-pillrantinpi utilidadta llamk'achiy.

  • PakispaHover chaymanta enfoque estilokuna <a>chaymanta <button>elementokuna hurqusqa.

  • / manta .25em/ .5emman insigniakunapaq ñawpaqmanta hunt'achiyta yapasqa ..35em.65em

  • T'antakunap ñawpaqmanta rikch'ayninta pisiyachirqan padding, background-color, chaymanta border-radius.

  • Musuq CSS sapanchasqa propiedad yapasqa --bs-breadcrumb-dividermana sasa ruwanapaq mana CSS kaqmanta huñuyta necesitaspa.

Botones

  • Pakispa Botonkuna tikray , qhaway qutukunawan utaq radiokunawan, manaña JavaScript nisqayuqchu kanku chaymanta musuq markayuq kanku. Manaña huk p'istu elementota mañaykuchu, ,.btn-checkkaqman<input>, chaymanta mayqin.btnclasekunawanpas<label>. Qaway #30650 nisqapi . Kaypaq docs Botonkuna p'anqaykumanta musuq Formularios t'aqaman astasqa.

  • Pakispa Utilizasqa .btn-blockservicios públicos nisqapaq. En vez de utilizar .btn-blocken el .btn, envolver tus botones con .d-gridy una .gap-*utilidad para espaciarlos como sea necesario. Kutichiq clasekunaman tikray aswan control chaykunamanta. Wakin ejemplokunapaq docs nisqakunata ñawinchay.

  • Actualizado nuestro button-variant()y button-outline-variant()mixins para apoyar parámetros adicionales.

  • Kunanchasqa botones yapasqa contraste hover kaqpi chaymanta activo estadokunapi garantizananpaq.

  • Mana llamk'achisqa botones kunan kanku pointer-events: none;.

Tarjeta

  • PakispaUrmachisqa .card-decka favor de nuestra rejilla. Tarjetaykikunata columna clasekunapi p'istuy chaymanta huk tayta .row-cols-*waqaychana yapay tarjeta mazokunata wakmanta ruwanapaq (ichaqa aswan kamachiywan kutichiq chiqanchaypi).

  • PakispaUrmachisqa .card-columnsAlbañilería nisqapa favorninpi. Qaway #28922 nisqapi .

  • PakispaChay .cardruwasqa acordeón nisqataqa musuq Acordeón nisqa componentewanmi tikrarqan .

  • Musuq .carousel-darkvariante yana qillqapaq, kamachiykunapaq, chaymanta rikuchiqkunapaq yapasqa (aswan k'anchariq qhipakunapaq ancha allin).

  • Carrusel kamachiykunapaq chevron iconokuna musuq SVGkunawan Bootstrap Icons kaqmanta tikrasqa .

Botón de cerrar

  • Pakispa.closeAswan pisi genérico .btn-closesutipaq sutichasqa.

  • Wichq'anakuna kunan huk background-image(SVG churasqa) &times;HTML kaqpi huk kaqmanta llamk'achinku, aswan facil ruwayta saqispa mana markayki llachpanayki tiyan.

  • Musuq .btn-close-whitevariante yapasqa filter: invert(1)chaymanta aswan hatun contraste desestimación iconokuna aswan yana qhipaman atichinanpaq llamk'achin.

Tuñiy

  • Acordeonkunapaq rollo anclaje nisqa hurqusqa.

  • Musuq .dropdown-menu-darkvariante chaymanta tinkisqa tikraqkuna yapasqa mañakuypi tutayaq urayk'achiqkunapaq.

  • Musuq tikraq yapasqa $dropdown-padding-x.

  • Allinchasqa chimpapuraypaq urayman rakiq tutayachirqa.

  • PakispaLlapan ruwaykuna urayk'aqpaq kunan urayk'aq tikray ñit'inapi llamk'achisqa chaymanta tayta elementokama burbujasqa.

  • Kunanqa urayk'aq menúkuna huk data-bs-popper="static"atributo churasqayuq kanku mayk'aq urayk'aqpa churaynin mana kuyusqa kaptin, utaq urayk'aq navbar kaqpi kaptin. Kayqa JavaScriptniykuwan yapasqa chaymanta yanapawanchik sapanchasqa posición estilokuna llamk'achiyta mana Popperpa posiciónninwan hark'aspa.

  • PakispaUrmachisqa flipakllana urayk'aq plugin kaqpaq nativo Popper ruwanakuna favorninpi. Kunanqa t'ikray ruwayta mana llamk'achiy atikunki huk ch'usaq matrizta fallbackPlacementsakllanapaq t'ikray tikraqpi pasaspa.

  • Kunanqa urayk'aq menúkuna musuq autoCloseakllanawan ñit'inapaq kanman kikin wichq'ana ruwayta llamk'achinapaq . Kay akllanata llamk'achiy atikunki ñit'iyta chaskinaykipaq urayk'aq menú ukhupi utaq hawapi interactivo kananpaq.

  • Dropdowns kunan yanapan .dropdown-items wrapped in <li>s.

Jumbotron nisqa

Lista qutu

  • Musuq nulltikraqkunata font-size, font-weight, color, chaymanta :hover coloryachayman yapasqa .nav-link.
  • PakispaNavbars kunan huk waqaychana ukhupi munanku (drasticamente simplificar espaciamiento requisitos chaymanta CSS munasqa).
  • PakispaChay .activeclaseqa manañam s nisqaman churakunmanchu .nav-item, chaytaqa s nisqapim chiqapllata churana .nav-link.

Fuera de lona

Paginación

  • Paginación t'inkikuna kunan ruwanapaq margin-leftkanku chaymanta tukuy k'uchukunapi dinamicamente muyurisqa kanku hukmanta t'aqasqa kaqtin.

  • transitionPaginacion t'inkikunaman s yapasqa .

Popovers

  • PakispaRenombrado .arrowa .popover-arrowen nuestra plantilla popover por defecto.

  • Huk sutichasqa whiteListakllanaman allowList.

Hiladores

  • Hiladores kunan hatunchanku prefers-reduced-motion: reduceanimacionkunata pisiyachispa. Qaway #31882 .

  • Allinchasqa hilador sayaq alineación.

Tostadas

  • Tostadas kunanqa hukpi churakunmanmi utilidadkuna churaypa.toast-container yanapayninwan .

  • Tostadas duracionta 5 segundos nisqaman tikrasqa.

  • Tostadasmanta hurqusqa hinaspa allin swan funcionkunawan overflow: hiddentikrasqa .border-radiuscalc()

Yanapakuykuna

  • PakispaRenombrado .arrowa .tooltip-arrowen nuestra plantilla de consejos de herramientas por defecto.

  • PakispaChaypaq ñawpaqmanta chaniqa fallbackPlacementstikrasqa ['top', 'right', 'bottom', 'left']kachkan aswan allin popper elementokuna churanapaq.

  • PakispaHuk sutichasqa whiteListakllanaman allowList.

Utilidades

  • PakispaAchka yanapakuykunata musuqmanta sutichasqa, RTL yanapakuy yapasqawan direccional sutikuna rantipi lógico propiedad sutikuna llamk'achinapaq:

    • Renombrado .left-*y .right-*a .start-*y .end-*.
    • Renombrado .float-lefty .float-righta .float-starty .float-end.
    • Renombrado .border-lefty .border-righta .border-starty .border-end.
    • Renombrado .rounded-lefty .rounded-righta .rounded-starty .rounded-end.
    • Renombrado .ml-*y .mr-*a .ms-*y .me-*.
    • Renombrado .pl-*y .pr-*a .ps-*y .pe-*.
    • Renombrado .text-lefty .text-righta .text-starty .text-end.

  • PakispaMana allin margenkunata ñawpaqmanta ruwasqa.

  • Musuq clase yapasqa chay 's qhipaman yapa elementokunaman .bg-bodyusqhaylla churanapaq .<body>

  • Musuq posición yanapakuykunata yapasqa top, right, bottom, chaymanta left. Chaninkuna 0, 50%, chaymanta 100%sapa propiedadpaq.

  • Musuq .translate-middle-x& .translate-middle-yyanapakuykunata horizontal utaq vertical chawpi absoluto/fijo churasqa elementokunaman yapasqa.

  • Musuq border-widthyanapakuykunata yapasqa .

  • PakispaHuk sutiwan .text-monospacesutichasqa .font-monospace.

  • PakispaQillqata pakanapaq mawk'a ñan kasqanrayku hurqusqa .text-hide, manaña llamk'achinachu tiyan.

  • Yanapakuykunapaq yapasqa .fs-*yanapakuykuna font-size(RFS atichisqa kaqwan). Kaykunaqa HTML kaqpa ñawpaqmanta umalliqninkuna hina kaqlla escalata llamk'achinku (1-6, hatunmanta huch'uyman), chaymanta Sass mapa kaqnintakama tikrayta atikun.

  • PakispaUtilidades sutichasqakuna .font-weight-*imaynachus .fw-*brevedad chaymanta consistencia kaqpaq.

  • PakispaUtilidades sutichasqakuna .font-style-*imaynachus .fst-*brevedad chaymanta consistencia kaqpaq.

  • .d-gridYanapakuykuna chaymanta musuq gapyanapakuykuna ( ) rikuchinapaq yapasqa .gapCSS Grid kaqpaq chaymanta flexbox churanakuna kaqpaq.

  • PakispaQullusqa .rounded-smchaymanta rounded-lg, chaymanta musuq escala clasekuna riqsichisqa, .rounded-0chaymanta .rounded-3. Qaway #31687 .

  • Musuq line-heightyanapakuykunata yapasqa: .lh-1, .lh-sm, .lh-basechaymanta .lh-lg. Kaypi qhaway .

  • CSSniykupi .d-noneyanapakuyta kuyuchirqa aswan llasayta wak qhaway yanapakuykunamanta qunanpaq.

  • Yanapakuqta mast'arisqa .visually-hidden-focusable, waqaychanakunapipas llamk'ananpaq, llamk'achispa :focus-within.

Yanapaqkuna

  • Pakispa Kutichiq churay yanapaqkuna musuq clase sutikunawan chaymanta allinchasqa ruwaykunawan ratio yanapaqkunaman sutichasqa kanku, chaymanta huk yanapakuq CSS tikraqwan.

    • Clases sutichasqa kanku tikranankupaq bykay xrelación de aspecto kaqpi. Ejemplopaq, .ratio-16by9kunanmi .ratio-16x9.
    • .embed-responsive-itemAswan sasan akllaqpa favorninpi chaymanta elemento qutu akllanata urmachirqayku .ratio > *. Mana aswan clase necesitakunchu, chaymanta ratio yanapaq kunan llamkan mayqin HTML elementowanpas.
    • $embed-responsive-aspect-ratiosSass mapa sutichasqa chaymanta $aspect-ratioschanikuna pisiyachisqa clase suti chaymanta pachakmanta key: valueiskay hina churanapaq.
    • CSS tikraqkuna kunan ruwasqa chaymanta sapa chanipaq Sass mapapi churasqa. Ima sapanchasqa aspecto ratio ruwanapaqpas chaypi kaq --bs-aspect-ratiovariableta tikray ..ratio

  • Pakispa “Pantalla leedor” nisqa clasekunaqa kunanqa “rikuywan pakasqa” nisqa clasekunan .

    • Sass willañiqita scss/helpers/_screenreaders.scsskayman tikrarqanscss/helpers/_visually-hidden.scss
    • Renombrado .sr-onlyy .sr-only-focusablea .visually-hiddeny.visually-hidden-focusable
    • Renombrado sr-only()y sr-only-focusable()mixins a visually-hidden()y visually-hidden-focusable().

  • bootstrap-utilities.csskunanqa yanapaqninchikkunapas kachkanmi. Yanapakuqkuna manaña sapanchasqa ruwaykunapi apamunankuchu tiyan.

JavaScript nisqa

  • jQuery dependenciata urmachirqa chaymanta plugins kaqmanta qillqarqa sapa kuti JavaScript kaqpi kananpaq.

  • PakispaLlapa JavaScript plugins kaqpaq willay layakuna kunan sutikuna t'aqasqa kanku yanapakuypaq Bootstrap ruwayta kimsa kaqkunamanta chaymanta kikiyki codigoykimanta t'aqayta. Ejemplopaq, data-bs-togglechaypa rantinpim servichikunchik data-toggle.

  • Llapan plugins kunan huk CSS akllanata ñawpaq argumento hina chaskiyta atinku. Huk DOM elementota utaq mayqin allin CSS akllanatapas pasayta atikunki huk musuq instanciata plugin kaqmanta ruwanaykipaq:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfighuk ruwana hina pasasqa kanman mayqinchus Bootstrap kaqpa ñawpaqmanta Popper ruwananta huk argumento hina chaskikun, chaymanta kay ñawpaqmanta ruwasqa ruwayta ñanniykipi huñuyta atikunki. Urmachiykunaman, popoverkunaman, yanapakuykunaman ima ruwakun.

  • Kaypaq ñawpaqmanta chaniqa Popper elementokuna aswan allin churanapaq fallbackPlacementskayman tikrasqa kachkan . Urmachiykunaman, popoverkunaman, yanapakuykunaman ima ruwakun.['top', 'right', 'bottom', 'left']

  • _getInstance()→ hina llaqtapaq estático métodokunamanta subrayado hurqusqa getInstance().