Jya ku bintu nyamukuru Jya kuri docs
Check
in English

Kwimukira kuri v5

Kurikirana kandi usubiremo impinduka kuri dosiye ya Bootstrap yinkomoko, inyandiko, nibigize kugirango bigufashe kwimuka uva kuri v4 ujya kuri v5.

Kuriyi page

v5.2.0

Igishushanyo mbonera

Bootstrap v5.2.0 igaragaramo igishushanyo mbonera cyibishushanyo mbonera cyibikoresho byinshi hamwe numutungo hirya no hino mumushinga, cyane cyane binyuze mumico inonosoye border-radiuskuri buto no kugenzura imiterere . Inyandiko zacu nazo zavuguruwe hamwe nurupapuro rushya, imiterere ya docs yoroshye itagisenyuka ibice byuruhande, hamwe nuburorero bukomeye bwibishushanyo bya Bootstrap .

Impinduka nyinshi za CSS

Twahinduye ibice byose kugirango dukoreshe impinduka za CSS. Mugihe Sass ikomeje gushimangira ibintu byose, buri kintu cyaravuguruwe kugirango gishyiremo CSS ihindagurika kumyanya shingiro yibice (urugero, .btn), itanga igihe nyacyo cyo kwihindura Bootstrap. Mubisohoka nyuma, tuzakomeza kwagura imikoreshereze yimikorere ya CSS muburyo bwacu, imiterere, abafasha, hamwe nibikorwa byingirakamaro. Soma byinshi kubyerekeye CSS ihinduka muri buri kintu kurupapuro rwihariye.

Imikoreshereze yacu ya CSS izaba ituzuye kugeza Bootstrap 6. Mugihe twifuza kubishyira mubikorwa byuzuye, bafite ibyago byo guteza impinduka. Kurugero, gushiraho $alert-border-width: var(--bs-border-width)inkomoko yacu code isenya Sass muri code yawe niba wakoraga $alert-border-width * 2kubwimpamvu.

Nkibyo, aho bishoboka hose, tuzakomeza gusunika kuri CSS nyinshi zihinduka, ariko nyamuneka umenye ko ishyirwa mubikorwa ryacu rishobora kuba rito muri v5.

Gishya_maps.scss

Bootstrap v5.2.0 yazanye dosiye nshya ya Sass hamwe _maps.scss. Ikuramo amakarita menshi ya Sass _variables.scsskugirango ikemure ikibazo aho kuvugurura ikarita yumwimerere bitakoreshejwe ku ikarita ya kabiri ibagura. Kurugero, ivugurura $theme-colorsntabwo ryakoreshwaga kurindi karita yinsanganyamatsiko yashingiragaho $theme-colors, kumena urufunguzo rwimikorere rwakazi. Muri make, Sass ifite aho igarukira aho bimaze gukoreshwa cyangwa ikarita isanzwe ikoreshwa , ntishobora kuvugururwa. Hano haribintu bisa nibihinduka bya CSS mugihe bikoreshwa muguhimba izindi CSS zihinduka.

Niyo mpanvu ibintu bihinduka muri Bootstrap bigomba kuza nyuma @import "functions", ariko mbere @import "variables"nibindi bisigaye bitumizwa hanze. Kimwe nacyo kijyanye namakarita ya Sass - ugomba kurenga kubisanzwe mbere yuko bikoreshwa. Ikarita ikurikira yimuriwe ku gishya _maps.scss:

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

Igikoresho cyawe Bootstrap CSS yubaka igomba noneho kugaragara nkiki hamwe namakarita atandukanye yatumijwe.

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

Ibikorwa bishya

  • Kwagura font-weightibikorwa byingirakamaro kugirango ushiremo .fw-semiboldsemibold yimyandikire.
  • Kwagura border-radiusibikorwa byingirakamaro kugirango ushiremo ibipimo bibiri bishya, .rounded-4kandi .rounded-5, kubindi bisobanuro.

