Hloov mus rau v5

Taug qab thiab tshuaj xyuas cov kev hloov pauv rau Bootstrap cov ntaub ntawv, cov ntaub ntawv, thiab cov khoom siv los pab koj tsiv teb tsaws ntawm v4 rau v5.

Ntawm nplooj ntawv no

v 5.2.0

Kev tsim kho tshiab

Bootstrap v5.2.0 nta ib qho kev hloov kho hloov maj mam rau ib txhais tes ntawm cov khoom thiab cov khoom thoob plaws qhov project, tshwj xeeb tshaj yog los ntawm kev ua kom zoo nkauj border-radiusntawm cov nyees khawm thiab daim ntawv tswj . Peb cov ntaub ntawv tseem tau hloov kho nrog lub vev xaib tshiab, cov ntaub ntawv yooj yim dua uas tsis cuam tshuam cov ntu ntawm lub sidebar, thiab cov piv txwv tseem ceeb ntawm Bootstrap Icons .

Ntau CSS variables

Peb tau hloov kho tag nrho peb cov khoom siv CSS variables. Thaum Sass tseem txhawb nqa txhua yam, txhua qhov kev tivthaiv tau hloov kho kom suav nrog CSS qhov sib txawv ntawm cov chav kawm tivthaiv (xws li, .btn), tso cai rau kev hloov kho lub sijhawm tiag tiag ntawm Bootstrap. Hauv kev tshaj tawm tom ntej, peb yuav txuas ntxiv nthuav peb txoj kev siv CSS hloov pauv mus rau hauv peb qhov kev teeb tsa, cov ntawv, cov neeg pab, thiab cov khoom siv hluav taws xob. Nyeem ntxiv txog CSS variables nyob rau hauv txhua feem ntawm lawv cov nplooj ntawv cov ntaub ntawv.

Peb qhov kev siv CSS sib txawv yuav ua rau me ntsis ua tsis tiav kom txog rau thaum Bootstrap 6. Thaum peb xav siv tag nrho cov no thoob plaws lub rooj tsavxwm, lawv khiav qhov kev pheej hmoo ntawm kev hloov pauv. Piv txwv li, kev teeb tsa $alert-border-width: var(--bs-border-width)hauv peb qhov chaws tuaj yeem rhuav tshem Sass hauv koj tus kheej yog tias koj tau ua $alert-border-width * 2rau qee yam.

Xws li, qhov twg los xij, peb yuav txuas ntxiv mus rau ntau qhov sib txawv CSS, tab sis thov paub txog peb qhov kev siv yuav raug txwv me ntsis hauv v5.

Tshiab`_maps.scss`

Bootstrap v5.2.0 qhia txog cov ntaub ntawv Sass tshiab nrog _maps.scss. Nws rub tawm ntau daim ntawv qhia Sass los ntawm _variables.scsskev kho qhov teeb meem uas hloov tshiab rau daim ntawv qhia qub tsis tau siv rau cov ntawv qhia thib ob uas txuas ntxiv mus. Piv txwv li, kev hloov tshiab rau $theme-colorstsis tau siv rau lwm cov ntsiab lus maps uas tso siab rau $theme-colors, rhuav tshem cov kev hloov pauv tseem ceeb. Nyob rau hauv luv luv, Sass muaj ib qho kev txwv qhov twg ib zaug ib tug default variable los yog daim ntawv qhia tau siv , nws yuav tsis tau hloov kho. Muaj qhov tsis zoo sib xws nrog CSS qhov sib txawv thaum lawv tau siv los sau lwm qhov sib txawv CSS.

Qhov no yog vim li cas kev hloov pauv hloov pauv hauv Bootstrap yuav tsum tuaj tom qab @import "functions", tab sis ua ntej @import "variables"thiab tag nrho peb cov khoom ntshuam. Tib yam siv rau Sass maps-koj yuav tsum hla dhau qhov kev ua ntej ua ntej lawv siv. Cov duab hauv qab no tau raug hloov mus rau qhov tshiab _maps.scss:

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

Koj qhov kev cai Bootstrap CSS tsim yuav tsum tam sim no saib ib yam dab tsi zoo li no nrog ib daim ntawv qhia txawv ntshuam.

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

Cov khoom siv tshiab

font-weightCov khoom siv nthuav dav kom suav nrog .fw-semiboldrau cov fonts semibold.
border-radiusKev siv hluav taws xob nthuav dav kom suav nrog ob qhov loj me tshiab, .rounded-4thiab .rounded-5, rau kev xaiv ntau dua.

Kev hloov ntxiv

