V5-e göçmek

v5.2.0

Täzelenen dizaýn

“Bootstrap v5.2.0” taslama boýunça az sanly komponentler we häsiýetler üçin inçe dizaýn täzelenmesini görkezýär, esasanam border-radiusdüwmelerdäki we forma dolandyryşlaryndaky takyk bahalar arkaly . Şeýle hem resminamalarymyz täze baş sahypa, gapdal paneliň bölümlerini ýykmajak has ýönekeý resminamalar we Bootstrap nyşanlarynyň has görnükli mysallary bilen täzelendi .

Has köp CSS üýtgeýjisi

CSS üýtgeýjilerini ulanmak üçin ähli komponentlerimizi täzeledik. .btnSass henizem hemme zadyň üstünde dursa -da, “Bootstrap” -y has reallaşdyrmaga mümkinçilik berýän komponent esasy synplaryna (meselem) CSS üýtgeýjilerini goşmak üçin her bir komponent täzelendi . Ondan soňky neşirlerde, CSS üýtgeýjilerimizi ýerleşdirişimize, görnüşlerimize, kömekçilerimize we kömekçi hyzmatlarymyza giňeltmegi dowam etdireris. Her komponentdäki CSS üýtgeýjileri barada degişli resminama sahypalarynda has giňişleýin okaň.

“CSS” üýtgeýän ulanyşymyz “Bootstrap 6” -a çenli birneme doly bolmaz. Bulary tagtada doly durmuşa geçirmek islesek-de, üýtgeşmeleriň döremegine töwekgelçilik edýär. Mysal üçin, deslapky kodumyzda sazlamak , haýsydyr bir sebäbe görä $alert-border-width: var(--bs-border-width)eden bolsaňyz, öz koduňyzdaky Sass-y bozýar .$alert-border-width * 2

Şeýle bolansoň, mümkin boldugyça has köp CSS üýtgeýjisine tarap dowam ederis, ýöne ýerine ýetirişimiziň v5-de birneme çäklendirilip bilinjekdigini ýadyňyzdan çykarmaň.

Täze_maps.scss

Bootstrap v5.2.0 bilen täze Sass faýly hödürlendi _maps.scss. _variables.scssAsyl karta täzelenmeleri uzaldýan ikinji kartalara ulanylmaýan meseläni düzeltmek üçin birnäçe Sass kartasyny çykarýar . Mysal üçin, täzelenmeler esasy özleşdiriş işlerini bozup $theme-colors, bil baglaýan beýleki tema kartalarynda ulanylmaýar . $theme-colorsGysgaça aýdylanda, Sass-yň çäklendirmesi bar, bir gezek üýtgeýän ýa-da karta ulanylansoň , ony täzeläp bolmaýar. Beýleki CSS üýtgeýjileri düzmek üçin ulanylanda CSS üýtgeýjileri bilen meňzeş kemçilik bar.

Şonuň üçin “Bootstrap” -da üýtgeýän özleşdirmeler soň gelmeli @import "functions", ýöne @import "variables"öňümizdäki we galan import bukjamyz. Sass kartalaryna-da degişlidir, ulanylmazdan ozal defoltlary ýok etmeli. Aşakdaky kartalar täze göçürildi _maps.scss:

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

Customörite Bootstrap CSS gurýan indi aýratyn kartalar importy bilen şuňa meňzeş bir zat görünmeli.

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

Täze hyzmatlar

• Embarym şriftleri goşmak üçin giňeldilen font-weightkömekçi enjamlar ..fw-semibold
• Iki sany täze ululygy we has köp wariant üçin giňeldilen border-radiuskömekçi enjamlar ..rounded-4.rounded-5

Goşmaça üýtgeşmeler

• Täze $enable-container-classeswariant hödürledi. - Indi eksperimental CSS Grid düzülişini saýlanyňyzda .container-*, bu opsiýa kesgitlenmedik bolsa, sapaklar düzüler false. Konteýnerler indi içerki gymmatlyklaryny saklaýarlar.

• “Offcanvas” komponentinde indi täsirli üýtgeşiklikler bar . Asyl .offcanvassynp üýtgemän galýar - ähli görnüşdäki mazmuny gizleýär. Oňa jogap bermek üçin şol .offcanvassynpy islendik .offcanvas-{sm|md|lg|xl|xxl}synpa üýtgediň.

• Galyň stol bölüjileri indi saýlandy. - Stol toparlarynyň arasyndaky araçägi has galyň we has kyn aýyrdyk we ulanyp boljak islege bagly klasa geçirdik , .table-group-divider. Mysal üçin tablisanyň resminamalaryna serediň.

