Heke ki te v5

v5.2.0

Hoahoa hou

Kei te Bootstrap v5.2.0 he whakahōu hoahoa mo te tokoiti o nga waahanga me nga rawa puta noa i te kaupapa, ina koa na roto i nga uara parakore border-radiusi runga i nga paatene me nga mana whakahaere . Kua whakahoutia ano a maatau tuhinga me te whaarangi kaainga hou, te whakatakotoranga tuhinga ngawari ake ka kore e tiango nga waahanga o te paetaha, me etahi tauira rongonui o Bootstrap Icons .

Ētahi atu taurangi CSS

Kua whakahoutia e matou o matou waahanga katoa hei whakamahi i nga taurangi CSS. Ahakoa kei raro tonu a Sass i nga mea katoa, kua whakahoutia ia waahanga ki te whakauru i nga taurangi CSS ki nga karaehe turanga (hei tauira, .btn), ka taea te whakarite ake i te waa-tikanga o Bootstrap. I roto i nga whakaputanga ka whai ake, ka whakawhānui tonu matou i to maatau whakamahi i nga taurangi CSS ki roto i to tahora, puka, kaiawhina, me nga taputapu. Pānuihia atu mo nga taurangi CSS i ia waahanga i runga i o raatau wharangi tuhinga.

Ko ta matou whakamahinga taurangi CSS ka kore e oti tae noa ki te Bootstrap 6. Ahakoa e pirangi ana matou ki te whakatinana katoa i enei puta noa i te poari, ka tupono pea ka pakaru nga huringa. Hei tauira, ko te whakatakoto $alert-border-width: var(--bs-border-width)i roto i ta maatau waehere puna ka pakaru te Sass i roto i to ake waehere mena kei te mahi koe $alert-border-width * 2mo etahi take.

Na reira, i nga waahi katoa ka taea, ka kaha tonu taatau ki te huri ki etahi atu taurangi CSS, engari kia mohio koe he iti noa to maatau whakatinanatanga i roto i te v5.

Hou_maps.scss

I whakauruhia e Bootstrap v5.2.0 he konae Sass hou me te _maps.scss. Ka toia e ia etahi mapi Sass mai i _variables.scsste whakatika i tetahi take kaore i tukuna nga whakahou ki tetahi mapi taketake ki nga mapi tuarua e toro atu ana. Hei tauira, ko nga whakahōutanga ki $theme-colorste kore i whakamahia ki etahi atu mapi kaupapa e whakawhirinaki ana ki te $theme-colors, te pakaru i nga rerengamahi whakaritenga matua. Hei poto, he herenga a Sass ina whakamahia he taurangi taunoa, he mapi ranei , kaore e taea te whakahou. He rite tonu te ngoikoretanga ki nga taurangi CSS ina whakamahia ana ki te tito i etahi atu taurangi CSS.

Koinei te take me haere mai nga whakaritenga rereke i Bootstrap i muri mai @import "functions", engari i mua @import "variables"me te toenga o ta matou kohinga kawemai. Ka pa ano ki nga mapi Sass—me takahia e koe nga taunoa i mua i te whakamahi. Ko nga mapi e whai ake nei kua nukuhia ki te mea hou _maps.scss:

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

Me penei te ahua o to hanga Bootstrap CSS me te kawemai mapi motuhake.

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

Nga taputapu hou

• Ko nga font-weighttaputapu kua whakawhānuihia hei whakauru .fw-semiboldmo nga momotuhi ahuakore.
• Ko nga border-radiustaputapu kua whakawhānuihia kia rua nga rahi hou, .rounded-4me te .rounded-5, mo etahi atu whiringa.

Nga huringa taapiri

• I whakauruhia he $enable-container-classeswhiringa hou. — Inaianei ka uru ki roto i te whakatakotoranga Matiti CSS whakamatautau, .container-*ka whakahiato tonu nga karaehe, mena ka whakaritea tenei whiringa ki false. Kei te pupuri ano nga ipu i a ratau uara waikeri.

• Kei a Offcanvas nga momo rerekee whakautu . .offcanvasKa noho tonu te karaehe taketake —ka huna i nga ihirangi puta noa i nga tauranga tirohanga katoa. Kia pai ai te aro, hurihia taua .offcanvaskaraehe ki tetahi .offcanvas-{sm|md|lg|xl|xxl}karaehe.

• Ko nga kaiwehewehe teepu matotoru kei te whakauru inaianei. — Kua tangohia e matou te taitapa matotoru me te uaua ki te takahi i waenga i nga roopu ripanga ka nukuhia ki tetahi akomanga ka taea e koe te tono, .table-group-divider. Tirohia nga tuhinga ripanga hei tauira.