Qhia kev $enable-container-classesxaiv tshiab. - Tam sim no thaum xaiv rau hauv qhov kev sim CSS Grid layout, .container-*cov chav kawm tseem yuav muab tso ua ke, tshwj tsis yog qhov kev xaiv no tau teem rau false. Cov thawv ntim kuj tam sim no khaws lawv cov nqi gutter.
Offcanvas tivthaiv tam sim no muaj kev hloov pauv . Thawj .offcanvaschav kawm tseem tsis hloov pauv - nws zais cov ntsiab lus thoob plaws txhua qhov chaw saib. Txhawm rau ua kom nws teb tau, hloov .offcanvaschav kawm ntawd mus rau txhua .offcanvas-{sm|md|lg|xl|xxl}chav kawm.
Thicker rooj dividers yog tam sim no xaiv nyob rau hauv. - Peb tau tshem tawm cov thicker thiab nyuaj rau override ciam teb ntawm pawg lus thiab hloov nws mus rau ib qho kev xaiv hauv chav kawm koj tuaj yeem thov, .table-group-divider. Saib cov ntaub ntawv rooj rau piv txwv.
Scrollspy tau rov sau dua los siv Kev Sib Tham Sib Tham API , uas txhais tau tias koj tsis xav tau cov txheeb ze niam txiv wrappers, deprecatesoffsetconfig, thiab ntau dua. Saib rau koj qhov kev siv Scrollspy kom muaj tseeb dua thiab zoo ib yam hauv lawv cov ntsiab lus nav.
Popovers thiab cov lus qhia tam sim no siv CSS variables. Qee qhov sib txawv CSS tau hloov kho los ntawm lawv cov Sass counterparts kom txo tau tus lej ntawm qhov sib txawv. Raws li qhov tshwm sim, peb qhov hloov pauv tau raug txiav tawm hauv qhov kev tso tawm no: $popover-arrow-color, $popover-arrow-outer-color, thiab $tooltip-arrow-color.
Ntxiv cov .text-bg-{color}neeg pab tshiab. Hloov chaw ntawm ib tus neeg .text-*thiab .bg-*cov khoom siv hluav taws xob, tam sim no koj tuaj yeem siv cov .text-bg-*pab cuam los teeb tsa background-colornrog qhov sib txawv hauv ntej color.
Ntxiv .form-check-reversekev hloov kho kom tig qhov kev txiav txim ntawm cov ntawv cim thiab cov ntawv txheeb / xov tooj cua.
Ntxiv kab kab txaij txhawb nqa rau cov ntxhuav ntawm .table-striped-columnschav kawm tshiab.

Rau cov npe tag nrho ntawm kev hloov pauv, saib v5.2.0 qhov project ntawm GitHub .

v 5.1.0

Ntxiv kev sim txhawb rau CSS Grid layout . - Qhov no yog ib qho kev ua haujlwm, thiab tseem tsis tau npaj rau kev siv ntau lawm, tab sis koj tuaj yeem xaiv qhov tshiab ntawm Sass. Txhawm rau pab nws, lov tes taw daim phiaj xwm txheej, los ntawm kev teeb tsa $enable-grid-classes: falsethiab pab kom CSS Grid los ntawm kev teeb tsa $enable-cssgrid: true.
Hloov tshiab navbars los txhawb offcanvas. - Ntxiv offcanvas drawers nyob rau hauv ib qho navbar nrog cov .navbar-expand-*chav kawm teb thiab qee qhov offcanvas markup.
Ntxiv cov placeholder tshiab . - Peb qhov kev tivthaiv tshiab tshaj plaws, ib txoj hauv kev los muab cov blocks ib ntus los ntawm cov ntsiab lus tiag tiag los pab qhia tias qee yam tseem tab tom thauj khoom hauv koj lub xaib lossis app.
Collapse plugin tam sim no txhawb kev sib tsoo kab rov tav . - Ntxiv .collapse-horizontalrau koj .collapsekom tawg lub widthes tsis txhob ntawm height. Tsis txhob repainting browser los ntawm kev teeb tsa min-heightlossis height.
Ntxiv pawg tshiab thiab ntsug txoj cai pab. - Ceev nrooj siv ntau yam khoom flexbox kom sai sai tsim kev cai layouts nrog pawg . Xaiv los ntawm kab rov tav ( .hstack) thiab ntsug ( .vstack) pawg. Ntxiv ntsug dividers zoo ib yam li <hr>cov ntsiab lus nrog cov pab tshiab.vr .
Ntxiv cov tshiab :rootCSS thoob ntiaj teb hloov pauv. - Ntxiv ob peb CSS tshiab hloov pauv mus rau :rootqib rau kev tswj cov <body>qauv. Ntau dua yog nyob rau hauv kev ua haujlwm, suav nrog thoob plaws peb cov khoom siv hluav taws xob thiab cov khoom siv, tab sis tam sim no nyeem CSS qhov hloov pauv hauv ntu Customize .
Hloov cov xim thiab cov khoom siv yav dhau los siv CSS variables, thiab ntxiv cov ntawv tshiab opacity thiab keeb kwm opacity utilities. - .text-* thiab .bg-*cov khoom siv hluav taws xob tam sim no tau tsim nrog CSS qhov sib txawv thiab rgba()cov xim muaj nuj nqis, tso cai rau koj kom yooj yim kho cov khoom siv nrog cov khoom siv hluav taws xob tshiab.
Ntxiv cov qauv snippet tshiab raws li qhia yuav ua li cas kho peb cov khoom. - Rub npaj siv cov khoom tsim kho thiab lwm cov qauv tsim nrog peb cov qauv Snippets tshiab . Xws li cov footers , dropdowns , npe pawg , thiab modals .
Tshem tawm qhov tsis siv qhov chaw xaiv los ntawm popovers thiab cov lus qhia raws li cov no yog ua los ntawm Popper nkaus xwb. $tooltip-margintau deprecated thiab teem rau nullhauv tus txheej txheem.