• “Scrolllspy” , “Kesiş synçysy API” -ni ulanmak üçin gaýtadan ýazyldy , bu size indi ene-atanyň örtükleriniň gerek däldigini,offsetkonfigurasiýany ýatyrýandygyny we ş.m. “Scrollspy” ýerine ýetiriş işleriňizi has takyk we yzygiderli görkezmek üçin gözläň.

• Açyjylar we gurallar indi CSS üýtgeýjilerini ulanýarlar. Käbir CSS üýtgeýjiler üýtgeýänleriň sanyny azaltmak üçin Sass kärdeşlerinden täzelendi. Netijede, bu goýberilişde üç üýtgeýji köneldi: $popover-arrow-color,, $popover-arrow-outer-colorwe $tooltip-arrow-color.

• Täze .text-bg-{color}kömekçiler goşuldy. Aýry- aýry .text-*we .bg-*kommunal hyzmatlary gurmagyň ýerine, indi biri-birine gapma-garşylykly öň hatar bellemek üçin kömekçileri .text-bg-*ulanyp bilersiňiz .background-colorcolor

• .form-check-reverseEtiketkalaryň we baglanyşykly gutularyň / radiolaryň tertibini üýtgetmek üçin üýtgediji goşuldy .

• Täze synp arkaly tablisalara zolakly sütünler goşuldy ..table-striped-columns

Üýtgeşmeleriň doly sanawy üçin GitHub-daky v5.2.0 taslamasyna serediň .

v5.1.0

• CSS Grid düzülişi üçin synag goldawy goşuldy . - Bu dowam etdirilýän iş we entek önümçilige taýýar däl, ýöne täze aýratynlygy Sass arkaly saýlap bilersiňiz. Ony işletmek üçin, $enable-grid-classes: falseCSS Grid-i sazlamak we işletmek arkaly deslapky seti öçüriň $enable-cssgrid: true.

• Offcanwalary goldamak üçin deňiz panelleri täzelendi. - Duýgur synplar we käbir offcanwas belligi bilen islendik deňiz panelinde offkanwas çyzgylaryny goşuň ..navbar-expand-*

• Täze ýer eýesi komponenti goşuldy . - Iň täze komponentimiz, sahypaňyza ýa-da programmaňyza bir zadyň ýüklenýändigini görkezmäge kömek etmek üçin hakyky mazmunyň ýerine wagtlaýyn bloklary üpjün etmegiň usuly.

• Apseykylýan plugin indi keseligine çökmegi goldaýar . - ýerine derek ýykylmak .collapse-horizontalüçin goşuň . A ýa-da sazlap, brauzeriň gaýtadan reňklenmeginden gaça duruň ..collapsewidthheightmin-heightheight

• Täze stak we dik düzgün kömekçileri goşuldy. - stakanlar bilen ýörite düzülişleri çalt döretmek üçin birnäçe flexbox häsiýetlerini çalt ulanyň . .hstackGorizontal ( ) we dik ( .vstack) stakanlardan saýlaň . Täze kömekçiler<hr> bilen elementlere meňzeş dik bölüjileri goşuň ..vr

• Täze global :rootCSS üýtgeýjileri goşuldy. -:root Stillere gözegçilik etmek derejesine birnäçe täze CSS üýtgeýjisi <body>goşuldy. Köp zat, şol sanda hyzmatlarymyzy we komponentlerimizi öz içine alýar, ýöne häzirlikçe “Customize” bölüminde CSS üýtgeýjilerini okaň .

• CSS üýtgeýjilerini ulanmak üçin reňk we fon enjamlary düýpli abatlandy we täze tekst açyklygy we fon aç -açanlygy goşuldy . - .text-* we .bg-*kommunal hyzmatlar indi CSS üýtgeýjileri we rgba()reňk bahalary bilen gurlup, täze aç-açan kömekçi enjamlar bilen islendik peýdany aňsatlaşdyrmaga mümkinçilik berýär.

• Komponentlerimizi nädip sazlamalydygyny görkezmek üçin täze parça mysallary goşuldy. - Täze Snippets mysallarymyz bilen ýöriteleşdirilen komponentleri we beýleki umumy dizaýn nagyşlaryny ulanmaga taýynlaň . Aşakdaky ýazgylary , aşak düşýänleri , sanaw toparlaryny we modallary öz içine alýar .

• Ulanylmaýan ýerleşiş stilleri açylýan ýerlerden we gurallar maslahatlaryndan aýryldy, sebäbi bular diňe Popper tarapyndan dolandyrylýar. köneldi we işinde $tooltip-margingoýuldy .null

Has giňişleýin maglumat isleýärsiňizmi? V5.1.0 blog ýazgysyny okaň.