Impinduka zinyongera

  • Yatangije $enable-container-classesuburyo bushya. - Noneho mugihe uhisemo imiterere ya CSS Grid igerageza, .container-*amasomo azakomeza gukusanywa, keretse niba aya mahitamo yashizweho false. Ibirimwo nabyo noneho bigumane indangagaciro zabo.

  • Ibice bya Offcanvas ubu bifite itandukaniro ryitabira . Icyiciro cyumwimerere .offcanvasntigihinduka - gihisha ibiri murwego rwo kureba. Kugirango bisubizwe, hindura iryo .offcanvasshuri mubyiciro byose .offcanvas-{sm|md|lg|xl|xxl}.

  • Abatandukanya ameza meza ubu bahisemo. - Twakuyeho umubyimba kandi bigoye kurenga imipaka hagati yitsinda ryameza hanyuma tuyimurira mubyiciro utabishaka ushobora gusaba , .table-group-divider. Reba imbonerahamwe ya docs kurugero.

  • Scrollspy yongeye kwandikwa kugirango ukoreshe Intersection Observer API , bivuze ko utagikeneye gufunga ababyeyi ugereranije, gutesha agacirooffsetconfig, nibindi byinshi. Reba ibyo washyize mubikorwa bya Scrollspy kugirango birusheho kuba byiza kandi bihamye muri nav yamuritse.

  • Popovers hamwe nibikoresho byifashisha ubu CSS ihinduka. Impinduka zimwe za CSS zavuguruwe kuva kuri Sass bagenzi babo kugirango bagabanye umubare wibihinduka. Nkigisubizo, impinduka eshatu zateshejwe agaciro muri iri tangazo $popover-arrow-color:, $popover-arrow-outer-colorna $tooltip-arrow-color.

  • Wongeyeho .text-bg-{color}abafasha bashya. Aho gushiraho umuntu kugiti cye .text-*nibikorwa .bg-*, urashobora noneho gukoresha abafasha .text-bg-*kugirango ushireho background-coloritandukaniro ryimbere color.

  • Wongeyeho .form-check-reversemodifier kugirango uhindure urutonde rwibirango hamwe na agasanduku kagenzura / amaradiyo.

  • Wongeyeho imirongo ihanamye yinkingi kumeza ukoresheje urwego rushya .table-striped-columns.

Kumurongo wuzuye wimpinduka , reba umushinga v5.2.0 kuri GitHub .

v5.1.0

  • Wongeyeho inkunga yubushakashatsi kuri CSS Grid imiterere . - Iki ni umurimo urimo gukorwa, kandi nturategurwa gukoreshwa, ariko urashobora guhitamo ibintu bishya ukoresheje Sass. Kugirango ubishoboze, uhagarike gride isanzwe, mugushiraho $enable-grid-classes: falsekandi ushoboze CSS Grid mugushiraho $enable-cssgrid: true.

  • Kuvugurura navbars kugirango ushyigikire offcanvas. - Ongeraho ibishushanyo bya offcanvas muri navbar iyariyo yose hamwe .navbar-expand-*namasomo yitabira hamwe na marike ya offcanvas.

  • Wongeyeho ibice bishya byumwanya . - Ibice bishya byacu, uburyo bwo gutanga ibibuza byigihe gito mu mwanya wibirimo bifatika kugirango bifashe kwerekana ko hari ikintu kigikorerwa kurubuga rwawe cyangwa porogaramu.

  • Gusenya plugin noneho ishyigikira gutambuka gutambitse . - Ongeraho .collapse-horizontalkugirango .collapseusenyuke widthaho kuba height. Irinde gushakisha amarangi mugushiraho a min-heightcyangwa height.

  • Wongeyeho stack nshya hamwe nabahagaritse amategeko abafasha. - Koresha vuba vuba ibintu byinshi bya flexbox kugirango uhite ukora imiterere yihariye hamwe na stack . Hitamo muri horizontal ( .hstack) na vertical ( .vstack) ibice. Ongeraho ibice bihagaritse bisa <hr>nibintu hamwe nabafasha bashya.vr .

  • Wongeyeho ibishya bishya bya :rootCSS. - Wongeyeho byinshi bishya bya CSS :rootkurwego rwo kugenzura <body>imiterere. Ibindi biri mubikorwa, harimo murwego rwibikorwa byacu nibigize, ariko kuri ubu soma impinduka za CSS mugice cya Customize .

  • Kuvugurura ibara ninyuma yibikorwa kugirango ukoreshe CSS ihinduka, hanyuma wongereho inyandiko nshya opacity hamwe ninyuma yibikorwa byingirakamaro . - .text-* hamwe .bg-*nibikorwa byubu byubatswe hamwe na CSS ihinduka rgba()nibiciro byamabara, bikwemerera guhitamo byoroshye ibikorwa byose hamwe nibikorwa bishya bya opacity.

  • Wongeyeho ingero nshya zifatika zishingiye kwerekana uburyo bwo gutunganya ibice byacu. - Kurura witeguye gukoresha ibice byabugenewe hamwe nubundi buryo busanzwe bwo gushushanya hamwe ningero zacu nshya za Snippets . Harimo ibirenge , ibitonyanga , urutonde rwamatsinda , hamwe nuburyo .

  • Yakuweho imiterere idakoreshwa muburyo bwa popovers hamwe nibikoresho byifashishwa nkuko bikorwa na Popper gusa. $tooltip-marginyateshejwe agaciro kandi yashyizwe nullmubikorwa.