Xav paub ntau ntxiv? Nyeem qhov v5.1.0 blog ncej.

Hav nyob ntawd! Cov kev hloov pauv rau peb thawj qhov kev tso tawm tseem ceeb ntawm Bootstrap 5, v5.0.0, tau sau tseg hauv qab no. Lawv tsis cuam tshuam txog cov kev hloov pauv ntxiv uas tau qhia saum toj no.

Kev vam meej

poob jQuery.
Hloov kho los ntawm Popper v1.x rau Popper v2.x.
Hloov Libsass nrog Dart Sass raws li peb Sass compiler muab Libsass raug tso tseg.
Taug kev los ntawm Jekyll mus rau Hugo los tsim peb cov ntaub ntawv

Kev them nyiaj yug browser

Tso Internet Explorer 10 thiab 11
Tshem tawm Microsoft Edge <16 (Legacy Edge)
Tshem tawm Firefox <60
Tso Safari <12
Tso iOS Safari <12
Poob Chrome <60

Cov ntaub ntawv hloov pauv

Rov tsim kho homepage, docs layout, thiab footer.
Ntxiv tshiab Parcel phau ntawv qhia .
Ntxiv Customize seem tshiab , hloov v4's Theming nplooj ntawv , nrog cov ntsiab lus tshiab ntawm Sass, kev xaiv thoob ntiaj teb kev teeb tsa, cov qauv xim, CSS hloov pauv, thiab ntau dua.
Reorganized tag nrho cov ntaub ntawv nyob rau hauv cov ntaub ntawv tshiab seem , sib cais cov ntsiab lus mus rau hauv ntau tsom cov nplooj ntawv.
Ib yam li ntawd, hloov kho qhov Layout seem , kom pom cov ntsiab lus ntawm daim phiaj kom meej meej.
Renamed "Navs" nplooj ntawv txuas mus rau "Navs & Tabs".
Renamed "Khoom" nplooj ntawv mus rau "Checks & xov tooj cua".
Redesigned lub navbar thiab ntxiv subnav tshiab kom nws yooj yim dua mus nyob ib ncig ntawm peb cov chaw thiab docs versions.
Ntxiv cov keyboard shortcut tshiab rau kev tshawb nrhiav teb: Ctrl + /.

Sass

Peb tau ditched lub neej ntawd Sass daim ntawv qhia kev sib koom ua ke kom nws yooj yim dua los tshem tawm qhov tsis txaus ntseeg. Nco ntsoov koj tam sim no yuav tsum tau txhais tag nrho cov txiaj ntsig hauv Sass maps zoo li $theme-colors. Saib seb yuav ua li cas nrog Sass maps .
tawgRenamed color-yiq()muaj nuj nqi thiab lwm yam hloov mus rau color-contrast()raws li nws tsis muaj feem xyuam rau YIQ xim chaw. Saib #30168.
- $yiq-contrasted-thresholdyog renamed $min-contrast-ratio.
- $yiq-text-darkthiab $yiq-text-lightraug hloov npe mus rau $color-contrast-darkthiab $color-contrast-light.
tawgMedia query mixins parameters tau hloov pauv rau txoj hauv kev zoo dua.
- media-breakpoint-down()siv lub breakpoint nws tus kheej es tsis txhob ntawm lub breakpoint tom ntej (xws li, media-breakpoint-down(lg)es tsis txhob ntawm media-breakpoint-down(md)lub hom phiaj viewports me dua lg).
- Ib yam li ntawd, qhov thib ob parameter nyob rau hauv media-breakpoint-between()kuj siv lub breakpoint nws tus kheej es tsis txhob ntawm lub tom ntej no breakpoint (xws li, media-between(sm, lg)es tsis txhob ntawm media-breakpoint-between(sm, md)lub hom phiaj viewports ntawm smthiab lg).
tawgTshem tawm cov qauv luam tawm thiab $enable-print-stylessib txawv. Cov chav kawm luam tawm tseem nyob ib puag ncig. Saib #28339 .
tawgPoob color(), theme-color(), thiab gray()ua haujlwm hauv kev pom zoo ntawm cov hloov pauv. Saib #29083 .
tawgRenamed theme-color-level()muaj nuj nqi rau color-level()thiab tam sim no lees txais cov xim uas koj xav tau tsis yog $theme-colorxim xwb. Saib #29083 Saib: color-level() tom qab ntawd poob rau hauv v5.0.0-alpha3.
tawgRenamed $enable-prefers-reduced-motion-media-querythiab $enable-pointer-cursor-for-buttonsrau $enable-reduced-motionthiab $enable-button-pointersrau brevity.
tawgTshem tawm cov bg-gradient-variant()mixin. Siv cov .bg-gradientchav kawm ntxiv gradients rau cov ntsiab lus tsis yog cov .bg-gradient-*chav kawm tsim.
tawg Tshem tawm cov mixins yav dhau los deprecated:
- hover, hover-focus, plain-hover-focus, thiabhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(tseem tso tseg cov chav kawm siv hluav taws xob cuam tshuam, .text-hide)
- visibility()
- form-control-focus()
tawgRenamed scale-color()muaj nuj nqi kom shift-color()tsis txhob muaj kev sib tsoo nrog Sass tus kheej xim scaling muaj nuj nqi.
box-shadowmixins tam sim no tso cai rau nullqhov tseem ceeb thiab poob nonelos ntawm ntau qhov kev sib cav. Seej #30394 .
Cov border-radius()mixin tam sim no muaj tus nqi qub.