Baglylyklar

• JQuery taşlandy.
• Popper v1.x-den Popper v2.x-a täzelendi.
• Libsass-y Dart Sass bilen çalyşdy, sebäbi Libsass-a berlen Sass düzüjimiz köneldi.
• Resminamalarymyzy gurmak üçin Jekyldan Gýugo göçdi

Brauzer goldawy

• Internet Explorer 10 we 11 taşlandy
• Microsoft Edge <16 (Legacy Edge) taşlandy
• Firefox taşlandy <60
• Taşlanan Safari <12
• IOS Safari taşlandy <12
• Taşlanan Chrome <60

Resminamalar üýtgeýär

• Baş sahypa, resminamalaryň ýerleşişi we aşaky sözbaşy.
• Täze bukja gollanmasy goşuldy .
• V4-iň Mowzuk sahypasyny Sass, global konfigurasiýa opsiýalary, reňk shemalary, CSS üýtgeýjileri we başgalar bilen çalşyp, täze “Customize” bölümi goşuldy .
• Formhli resminamalary mazmuny has ünsli sahypalara bölüp, täze formalar bölümine üýtgedip gurduň.
• Şonuň ýaly-da, gözenegiň mazmunyny has anyklaşdyrmak üçin Layout bölümini täzeledi.
• “Navs” komponent sahypasynyň adyny “Navs & Tabs” diýip üýtgetdiler.
• “Çekler” sahypasynyň adyny “Çekler we radiolar” diýip üýtgetdiler.
• Deňiz panelini täzeden dizaýn etdi we sahypalarymyza we resminamalaryň wersiýalaryna aýlanmagy aňsatlaşdyrmak üçin täze subnaw goşdy.
• Gözleg meýdany üçin täze klawiatura salgylanmasy goşuldy : Ctrl + /.

Sass

• Artykmaç bahalary aýyrmagy aňsatlaşdyrmak üçin deslapky Sass kartasynyň birleşmesini gazdyk. Indi Sass kartalaryndaky ýaly ähli bahalary kesgitlemelidigini ýadyňyzdan çykarmaň $theme-colors. Sass kartalary bilen nähili işleşmelidigini barlaň .

• Döwmekcolor-yiq()Funksiýa we baglanyşykly üýtgeýjiler, color-contrast()indi YIQ reňk giňişligi bilen baglanyşykly däl . # 30168 serediň.

  • $yiq-contrasted-thresholdadyna üýtgedildi $min-contrast-ratio.
  • $yiq-text-darkwe $yiq-text-lightdegişlilikde üýtgedilýär $color-contrast-darkwe $color-contrast-light.

• DöwmekMediýa talaplarynyň garyndysynyň parametrleri has logiki çemeleşme üçin üýtgedi.

  • media-breakpoint-down()indiki nokat ýerine derek kesiş nokadyny ulanýar (meselem, has kiçi nyşanlaryň media-breakpoint-down(lg)ýerine ).media-breakpoint-down(md)lg
  • Edil şonuň ýaly-da, ikinji parametr media-breakpoint-between()indiki kesiş nokadynyň ýerine (meselem, we arasyndaky nyşana media-between(sm, lg)görnüşleriniň ýerine ) aralyk nokadyny ulanýar.media-breakpoint-between(sm, md)smlg

• DöwmekÇap etmegiň stilleri we $enable-print-stylesüýtgeýänleri aýryldy. Çap ediş displeý sapaklary henizem bar. # 28339 serediň .

• DöwmekÜýtgeýjileriň peýdasyna taşlandy color()we işleýär. # 29083 serediň .theme-color()gray()

• Döwmektheme-color-level()Funksiýanyň adyny üýtgedip , diňe reňkleriň color-level()ýerine islän reňkiňizi kabul edýär . Seret # 29083 Seresap boluň: soň goýberildi .$theme-color color-level()v5.0.0-alpha3

• DöwmekAdy üýtgedildi we $enable-prefers-reduced-motion-media-querygysga $enable-pointer-cursor-for-buttonswagtda .$enable-reduced-motion$enable-button-pointers

• DöwmekGaryndyny aýyrdy bg-gradient-variant(). Döredilen synplaryň .bg-gradientýerine elementlere gradiýent goşmak üçin synpy ulanyň ..bg-gradient-*

• Döwmek Öň könelen garyndylary aýyrdy:

  • hover,, we hover-focus_plain-hover-focushover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(baglanyşykly peýdaly synpy hem taşlady, .text-hide)
  • visibility()
  • form-control-focus()