• Kua tuhia ano a Scrollspy ki te whakamahi i te Intersection Observer API , ko te tikanga kaore koe e hiahia ki nga takai matua, ka whakakorehia teoffsetwhirihora, me etahi atu. Rapua o whakatinanatanga Scrollspy kia tika ake, kia rite tonu ki o raatau tohu tohu.

• Ko nga popovers me nga taputapu taputapu inaianei kei te whakamahi i nga taurangi CSS. Ko etahi o nga taurangi CSS kua whakahoutia mai i o raatau hoa Sass hei whakaiti i te maha o nga taurangi. No reira, e toru nga taurangi kua whakakorehia i roto i tenei tukunga: $popover-arrow-color, $popover-arrow-outer-color, me $tooltip-arrow-color.

• Kua taapirihia nga .text-bg-{color}kaiawhina hou. Engari ki te whakatakoto takitahi .text-*me nga .bg-*taputapu, ka taea e koe te whakamahi i nga .text-bg-*kaiawhina ki te whakatakoto i tetahi background-colorpapaarangi rereke color.

• Kua taapirihia .form-check-reversete whakarereke hei huri i te raupapa o nga tapanga me nga pouakataki/irirangi e pa ana.

• Kua taapirihia nga pou purepure hei tautoko i nga ripanga ma te .table-striped-columnsakomanga hou.

Mo te rarangi katoa o nga huringa, tirohia te kaupapa v5.2.0 i GitHub .

v5.1.0

• Kua taapirihia he tautoko whakamatautau mo te whakatakotoranga Matiti CSS . — He mahi kei te haere tonu tenei, kaore ano kia reri mo te mahi whakaputa, engari ka taea e koe te whakauru ki te waahanga hou ma te Sass. Hei whakahohe, monohia te matiti taunoa, ma te tautuhi $enable-grid-classes: falseme te whakahohe i te Matiti CSS ma te tautuhi $enable-cssgrid: true.

• Kua whakahōuhia nga pae whakatere hei tautoko i te kanapa. — Taapirihia nga kaiutuutu o waho ki tetahi pae whakatere me nga .navbar-expand-*karaehe urupare me etahi tohu kanapa.

• Kua taapirihia te waahanga waahi hou . — Ko ta matou waahanga hou, he huarahi ki te whakarato poraka rangitahi hei whakakapi i nga mea pono hei awhina i te tohu kei te uta tonu tetahi mea ki to papaanga, taupānga ranei.

• Ko te mono Tiango inaianei e tautoko ana i te tiango whakapae . — Tāpirihia .collapse-horizontalki to .collapsetiango i te widthhei utu mo te height. A ape i te peita ano i te kaitirotiro ma te tautuhi i min-heightte height.

• Kua taapirihia he kaiawhina ture taapiri me te poutū. — Hohoro te tono i nga taonga pouaka flexbox maha kia tere te hanga tahora ritenga me nga taapu . Kōwhiria mai i ngā tāpae whakapae ( .hstack) me te poutū ( ). .vstackTāpirihia nga whakawehenga poutū kia rite ki <hr>nga huānga me nga kaiawhina hou.vr .

• :rootKua taapirihia nga taurangi CSS ao hou . — He maha nga taurangi CSS hou kua taapirihia ki te :roottaumata hei whakahaere i <body>nga momo ahua. He maha ake nga mahi, tae atu ki o maatau taputapu me nga waahanga, engari inaianei panuihia nga taurangi CSS i te waahanga Whakaritea .

• Ko nga tae me nga taputapu papamuri kua whakahouhia hei whakamahi i nga taurangi CSS, me te taapiri i te opacity kuputuhi me nga taputapu opacity papamuri . — .text-* me .bg-*nga taputapu kua hangaia inaianei me nga taurangi CSS me rgba()nga uara tae, ka taea e koe te whakarite ngawari i tetahi taputapu me nga taputapu opacity hou.

• Kua taapirihia nga tauira snippet hou hei whakaatu me pehea te whakarite i o maatau waahanga. — Toia rite ki te whakamahi i nga waahanga kua whakaritea me etahi atu tauira hoahoa noa me o maatau tauira Snippets hou . Kei roto ko nga hiku , nga takaiho , nga roopu rarangi , me nga tikanga .

• I tangohia nga momo tuunga kaore i whakamahia mai i nga pouvers me nga aki taputapu na te mea na Popper anake enei e whakahaere. $tooltip-marginkua whakakorehia, kua tautuhia ki nullroto i te tukanga.

Kei te hiahia koe ki etahi atu korero? Pānuihia te v5.1.0 blog post.

Nga whakawhirinakitanga