Xim system

Cov xim system uas ua haujlwm nrog color-level()thiab $theme-color-intervalraug tshem tawm hauv kev pom zoo ntawm cov xim tshiab. Tag nrho lighten()thiab darken()ua haujlwm hauv peb cov codebase yog hloov los ntawm tint-color()thiab shade-color(). Cov haujlwm no yuav muab cov xim sib xyaw nrog cov xim dawb lossis xim dub es tsis txhob hloov nws lub teeb los ntawm tus nqi ruaj khov. Qhov shift-color()yuav tint los yog ntxoov ntxoo xim nyob ntawm seb nws qhov hnyav parameter yog qhov zoo lossis tsis zoo. Saib #30622 kom paub meej ntxiv.
Ntxiv cov tints tshiab thiab ntxoov ntxoo rau txhua xim, muab cuaj cais xim rau txhua lub hauv paus xim, raws li Sass hloov tshiab.
Txhim kho xim zoo sib xws. Bumped xim sib piv ntawm 3: 1 txog 4.5: 1 thiab hloov kho xiav, ntsuab, cyan, thiab liab xim kom ntseeg tau WCAG 2.1 AA qhov sib piv. Kuj hloov peb cov xim sib txawv xim los ntawm $gray-900mus rau $black.
Txhawm rau txhawb peb cov xim, peb tau ntxiv cov kev cai tshiab tint-color()thiab shade-color()kev ua haujlwm kom sib xyaw peb cov xim kom tsim nyog.

Daim phiaj tshiab

Tshiab breakpoint! Ntxiv tshiab xxlbreakpoint rau 1400pxthiab nce. Tsis muaj kev hloov pauv rau tag nrho lwm cov ntsiab lus.
Txhim kho gutters. Gutters tam sim no nyob rau hauv rems, thiab yog nqaim tshaj v4 ( 1.5rem, los yog hais txog 24px, nqis los ntawm 30px). Qhov no ua rau peb cov kab sib chaws gutters nrog peb cov khoom siv sib txawv.
- Ntxiv cov gutter tshiab ( .g-*, .gx-*, thiab .gy-*) tswj kab rov tav / ntsug gutters, kab rov tav gutters, thiab ntsug gutters.
- tawgRenamed .no-gutterskom .g-0phim cov khoom siv hluav taws xob tshiab.
Cov kab ntawv tsis tau position: relativesiv lawm, yog li koj yuav tau ntxiv .position-relativerau qee lub ntsiab lus los kho tus cwj pwm ntawd.
tawgTso ob peb .order-*chav kawm uas feem ntau mus tsis siv. Peb tam sim no tsuas yog muab .order-1rau .order-5tawm ntawm lub thawv.
tawgTso tseg cov .mediakhoom tivthaiv raws li nws tuaj yeem yooj yim replicated nrog cov khoom siv. Saib #28265 thiab nplooj ntawv flex Utilities piv txwv .
tawg bootstrap-grid.csstam sim no tsuas yog siv box-sizing: border-boxrau kem es tsis txhob rov pib dua lub thawv thoob ntiaj teb-qhov loj me. Li no, peb cov kab sib chaws tuaj yeem siv rau ntau qhov chaw yam tsis muaj kev cuam tshuam.
$enable-grid-classestsis txhob cuam tshuam cov tiam ntawm cov chav kawm ntim ntxiv lawm. Saib #29146.
Hloov kho cov make-colmixin rau lub neej ntawd kom sib npaug kab tsis muaj qhov loj me.

Cov ntsiab lus, Reboot, thiab lwm yam