• DöwmekSassyň reňk ulaltmak funksiýasy bilen çaknyşmazlyk üçin scale-color()funksiýa üýtgedildi .shift-color()

• box-shadowgaryndylar indi nullbahalara we nonebirnäçe argumentlerden gaçmaga mümkinçilik berýär. # 30394 serediň .

• Garyndynyň border-radius()indi başlangyç bahasy bar.

Reňk ulgamy

• Işleýän color-level()we $theme-color-intervaltäze reňk ulgamynyň peýdasyna aýrylan reňk ulgamy. Kod bazamyzdaky ähli lighten()we darken()funksiýalar çalyşýar tint-color()we shade-color(). Bu funksiýalar reňkini belli bir mukdarda üýtgetmegiň ýerine ak ýa-da gara bilen garyşdyrar. Wesýet shift-color(), agramynyň parametriniň polo positiveitel ýa-da otrisateldigine baglylykda reňk berer ýa-da kölege eder. Has giňişleýin maglumat üçin # 30622 serediň .

• Her Sass üýtgeýjileri hökmünde her reňk üçin dokuz aýratyn reňk berýän her reňk üçin täze reňkler we kölegeler goşuldy.

• Reňkleriň gowulaşmagy. WCAG 2.1 AA kontrastyny ​​üpjün etmek üçin 3: 1-den 4,5: 1-e çenli reňk kontrast gatnaşygy we gök, ýaşyl, sary we gülgüne reňkler täzelendi. $gray-900Şeýle hem reňk kontrast reňkimizi üýtgedi $black.

• tint-color()Reňk ulgamymyzy goldamak üçin reňklerimizi dogry garyşdyrmak üçin täze adat we shade-color()funksiýalary goşduk .

Grid täzelenmeleri

• Täze nokat! We ýokary çykmak üçin täze xxlnokat goşuldy 1400px. Beýleki böleklere hiç hili üýtgeşme ýok.

• Gowulandyrylan çukurlar. Gutlar indi reňkde goýuldy we v4-den has dar ( 1.5remýa-da 24pxaşakdan 30px). Bu, gözenek ulgamymyzyň çukurlaryny aralyk hyzmatlarymyz bilen deňleşdirýär.

  • Gorizontal / wertikal çukurlary, gorizontal çukurlary we dik çukurlary dolandyrmak üçin täze çukur synpy ( .g-*, .gx-*we ) goşuldy..gy-*
  • DöwmekTäze gutujyk enjamlaryna gabat .no-guttersgelmek üçin üýtgedildi ..g-0

• Sütünler indi ulanylmaýar, şonuň üçin bu hereketi dikeltmek üçin käbir elementlere position: relativegoşmaly bolmagyňyz mümkin ..position-relative

• Döwmek.order-*Köplenç ulanylmaýan birnäçe synpy taşlady. Indi diňe gutudan daşarda .order-1üpjün edýäris..order-5

• DöwmekKomponentleri taşlady, .mediasebäbi kommunal hyzmatlar bilen aňsatlyk bilen köpeldilip bilner. Mysal üçin # 28265 we flex kömekçi sahypasyna serediň .

• Döwmek bootstrap-grid.cssindi diňe box-sizing: border-boxglobal guty ululygyny üýtgetmegiň ýerine sütüne degişlidir. Şeýlelik bilen, gözenek stillerimiz päsgelçiliksiz has köp ýerde ulanylyp bilner.

• $enable-grid-classesindi konteýner synplarynyň döredilmegini öçürmeýär. # 29146 serediň.

• make-colMiksini kesgitlenen ululykdaky deň sütünlere standart görnüşde täzeledi .

Mazmuny, gaýtadan açmak we ş.m.

• RFS indi adaty ýagdaýda işledilýär. Garyndyny ulanýan sözbaşylar,görnüşi bilen masştabynyfont-size()awtomatiki düzerBu aýratynlyk öň v4 bilen saýlandy.font-size

• Döwmek$display-*Üýtgeýjilerimizi we $display-font-sizesSass kartasy bilen çalyşmak üçin displeý tipografiýamyzy düýpli abatladyk . $display-*-weightŞeýle hem bir $display-font-weightwe sazlanan font-sizes üçin aýratyn üýtgeýjileri aýyrdy .

• Iki sany täze .display-*sözbaşy ululygy goşuldy .display-5we .display-6.

• Salgylar, belli bir bölekleriň bir bölegi bolmasa, deslapky görnüşde çyzylýar (diňe aýlawda däl).

• Stillerini täzelemek we stillere has köp gözegçilik etmek üçin CSS üýtgeýjileri bilen täzeden gurmak üçin täzeden düzülen tablisalar .