• Whakataka jQuery.
• Whakapai ake i Popper v1.x ki Popper v2.x.
• I whakakapihia a Libsass ki te Dart Sass i te mea kua whakakorehia ta matou kaitoi Sass i hoatu ki a Libsass.
• I heke mai i Jekyll ki Hugo mo te hanga i a maatau tuhinga

Tautoko Pūtirotiro

• I tukuna a Internet Explorer 10 me 11
• I whakataka a Microsoft Edge < 16 (Tawhito Tuku iho)
• I tukuna a Firefox <60
• Whakataka Safari <12
• I tukuna a iOS Safari <12
• I tukuna a Chrome <60

Nga huringa tuhinga

• I hoahoa ano te wharangi kaainga, te whakatakotoranga tuhinga, me te hiku.
• Kua taapirihia he aratohu Parcel hou .
• Kua taapirihia te waahanga Whakaritea hou , te whakakapi i te wharangi Kaupapa a v4 , me nga korero hou mo Sass, nga whiringa whirihoranga o te ao, nga kaupapa tae, nga taurangi CSS, me etahi atu.
• I whakaraupapahia nga tuhinga puka katoa ki roto i nga waahanga Puka hou , ka wehewehea nga korero ki nga wharangi kua aro ake.
• Waihoki, kua whakahouhia te waahanga Tahora , kia tino marama ake te kiko o te matiti.
• I whakaingoatia ano te wharangi waahanga "Navs" ki "Navs & Ripa".
• I whakaingoatia te wharangi "Tirohanga" ki "Tirohanga me nga reo irirangi".
• I hoahoa ano i te pae whakatere me te taapiri i tetahi putungaroto hou kia ngawari ake te huri haere i o maatau pae me nga putanga tuhinga.
• Kua taapirihia he pokatata papapātuhi hou mo te mara rapu: Ctrl + /.

Sass

• Kua whakakorehia e matou nga hanumi mahere Sass taunoa kia ngawari ake te tango i nga uara taapiri. Kia maumahara me tautuhi koe i nga uara katoa i roto i nga mapi Sass penei $theme-colors. Tirohia me pehea te mahi ki nga mapi Sass .

• WhatiwhatiI whakaingoatia color-yiq()te mahi me nga taurangi e pa ana ki color-contrast()te mea kua kore e hono atu ki te mokowā tae YIQ. Tirohia te #30168.

  • $yiq-contrasted-thresholdkua whakaingoatia ki $min-contrast-ratio.
  • $yiq-text-darkka $yiq-text-lightwhakaingoatia ki $color-contrast-darka $color-contrast-light.

• WhatiwhatiKua huri nga tawhā whakauru urunga patai pāpāho mo te huarahi arorau ake.

  • media-breakpoint-down()ka whakamahi i te waahi whati ake hei utu mo te waahi whawhati e whai ake nei (hei tauira, media-breakpoint-down(lg)hei utu mo media-breakpoint-down(md)nga tauranga tirohanga he iti ake i te lg).
  • Waihoki, ka whakamahia ano e te tawhā tuarua i roto media-breakpoint-between()i te waahi pakaru ake hei utu mo te waahi pakaru e whai ake nei (hei tauira, media-between(sm, lg)hei utu mo media-breakpoint-between(sm, md)nga tauranga tirohanga i waenga smme te lg).

• WhatiwhatiKua tangohia nga momo tuhi me $enable-print-styleste taurangi. Kei te tata tonu nga karaehe whakaatu ta. Tirohia te #28339 .

• WhatiwhatiI whakataka color(), theme-color(), me gray()nga mahi hei tautoko i nga taurangi. Tirohia te #29083 .

• WhatiwhatiKua whakaingoatia theme-color-level()te mahi ki color-level()a inaianei ka whakaae ki nga tae e hiahia ana koe, kaua ki nga $theme-colortae anake. Tirohia #29083 Kia mataara: color-level() i muri mai ka tukuna ki roto v5.0.0-alpha3.

• WhatiwhatiI whakaingoatia ano $enable-prefers-reduced-motion-media-queryme $enable-pointer-cursor-for-buttonski $enable-reduced-motiona $enable-button-pointersmo te poto.

• WhatiwhatiKua tangohia te bg-gradient-variant()ranunga. Whakamahia te .bg-gradientkaraehe ki te taapiri i nga rōnaki ki nga huānga hei utu mo nga .bg-gradient-*karaehe i hangaia.

• Whatiwhati Kua tangohia nga ranunga kua whakakorehia i mua:

  • hover, hover-focus, plain-hover-focus, mehover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(i tukuna ano te akomanga whaipainga e pa ana, .text-hide)
  • visibility()
  • form-control-focus()

• WhatiwhatiI whakaingoatia scale-color()te mahi ki shift-color()te karo i te tukinga ki te mahi a Sass ake te whakatauine tae.