RFS tam sim no tau qhib los ntawm lub neej ntawd. Headings siv covfont-size()mixin yuav cia li hloov lawvfont-sizemus rau scale nrog lub viewport. Cov yeeb yam no yav dhau los xaiv-hauv nrog v4.
tawgOverhauled peb cov duab typography los hloov peb cov kev $display-*hloov pauv thiab nrog $display-font-sizesSass daim ntawv qhia. Kuj tshem tawm cov kev $display-*-weighthloov pauv ib leeg rau ib leeg $display-font-weightthiab kho font-sizes.
Ntxiv ob lub .display-*ntsiab lus tshiab, .display-5thiab .display-6.
Cov kev sib txuas yog underlined los ntawm lub neej ntawd (tsis yog ntawm hover), tshwj tsis yog lawv yog ib feem ntawm cov khoom tshwj xeeb.
Rov tsim cov ntxhuav los hloov kho lawv cov qauv thiab rov tsim kho lawv nrog CSS hloov pauv kom tswj tau ntau dua styling.
tawgNested tables tsis tau txais cov qauv ntxiv lawm.
tawg .thead-lightthiab .thead-darkpoob rau hauv kev pom zoo ntawm cov .table-*chav kawm sib txawv uas tuaj yeem siv rau txhua lub ntsiab lus ( thead, tbody, tfoot, tr, ththiab td).
tawgCov table-row-variant()mixin yog renamed rau table-variant()thiab lees txais tsuas yog 2 tsis: $color(xim lub npe) thiab $value(xim code). Cov xim ciam teb thiab cov xim accent tau txiav txim siab raws li qhov sib txawv ntawm lub rooj.
Split table cell padding variables rau hauv -ythiab -x.
tawgpoob .pre-scrollablehoob kawm. Saib #29135
tawg .text-*kev siv hluav taws xob tsis ntxiv hover thiab tsom cov xeev rau kev txuas ntxiv lawm. .link-*Cov chav kawm pab siv tau. Saib #29267
tawgpoob .text-justifyhoob kawm. Saib #29793
tawg <hr>cov ntsiab lus tam sim no siv heightes tsis txhob bordertxhawb nqa tus sizecwj pwm zoo dua. Qhov no kuj ua rau kev siv cov khoom siv padding los tsim cov kev faib ua kom tuab dua (xws li, <hr class="py-1">).
Rov pib lub neej ntawd kab rov tav padding-leftntawm <ul>thiab <ol>cov ntsiab lus los ntawm browser default 40pxrau 2rem.
Ntxiv $enable-smooth-scroll, uas siv scroll-behavior: smooththoob ntiaj teb-tsuas yog cov neeg siv thov kom txo cov lus tsa suab los ntawm prefers-reduced-motionkev nug xov xwm. Saib #31877

RTL

Kab rov tav kev taw qhia tshwj xeeb sib txawv, cov khoom siv hluav taws xob, thiab cov mixins tau hloov npe los siv cov khoom muaj txiaj ntsig zoo li cov uas pom hauv flexbox layouts-piv txwv li, startthiab endnyob rau hauv lieu ntawm leftthiab right.

Cov ntawv

Ntxiv cov ntaub ntawv ntab tshiab! Peb tau txhawb nqa Floating labels piv txwv rau kev txhawb nqa daim ntawv. Saib nplooj ntawv Floating tshiab.
tawg Consolidated haiv neeg thiab kev cai daim ntawv cov ntsiab lus. Checkboxes, xov tooj cua, xaiv, thiab lwm yam inputs uas muaj haiv neeg thiab kev cai cov chav kawm nyob rau hauv v4 tau muab sau ua ke. Tam sim no ze li ntawm tag nrho peb cov ntsiab lus yog kev cai nkaus xwb, feem ntau tsis tas yuav muaj kev cai HTML.
- .custom-control.custom-checkboxyog tam sim no .form-check.
- .custom-control.custom-custom-radioyog tam sim no .form-check.
- .custom-control.custom-switchyog tam sim no .form-check.form-switch.
- .custom-selectyog tam sim no .form-select.
- .custom-filethiab .form-filetau raug hloov los ntawm kev cai style nyob rau sab saum toj ntawm .form-control.
- .custom-rangeyog tam sim no .form-range.
- Poob haiv neeg .form-control-filethiab .form-control-range.
tawgUa tsaug .input-group-appendthiab .input-group-prepend. Tam sim no koj tuaj yeem cia li ntxiv cov nyees khawm thiab .input-group-textraws li cov menyuam yaus ncaj qha ntawm pawg tswv yim.
Lub vojvoog uas ploj lawm ntev ntawm ciam teb ntawm cov tswv yim pab pawg nrog cov lus qhia txog kev siv tau cov kab mob thaum kawg kho los ntawm kev ntxiv cov .has-validationchav kawm ntxiv rau cov pab pawg nrog kev siv tau.
tawg Tshem tawm cov chav kawm tshwj xeeb layout rau peb cov kab sib chaws. Siv peb daim phiaj thiab cov khoom siv hluav taws xob hloov .form-group, .form-row, lossis .form-inline.
tawgDaim ntawv lo tam sim no xav tau .form-label.
tawg .form-texttsis tau teeb tsa lawm display, tso cai rau koj los tsim inline lossis thaiv cov ntawv pab raws li koj xav tau los ntawm kev hloov cov ntsiab lus HTML.
Daim ntawv tswj tsis tau siv tas li heightthaum ua tau, hloov pauv mus min-heightrau kev txhim kho kev hloov kho thiab kev sib raug zoo nrog lwm yam khoom.
Validation icons tsis siv rau <select>s nrog multiple.
Rearranged qhov chaw Sass cov ntaub ntawv hauv qab scss/forms/, suav nrog cov tswv yim pab pawg.