• DöwmekÖýlenen tablisalar indi stilleri miras almaýarlar.

• Döwmek .thead-lightwe ähli tablisa elementleri (,,, we ) üçin ulanyp boljak wariant synplarynyň peýdasyna .thead-darktaşlanýar ..table-*theadtbodytfoottrthtd

• DöwmekGaryndynyň table-row-variant()ady üýtgedilip, table-variant()diňe 2 parametr kabul edilýär: $color(reňk ady) we $value(reňk kody). Araçäk reňki we aksent reňkleri tablisanyň faktor üýtgeýjilerine esaslanyp awtomatiki hasaplanýar.

• Stol öýjüginiň padding üýtgeýjilerini -ywe -x.

• DöwmekTaşlanan .pre-scrollablesynp. # 29135 serediň

• Döwmek .text-*kommunal hyzmatlar mundan beýläk baglanyşyklara ünsi jemlemeýär. .link-*ýerine kömekçi sapaklary ulanylyp bilner. # 29267 serediň

• DöwmekTaşlanan .text-justifysynp. # 29793 serediň

• Döwmek <hr>elementleri indi has gowy goldamak üçin heightulanýarlar . Şeýle hem, has galyň bölüjileri döretmek üçin padding enjamlaryny ulanmaga mümkinçilik berýär (meselem ).bordersize<hr class="py-1">

• Brauzeriň deslapky gorizontal padding-leftwe elementlerini <ul>täzeden düzüň .<ol>40px2rem

• Mediýa talaplary arkaly hereketiň azalmagyny soraýan ulanyjylardan başga, dünýä derejesinde $enable-smooth-scrollulanylýar . # 31877 serediňscroll-behavior: smoothprefers-reduced-motion

RTL

• Gorizontal ugur boýunça üýtgeýänler, kömekçi enjamlar we garyndylar, flexbox düzülişindäki ýaly logiki häsiýetleri ulanmak üçin üýtgedildi, meselem , ýerine startwe .endleftright

Formalar

• Täze ýüzýän görnüşler goşuldy! Floüzýän bellikleriň mysalyny doly goldaýan forma böleklerine hödürledik. Täze ýüzýän bellikler sahypasyna serediň.

• Döwmek Konsolidirlenen ýerli we adaty görnüş elementleri. V4-de ýerli we adaty sapaklary bolan bellikler, radiolar, saýlamalar we beýleki girişler birleşdirildi. Indi forma elementlerimiziň hemmesi diýen ýaly düýbünden adaty, köpüsi adaty HTML zerurlygy bolmazdan.

  • .custom-control.custom-checkboxhäzir .form-check.
  • .custom-control.custom-custom-radiohäzir .form-check.
  • .custom-control.custom-switchhäzir .form-check.form-switch.
  • .custom-selecthäzir .form-select.
  • .custom-filewe .form-fileüstündäki adaty stiller bilen çalşyryldy .form-control.
  • .custom-rangehäzir .form-range.
  • Taşlanan ýerli .form-control-filewe .form-control-range.

• DöwmekTaşlandy .input-group-appendwe .input-group-prepend. Indi diňe düwmeleri we .input-group-textgiriş toparlarynyň gönüden-göni çagalary hökmünde goşup bilersiňiz.

• Barlag toparynda uzak wagtlap ýitip barýan serhet radiusy, tassyklama seslenmesi.has-validation bilen giriş toparlaryna goşmaça synp goşmak bilen düzedilýär .

• Döwmek Tor ulgamymyz üçin forma mahsus düzüliş sapaklary. .form-groupToruňyzy we kömekçi enjamlarymyzy , .form-rowýa-da ýerine ulanyň .form-inline.

• DöwmekForma bellikleri indi talap edilýär .form-label.

• Döwmek .form-textindi displayHTML elementini üýtgedip, isleýşiňiz ýaly içerki tekst döretmäge ýa-da kömek tekstini blokirlemäge mümkinçilik berýän sazlamalar ýok.

• Forma dolandyryşlary indi heightmümkin boldugyça düzedilmeýär, ýerine min-heightözleşdirmegi we beýleki komponentler bilen utgaşyklygy gowulandyrmak üçin yza süýşürilýär.

• Barlamak nyşanlary indi <select>s bilen ulanylmaýar multiple.

• Gaýtadan düzülen çeşme Sass faýllary scss/forms/, giriş toparynyň stillerini goşmak bilen.

Komponentler

• Duýduryşlar, çörek bölekleri, kartoçkalar, aşak düşýänler, sanaw toparlary, modallar, popovers we üýtgeýjimize paddingesaslanýan gurallar üçin bitewi bahalar. # 30564 serediň .$spacer