• box-shadowka taea e mixins inaianei nga nulluara me te taka nonemai i nga tohenga maha. Tirohia te #30394 .

• He border-radius()uara taunoa inaianei te ranunga.

Pūnaha tae

• Ko te punaha tae i mahi me color-level()te $theme-color-intervaltango i tetahi punaha tae hou. Ko nga mea katoa lighten()me darken()nga mahi kei roto i to maatau turanga ka whakakapihia e te tint-color()me shade-color(). Ko enei mahinga ka whakakotahi i te tae ki te ma, ki te pango ranei, kaua ki te whakarereke i te maama ma te nui o te rahi. Ko shift-color()te kauruku, ka whakamarumaru ranei i tetahi tae i runga i te pai, i te kino ranei tona tawhā taumaha. Tirohia te #30622 mo etahi atu korero.

• Kua taapirihia nga kakano me nga atarangi hou mo ia tae, e iwa nga tae motuhake mo ia tae turanga, hei taurangi Sass hou.

• Kua pai ake te rereke o te tae. I tukitukia te ōwehenga rereke o te tae mai i te 3:1 ki te 4.5:1 me te whakahou i nga tae puru, matomato, maaka me te mawhero kia pai ai te rereke o te WCAG 2.1 AA. I hurihia ano to maatau tae rereke mai i $gray-900te ki $black.

• Hei tautoko i ta maatau punaha tae, kua taapirihia e matou nga tikanga hou tint-color()me shade-color()nga mahi hei whakauru tika i o maatau tae.

Whakahoutanga matiti

• Whatiwhati hou! xxlKua taapirihia he waahi pakaru hou mo 1400pxte piki ake. Karekau he whakarereketanga ki etahi atu waahi pakaru katoa.

• Kua pai ake nga awaawa. Inaianei kua whakatauhia nga awaawa, he whaiti ake i te v4 ( 1.5rem, tata ranei 24px, heke iho i te 30px). Ka whakahāngai tēnei i ngā awaawa o tā mātou pūnaha mātiti ki ā mātou taputapu mokowā.

  • Kua taapirihia te karaehe awaawa hou ( .g-*, .gx-*, me .gy-*) hei whakahaere i nga awaawa whakapae / poutū, nga awaawa whakapae, me nga awaawa poutū.
  • WhatiwhatiI whakaingoatia .no-gutterskia .g-0rite ki nga taputapu awa hou.

• Kaore ano nga pou i position: relativetono, no reira me taapiri koe .position-relativeki etahi huānga hei whakaora i taua whanonga.

• WhatiwhatiHe maha nga .order-*karaehe i tukuna kaore i whakamahia. Inaianei ka tukuna noa e matou .order-1ki .order-5waho o te pouaka.

• WhatiwhatiI whakahekehia te .mediawaahanga na te mea ka ngawari te whakahoki me nga taputapu. Tirohia te #28265 me te wharangi taputapu ngawari hei tauira .

• Whatiwhati bootstrap-grid.csska pa ana inaianei box-sizing: border-boxki te pou, kaua ki te tautuhi ano i te rahi pouaka-ao. Ma tenei ara, ka taea te whakamahi i a maatau momo matiti ki etahi atu waahi kaore he pokanoa.

• $enable-grid-classeskua kore e monohia te whakatipuranga o nga karaehe ipu. Tirohia te #29146.

• I whakahōuhia te make-colranunga ki te taunoa ki nga pou rite kaore he rahinga kua tohua.

Ihirangi, Reboot, etc

• Kua whakahohea te RFS ma te taunoa. Ko nga pane e whakamahi ana i tefont-size()ranunga ka whakatika aunoa i a raataufont-sizeki te tauine me te tauranga tirohanga. I uru mai tenei ahuatanga me te v4.

• WhatiwhatiI whakahurihia a maatau momotuhi whakaatu hei whakakapi i a maatau $display-*taurangi me te $display-font-sizesmapi Sass. I tangohia ano nga $display-*-weighttaurangi takitahi mo te s kotahi $display-font-weightme te whakatikatika font-size.

• .display-*Kua taapirihia nga rahi pane hou e rua , .display-5me te .display-6.

• Ko nga hononga kua tararohia ma te taunoa (kaore i te whakaparo noa), mena he waahanga o nga waahanga motuhake.

• I hoahoa ano nga tepu hei whakamau i o raatau ahua me te hanga ano ki nga taurangi CSS kia kaha ake te whakahaere i te hanga.

• WhatiwhatiKo nga ripanga kohanga kaore e tuku i nga momo ahua.

• Whatiwhati .thead-lightka whakatakahia .thead-darkmo nga .table-*karaehe rereke ka taea te whakamahi mo nga huānga ripanga katoa ( thead, tbody, tfoot, tr, thme td).