Cheebtsam

Cov txiaj ntsig sib koom paddingua ke rau kev ceeb toom, breadcrumbs, phaib, dropdowns, npe pawg, modals, popovers, thiab cov lus qhia kom ua raws li peb $spacerqhov sib txawv. Se #30564 .

Accordion

Ntxiv tshiab accordion tivthaiv .

ceeb toom

Cov ntawv ceeb toom tam sim no muaj cov piv txwv nrog cov cim .
Tshem tawm cov qauv kev cai rau <hr>s hauv txhua qhov kev ceeb toom txij li lawv twb siv currentColorlawm.

Daim paib

tawgTso tseg tag nrho .badge-*cov chav kawm xim rau cov khoom siv tom qab (piv txwv li, siv .bg-primarytsis yog .badge-primary).
tawgPoob - siv .badge-pilllub .rounded-pilltshuab hluav taws xob hloov pauv.
tawgTshem tawm hover thiab tsom cov qauv rau <a>thiab <button>cov ntsiab lus.
Nce default padding rau cov paib ntawm .25em/ .5emrau .35em/ .65em.

Breadcrumbs

Simplified lub neej ntawd tsos ntawm breadcrumbs los ntawm kev tshem tawm padding, background-color, thiab border-radius.
Ntxiv CSS cov cuab yeej kev cai tshiab --bs-breadcrumb-dividerrau kev kho kom yooj yim yam tsis tas yuav rov ua dua CSS.

Khawm

tawg Toggle nyees khawm , nrog lub checkboxes lossis xov tooj cua, tsis tas yuav tsum muaj JavaScript thiab muaj cov cim tshiab. Peb tsis tas yuav muaj cov khoom qhwv, ntxiv.btn-checkrau qhov<input>, thiab ua ke nrog cov.btnchav kawm ntawm<label>. Saib #30650 . Cov ntaub ntawv rau qhov no tau txav los ntawm peb nplooj nyees khawm mus rau ntu Cov Ntawv tshiab.
tawg Poob .btn-blockrau kev siv hluav taws xob. Es tsis txhob siv .btn-blockntawm lub .btn, qhwv koj cov nyees khawm nrog .d-gridthiab cov .gap-*khoom siv rau qhov chaw lawv raws li xav tau. Hloov mus rau cov chav kawm teb kom tswj tau lawv ntau dua. Nyeem cov ntaub ntawv rau qee qhov piv txwv.
Hloov kho peb button-variant()thiab button-outline-variant()mixins los txhawb cov kev txwv ntxiv.
Hloov kho cov nyees khawm kom ntseeg tau tias muaj qhov sib txawv ntxiv ntawm hover thiab lub xeev nquag.
Cov khawm xiam oob qhab tam sim no muaj pointer-events: none;.

Daim npav

tawgPoob .card-deckrau hauv kev txaus siab ntawm peb daim phiaj. Qhwv koj daim npav rau hauv cov chav kawm kab thiab ntxiv ib lub .row-cols-*thawv rau niam txiv los tsim daim npav daim npav (tab sis muaj kev tswj xyuas ntau dua los ntawm kev sib dhos).
tawgTso .card-columnsrau hauv kev pom zoo ntawm Masonry. Saib #28922 .
tawgHloov lub .cardaccordion raws li ib tug tshiab Accordion tivthaiv .

Carousel

Ntxiv cov kev .carousel-darkhloov tshiab rau cov ntawv tsaus, tswj, thiab ntsuas (zoo rau cov keeb kwm sib dua).
Hloov chevron icons rau carousel tswj nrog SVGs tshiab los ntawm Bootstrap Icons .

Kaw khawm

tawgRenamed .closemus .btn-closerau ib tug tsawg generic lub npe.
Kaw cov nyees khawm tam sim no siv ib qho background-image(embedded SVG) es tsis yog ib qho ×hauv HTML, tso cai rau kev kho kom yooj yim dua yam tsis tas yuav kov koj cov cim.
Ntxiv cov kev .btn-close-whitehloov tshiab uas siv filter: invert(1)los ua kom muaj qhov sib txawv siab dua tso tawm cov cim tawm tsam keeb kwm yav dhau los.

Kaw

Tshem tawm scroll anchoring rau accordions.

Dropdowns