Akkordeon

• Täze akkordeon komponenti goşuldy .

Duýduryşlar

• Duýduryşlarda indi nyşanly mysallar bar .

• Her duýduryşda s üçin ýörite stil aýryldy <hr>, sebäbi olar eýýäm ulanýarlar currentColor.

Nyşanlar

• DöwmekFon hyzmatlary üçin ähli .badge-*reňk synplaryny taşladyňyz (meselem, .bg-primaryýerine ulanyň .badge-primary).

• DöwmekTaşlandy - ýerine .badge-pillpeýdasyny ulanyň .rounded-pill.

• Döwmek<a>Aýlawlar we <button>elementler üçin fokus stilleri aýryldy .

• Nyşanlar üçin / -den / .25em-e .5emçenli asyl gaplamany köpeltmek ..35em.65em

Çörek bölekleri

• paddingAýyrmak we çörek bölekleriniň adaty görnüşini ýönekeýleşdirmek background-colorwe border-radius.

• --bs-breadcrumb-dividerCSS -ni täzeden düzmegiň zerurlygy bolmazdan, aňsatlaşdyrmak üçin täze CSS ýöriteleşdirilen emläk goşuldy.

Düwmeler

• Döwmek Bellikler ýa-da radiolar bilen düwmeleri çalyşyň , indi JavaScript talap etmeýär we täze bellik bolýar. Mundan beýläk örtük elementini talap etmeýäris, goşuň.btn-checkwesynplar<input>bilen jübütläň. # 30650 serediň . Munuň üçin resminamalar düwmeler sahypamyzdan täze formalar bölümine geçdi..btn<label>

• Döwmek .btn-blockJemgyýetçilik hyzmatlary üçin taşlandy Düwmelerini ulanmagyň ýerine .btn-blockdüwmeleriňizi .btnörtüň .d-gridwe .gap-*zerur bolanda ýerleşdiriň. Olara has köp gözegçilik etmek üçin täsirli synplara geçiň. Käbir mysallar üçin resminamalary okaň.

• Goşmaça parametrleri goldamak üçin biziň button-variant()we garyndylarymyzy täzeledik.button-outline-variant()

• Aýlawda we işjeň ýagdaýlarda kontrastyň ýokarlanmagyny üpjün etmek üçin täzelenen düwmeler.

• Öçürilen düwmeler indi bar pointer-events: none;.

Kart

• DöwmekTorumyzyň .card-deckpeýdasyna taşlandy. Kartalaryňyzy sütün sapaklaryna örtüň we .row-cols-*kartoçkalary döretmek üçin esasy konteýner goşuň (ýöne täsirli deňleşmä has gözegçilikli).

• DöwmekMasoniýanyň .card-columnspeýdasyna taşlandy. # 28922 serediň .

• Döwmek.cardEsasy akkordeony täze “Accordion” komponenti bilen çalyşdy .

Karusel

• Garaňky tekst, dolandyryş we görkezijiler üçin täze .carousel-darkwariant goşuldy (has ýeňil fon üçin ajaýyp).

• Karusel dolandyryşlary üçin şewron nyşanlaryny Bootstrap nyşanlaryndan täze SVG-ler bilen çalyşdy .

Closeapyň

• DöwmekHas umumy ady bilen .closeüýtgedildi ..btn-close

• Closeapyk düwmeler, indi bellikleriňize degmezden has aňsatlaşdyrmaga mümkinçilik berýän HTML-de background-imagedäl-de (oturdylan SVG) ulanýar.×

• Garaňky fonda has ýokary kontrastly nyşanlary işletmek .btn-close-whiteüçin ulanýan täze wariant goşuldy.filter: invert(1)

Apseykylmak

• Akkordeonlar üçin aýlaw labyry aýryldy.

Açylýan ýerler

• Talap edilýän garaňky düşüşler üçin täze .dropdown-menu-darkwariant we baglanyşykly üýtgeýjiler goşuldy.

• Üçin täze üýtgeýji goşuldy $dropdown-padding-x.

• Gowulaşan kontrast üçin açylýan bölüjini garaňkylaşdyrdy.

• DöwmekAçylmak üçin ähli hadysalar indi açylýan açary üýtgetmek düwmesine başlaýar we soňra esasy elemente çenli köpelýär.

• Açylýan menýular indi data-bs-popper="static"aşak düşýän ýeriň ýerleşişi statik bolanda ýa-da aşak gaçma deňiz panelinde bolanda atributlar toplumy bar. Bu, JavaScriptimiz tarapyndan goşuldy we Popperiň ýerleşişine päsgel bermezden, adaty pozisiýa stillerini ulanmaga kömek edýär.