• WhatiwhatiKa table-row-variant()whakaingoatia ano te ranunga ki table-variant()te whakaae kia 2 noa nga tawhā: $color(ingoa tae) me $value(waehere tae). Ko te tae taitapa me nga tae nako ka tatau aunoa i runga i nga taurangi taurangi tepu.

• Wehehia nga taurangi papaa putau tepu ki roto -yme te -x.

• WhatiwhatiKua heke .pre-scrollablete karaehe. Tirohia te #29135

• Whatiwhati .text-*karekau nga taputapu e taapiri i te hover me te arotahi ki nga hononga. .link-*Ka taea te whakamahi i nga karaehe kaiawhina. Tirohia te #29267

• WhatiwhatiKua heke .text-justifyte karaehe. Tirohia te #29793

• Whatiwhati <hr>Ka whakamahia nga huānga inaianei heighthei utu mo borderte tautoko ake i te sizehuanga. Ka taea hoki e tenei te whakamahi i nga taputapu padding ki te hanga wehewehenga matotoru (hei tauira, <hr class="py-1">).

• Tautuhianu taunoa whakapae me nga huānga mai padding-lefti te pūtirotiro taunoa ki .<ul><ol>40px2rem

• Kua taapirihia $enable-smooth-scroll, e pa ana ki scroll-behavior: smoothte ao katoa—haunga nga kaiwhakamahi e tono ana kia whakaitihia te nekehanga ma prefers-reduced-motionte patai pāpāho. Tirohia te #31877

RTL

• Kua whakaingoatia katoatia nga taurangi motuhake, nga taputapu, me nga whakaurunga ki te whakamahi i nga ahuatanga arorau penei me era i kitea i roto i nga whakatakotoranga flexbox—hei tauira, starthei endwhakakapi leftme te right.

Puka

• Kua taapirihia nga puka tere hou! Kua whakatairangahia e matou te tauira tapanga Maango ki nga waahanga puka tautoko katoa. Tirohia te wharangi tapanga Maranga hou.

• Whatiwhati Kua whakakotahihia nga huānga ahua taketake me te ritenga. Ko nga pouakataki, nga reo irirangi, nga kowhiringa, me etahi atu whakaurunga i whai karaehe taketake me nga karaehe ritenga i v4 kua whakakotahi. Inaianei kua rite katoa o maatau ahua ahua, ko te nuinga kaore he hiahia mo te HTML ritenga.

  • .custom-control.custom-checkboxko inaianei .form-check.
  • .custom-control.custom-custom-radioko inaianei .form-check.
  • .custom-control.custom-switchko inaianei .form-check.form-switch.
  • .custom-selectko inaianei .form-select.
  • .custom-filea .form-filekua whakakapia e nga momo ritenga ki runga ake o .form-control.
  • .custom-rangeko inaianei .form-range.
  • Whakataka maori .form-control-fileme .form-control-range.

• WhatiwhatiWhakataka .input-group-appendme .input-group-prepend. Ka taea e koe te taapiri i nga paatene me .input-group-textnga tamariki tika o nga roopu whakauru.

• Ko te radius taitapa kua roa e ngaro ana i runga i te roopu whakauru me te pepeha urupare whakamana ka whakatauhia ma te taapiri i tetahi .has-validationakomanga taapiri ki nga roopu whakauru whai mana.

• Whatiwhati Kua whakahekehia nga karaehe tahora ahua-motuhake mo to tatou punaha matiti. Whakamahia a maatau matiti me nga taputapu hei utu mo te .form-group, .form-row, ranei .form-inline.

• WhatiwhatiKo nga tapanga puka e hiahia ana inaianei .form-label.

• Whatiwhati .form-textno longer sets display, ka taea e koe te hanga i roto i te raina, te aukati ranei i nga tuhinga awhina i runga i to hiahia ma te huri noa i te huānga HTML.

• Ko nga mana Puka kaore i te whakamahia i te heightwa e taea ana, engari me whakaroa ki min-heightte whakapai ake i te whakaritenga me te hototahi ki etahi atu waahanga.

• Ko nga tohu whakamana kua kore e hoatu ki <select>s me multiple.

• I whakaraupapahia nga konae Sass puna i raro i te scss/forms/, tae atu ki nga momo roopu whakauru.

Waehanga

• Ko nga uara whakakotahi paddingmo nga matohi, nga kongakonga parāoa, nga kaari, nga takaiho, nga roopu rarangi, nga tikanga, nga pouvers, me nga aki taputapu hei hangai i runga i ta maatau $spacertaurangi. Tirohia te #30564 .

Akoriona