Urashaka amakuru menshi? Soma inyandiko ya v5.1.0.

Muraho! Impinduka kumurongo wambere wambere wo gusohora Bootstrap 5, v5.0.0, yanditse hano hepfo. Ntabwo bagaragaza impinduka zinyongera zerekanwe hejuru.

Kwishingikiriza

  • JQuery yataye.
  • Kuzamurwa kuva Popper v1.x kuri Popper v2.x.
  • Yasimbuye Libsass hamwe na Dart Sass nkuko icyegeranyo cya Sass cyatanzwe na Libsass cyateshejwe agaciro.
  • Yimukiye muri Jekyll yerekeza Hugo kubaka ibyangombwa byacu

Inkunga ya mushakisha

  • Yataye Internet Explorer 10 na 11
  • Yataye Microsoft Edge <16 (Umurage Umurage)
  • Firefox yataye <60
  • Safari yataye <12
  • Yataye iOS Safari <12
  • Chrome yataye <60

Guhindura inyandiko

  • Kongera gushushanya urupapuro rwambere, imiterere ya doc, na footer.
  • Wongeyeho Parcelle nshya .
  • Wongeyeho igice gishya cya Customize , usimbuze urupapuro rwa The4 rwa v4 , hamwe nibisobanuro bishya kuri Sass, amahitamo yimiterere yisi yose, gahunda yamabara, impinduka za CSS, nibindi byinshi.
  • Ongera uhindure ibyangombwa byose mubice bishya , ugabanye ibiri mumapaji yibanze.
  • Mu buryo busa nabwo, wavuguruye igice cya Layout , kugirango ubone ibintu bya gride neza.
  • Izina ryitwa "Navs" urupapuro rwibigize kuri "Navs & Tabs".
  • Izina ryahinduwe "Kugenzura" kuri "Kugenzura & amaradiyo".
  • Ongera uhindure navbar hanyuma wongereho subnav nshya kugirango byoroshye kuzenguruka imbuga zacu na verisiyo ya docs.
  • Wongeyeho clavier nshya ya shortcut kumwanya wo gushakisha : Ctrl + /.