• DöwmekPopperli flipPopper konfigurasiýasynyň peýdasyna açylýan plugin üçin taşlanan wariant. Indi flip modifikatorynda fallbackPlacementsopsiýa üçin boş massiw geçirip, süýşmek häsiýetini öçürip bilersiňiz .

• Açylýan menýular indi awtomatiki ýapyk hereketiautoClose dolandyrmak üçin täze wariant bilen basyp bolýar . Bu opsiýany interaktiw etmek üçin açylýan menýunyň içindäki ýa-da daşyndaky basyşy kabul etmek üçin ulanyp bilersiňiz.

• Açylýan ýerler indi .dropdown-items bilen örtülenleri goldaýar <li>.

Jumbotron

• Döwmek“Jumbotron” komponentini taşlady, sebäbi ony kommunal hyzmatlar bilen köpeldip bolar. Demo üçin täze Jumbotron mysalymyza serediň.

Sanaw topary

• Toparlaryň sanawyna täze .list-group-numberedüýtgediji goşuldy.

Deňiz we bellikler

• ,, We synp üçin täze nullüýtgeýjiler goşuldy .font-sizefont-weightcolor:hover color.nav-link

Gämi duralgalary

• DöwmekNavbars indi içindäki konteýner talap edýär (aralyk talaplaryny we CSS talaplaryny düýpgöter aňsatlaşdyrmak üçin).
• DöwmekSynp .activeindi .nav-items-de ulanylyp bilinmez, gönüden-göni .nav-links-de ulanylmaly.

Offcanvas

• Täze offcanvas komponenti goşuldy .

Sahypa

• Sahypa baglanyşyklary indi margin-leftbiri-birinden aýrylanda ähli burçlarda dinamiki görnüşde tegelekleşdirilip bilner.

• transitionSahypa baglanyşyklaryna s goşuldy .

Popovers

• DöwmekAdaty popover şablonymyzda üýtgedildi .arrow..popover-arrow

• Üýtgedilen whiteListgörnüş allowList_

Egrijiler

• prefers-reduced-motion: reduceAýlawçylar indi animasiýalary haýallatmak bilen hormat goýýarlar . # 31882 serediň .

• Gowulandyrylan aýlaw dik dikligi.

Tostlar

• Tostlar indi ýerleşiş enjamlarynyň.toast-container kömegi bilen ýerleşdirilip bilner .

• Adaty tost dowamlylygy 5 sekuntda üýtgedildi.

• Tostlardan aýryldy we degişli s bilen funksiýalar overflow: hiddenbilen çalşyryldy .border-radiuscalc()

Gurallar

• DöwmekAdaty gurallar şablonymyzda üýtgedildi .arrow..tooltip-arrow

• DöwmekPopper elementleriniň has gowy ýerleşdirilmegi üçin deslapky baha fallbackPlacementsüýtgedilýär .['top', 'right', 'bottom', 'left']

• DöwmekÜýtgedilen whiteListgörnüş allowList_

Kärhanalar

• DöwmekRTL goldawyny goşmak bilen ugrukdyryjy atlaryň ýerine logiki eýeçilik atlaryny ulanmak üçin birnäçe kömekçi enjamyň adyny üýtgetdi:

  • Ady üýtgedildi .left-*we . .right-*_.start-*.end-*
  • Ady üýtgedildi .float-leftwe . .float-right_.float-start.float-end
  • Ady üýtgedildi .border-leftwe . .border-right_.border-start.border-end
  • Ady üýtgedildi .rounded-leftwe . .rounded-right_.rounded-start.rounded-end
  • Ady üýtgedildi .ml-*we . .mr-*_.ms-*.me-*
  • Ady üýtgedildi .pl-*we . .pr-*_.ps-*.pe-*
  • Ady üýtgedildi .text-leftwe . .text-right_.text-start.text-end

• DöwmekDüzgüne görä negatiw çäkleri öçüriň.

• Fonuny goşmaça elementlere .bg-bodyçalt düzmek üçin täze synp goşuldy.<body>

• ,, We üçin täze pozisiýa kömekçi enjamlary goşuldy . Gymmatlyklar we her emläk üçin.toprightbottomleft050%100%

• Gorizontal ýa-da dikligine mutlak / kesgitlenen ýerleşen elementlere täze .translate-middle-xwe kömekçi enjamlar goşuldy..translate-middle-y

• Täze border-widthkömekçi enjamlar goşuldy .

• DöwmekAdy üýtgedildi .text-monospace_.font-monospace

• Döwmek.text-hideIndi ulanylmaly däl teksti gizlemek üçin gadymy usul bolany üçin aýryldy .