• Kua taapirihia te waahanga accordion hou .

Matohi

• Inaianei kei nga matohi nga tauira me nga tohu .

• Kua tangohia nga momo ritenga mo <hr>s i ia matohi mai i te mea kua whakamahia e ratou currentColor.

Tohu

• WhatiwhatiI tukuna nga .badge-*karaehe tae katoa mo nga taputapu papamuri (hei tauira, whakamahia .bg-primaryhei utu mo te .badge-primary).

• WhatiwhatiWhakataka —whakamahia .badge-pillte .rounded-pillwhaipainga hei utu.

• WhatiwhatiKua tangohia nga momo whakaparo me te arotahi mo <a>nga <button>huānga.

• Whakanuia te padding taunoa mo nga tohu mai i .25em/ .5emki .35em/ .65em.

Nga kongakonga taro

• Whakamaamaa te ahua taunoa o nga kongakonga parāoa ma te tango i te padding, background-color, me te border-radius.

• Kua taapirihia nga taonga ritenga CSS hou --bs-breadcrumb-dividermo te whakarite ngawari me te kore e hiahia ki te whakahiato CSS.

Patene

• Whatiwhati Ko nga paatene takahuri , me nga pouakataki, nga reo irirangi ranei, kaore e hiahiatia he JavaScript me te tohu tohu hou. Kua kore e hiahiatia he huānga takai, taapiri atu.btn-checkki te<input>, ka honoa ki etahi.btnkaraehe o te<label>. Tirohia te #30650 . Ko nga tuhinga mo tenei kua neke mai i ta maatau wharangi Patene ki te waahanga Puka hou.

• Whatiwhati I tukuna .btn-blockmo nga taputapu. Engari ki te whakamahi .btn-blocki runga i te .btn, takai i o paatene .d-gridme tetahi .gap-*taputapu hei mokowhiti ina hiahiatia. Hurihia ki nga karaehe urupare kia kaha ake te whakahaere i a raatau. Pānuihia nga tuhinga mo etahi tauira.

• I whakahouhia a maatau button-variant()me nga button-outline-variant()ranunga hei tautoko i nga taapiri taapiri.

• Kua whakahōuhia nga paatene hei whakarite kia nui ake te rereke i runga i te whakaparo me nga ahuatanga hohe.

• Kei aianei nga patene monoa pointer-events: none;.

Kaari

• WhatiwhatiI whakatakahia ki to maatau matiti .card-deck. Takaia o kaari ki roto i nga karaehe pou ka taapirihia he .row-cols-*ipu matua hei hanga ano i nga papa kaari (engari he mana ake mo te tirohanga aro).

• WhatiwhatiI tukuna .card-columnski te taha o Masonry. Tirohia te #28922 .

• WhatiwhatiI whakakapihia te .cardakoriona ki tetahi waahanga Accordion hou .

Carousel

• Kua taapirihia he .carousel-darkmomo rereke mo nga tuhinga pouri, nga mana whakahaere me nga tohu (he pai mo nga papamuri maamaa).

• I whakakapihia nga tohu chevron mo nga mana carousel me nga SVG hou mai i nga Ata Bootstrap .

Katia te paatene

• WhatiwhatiI whakaingoatia .closemo .btn-closete ingoa iti ake.

• Ko nga paatene kati inaianei kei te whakamahi i te background-image(SVG kua whakauruhia) hei utu ×i te HTML, kia ngawari ake te whakarite me te kore e pa ki to tohu.

• Kua taapirihia he momo rereke hou .btn-close-whitee whakamahi ana filter: invert(1)kia taea ai te rereke teitei te whakakore i nga tohu ki nga papamuri pouri.

Tiango

• Kua tangohia nga punga panuku mo nga acordions.

Whakataka

• Kua taapirihia nga .dropdown-menu-darkmomo rereke hou me nga taurangi e hono ana mo nga whakaheke pouri i runga i te tono.

• Kua taapirihia te taurangi hou mo $dropdown-padding-x.

• I whakapouritia te kaiwehewehe takaiho kia pai ake te rereke.

• WhatiwhatiKo nga takahanga katoa mo te takaiho ka puta inaianei i runga i te paatene takahuri katahi ka mirumiru ake ki te huānga matua.

• Kei nga tahua takaiho inaianei he data-bs-popper="static"huinga huanga ina he pateko te tuunga o te takaiho, kei roto ranei i te pae whakaterenga. Ka taapirihia tenei e to maatau JavaScript ka awhina i a maatau ki te whakamahi i nga momo tuunga ritenga me te kore e pokanoa ki te tuunga a Popper.