Sass

  • Twacukuye ikarita isanzwe ya Sass ihuza kugirango byoroshye gukuraho indangagaciro zirenze. Wibuke ko ubu ugomba gusobanura indangagaciro zose mumakarita ya Sass nka $theme-colors. Reba uko wakemura amakarita ya Sass .

  • KumenaGuhindura color-yiq()imikorere hamwe nibihinduka bijyanye color-contrast()nkuko bitakiri bijyanye na YIQ ibara ryumwanya. Reba # 30168.

    • $yiq-contrasted-thresholdni izina $min-contrast-ratio.
    • $yiq-text-darkna $yiq-text-lightByahinduwe Kuri $color-contrast-darkna $color-contrast-light.

  • KumenaIkibazo cyibitangazamakuru bivanga ibipimo byahindutse kuburyo bwumvikana.

    • media-breakpoint-down()ikoresha aho ihagarara ubwayo aho gukurikira (urugero, media-breakpoint-down(lg)aho media-breakpoint-down(md)kureba intego ntoya kuruta lg).
    • Mu buryo busa nabwo, ibipimo bya kabiri media-breakpoint-between()nabyo bikoresha aho bihagarara ubwabyo aho gukurikira (urugero, media-between(sm, lg)aho media-breakpoint-between(sm, md)intego zerekanwa hagati smna lg).

  • KumenaYakuweho imyandikire yimyandikire kandi $enable-print-stylesirahinduka. Icapa ryerekana ibyiciro biracyari hafi. Reba # 28339 .

  • KumenaYataye color(), theme-color()na gray()imikorere kugirango ashyigikire impinduka. Reba # 29083 .

  • KumenaImikorere yahinduwe theme-color-level()kugirango color-level()noneho yemere ibara ryose ushaka aho kuba $theme-coloramabara gusa. Reba # 29083 Witondere: color-level() nyuma yaje kumanuka v5.0.0-alpha3.

  • KumenaYahinduwe $enable-prefers-reduced-motion-media-querykandi $enable-pointer-cursor-for-buttonskuri $enable-reduced-motionno $enable-button-pointerskubugufi.

  • KumenaYakuyeho bg-gradient-variant()ivanga. Koresha urwego .bg-gradientkugirango wongere gradients mubintu aho kuba .bg-gradient-*ibyiciro byakozwe.

  • Kumena Yakuweho kuvanga mbere:

    • hover,,, na hover-focus_plain-hover-focushover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(yanataye icyiciro cy'ingirakamaro bifitanye isano, .text-hide)
    • visibility()
    • form-control-focus()

  • Kumenascale-color()Imikorere yahinduwe shift-color()kugirango wirinde kugongana na Sass wenyine ibikorwa byo gupima amabara.

  • box-shadowkuvanga noneho kwemerera nullindangagaciro no kugabanuka kubitekerezo nonebyinshi. Reba # 30394 .

  • Kuvanga ubu border-radius()bifite agaciro gasanzwe.

Sisitemu y'amabara

  • Sisitemu yamabara yakoranye color-level()kandi $theme-color-intervalyakuweho kugirango ashyigikire sisitemu nshya. Byose lighten()nibikorwa darken()muri codebase yacu byasimbuwe tint-color()na shade-color(). Iyi mikorere izavanga ibara numweru cyangwa umukara aho guhindura urumuri rwinshi. Ubushake shift-color()bushobora guhindura ibara cyangwa kugicucu bitewe nuburyo ibipimo byuburemere ari byiza cyangwa bibi. Reba # 30622 kugirango ubone ibisobanuro birambuye.

  • Wongeyeho amabara mashya nigicucu kuri buri bara, utanga amabara icyenda atandukanye kuri buri bara shingiro, nkibintu bishya bya Sass.

  • Kunoza ibara ritandukanye. Ikigereranyo cyamabara atandukanye kuva 3: 1 kugeza 4.5: 1 no kuvugurura amabara yubururu, icyatsi, cyan, nijimye kugirango WCAG 2.1 AA itandukanye. Hindura kandi ibara ritandukanya ibara kuva $gray-900kuri $black.

  • Kugirango dushyigikire sisitemu y'amabara, twongeyeho imigenzo mishya tint-color()n'imikorere shade-color()yo kuvanga amabara uko bikwiye.

Kuvugurura

  • Ibice bishya! Wongeyeho ibice bishya xxlkuri 1400pxno hejuru. Nta gihinduka kubindi bice byose.

  • Amazi meza. Imiyoboro ubu yashyizwe muri rems, kandi iragufi kuruta v4 ( 1.5rem, cyangwa hafi 24px, hepfo kuva 30px). Ibi bihuza imiyoboro ya sisitemu ya sisitemu hamwe nibikorwa byacu byo gutandukanya.

    • Wongeyeho ibyiciro bishya byamazi ( .g-*,, .gx-*na .gy-*) kugirango ugenzure utambitse / uhagaritse imyanda, utambitse utambitse, hamwe nu muyoboro uhagaze.
    • KumenaYahinduwe .no-gutterskugirango .g-0ahuze ibikorwa bishya byingirakamaro.

  • Inkingi ntizikurikizwa position: relative, urashobora rero kongeramo .position-relativeibintu bimwe kugirango ugarure iyo myitwarire.

  • KumenaYahagaritse .order-*amasomo menshi yakunze kugenda adakoreshwa. Ubu turatanga gusa .order-1hanze .order-5yisanduku.

  • KumenaKureka .mediaibice nkuko bishobora kwigana byoroshye nibikorwa byingirakamaro. Reba # 28265 nurupapuro rwingirakamaro rwa flex kurugero .

  • Kumena bootstrap-grid.cssubu ikoreshwa gusa box-sizing: border-boxkumurongo aho kugirango usubize isi-agasanduku. Ubu buryo, imiyoboro ya grid irashobora gukoreshwa ahantu henshi nta nkomyi.

  • $enable-grid-classesntagishobora guhagarika ibisekuru byamasomo ya kontineri. Reba # 29146.

  • Yavuguruye make-colivanga kugirango asubiremo inkingi zingana nta bunini bwagenwe.

Ibirimo, Reboot, nibindi

  • RFS ishoboye gukora byanze bikunze. Imitwe ukoreshejefont-size()mixin izahita ihindurafont-sizeigipimo cyayo hamwe no kureba. Iyi mikorere yabanje guhitamo hamwe na v4.

  • KumenaKuvugurura imyandikire yacu yerekana kugirango dusimbuze $display-*impinduka zacu hamwe $display-font-sizesnikarita ya Sass. $display-*-weightKuraho kandi impinduka zumuntu kugiti cye $display-font-weightkandi zahinduwe font-sizes.

  • Wongeyeho bibiri bishya .display-*imitwe ingana, .display-5na .display-6.

  • Ihuza ryatsindagirijwe muburyo budasanzwe (ntabwo ari kuri hover gusa), keretse niba bigize ibice byihariye.

  • Kuvugurura imbonerahamwe kugirango uhindure uburyo bwabo kandi ubyubake hamwe na CSS ihinduka kugirango igenzure neza imyandikire.

  • KumenaImbonerahamwe yatondekanye ntabwo izungura imiterere.

  • Kumena .thead-lightkandi .thead-darkbaramanuwe bashyigikira .table-*ibyiciro bitandukanye bishobora gukoreshwa kubintu byose byameza ( thead,,, na tbody, ) .tfoottrthtd

  • KumenaIvanga table-row-variant()ryahinduwe table-variant()kandi ryemera ibipimo 2 gusa: $color(izina ryamabara) na $value(kode yamabara). Ibara ryumupaka namabara yimvugo ihita ibarwa hashingiwe kumeza yibintu bihinduka.

  • Gutandukanya imbonerahamwe ya selile padding ihinduka muri -yna -x.

  • KumenaAmashuri yataye .pre-scrollable. Reba # 29135

  • Kumena .text-*ibikorwa ntabwo byongera hover no kwibanda kuri reta ukundi. .link-*amasomo y'abafasha arashobora gukoreshwa aho. Reba # 29267

  • KumenaAmashuri yataye .text-justify. Reba # 29793

  • Kumena <hr>ibice noneho koresha heightaho borderkugirango ushyigikire neza sizeikiranga. Ibi kandi bifasha gukoresha ibikoresho bya padding kugirango ukore ibice byinshi (urugero, <hr class="py-1">).

  • Ongera usubire gutambuka padding-leftkuri horizontal <ul>na <ol>element kuva mushakisha isanzwe 40pxkuri 2rem.

  • Wongeyeho $enable-smooth-scroll, ikoreshwa scroll-behavior: smoothkwisi yose-usibye kubakoresha gusaba kugabanywa binyuze prefers-reduced-motionmubibazo byitangazamakuru. Reba # 31877

RTL

  • Icyerekezo gitambitse cyihariye gihinduka, ibikorwa, hamwe na mixin byose byahinduwe kugirango bikoreshe ibintu byumvikana nkibiboneka mumiterere ya flexbox - urugero, startno endmu mwanya wa leftna right.

Ifishi

  • Wongeyeho impapuro nshya zireremba! Twazamuye ibirango bya Floating labels kurugero rushyigikiwe byuzuye. Reba urupapuro rushya rwa Floating labels page.

  • Kumena Guhuriza hamwe kavukire hamwe nibintu byabigenewe. Kugenzura agasanduku, amaradiyo, guhitamo, nibindi byinjira byari bifite ibyiciro gakondo nibisanzwe muri v4 byahujwe. Noneho hafi ya fomu yibintu byose biramenyerewe rwose, ibyinshi bidakenewe HTML yihariye.

    • .custom-control.custom-checkboxni ubu .form-check.
    • .custom-control.custom-custom-radioni ubu .form-check.
    • .custom-control.custom-switchni ubu .form-check.form-switch.
    • .custom-selectni ubu .form-select.
    • .custom-filekandi .form-filebyasimbuwe nuburyo bwihariye hejuru .form-control.
    • .custom-rangeni ubu .form-range.
    • Yataye kavukire .form-control-filekandi .form-control-range.

  • KumenaYataye .input-group-appendkandi .input-group-prepend. Urashobora noneho kongeramo buto gusa .input-group-textnkabana bayobora mumatsinda yinjiza.

  • Umwanya muremure wabuze umupaka radiyo kumurongo winjiza hamwe no kwemeza ibitekerezo byanyuma bikosorwa wongeyeho .has-validationurwego rwinyongera mumatsinda yinjiza hamwe no kwemeza.

  • Kumena Kureka ifishi yihariye imiterere ya sisitemu ya grid sisitemu. Koresha grid hamwe nibikorwa byacu aho .form-group,, .form-rowcyangwa .form-inline.

  • KumenaIbirango byerekana .form-label.

  • Kumena .form-textntagishobora displaygushiraho, kukwemerera gukora inline cyangwa guhagarika inyandiko ifasha nkuko ubyifuza uhinduye gusa element ya HTML.

  • Ifishi igenzura ntigikoreshwa gukoreshwa heightmugihe bishoboka, ahubwo ikohereza min-heightkunoza imikorere no guhuza nibindi bice.

  • Kwemeza amashusho ntibikoreshwa kuri <select>s hamwe multiple.

  • Inkomoko yatunganijwe Sass dosiye munsi scss/forms/, harimo kwinjiza amatsinda yuburyo.

Ibigize

  • Indangagaciro zihuriweho paddingkubimenyesha, imigati, amakarita, ibitonyanga, urutonde rwamatsinda, modal, popovers, hamwe nibikoresho byifashishwa kugirango duhindure ibyo duhindura $spacer. Reba # 30564 .

Amasezerano

Imenyesha

  • Imenyesha ubu rifite ingero hamwe namashusho .

  • Yakuweho uburyo bwihariye bwa <hr>s muri buri menyesha kuva basanzwe bakoresha currentColor.

Ikarita

  • KumenaYataye .badge-*ibyiciro byose byamabara kubikorwa byinyuma (urugero, koresha .bg-primaryaho .badge-primary).

  • KumenaYataye .badge-pill- koresha .rounded-pillakamaro aho.

  • KumenaYakuweho hover hamwe nibitekerezo byuburyo <a>hamwe <button>nibintu.

  • Kwiyongera kudasanzwe padding ya badges kuva .25em/ .5emkugeza .35em/ .65em.

  • Kworoshya isura isanzwe yimigati ikuraho padding, background-colorna border-radius.

  • Wongeyeho imitungo mishya ya CSS --bs-breadcrumb-divideryo kwihitiramo byoroshye bitabaye ngombwa ko usubiramo CSS.

Utubuto

  • Kumena Kanda buto , hamwe na agasanduku cyangwa amaradiyo, ntibigisaba JavaScript kandi ufite ibimenyetso bishya. Ntabwo tugikeneye ibintu bipfunyika, ongeraho.btn-checkkuri<input>, kandi ubihuze.btnnamasomo ayo ari yo yose kuri<label>. Reba # 30650 . Inyandiko zibi zimutse kuva kurupapuro rwa Button kurupapuro rushya.

  • Kumena Yataye .btn-blockkubikorwa byingirakamaro. Aho kugirango ukoreshe .btn-blockkuri .btn, funga buto yawe hamwe .d-gridningirakamaro .gap-*kugirango ubashyire umwanya nkuko bikenewe. Hindura kumasomo yitabira kugirango arusheho kubagenzura. Soma inyandiko zingero zimwe.

  • Yavuguruye ibyacu button-variant()na button-outline-variant()mixins kugirango dushyigikire ibipimo byinyongera.

  • Kuvugurura utubuto kugirango tumenye itandukaniro kuri hover na leta ikora.

  • Utubuto twahagaritswe ubu dufite pointer-events: none;.

Ikarita

  • KumenaYataye kuruhande .card-deckrwa gride yacu. Wizike amakarita yawe mumasomo yinkingi hanyuma ongeraho ikintu cyababyeyi .row-cols-*kugirango wongere ukore amakarita (ariko hamwe nubugenzuzi burenze guhuza).

  • KumenaYataye .card-columnsashyigikira Masonry. Reba # 28922 .

  • KumenaYasimbuje .cardakabariro gashingiye hamwe nibintu bishya bya Acordion .

  • Wongeyeho .carousel-darkvariant nshya kumyandiko yijimye, igenzura, nibipimo (bikomeye kumurongo woroshye).

  • Amashusho ya chevron yasimbujwe karuseli igenzura hamwe na SVGs nshya kuva muri Bootstrap .

Funga buto

  • KumenaYahinduwe .closekugirango .btn-closeizina rito risanzwe.

  • Funga buto noneho koresha background-image(yashyizwemo SVG) aho kuba &times;muri HTML, yemerera kwihitiramo byoroshye bitabaye ngombwa ko ukoraho ikimenyetso cyawe.

  • Wongeyeho .btn-close-whitevariant nshya ikoresha filter: invert(1)kugirango ishoboze gutandukanya itandukaniro ryo kwirukana amashusho kuruhande rwijimye.

Gusenyuka

  • Yakuweho imizingo ya ankoring ya bordion.

  • Wongeyeho impinduka nshya .dropdown-menu-darkhamwe nibihinduka bijyanye-kubisabwa umwijima wamanutse.

  • Wongeyeho impinduka nshya kuri $dropdown-padding-x.

  • Umwijima wamanutse kugirango ugabanye itandukaniro.

  • KumenaIbyabaye byose kubitonyanga noneho bikururwa kuri buto yo kumanura hanyuma hanyuma ikabyara kugeza kubintu byababyeyi.

  • Ibitonyanga Ibikurikira ubu bifite data-bs-popper="static"ikiranga gushiraho mugihe umwanya wibitonyanga bihagaze, cyangwa ibitonyanga biri mumurongo. Ibi byongeweho na JavaScript yacu kandi bidufasha gukoresha imiterere yimyanya yimyitozo itabangamiye umwanya wa Popper.

  • KumenaAmahitamo yataye flipkumanura plugin kugirango ashyigikire kavukire ya Popper. Urashobora noneho guhagarika imyitwarire yo guhinduranya unyuze kumurongo wubusa kugirango fallbackPlacementsuhitemo flip modifier.

  • Ibitonyanga Ibitonyanga birashobora gukanda hamwe nuburyo bushya autoClosebwo gukemura imyitwarire yimodoka . Urashobora gukoresha ubu buryo kugirango wemere gukanda imbere cyangwa hanze ya menu yamanutse kugirango ikoreshwe.

  • Ibitonyanga noneho bishyigikira .dropdown-items bipfunyitse muri <li>s.

Jumbotron

Andika itsinda

  • Wongeyeho nullimpinduka nshya kuri ,,, font-sizeno ku cyiciro .font-weightcolor:hover color.nav-link
  • KumenaNavbars ubu isaba kontineri imbere (kugirango byoroshe cyane ibisabwa byumwanya hamwe na CSS isabwa).
  • KumenaIcyiciro .activentigishobora gukoreshwa kuri .nav-items, kigomba gukoreshwa kuri .nav-links.

Offcanvas

Pagination

  • Ihuza rya pagination ubu rifite uburyo bwo guhinduranya margin-leftbuzengurutse impande zose iyo zitandukanijwe.

  • Wongeyeho transitions kumurongo wo guhuza.

Amashanyarazi

  • KumenaYahinduwe muburyo busanzwe .arrowbwa .popover-arrowpopover.

  • Izina ryahinduwe whiteListkuri allowList.

Abazunguruka

  • Abazunguruka ubu bubaha prefers-reduced-motion: reducemugutinda animasiyo. Reba # 31882 .

  • Kunoza kuzunguruka guhindagurika.

Toost

  • Toost irashobora guhagarikwa muri a .toast-containerhamwe nubufasha bwibikorwa byingenzi .

  • Yahinduwe toast isanzwe igihe cyamasegonda 5.

  • Yakuwe overflow: hiddenmuri toast hanyuma asimbuzwa border-radiuss bikwiye nibikorwa calc().

Ibikoresho

  • KumenaYahinduwe .arrowkuri .tooltip-arrowmuburyo busanzwe bwibikoresho.

  • KumenaMburabuzi Agaciro Kuri i fallbackPlacementsYahinduwe Kuri ['top', 'right', 'bottom', 'left']Gushyira Byiza Ibintu Byiza.

  • KumenaIzina ryahinduwe whiteListkuri allowList.

Ibikorwa

  • KumenaYahinduye ibikorwa byinshi kugirango ukoreshe amazina yumutungo wumvikana aho gukoresha amazina yicyerekezo wongeyeho inkunga ya RTL:

    • Yahinduwe .left-*kandi .right-*kuri .start-*na .end-*.
    • Yahinduwe .float-leftkandi .float-rightkuri .float-startna .float-end.
    • Yahinduwe .border-leftkandi .border-rightkuri .border-startna .border-end.
    • Yahinduwe .rounded-leftkandi .rounded-rightkuri .rounded-startna .rounded-end.
    • Yahinduwe .ml-*kandi .mr-*kuri .ms-*na .me-*.
    • Yahinduwe .pl-*kandi .pr-*kuri .ps-*na .pe-*.
    • Yahinduwe .text-leftkandi .text-rightkuri .text-startna .text-end.

  • KumenaYahagaritse imipaka itari nziza.

  • Wongeyeho ibyiciro bishya .bg-bodykugirango ushireho byihuse <body>imiterere yinyongera.

  • Wongeyeho imyanya mishya yingirakamaro kuri top,,, rightna bottom. leftIndangagaciro zirimo 0, 50%kandi 100%kuri buri mutungo.

  • Wongeyeho ibishya .translate-middle-x& .translate-middle-yibikorwa byingirakamaro kuri horizontalale cyangwa uhagaritse hagati ya absolute / ihagaze neza.

  • Wongeyeho border-widthibikorwa bishya .

  • KumenaYahinduwe .text-monospacekuri .font-monospace.

  • KumenaYakuweho .text-hidekuko nuburyo bwa kera bwo guhisha inyandiko itagomba gukoreshwa ukundi.

  • Wongeyeho .fs-*ibikorwa font-sizebyingirakamaro (hamwe na RFS ishoboye). Ibi bifashisha igipimo kimwe na HTML isanzwe (1-6, nini kugeza nto), kandi irashobora guhindurwa hakoreshejwe ikarita ya Sass.

  • Kumena.font-weight-*Ibikorwa byahinduwe byingirakamaro nko kubugufi .fw-*no guhoraho.

  • Kumena.font-style-*Ibikorwa byahinduwe byingirakamaro nko kubugufi .fst-*no guhoraho.

  • Wongeyeho .d-gridkwerekana ibikorwa byingenzi nibikorwa bishya gap( .gap) kuri CSS Grid na flexbox imiterere.

  • KumenaYakuweho .rounded-smkandi rounded-lg, kandi yatangije igipimo gishya cyamasomo, .rounded-0kuri .rounded-3. Reba # 31687 .

  • Wongeyeho ibikorwa bishya line-height: .lh-1,, .lh-smna . Reba hano ..lh-base.lh-lg

  • Yimuye .d-noneakamaro muri CSS yacu kugirango itange uburemere burenze kubindi bikoresho byerekanwa.

  • Yaguye .visually-hidden-focusableumufasha kugirango akore no kuri kontineri, ukoresheje :focus-within.

Abafasha

  • Kumena Abafasha bashubije bahinduwe bahinduwe bafasha kugereranya bafite amazina mashya yo mucyiciro hamwe nimyitwarire myiza, kimwe na CSS ihinduka.

    • Amasomo yahinduwe kugirango ahindurwe bymuburyo xbugereranijwe. Kurugero, .ratio-16by9ni .ratio-16x9.
    • Twahagaritse ibice .embed-responsive-itemhamwe nitsinda ryabatoranijwe kugirango dushyigikire byoroshye .ratio > *. Ntakindi cyiciro gikenewe, kandi umufasha wikigereranyo ubu akorana nibintu byose bya HTML.
    • Ikarita ya $embed-responsive-aspect-ratiosSass yahinduwe izina $aspect-ratioskandi indangagaciro zayo zoroshe gushyiramo izina ryurwego nijanisha key: valuenkibiri.
    • Impinduka za CSS ubu zakozwe kandi zirimo buri gaciro ku ikarita ya Sass. Hindura --bs-aspect-ratioimpinduka kuri .ratiokugirango ukore igereranyo icyo aricyo cyose .

  • Kumena Amasomo ya "Screen Reader" ubu ni amasomo "yihishe" .

    • Yahinduye dosiye ya Sass kuva scss/helpers/_screenreaders.scsskuriscss/helpers/_visually-hidden.scss
    • Yahinduwe .sr-onlykandi .sr-only-focusablekuri .visually-hiddenna.visually-hidden-focusable
    • Yahinduwe sr-only()kandi sr-only-focusable()avanga kuri visually-hidden()na visually-hidden-focusable().

  • bootstrap-utilities.cssubu harimo n'abadufasha. Abafasha ntibakeneye gutumizwa mumazu yubaka.

JavaScript

  • Kureka jQuery kwishingikiriza no kwandika amacomeka kugirango abe muri JavaScript isanzwe.

  • KumenaIbiranga amakuru kuri plugin zose za JavaScript ubu zashyizwe kumazina kugirango zifashe gutandukanya imikorere ya Bootstrap nabandi bantu hamwe na code yawe. Kurugero, dukoresha data-bs-toggleaho data-toggle.

  • Amacomeka yose arashobora noneho kwemera guhitamo CSS nkimpaka yambere. Urashobora gutambutsa ikintu cya DOM cyangwa uwatoranije CSS yemewe kugirango ukore urugero rushya rwa plugin:

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

  • popperConfigBirashobora gutambuka nkigikorwa cyemera Bootstrap isanzwe ya Popper config nkimpaka, kugirango ubashe guhuza iboneza ryambere muburyo bwawe. Irasaba kumanuka, popovers, hamwe nibikoresho.

  • Mburabuzi Agaciro kuri i fallbackPlacementsyahinduwe kugirango ['top', 'right', 'bottom', 'left']ishyirwe neza kubintu bya Popper. Irasaba kumanuka, popovers, hamwe nibikoresho.

  • Yakuweho gutsindagira kumurongo muburyo rusange buhagaze nka _getInstance()→ getInstance().