Ntxiv cov .dropdown-menu-darkhloov tshiab tshiab thiab cov hloov pauv uas cuam tshuam rau ntawm qhov xav tau tsaus nti dropdowns.
Ntxiv tshiab variable rau $dropdown-padding-x.
Darkened lub dropdown divider rau kev zoo sib xws.
tawgTag nrho cov txheej xwm rau lub dropdown yog tam sim no tshwm sim ntawm lub dropdown toggle khawm thiab ces bubbled mus rau lub niam txiv lub caij.
Dropdown menus tam sim no muaj tus data-bs-popper="static"cwj pwm teeb tsa thaum qhov chaw ntawm qhov poob qis yog qhov zoo li qub, lossis poob rau hauv navbar. Qhov no tau ntxiv los ntawm peb cov JavaScript thiab pab peb siv txoj haujlwm kev cai yam tsis muaj kev cuam tshuam nrog Popper qhov chaw.
tawgPoob flipkev xaiv rau dropdown plugin nyob rau hauv txaus siab ntawm haiv neeg Popper configuration. Tam sim no koj tuaj yeem lov tes taw tus cwj pwm flipping los ntawm kev dhau qhov khoob khoob rau fallbackPlacementskev xaiv hauv flip modifier.
Dropdown menus tam sim no tuaj yeem nyem tau nrog qhov kev autoClosexaiv tshiab los tswj tus cwj pwm kaw nws pib . Koj tuaj yeem siv qhov kev xaiv no los lees txais qhov nyem sab hauv lossis sab nraud cov ntawv qhia zaub mov kom nws sib tham sib.
Dropdowns tam sim no txhawb .dropdown-items qhwv hauv <li>s.

Jumbotron

tawgTso tseg cov tshuaj tiv thaiv jumbotron raws li nws tuaj yeem rov ua dua nrog cov khoom siv hluav taws xob. Saib peb tus piv txwv Jumbotron tshiab rau qhov demo.

Sau npe pawg

Ntxiv tus .list-group-numberedhloov kho tshiab rau npe pawg.

Navs and tabs

Ntxiv cov nullhloov pauv tshiab rau font-size, font-weight, color, thiab :hover colorrau .nav-linkchav kawm.

Navbars

tawgNavbars tam sim no xav tau lub thawv nyob rau hauv (kom yooj yim kom yooj yim sib nrug thiab CSS xav tau).
tawgCov .activechav kawm tsis tuaj yeem siv rau .nav-items, nws yuav tsum siv ncaj qha rau .nav-links.

Offcanvas

Ntxiv qhov tshiab offcanvas tivthaiv .

Pagination

Pagination txuas tam sim no muaj customizable margin-leftuas yog dynamically sib npaug ntawm txhua lub ces kaum thaum sib cais los ntawm ib leeg.
Ntxiv transitions rau pagination txuas.

Popovers

tawgRenamed .arrowrau .popover-arrowhauv peb lub default popover template.
Renamed whiteListkev xaiv rau allowList.

Spinners

Spinners tam sim no hwm prefers-reduced-motion: reducelos ntawm qeeb cov animations. Saib #31882 .
Txhim kho spinner ntsug alignment.

Toasts

Cov toasts tam sim no tuaj yeem muab tso rau hauv ib qho .toast-containernrog kev pab los ntawm qhov chaw siv hluav taws xob .
Hloov lub sijhawm toast rau 5 vib nas this.
Tshem tawm overflow: hiddenntawm toasts thiab hloov nrog border-radiuss kom zoo nrog calc()kev ua haujlwm.

Cov lus qhia

tawgRenamed .arrowmus rau .tooltip-arrowhauv peb lub neej ntawd tooltip template.
tawgLub neej ntawd tus nqi rau qhov fallbackPlacementsyog hloov mus ['top', 'right', 'bottom', 'left']rau qhov kev tso kawm zoo dua ntawm cov ntsiab lus popper.
tawgRenamed whiteListkev xaiv rau allowList.

Cov khoom siv