• WhatiwhatiKo flipte whiringa kua whakataka mo te mono takaiho hei pai mo te whirihoranga Popper taketake. Inaianei ka taea e koe te whakakore i te whanonga pore ma te tuku i te rarangi kau mo te fallbackPlacementskowhiringa i roto i te whakahuri pore .

• Ka taea te paato i nga tahua takaiho me tetahi autoClosewhiringa hou hei hapai i te whanonga kati aunoa . Ka taea e koe te whakamahi i tenei whiringa ki te whakaae ki te paato i roto, i waho ranei o te tahua takaiho kia tauwhitiwhiti ai.

• Ka tautokohia e nga whakahekenga .dropdown-items kua takaia ki <li>te s.

Jumbotron

• WhatiwhatiI whakatakahia te waahanga jumbotron na te mea ka taea te whakahoki me nga taputapu. Tirohia ta maatau tauira Jumbotron hou mo te whakaaturanga.

Rōpū rārangi

• .list-group-numberedKua taapirihia te whakarereke hou ki te rarangi roopu.

Navs me nga ripa

• Kua taapirihia nga nulltaurangi hou mo font-size, font-weight, color, me :hover colorte .nav-linkakomanga.

Navbars

• WhatiwhatiInaianei kei te hiahia nga Navbars he ipu kei roto (hei whakangawari i nga whakaritenga mokowhiti me te CSS e hiahiatia ana).
• WhatiwhatiKo te .activekaraehe e kore e taea te tono ki .nav-itemte s, me tono tika ki .nav-linkte s.

Kowekeweke

• Kua taapirihia te waahanga hou o waho .

whakawhārangi

• Ko nga hononga whakaingoatanga inaianei kua taea te whakarite margin-lefthe mea whakaawhiwhi hihiko ki nga kokonga katoa ina wehea tetahi ki tetahi.

• Kua taapirihia transitionnga s ki nga hononga whakaingoatanga.

Popovers

• WhatiwhatiI whakaingoatia ano .arrowki .popover-arrowroto i ta maatau tauira popover taunoa.

• I whakaingoatia ano whiteListki te allowList.

Kaihurihuri

• Ka whakanuia e nga Kaihurihuri inaianei prefers-reduced-motion: reducema te whakaroa i nga pakiwaituhi. Tirohia te #31882 .

• Kua pai ake te tirohanga poutū hurihuri.

Toasts

• Inaianei ka taea te whakanoho ki roto i te toasts .toast-containerme te awhina o nga taputapu tuunga .

• I hurihia te roanga tunu tunu ki te 5 hēkona.

• Ka tangohia overflow: hiddenmai i te toasts ka whakakapihia ki te border-radiuss tika me nga calc()mahi.

Aki taputapu

• WhatiwhatiI whakaingoatia .arrowki .tooltip-arrowroto i ta maatau tauira aki taputapu taunoa.

• WhatiwhatifallbackPlacementsKa hurihia te uara taunoa mo te ['top', 'right', 'bottom', 'left']mo te whakanohonga pai ake o nga huānga popper.

• WhatiwhatiI whakaingoatia ano whiteListki te allowList.

Nga taputapu

• WhatiwhatiI whakaingoatia etahi taputapu hei whakamahi i nga ingoa taonga arorau hei utu mo nga ingoa ahunga me te taapiri o te tautoko RTL:

  • I whakaingoatia ano .left-*me .right-*ki .start-*a .end-*.
  • I whakaingoatia ano .float-leftme .float-rightki .float-starta .float-end.
  • I whakaingoatia ano .border-leftme .border-rightki .border-starta .border-end.
  • I whakaingoatia ano .rounded-leftme .rounded-rightki .rounded-starta .rounded-end.
  • I whakaingoatia ano .ml-*me .mr-*ki .ms-*a .me-*.
  • I whakaingoatia ano .pl-*me .pr-*ki .ps-*a .pe-*.
  • I whakaingoatia ano .text-leftme .text-rightki .text-starta .text-end.

• WhatiwhatiKua monoa nga tawhē kino ma te taunoa.

• Kua taapirihia te .bg-bodykaraehe hou mo te whakarite tere i te <body>papamuri ki etahi atu huānga.

• Kua taapirihia nga taputapu tuunga hou mo top, right, bottom, me left. Kei roto i nga uara te 0, 50%, 100%mo ia rawa.

• Kua taapirihia nga taputapu hou .translate-middle-xme nga .translate-middle-ytaputapu ki te taha whakapae, poutū ranei ki waenganui i nga huānga tuunga tuuturu.

• border-widthKua taapirihia nga taputapu hou .

• WhatiwhatiI whakaingoatia .text-monospaceki .font-monospace.

• WhatiwhatiKua tangohia .text-hidei te mea he tikanga tawhito mo te huna i nga tuhinga e kore e tika kia whakamahia ano.