• .fs-*Kärhanalar üçin peýdaly enjamlar goşuldy font-size(RFS açyk). Bular HTML-iň deslapky sözbaşylary bilen deň ölçegde ulanýarlar (1-6, ulydan kiçi) we Sass kartasy arkaly üýtgedilip bilner.

• DöwmekGysga we yzygiderlilik üçin .font-weight-*kommunal hyzmatlaryň adyny üýtgetdi ..fw-*

• DöwmekGysga we yzygiderlilik üçin .font-style-*kommunal hyzmatlaryň adyny üýtgetdi ..fst-*

• CSS Grid we flexbox düzülişleri üçin kömekçi .d-gridenjamlary we täze gapkömekçi enjamlary görkezmek üçin goşuldy ..gap

• DöwmekAýyryldy .rounded-smwe sapaklaryň rounded-lgtäze masştabyny hödürledi . # 31687 serediň ..rounded-0.rounded-3

• Täze kömekçi enjamlar goşuldy line-height: .lh-1,, .lh-smwe . Şu ýere serediň ..lh-base.lh-lg

• .d-noneBeýleki displeý hyzmatlaryndan has köp agram bermek üçin CSS- de peýdaly zatlary göçürdi.

• .visually-hidden-focusableKonteýnerlerde işlemek üçin kömekçini giňeltdi :focus-within.

Kömekçiler

• Döwmek Jogaply oturdylan kömekçiler täze synp atlary we gowulaşan özüni alyp barşy, şeýle hem peýdaly CSS üýtgeýjisi bolan gatnaşyjylara üýtgedildi.

  • Sapaklaryň aspekt gatnaşygynda üýtgemegi byüçin üýtgedildi . xMysal üçin, .ratio-16by9häzir .ratio-16x9.
  • .embed-responsive-itemElement we element topary saýlaýjysyny has ýönekeý saýlaýjynyň peýdasyna goýduk .ratio > *. Indi synp gerek däl, gatnaşygy kömekçi indi islendik HTML elementi bilen işleýär.
  • Sass kartasynyň ady $embed-responsive-aspect-ratiosüýtgedildi $aspect-ratioswe synpyň adyny we göterimini key: valuejübüt hökmünde goşmak üçin onuň bahalary ýönekeýleşdirildi.
  • CSS üýtgeýjileri indi döredilýär we Sass kartasyndaky her bir baha üçin goşulýar. Islendik aýratyn nukdaýnazary döretmek üçin --bs-aspect-ratioüýtgeýjini üýtgediň ..ratio

• Döwmek “Ekran okaýjy” sapaklary indi “wizual gizlenýär” .

  • Sass faýlyny scss/helpers/_screenreaders.scssüýtgediscss/helpers/_visually-hidden.scss
  • Ady üýtgedildi .sr-onlywe .sr-only-focusable_.visually-hidden.visually-hidden-focusable
  • Adyny üýtgetdi sr-only()we garyşdyrdy .sr-only-focusable()visually-hidden()visually-hidden-focusable()

• bootstrap-utilities.cssindi biziň kömekçilerimizi hem öz içine alýar. Kömekçileri indi gümrükhanalarda import etmegiň zerurlygy ýok.

JavaScript

• JQuery garaşlylygy taşlandy we adaty JavaScript-de bolmak üçin pluginleri täzeden ýazyň.

• DöwmekJavaScript plaginleriniň hemmesi üçin maglumatlar atributlary, Bootstrap funksiýasyny üçünji taraplardan we öz koduňyzdan tapawutlandyrmak üçin at goýulýar. data-bs-toggleMysal üçin, ýerine derek ulanýarys data-toggle.

• Plhli pluginler indi ilkinji argument hökmünde CSS saýlaýjysyny kabul edip bilerler. Plaginiň täze mysalyny döretmek üçin DOM elementini ýa-da islendik CSS saýlaýjysyny geçirip bilersiňiz:

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

• popperConfig“Bootstrap” -yň deslapky Popper konfigurasiýasyny argument hökmünde kabul edýän funksiýa hökmünde geçip biler, şeýlelik bilen bu deslapky konfigurasiýany öz ýoluňyz bilen birleşdirip bilersiňiz. Açylýan ýerlere, açylýan ýerlere we gurallara degişlidir.

• Popper elementlerini has gowy ýerleşdirmek üçin deslapky baha fallbackPlacementsüýtgedilýär . Açylýan ýerlere, açylýan ýerlere we gurallara degişlidir.['top', 'right', 'bottom', 'left']

• _getInstance()→ ýaly köpçülikleýin statiki usullardan aşaky çyzgy aýryldy getInstance().