tawgHloov npe ntau yam khoom siv los siv cov cuab yeej cuab tam lub npe es tsis txhob siv cov npe qhia nrog ntxiv ntawm RTL kev txhawb nqa:
- Renamed .left-*thiab .right-*mus .start-*thiab .end-*.
- Renamed .float-leftthiab .float-rightmus .float-startthiab .float-end.
- Renamed .border-leftthiab .border-rightmus .border-startthiab .border-end.
- Renamed .rounded-leftthiab .rounded-rightmus .rounded-startthiab .rounded-end.
- Renamed .ml-*thiab .mr-*mus .ms-*thiab .me-*.
- Renamed .pl-*thiab .pr-*mus .ps-*thiab .pe-*.
- Renamed .text-leftthiab .text-rightmus .text-startthiab .text-end.
tawgDisabled negative margins los ntawm lub neej ntawd.
Ntxiv .bg-bodychav kawm tshiab kom sai teeb lub <body>keeb kwm yav dhau rau cov ntsiab lus ntxiv.
Ntxiv cov khoom siv hluav taws xob tshiab rau top, right, bottom, thiab left. Cov nqi suav nrog 0, 50%, thiab 100%rau txhua yam khoom.
Ntxiv tshiab .translate-middle-x& .translate-middle-ykev siv hluav taws xob rau kab rov tav lossis vertically centre absolute / fixed positioned ntsiab.
Ntxiv cov border-widthkhoom siv tshiab .
tawgRenamed .text-monospacerau .font-monospace.
tawgTshem tawm .text-hidevim nws yog ib txoj hauv kev qub rau kev zais cov ntawv uas yuav tsum tsis txhob siv ntxiv lawm.
Ntxiv .fs-*cov nqi hluav taws xob rau kev font-sizesiv hluav taws xob (nrog RFS enabled). Cov no siv tib qhov teev raws li HTML lub ntsiab lus tseem ceeb (1-6, loj rau me), thiab tuaj yeem hloov kho ntawm Sass daim ntawv qhia.
tawgRenamed .font-weight-*utilities raws li .fw-*brevity thiab sib xws.
tawgRenamed .font-style-*utilities raws li .fst-*brevity thiab sib xws.
Ntxiv .d-gridrau tso saib cov khoom siv hluav taws xob thiab cov gapkhoom siv tshiab ( .gap) rau CSS Grid thiab flexbox layouts.
tawgTshem tawm .rounded-smthiab rounded-lg, thiab qhia txog qhov ntsuas tshiab ntawm cov chav kawm, .rounded-0rau .rounded-3. Saib #31687 .
Ntxiv cov line-heightkhoom siv tshiab: .lh-1, .lh-sm, .lh-basethiab .lh-lg. Saib ntawm no .
Tsiv cov .d-nonenqi hluav taws xob hauv peb CSS kom muab nws hnyav dua lwm cov khoom siv hluav taws xob.
Extended tus .visually-hidden-focusablepab los kuj ua hauj lwm ntawm ntim, siv :focus-within.

Cov pab

tawg Cov neeg pab cuam teb tau raug hloov npe rau cov neeg pab cuam nrog cov npe tshiab hauv chav kawm thiab txhim kho tus cwj pwm, nrog rau qhov sib txawv ntawm CSS muaj txiaj ntsig.
- Cov chav kawm tau raug hloov npe hloov bymus rau xhauv qhov piv txwv. Piv txwv li, .ratio-16by9yog tam sim no .ratio-16x9.
- Peb tau tso tseg .embed-responsive-itemthiab lub ntsiab pawg selector hauv kev pom zoo ntawm tus .ratio > *xaiv yooj yim dua. Tsis xav tau chav kawm ntxiv, thiab tus pab cuam piv tam sim no ua haujlwm nrog txhua yam HTML.
- Daim $embed-responsive-aspect-ratiosntawv qhia Sass tau raug hloov npe rau $aspect-ratiosthiab nws cov txiaj ntsig tau yooj yim kom suav nrog cov npe hauv chav kawm thiab feem pua ntawm cov key: valuekhub.
- CSS variables yog tam sim no tsim thiab suav nrog rau txhua tus nqi hauv Sass daim ntawv qhia. Hloov kho qhov --bs-aspect-ratiosib txawv ntawm qhov .ratiolos tsim ib qho kev cai nam piv .
tawg Cov chav kawm "Screen reader" yog tam sim no "visually zais" chav kawm .
- Hloov cov ntaub ntawv Sass los ntawm scss/helpers/_screenreaders.scssrauscss/helpers/_visually-hidden.scss
- Renamed .sr-onlythiab .sr-only-focusablemus .visually-hiddenthiab.visually-hidden-focusable
- Renamed sr-only()thiab sr-only-focusable()mixins rau visually-hidden()thiab visually-hidden-focusable().
bootstrap-utilities.csstam sim no kuj suav nrog peb cov neeg pab. Cov neeg pab tsis tas yuav tsum tau muab tso rau hauv kev cai tsim ntxiv lawm.

JavaScript

Tso tseg jQuery kev vam khom thiab rov sau cov plugins kom nyob hauv JavaScript tsis tu ncua.
tawgCov ntaub ntawv tus cwj pwm rau tag nrho JavaScript plugins tam sim no muaj npe los pab kom paub qhov txawv ntawm Bootstrap kev ua haujlwm los ntawm peb tog thiab koj tus kheej cov cai. Piv txwv li, peb siv data-bs-togglees tsis txhob data-toggle.
Tag nrho cov plugins tam sim no tuaj yeem lees txais CSS selector ua thawj qhov kev sib cav. Koj tuaj yeem dhau lub ntsiab lus DOM lossis ib qho CSS selector siv tau los tsim ib qho piv txwv tshiab ntawm lub plugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigtuaj yeem dhau los ua txoj haujlwm uas lees txais Bootstrap lub neej ntawd Popper config raws li kev sib cav, yog li koj tuaj yeem sib koom ua ke qhov kev teeb tsa no hauv koj txoj kev. Siv rau dropdowns, popovers, thiab tooltips.
Tus nqi pib rau qhov fallbackPlacementshloov pauv mus ['top', 'right', 'bottom', 'left']rau qhov kev tso kawm zoo dua ntawm Popper ntsiab. Siv rau dropdowns, popovers, thiab tooltips.
Tshem tawm underscore los ntawm pej xeem zoo li qub txoj kev zoo li _getInstance()→ getInstance().