• Nga .fs-*taputapu taapiri mo nga font-sizetaputapu (me te RFS kua whakahohea). He rite tonu enei ki nga pane taunoa o HTML (1-6, nui ki te iti), ka taea te whakarereke ma te mahere Sass.

• WhatiwhatiI whakaingoatia .font-weight-*nga taputapu .fw-*mo te poto me te riterite.

• WhatiwhatiI whakaingoatia .font-style-*nga taputapu .fst-*mo te poto me te riterite.

• Kua taapirihia .d-gridhei whakaatu i nga taputapu me nga gaptaputapu hou ( .gap) mo nga whakatakotoranga CSS Grid me te pouaka flexbox.

• WhatiwhatiI tangohia .rounded-smme te rounded-lg, ka whakauruhia he tauine hou o nga karaehe, .rounded-0ki .rounded-3. Tirohia te #31687 .

• line-heightKua taapirihia nga taputapu hou : .lh-1, .lh-sm, .lh-baseme .lh-lg. Tirohia konei .

• I nukuhia te .d-nonetaputapu i roto i ta maatau CSS kia nui ake te taumaha ki runga i etahi atu taputapu whakaatu.

• I whakaroahia te .visually-hidden-focusablekaiawhina ki te mahi i nga ipu, ma te whakamahi :focus-within.

Kaiawhina

• Whatiwhati Kua whakaingoatia nga kaiawhina whakauru urupare ki nga kaiawhina tauwehenga me nga ingoa karaehe hou me nga whanonga pai ake, tae atu ki tetahi taurangi CSS awhina.

  • Kua whakaingoatia ano nga karaehe ki te huri byki xte ahua owehenga. Hei tauira, .ratio-16by9inaianei .ratio-16x9.
  • Kua whakakorehia e matou te .embed-responsive-itemkaikowhiri roopu me te huānga ki te whiriwhiri i tetahi kaikowhiri ngawari ake .ratio > *. Karekau he karaehe e hiahiatia ana, ka mahi te kaiawhina owehenga inaianei me tetahi huānga HTML.
  • Ko te $embed-responsive-aspect-ratiosmapi Sass kua whakaingoatia ki $aspect-ratiosa kua whakangawarihia ona uara ki te whakauru i te ingoa o te akomanga me te paheketanga hei key: valuetakirua.
  • Ko nga taurangi CSS kua hangaia inaianei ka whakauruhia mo ia uara ki te mahere Sass. Whakakētia te --bs-aspect-ratiotaurangi i runga i te .ratioki te hanga i tetahi ritenga ritenga ōwehenga .

• Whatiwhati Ko nga karaehe "Kai panui mata" he akomanga "ahua huna" inaianei .

  • I hurihia te kōnae Sass mai i scss/helpers/_screenreaders.scsskiscss/helpers/_visually-hidden.scss
  • I whakaingoatia ano .sr-onlyme .sr-only-focusableki .visually-hiddena.visually-hidden-focusable
  • Ka whakaingoatia ano sr-only()me te sr-only-focusable()whakauru ki te visually-hidden()me visually-hidden-focusable().

• bootstrap-utilities.csskei roto hoki o matou kaiawhina inaianei. Ko nga kaiawhina kaore e hiahia ki te kawemai i roto i nga hanganga ritenga.

JavaScript

• I whakahekehia te whakawhirinakitanga jQuery me te tuhi ano i nga monomai kia noho tonu ki te JavaScript.

• WhatiwhatiKo nga huanga raraunga mo nga taputapu JavaScript katoa kua whakaingoatia inaianei hei awhina i te wehewehe i nga mahi a Bootstrap mai i nga roopu tuatoru me to ake waehere. Hei tauira, ka whakamahia data-bs-togglehei utu mo te data-toggle.

• Ka taea e nga monomai katoa te whakaae inaianei ki te kaiwhiriwhiri CSS hei tohenga tuatahi. Ka taea e koe te tuku i tetahi huānga DOM, tetahi kaiwhiri CSS whaimana ranei hei hanga tauira hou o te mono:

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

• popperConfigka taea te tuku hei mahi e whakaae ana ki te whirihora Popper taunoa a Bootstrap hei tohenga, kia taea ai e koe te hanumi i tenei whirihoranga taunoa i to ara. E pa ana ki nga takaiho, nga poupou, me nga aki taputapu.

• fallbackPlacementsKa hurihia te uara taunoa mo te ['top', 'right', 'bottom', 'left']mo te whakanoho pai ake o nga huānga Popper. E pa ana ki nga takaiho, nga poupou, me nga aki taputapu.

• Kua tangohia nga tohu tohu mai i nga tikanga tuuturu penei i te _getInstance()→ getInstance().