Go hudugela go v5

Latela le go hlahloba diphetogo go difaele tša mothopo tša Bootstrap, ditokomane, le dikarolo go go thuša go huduga go tšwa go v4 go ya go v5.

Letlakaleng le

v5.2.0

Moralo o hlapolotsoeng

Bootstrap v5.2.0 litšobotsi tse sa bonahaleng moralo update lam bakeng sa seatla se senyenyane sa dikarolo le thepa ho pholletsa le porojeke e ne, haholo-holo ka boleng hloekisitsoeng border-radiuska dikonopo le foromo taolo . Ditokomane tša rena gape di mpshafaditšwe ka letlakala le lefsa la gae, peakanyo ye bonolo ya ditokomane yeo e sa hlwego e phušola dikarolo tša bara ya ka thoko, le mehlala ye e tšwelelago kudu ya Diaekhone tša Bootstrap .

Diphetogo tše dingwe tša CSS

Re mpshafaditše dikarolo tša rena ka moka go šomiša diphetogo tša CSS. Le ge Sass e sa thekga se sengwe le se sengwe, karolo ye nngwe le ye nngwe e mpshafaditšwe go akaretša diphetogo tša CSS go diklase tša motheo tša karolo (mohlala, .btn), go dumelela go tlwaetša go feta ga nako ya nnete ga Bootstrap. Ditokollong tše di latelago, re tla tšwela pele go katološa tšhomišo ya rena ya diphetogo tša CSS go peakanyo ya rena, diforomo, bathuši, le didirišwa. Bala ka botlalo ka ga diphetogo tša CSS karolong ye nngwe le ye nngwe go matlakala a tšona a ditokomane ka go latelana.

Tšhomišo ya rena ya phetogo ya CSS e tla ba ye e sa felelago ka tsela ye nngwe go fihla go Bootstrap 6. Le ge re ka rata go phethagatša tše ka botlalo go ralala le boto, di dira go ipea kotsing ya go hlola diphetogo tša go thuba. Go fa mohlala, go beakanya $alert-border-width: var(--bs-border-width)ka khoutung ya rena ya mohlodi go thuba kgonagalo ya Sass ka khoutung ya gago ge e ba o be o dira $alert-border-width * 2ka lebaka le itšego.

Ka ge go le bjalo, kae le kae moo go kgonegago, re tla tšwela pele go kgoromeletša go diphetogo tše ntši tša CSS, eupša hle lemoga gore phethagatšo ya rena e ka ba e lekanyeditšwe go se nene go v5.

Mpsha`_maps.scss`

Bootstrap v5.2.0 e ile ya tsebagatša faele e mpsha ya Sass ka _maps.scss. E goga dimmapa tše mmalwa tša Sass go tšwa _variables.scssgo go lokiša taba yeo go yona diapdeite go mmapa wa mathomo di bego di sa dirišwe go dimmapa tša bobedi tšeo di di katološago. Ka mohlala, diapdeite go $theme-colorsdi be di sa dirišwe go dimmapa tše dingwe tša sehlogo tšeo di bego di ithekgile ka $theme-colors, go roba ditshepedišo tša mošomo tša go tlwaetša senotlelo. Ka boripana, Sass e na le moedi moo ge phetogo ya go se fetoge goba mmapa o šetšego o šomišitšwe , e ka se mpshafatšwe. Go na le bofokodi bjo bo swanago ka diphetogo tša CSS ge di šomišwa go hlama diphetogo tše dingwe tša CSS.

Ke ka lebaka leo diphetogophetogo customizations ka Bootstrap lokela ho tla ka mor'a @import "functions", empa pele @import "variables"le ba bang kaofela ba rona import mokgobo. Go bjalo le ka dimmapa tša Sass—o swanetše go tloša dilo tšeo di sa fetogego pele di thoma go tlwaela. Dimmapa tše di latelago di hudušeditšwe go tše mpsha _maps.scss:

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

Dikago tša gago tša tlwaelo tša Bootstrap CSS bjale di swanetše go lebelega selo se sengwe sa go swana le se ka go tsenya ka ntle ga mebapa ye e arogilego.

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

Didirišwa tše mpsha

Didirišwa tše di katološitšwego go akaretša bakeng sa difonte tša semibold font-weight..fw-semibold
border-radiusDidirišwa tše di katološitšwego go akaretša bogolo bjo bobedi bjo bofsa, .rounded-4le .rounded-5, bakeng sa dikgetho tše dingwe.

Diphetogo tše dingwe

$enable-container-classesE tsebagaditšwe kgetho e mpsha . — Bjale ge o kgetha ka gare ga peakanyo ya CSS Grid ya teko, .container-*diklase di sa tla kgoboketšwa, ntle le ge kgetho ye e beakantšwe go false. Ditshelo le tšona bjale di boloka ditekanyetšo tša tšona tša gutter.
Karolo ya Offcanvas bjale e na le diphetogo tše di arabelago . Sehlopha sa mathomo .offcanvasse dula se sa fetoge—se uta diteng go ralala le mafelo ka moka a go lebelela. Go dira gore e arabele, fetoša sehlopha seo .offcanvasgo sehlopha sefe goba sefe .offcanvas-{sm|md|lg|xl|xxl}.
Dikaroganyo tša tafola tše koto bjale di kgetha go tsena. — Re tlošitše mollwane wo o koto le wo go lego thata go o tloša magareng ga dihlopha tša tafola gomme ra o šuthišetša sehlopheng sa boikhethelo seo o ka se dirišago, .table-group-divider. Bona ditokomane tša tafola bakeng sa mohlala.
Scrollspy e ngwadilwe gape go šomiša Intersection Observer API , yeo e rago gore ga o sa nyaka diphuthelwana tša motswadi tša go lekana, e nyatšaoffsetconfig, le tše dingwe. Lebelela diphethagatšo tša gago tša Scrollspy gore di be tše di nepagetšego kudu le tše di sa fetogego go tšweletšeng ga tšona ga nav.
Dipopo le maele a didirišwa bjale di šomiša diphetogo tša CSS. Diphetogo tše dingwe tša CSS di mpshafaditšwe go tšwa go balekane ba tšona ba Sass go fokotša palo ya diphetogo. Ka lebaka leo, diphetogo tše tharo di tlošitšwe tirišong tokollong ye: $popover-arrow-color, $popover-arrow-outer-color, le $tooltip-arrow-color.
Go okeditšwe .text-bg-{color}bathuši ba bafsa. Go e na le go beakanya motho ka o tee ka o tee .text-*le .bg-*didirišwa, bjale o ka diriša bathuši .text-bg-*go beakanya background-colorka pele ka go fapana color.
E okeditšwe .form-check-reversesefetoši go phetla tatelano ya dileibole le mapokisi a go hlahloba/diradio tše di sepedišanago le tšona.
Added metsero dikholomo tšehetsa ho litafole ka .table-striped-columnssehlopha se secha.

Bakeng sa lenaneo le le feletšego la diphetogo, bona projeke ya v5.2.0 go GitHub .

v5.1.0

E okeditšwe thekgo ya teko ya peakanyo ya CSS Grid . — Ye ke mošomo wo o tšwelago pele, gomme ga se wa hlwa o lokela tšhomišo ya tšweletšo, eupša o ka kgetha go tsena go tšobotsi ye mpsha ka Sass. Go e kgontšha, šitiša keriti ya go se fetoge, ka go beakanya $enable-grid-classes: falsele go kgontšha Gridi ya CSS ka go beakanya $enable-cssgrid: true.
Di-navbar tše di mpshafaditšwego go thekga offcanvas. - Add offcanvas dilae ka navbar efe kapa efe le dihlopha arabela .navbar-expand-*le ba bang ba offcanvas markup.
E okeditšwe karolo ye mpsha ya seswari sa lefelo . — Karolo ya rena e mpsha kudu, tsela ya go fana ka diboloko tša nakwana go e na le dikagare tša kgonthe go thuša go bontšha gore selo se sengwe se sa dutše se laetša setšeng sa gago goba tirišong.
Plugin ya go phuhlama bjale e thekga go phuhlama mo go rapaletšego . — Oketša .collapse-horizontalgo ya gago .collapsego phuhlama go widthe na le height. Phema go penta gape sephephediši ka go beakanya min-heightgoba height.
Added mokgobo o mofsa le bathuši ba molao wa go ema thwii. — Diriša ka pela dithoto tše ntši tša flexbox go hlama ka pela dipeakanyo tša tlwaelo ka mekgobo . Kgetha go tšwa go mekgobo ye e rapaletšego ( .hstack) le ye e emego ( .vstack). Oketša dikarolo tše di emego thwii tše di swanago le <hr>dielemente ka bathuši ba bafsa.vr .
E okeditšwe diphetogo tše mpsha tša :rootCSS tša lefase ka bophara. — E okeditše diphetogo tše mmalwa tše mpsha tša CSS :rootmaemong a go laola <body>mekgwa. Tse dingwe di mo mešomong, go akaretša le go ralala le didirišwa tša rena le dikarolo, eupša ga bjale bala diphetogo tša CSS karolong ya Tlwaetša .
E lokišeditšwe didirišwa tša mmala le tša ka morago go šomiša diphetogo tša CSS, gomme ya tlaleletša ka didirišwa tše mpsha tša go se bonagale ga sengwalwa le go se bonagale ga bokamorago . - .text-* le .bg-*didirišwa bjale di agilwe ka diphetogo tša CSS le rgba()boleng bja mmala, go go dumelela go beakanya gabonolo utility efe goba efe ka didirišwa tše mpsha tša opacity.
E okeditše mehlala ye mefsa ya seripa yeo e theilwego go bontšha ka moo o ka tlwaetšago dikarolo tša rena. — Goga o loketše go diriša dikarolo tše di rulagantšwego le dipaterone tše dingwe tše di tlwaelegilego tša go hlama ka mehlala ya rena e mefsa ya Dikarolwana . E akaretša dithalwa tša ka tlase , dithepo tša go theoga , dihlopha tša lenaneo , le dimodal .
Go tlošitšwe mekgwa ya go beakanya yeo e sa šomišwego go tšwa go dipopover le ditlhagišo tša didirišwa ka ge tše di swarwa fela ke Popper. $tooltip-margine se e tlogetšwe gomme ya bewa go nullmo tshepedišong.

O nyaka tsebišo e oketšegilego? Bala poso ya blog ya v5.1.0.

Hee moo! Diphetogo go tokollo ya rena ya mathomo ye kgolo ya Bootstrap 5, v5.0.0, di ngwadilwe ka mo tlase. Ga di bontšhe diphetogo tša tlaleletšo tšeo di bontšhitšwego ka mo godimo.

Ditshepetšo tša go ithekga

E lahlilwe jQuery.
E ntlafaditšwe go tšwa go Popper v1.x go ya go Popper v2.x.
E tšeetšwe sebaka sa Libsass ka Dart Sass ka ge mokgoboketši wa rena wa Sass yo a filwego Libsass o be a tlogetšwe.
E hudugile go tšwa Jekyll go ya Hugo bakeng sa go aga ditokomane tša rena

Thekgo ya sephephediši

Lahla Internet Explorer 10 le 11
E lahlilwe Microsoft Edge < 16 (Legacy Edge) .
E lahlilwe Firefox < 60
Safari e lahlilwe < 12
E lahlile iOS Safari < 12
Chrome e lahlilwe < 60

Ditokomane di a fetoga

Letlakala la gae le le hlamilwego lefsa, peakanyo ya ditokomane, le letlakala la ka tlase.
E okeditšwe tlhahlo ye mpsha ya Diphuthelwana .
Added new Customize section , replacing v4's Theming page , ka dintlha tse ntjha ka Sass, dikgetho tsa peakanyo ya lefatše, dikema tsa mebala, diphetolo CSS, le ho feta.
E rulagantšwe leswa ditokomane ka moka tša foromo go ba karolo ye mpsha ya Diforomo , go aroganya diteng go ba matlakala ao a tsepeletšego kudu.
Ka mo go swanago, e mpshafaditšwe karolo ya Peakanyo , go nama diteng tša keriti ka mo go kwagalago kudu.
E reeletšwe gape letlakala la karolo ya “Navs” go “Navs & Tabs”.
E reilwe leina lefsa la letlakala la “Ditshekatsheko” go “Ditshekatsheko & diradio”.
Redesigned navbar le eketsa subnav e ncha ho etsa hore ho be bonolo ho tsamaea ho pota libaka tsa rona le diphetolelo docs.
E okeditšwe ka tsela ye mpsha ya khiiboto ya tšhemo ya nyakišišo: Ctrl + /.

Sass

Re ditched dikopano tša mmapa wa Sass tša go se fetoge go dira gore go be bonolo go tloša dikelo tše di sa nyakegego. Dula o gopola gore bjale o swanetše go hlaloša dikelo ka moka ka go dimmapa tša Sass go swana le $theme-colors. Lekola kamoo o ka lebeletšanago le dimmapa tša Sass .
Go thubaRename color-yiq()mosebetsi le diphetolo amanang ho color-contrast()e le e 's ha e sa amana le YIQ mmala sebaka. Bona # 30168.
- $yiq-contrasted-thresholde rewa leina le lefsa go $min-contrast-ratio.
- $yiq-text-darkgomme $yiq-text-lightka go latelelana di rewa leina le lefsa go $color-contrast-darkle $color-contrast-light.
Go thubaMedia potšišo mixins ditekanyetšo di fetogile bakeng sa mokgwa wo o kwagalago kudu.
- media-breakpoint-down()e šomiša ntlha ya go kgaotša ka boyona go e na le ntlha ya go kgaotša ye e latelago (mohlala, media-breakpoint-down(lg)go e na le media-breakpoint-down(md)diphetho tša go lebelela tše nnyane go feta lg).
- Ka mo go swanago, paramethara ya bobedi ka media-breakpoint-between()gape e šomiša ntlha ya go kgaotša ka boyona go e na le ntlha ya go kgaotša ye e latelago (mohlala, media-between(sm, lg)go e na le media-breakpoint-between(sm, md)diphetho tša go lebelela magareng ga smle lg).
Go thubaTlošitšwe mekgwa ya go phrintha le $enable-print-stylesphetogo. Diklase tša pontšho ya go phrintha di sa dutše di le gona. Bona #28339 .
Go thubaLahlilwe color(), theme-color(), le gray()mesebetsi molemong oa diphetolo. Bona # 29083 .
Go thubaMošomo wo o reeletšwego gape theme-color-level()go color-level()gomme bjale o amogela mmala ofe goba ofe wo o o nyakago go e na le $theme-colormebala fela. Bona #29083 Hlokomela: color-level() e ile ya lahlelwa ka morago ka v5.0.0-alpha3.
Go thubaE reeletšwe leina lefsa $enable-prefers-reduced-motion-media-queryle $enable-pointer-cursor-for-buttonsgo ya go $enable-reduced-motionle $enable-button-pointersbakeng sa go ba le boripana.
Go thubaGo tlošitšwe bg-gradient-variant()mixin. Šomiša sehlopha go oketša dikelo go dielemente go e na le diklase tše di .bg-gradienttšweleditšwego ..bg-gradient-*
Go thuba Di-mixin tšeo di bego di tlogetšwe peleng tšeo di tlošitšwego:
- hover, hover-focus, plain-hover-focus, lehover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(gape o ile a lahlela sehlopha sa utility se amanang, .text-hide) .
- visibility()
- form-control-focus()
Go thubaRenamed scale-color()mošomo go shift-color()go efoga thulano le Sass ka boyona mmala scaling mošomo.
box-shadowmixins bjale e dumelela nullboleng le go theoga nonego tšwa go dingangišano tše dintši. Bona # 30394 .
border-radius()Mixin bjale e na le boleng bja go se fetoge .

Tsamaiso ya mebala

Tshepedišo ya mebala yeo e šomilego le color-level()gomme $theme-color-intervalya tlošwa go thekga tshepedišo ye mpsha ya mebala. Ka moka lighten()le darken()mešomo ka gare ga codebase ya rena e tšeelwa legato ke tint-color()le shade-color(). Mešomo ye e tla tswaka mmala le wo mošweu goba wo motsothwa go e na le go fetoša go ba bofefo bja wona ka tekanyo ye e beilwego. The shift-color()tla e ka ba tint kapa moriti mmala ho itšetlehile ka hore na paramethara lona boima ba 'mele ke e ntle kapa e mpe. Bona #30622 go hwetša dintlha ka botlalo.
E okeditše ditint tše mpsha le meriti ya mmala wo mongwe le wo mongwe, go fa mebala ye senyane ye e aroganego ya mmala wo mongwe le wo mongwe wa motheo, bjalo ka diphetogo tše mpsha tša Sass.
Phapano ya mebala e kaonafetšego. Bumped mmala phapang karo-karolelano ho tloha 3: 1 ho 4.5: 1 le ntjhafatswa putsoa, tala, cyan, le pinki mebala ho etsa bonnete ba WCAG 2.1 AA fapaneng. Gape o fetotše mmala wa rena wa phapano ya mmala go tloga $gray-900go go $black.
Go thekga tshepedišo ya rena ya mebala, re okeditše tlwaelo ye mpsha tint-color()le shade-color()mešomo ya go tswaka mebala ya rena ka tshwanelo.

Diapdeite tša keriti

Ntlha e mpsha ya go kgaotša! Added e ncha xxlbreakpoint bakeng sa 1400pxle ho fihlela. Ga go na diphetogo go mafelo a mangwe ka moka a go kgaotša.
Di-gutter tše di kaonefaditšwego. Di-gutter bjale di beakantšwe ka rems, gomme di tshesane go feta v4 ( 1.5rem, goba e ka ba 24px, go theoga go tšwa 30px). Se se logaganya diphaephe tša tshepedišo ya rena ya keriti le didirišwa tša rena tša go arola sekgoba.
- Go okeditšwe sehlopha se sefsa sa diphaephe ( .g-*, .gx-*, le .gy-*) go laola diphaephe tše di rapaletšego/tše di emego thwii, diphaephe tše di rapaletšego le diphaephe tše di emego thwii.
- Go thubaRenamed .no-guttersgo .g-0go swana le didirišwa tše mpsha tša gutter.
Dikholomo ga di sa position: relativešoma, ka fao o ka swanelwa ke go tlaleletša .position-relativego dielemente tše dingwe go bušetša boitshwaro bjoo.
Go thubaO ile a lahlela diklase tše mmalwa .order-*tšeo gantši di bego di sa dirišwe. Re bjale re fana feela .order-1go .order-5ka ntle ga lepokisi.
Go thubaLahlela .mediakarolo e le e ka habonolo pheta-pheta le utilities. Bona #28265 le letlakala la flex utilities bakeng sa mohlala .
Go thuba bootstrap-grid.cssbjale e šoma fela box-sizing: border-boxgo kholomo go e na le go seta gape go beakanya bogolo bja lepokisi la lefase ka bophara. Ka tsela ye, mekgwa ya rena ya keriti e ka šomišwa mafelong a mantši ntle le tšhitišo.
$enable-grid-classesga e sa šitiša moloko wa diklase tša ditshelo gape. Bona # 29146.
E mpshafaditšwe make-colmixin go ya go default go dikholomo tše di lekanago ntle le bogolo bjo bo laeditšwego.

Diteng, Reboot, jj

RFS bjale e kgontšhitšwe ka go ikemela. Dihlogo tše di šomišagofont-size()mixin di tla beakanya ka go iketla tša tšonafont-sizego sekala ka lefelo la go lebelela. tšobotsi ena pele e ne e le opt-in le v4.
Go thubaO ile a lokiša thaepo ya rena ya pontšho go tšeela $display-*diphetogo tša rena legato le ka $display-font-sizesmmapa wa Sass. Gape tloša $display-*-weightdiphetogo motho ka o tee ka o tee bakeng sa s e tee $display-font-weightle e fetotšwego font-size.
E okeditše .display-*bogolo bjo bobedi bjo bofsa bja dihlogo, .display-5le .display-6.
Dikgokagano di thaletšwe ka go ikemela (e sego fela go hover), ntle le ge e le karolo ya dikarolo tše itšego.
Ditafola tše di hlamilwego leswa go hlabolla mekgwa ya tšona le go di aga lefsa ka diphetogo tša CSS bakeng sa taolo ye ntši godimo ga setaele.
Go thubaDitafola tše di tsentšwego ka gare ga dihlaga ga di sa ja bohwa bja mekgwa.
Go thuba .thead-lightgomme .thead-darkdi lahlwa go thekga .table-*dihlopha tša go fapana tšeo di ka šomišwago go dielemente ka moka tša tafola ( thead, tbody, tfoot, tr, thle td).
Go thubatable-row-variant()Mixin e reelwa gape go gomme table-variant()e amogela fela ditekanyetšo tše 2: $color(leina la mmala) le $value(khoutu ya mmala). Mmala wa mollwane le mebala ya aksense e balwa ka go iketla go ya ka diphetogo ta ntlha ya tafola.
Aroganya diphetogo tša go tlatša sele ya tafola go -yle -x.
Go thubaTlase e lahlilwe .pre-scrollable. Bona # 29135
Go thuba .text-*didirišwa ga di sa tlaleletša ka go hover le go tsepamiša kgopolo go dikgokagano gape. .link-*diklase tša mothuši di ka dirišwa go e na le moo. Bona # 29267
Go thubaTlase e lahlilwe .text-justify. Bona # 29793
Go thuba <hr>dielemente bjale di šomiša heightgo e na le bordergo thekga sizeseka gakaone. Se se kgontšha gape tšhomišo ya didirišwa tša go padding go hlola dikarolo tše koto (mohlala, <hr class="py-1">).
Seta gape go rapalala ga maitirelo padding-leftgo <ul>le <ol>dielemente go tšwa go maitirelo a sephephediši go ya 40pxgo 2rem.
Added $enable-smooth-scroll, yeo e šomago scroll-behavior: smoothlefaseng ka bophara—ntle le badiriši bao ba kgopelago go fokotšega ga tšhišinyego ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona # 31877

RTL e le

Diphetogo tše itšego tša tlhahlo ya go rapalala, didirišwa, le mixins ka moka di reeletšwe gape go šomiša dithoto tše di kwagalago go swana le tšeo di hwetšwago ka go dipeakanyo tša flexbox—mohlala, startle endlegatong la leftle right.

Diforomo

E okeditšwe ka diforomo tše mpsha tše di phaphametšego! Re kgothaleditše mohlala wa dileibole tše di Phaphametšego go dikarolo tša foromo tšeo di thekgwago ka botlalo. Bona letlakala le lefsa la Dileibole tše di Phaphametšego.
Go thuba Dielemente tša foromo ya setlogo le ya tlwaelo ye e kopantšwego. Mapokisi a go hlahloba, diradio, dikgetho, le ditseno tše dingwe tšeo di bego di na le diklase tša setlogo le tša tlwaelo go v4 di kopantšwe. Bjale mo e nyakilego go ba dielemente tša rena ka moka tša foromo ke tša tlwaelo ka mo go feletšego, bontši ntle le go nyakega ga HTML ya tlwaelo.
- .custom-control.custom-checkboxke bjale .form-check.
- .custom-control.custom-custom-radioke bjale .form-check.
- .custom-control.custom-switchke bjale .form-check.form-switch.
- .custom-selectke bjale .form-select.
- .custom-filegomme .form-filedi tšeetšwe legato ke mekgwa ya tlwaelo godimo ga .form-control.
- .custom-rangeke bjale .form-range.
- O lahlilwe setlogo .form-control-filele .form-control-range.
Go thubaE lahlilwe .input-group-appendgomme .input-group-prepend. Bjale o ka no oketša dikonope le .input-group-textbjalo ka bana ba thwii ba dihlopha tša go tsenya.
Radius ya mollwane wa go Hlokagala yeo e lego kgale e le gona go sehlopha sa tsenyo ka phošo ya ditshwayotshwayo tša netefatšo mafelelong e lokišitšwe ka go oketša .has-validationsehlopha sa tlaleletšo go dihlopha tša tsenyo ka netefatšo.
Go thuba O lahlile diklase tša peakanyo tše di itšego tša foromo bakeng sa tshepedišo ya rena ya keriti. Diriša keriti ya rena le didirišwa tša motheo go e na le .form-group, .form-row, goba .form-inline.
Go thubaDileibole tša foromo bjale di nyaka .form-label.
Go thuba .form-textga e sa beakanya display, e go dumelela go hlama sengwalwa sa thušo sa ka gare goba sa thibela ka fao o ratago ka gona fela ka go fetoša elemente ya HTML.
Ditaolo tša foromo ga di sa šomišwa di sa fetoge heightge go kgonega, go e na le moo di diegiša go min-heightkaonafatša tlwaetšo le go sepelelana le dikarolo tše dingwe.
Diaekhone tša netefatšo ga di sa dirišwa go <select>s ka multiple.
Difaele tša Sass tša mohlodi tše di beakantšwego gape ka fase ga scss/forms/, go akaretšwa le mekgwa ya sehlopha sa go tsenya.

Dikarolo

Ditekanyetšo tše di kopantšwego paddingtša ditemošo, di-breadcrumb, dikarata, di-drolodown, dihlopha tša lenaneo, di-modal, di-popover, le ditlhagišo tša didirišwa tšeo di tlago go thewa godimo ga $spacerphetogo ya rena. Bona # 30564 .

Accordion ya go swana le yona

Go okeditšwe karolo e mpsha ya accordion .

Ditemošo

Ditemošo bjale di na le mehlala yeo e nago le maswao .
Go tlošitšwe mekgwa ya tlwaelo ya <hr>s ka go temošo ye nngwe le ye nngwe ka ge ba šetše ba šomiša currentColor.

Dipetšhe

Go thubaLahlela .badge-*dihlopha ka moka tša mebala bakeng sa didirišwa tša ka morago (mohlala, diriša .bg-primarygo e na le .badge-primary).
Go thuba.badge-pillE lahlilwe —diriša utility .rounded-pillgo e na le moo.
Go thubaTloswa hover le tsepamisa maikutlo mekhoa bakeng sa <a>le <button>elements.
Go oketša go tlatša ga go se fetoge ga dipetšhe go tšwa go .25em/ .5emgo ya go .35em/ .65em.

Dikgapetla tša borotho

E nolofaditše ponagalo ya go se fetoge ya diphaphathi tša borotho ka go tloša padding, background-color, le border-radius.
E okeditšwe thepa e mpsha ya tlwaelo ya CSS --bs-breadcrumb-dividerbakeng sa go tlwaetša gabonolo ntle le go nyaka go kgoboketša CSS gape.

Dikonope

Go thuba Dikonope tša go fetoša , ka mapokisi a go hlahloba goba diradio, ga di sa nyaka JavaScript gomme di na le go swaya mo gofsa. Ga re sa nyaka elemente ya go phuthela, re tlaleletša.btn-checkgo<input>, gomme re e kopanye le.btndiklase le ge e le dife go<label>. Bona # 30650 . Ditokomane tša se di hudugile go tšwa letlakaleng la rena la Dikonope go ya karolong ye mpsha ya Diforomo.
Go thuba E lahlilwe .btn-blockbakeng sa utilities. Go e na le go diriša .btn-blockgo .btn, phuthela dikonope tša gago ka .d-gridle sedirišwa sa .gap-*go di sepediša ka moo go nyakegago. Fetogela go diklase tše di arabelago bakeng sa taolo e oketšegilego le go feta godimo ga tšona. Bala di-docs bakeng sa mehlala e mengwe.
Updated rona button-variant()le button-outline-variant()mixins ho tšehetsa ditekanyetos tlatsetso.
Dikonope tše di mpshafaditšwego go netefatša phapano ye e oketšegilego go hover le maemo a mafolofolo.
Dikonope tše di golofetšego bjale di na le pointer-events: none;.

Karata ya

Go thubaO ile a lahlela .card-deckka go rata keriti ya rena. Phuthelela dikarata tša gago ka diklase tša dikholomo gomme o tlaleletše setshelo sa motswadi .row-cols-*go hlama gape di-deck tša dikarata (eupša ka taolo ye ntši godimo ga go logaganya mo go arabelago).
Go thubaO ile a lahlela .card-columnska go rata Masonry. Bona # 28922 .
Go thubaE ile ya tšeela .cardaccordion yeo e theilwego legato ka karolo e mpsha ya Accordion .

Carousel ya go swara

E okeditšwe .carousel-darkmohuta wo mofsa wa sengwalwa se se lefsifsi, ditaolo, le ditšhupetšo (e kgolo bakeng sa dimelo tše bofefo).
E tšeetšwe legato diaekhone tša chevron bakeng sa ditaolo tša carousel ka di-SVG tše difsa go tšwa go Diaekhone tša Bootstrap .

Koala konopo

Go thubaE reeletšwe leina lefsa .closego .btn-closebakeng sa leina leo le sego la kakaretšo.
Dikonope tša go tswalela bjale di šomiša background-image(SVG ye e tsentšwego) go e na le a ×ka go HTML, go dumelela tlwaetšo ye bonolo ntle le go nyakega ga go kgoma go swaya ga gago.
E okeditšwe .btn-close-whitemohuta wo mofsa wo o šomišago filter: invert(1)go kgontšha diaekhone tša go lahla phapano ya godimo kgahlanong le dimelo tše lefsifsi.

Phuhlama

Tloswa moqolo anchoring bakeng sa accordions.

Di-dropdown tša go theoga

E okeditšwe ka .dropdown-menu-darkmohuta wo mofsa le diphetogo tše di sepedišanago le tšona tša go theoga ga lefsifsi ka nyakego.
E okeditšwe phetogo ye mpsha ya $dropdown-padding-x.
E ile ya fifala karoganyo ya go theoga bakeng sa phapano e kaonefaditšwego.
Go thubaDitiragalo ka moka tša go theoga bjale di hlohleletšwa go konope ya go fetoša ya go theoga gomme ka morago tša bubbled go fihla go elemente ya motswadi.
Dimenu tša go theoga bjale di na le data-bs-popper="static"seka se se beilwego ge go beakanya ga go theoga go sa fetoge, goba go theoga go le ka go navbar. Se se okeletšwa ke JavaScript ya rena gomme se re thuša go šomiša mekgwa ya maemo ya tlwaelo ntle le go šitiša go beakanya ga Popper.
Go thubaLahla flipkgetho bakeng sa dropdown plugin molemong oa setlogo Popper phetolo. Bjale o ka šitiša boitshwaro bja go phetla ka go fetiša lenaneo le le se nago selo bakeng sa fallbackPlacementskgetho ka go sefetoši sa go phetla .
Dimenu tša go theoga bjale di ka kgotla ka autoClosekgetho ye mpsha ya go swara boitshwaro bja go tswalela ka go itiriša . O ka šomiša kgetho ye go amogela klika ka gare goba ka ntle ga thepo ya go theoga go e dira gore e be ya tirišano.
Di-dropdown bjale di thekga .dropdown-items yeo e phuthetšwego ka <li>s.

Jumbotron ya go swana le yona

Go thubaLahlela karolo ya jumbotron e le e ka pheta-pheta le utilities. Bona mohlala wa rena o mofsa wa Jumbotron bakeng sa demo.

Lenaneo sehlopha

E okeditšwe .list-group-numberedsefetoši se sefsa go lenaneo la dihlopha.

Navs le dithepo

E okeditšwe nulldiphetogo tše mpsha tša font-size, font-weight, color, le :hover colorgo .nav-linksehlopha.

Di-navbar tša go swana

Go thubaNavbars bjale e nyaka setshelo ka gare (go nolofatša kudu dinyakwa tša sekgoba le CSS ye e nyakegago).
Go thubaSehlopha .activese ka se sa dirišwa go .nav-items, se swanetše go dirišwa thwii go .nav-links.

Ka ntle ga lešela

E okeditšwe karolo e mpsha ya offcanvas .

Go ngwala matlakala

Dikgokagano tša matlakala bjale di na le tšeo di ka fetošwago margin-lefttšeo di kgokološwago ka go fetoga dikhutlo ka moka ge di arogantšwe go tšwa go tše dingwe.
E okeditšwe transitionka s go dikgokagano tša matlakala.

Dipopovers

Go thubaE reeletšwe leina lefsa .arrowgo .popover-arrowka go thempleite ya rena ya popover ya go se fetoge.
whiteListKgetho e reeletšwe gape go allowList.

Di-spinner tša go dikološa

Di- spinner bjale di hlompha prefers-reduced-motion: reduceka go fokotša lebelo la ditshwantšho tša go phela. Bona # 31882 .
Ntlafatswa spinner paatsepama lolamisiwa ga.

Ditositi

Ditositi bjale di ka bewa ka gare ga a .toast-containerka thušo ya didirišwa tša go beakanya .
Fetola default toast nako ho metsotswana e 5.
Tloswa overflow: hiddenho tloha toasts le nkeloa sebaka ke loketseng border-radiuss le calc()mesebetsi.

Dikeletšo tša didirišwa

Go thubaE reeletšwe leina lefsa .arrowgo .tooltip-arrowka go thempleite ya rena ya keletšo ya sedirišwa ya go se fetoge.
Go thubaBoleng bja go se fetoge bja fallbackPlacementse fetotšwe go ['top', 'right', 'bottom', 'left']bakeng sa go bewa ga dielemente tša popper gakaone.
Go thubawhiteListKgetho e reeletšwe gape go allowList.

Didirišwa tša go thuša

Go thubaE reeletšwe gape didirišwa tše mmalwa go šomiša maina a thepa ye e kwagalago go e na le maina a tlhahlo ka tlaleletšo ya thekgo ya RTL:
- Reina gape .left-*le .right-*go ya go .start-*le .end-*.
- Reina gape .float-leftle .float-rightgo ya go .float-startle .float-end.
- Reina gape .border-leftle .border-rightgo ya go .border-startle .border-end.
- Reina gape .rounded-leftle .rounded-rightgo ya go .rounded-startle .rounded-end.
- Reina gape .ml-*le .mr-*go ya go .ms-*le .me-*.
- Reina gape .pl-*le .pr-*go ya go .ps-*le .pe-*.
- Reina gape .text-leftle .text-rightgo ya go .text-startle .text-end.
Go thubaE šitišitšwe mapheko a mabe ka go ikemela.
E okeditšwe ka .bg-bodysehlopha se sefsa bakeng sa go beakanya ka pela <body>mokokotlo wa 's go dielemente tša tlaleletšo.
E okeditšwe ka didirišwa tše mpsha tša maemo bakeng sa top, right, bottom, le left. Ditekanyetšo di akaretša 0, 50%, le 100%bakeng sa thepa e nngwe le e nngwe.
Added new .translate-middle-x& .translate-middle-yutilities ho tshekaletseng kapa paatsepama setsi feletseng / tsitsitseng beha elements.
E okeditšwe ka border-widthdidirišwa tše difsa .
Go thubaE reeletšwe gape .text-monospacego ba .font-monospace.
Go thubaE tlošitšwe .text-hideka ge e le mokgwa wa kgale wa go uta sengwalwa seo se sa swanelago go šomišwa gape.
Didirišwa tše di okeditšwego .fs-*tša font-sizedidirišwa (ka RFS e kgontšhitšwe). Tše di šomiša tekanyo ye e swanago le dihlogo tša go se fetoge tša HTML (1-6, tše kgolo go ya go tše nnyane), gomme di ka fetošwa ka mmapa wa Sass.
Go thubaRename .font-weight-*utilities e le .fw-*bakeng sa bokhutšoanyane le ho se fetohe.
Go thubaRename .font-style-*utilities e le .fst-*bakeng sa bokhutšoanyane le ho se fetohe.
E okeditšwe .d-gridgo bontšha didirišwa le didirišwa tše mpsha gap( .gap) tša dipeakanyo tša CSS Grid le flexbox.
Go thubaE tlošitšwe .rounded-smle rounded-lg, gomme ya tsebagatša tekanyo e mpsha ya diklase, .rounded-0go .rounded-3. Bona # 31687 .
E okeditšwe ka line-heightdidirišwa tše difsa: .lh-1, .lh-sm, .lh-basele .lh-lg. Bona mo .
E ile ya šuthiša sedirišwa .d-noneka go CSS ya rena go e fa boima bjo bo oketšegilego go feta didirišwa tše dingwe tša pontšho.
Atološitše .visually-hidden-focusablemothuši go šoma gape ka ditshelo, a šomiša :focus-within.

Bathuši

Go thuba Bathuši ba go tsenya bao ba arabelago ba reeletšwe gape go bathuši ba tekanyo bao ba nago le maina a mafsa a klase le boitshwaro bjo bo kaonafetšego, gammogo le phetogo ya CSS ye e thušago.
- Diklase di reeletšwe gape gore di fetoge bygo xka tekanyo ya dikarolo. Ka mohlala, .ratio-16by9ke bjale .ratio-16x9.
- Re lahlile .embed-responsive-itemle elemente sehlopha mokgethi go rata .ratio > *mokgethi bonolo. Ga go nyakege sehlopha se sengwe, gomme mothuši wa tekanyo bjale o šoma ka elemente efe goba efe ya HTML.
- Mmapa $embed-responsive-aspect-ratioswa Sass o reeletšwe gape $aspect-ratiosgomme dikelo tša wona di nolofaditšwe go akaretša leina la sehlopha le phesente bjalo ka key: valuepara.
- Diphetogo tša CSS bjale di tšweletšwa le go akaretšwa bakeng sa boleng bjo bongwe le bjo bongwe mmapeng wa Sass. Fetoša --bs-aspect-ratiophetogo godimo ga .ratiogo hlama tekanyo efe goba efe ya sebopego sa tlwaelo .
Go thuba Diklase tša “sebadi sa skrine” bjale ke diklase tšeo di “utilwego ka pono” .
- Fetola faele ya Sass go tloga scss/helpers/_screenreaders.scssgo goscss/helpers/_visually-hidden.scss
- Reina gape .sr-onlyle .sr-only-focusablego ya go .visually-hiddenle.visually-hidden-focusable
- Reina gape sr-only()le sr-only-focusable()mixins go visually-hidden()le visually-hidden-focusable().
bootstrap-utilities.cssbjale e akaretša gape le bathuši ba rena. Bathuši ga ba sa hloke go tsenywa ka ntle ka go dikago tša tlwaelo.

JavaScript

O ile a lahlela go ithekga ga jQuery gomme a ngwala gape di-plugin gore di be ka go JavaScript ya ka mehla.
Go thubaDika tša datha tša di-plugin ka moka tša JavaScript bjale di arotšwe ka maina go thuša go kgetholla mošomo wa Bootstrap go tšwa go batho ba boraro le khoutu ya gago. Ka mohlala, re diriša data-bs-togglego e na le data-toggle.
Di-plugin ka moka bjale di ka amogela mokgethi wa CSS bjalo ka ngangišano ya mathomo. O ka fetiša elemente ya DOM goba mokgethi ofe goba ofe wa CSS wo o šomago go hlama mohlala wo mofsa wa plugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfige ka fetišwa bjalo ka mošomo wo o amogelago peakanyo ya Popper ya go se fetoge ya Bootstrap bjalo ka ngangišano, gore o kgone go kopanya peakanyo ye ya go se fetoge tseleng ya gago. E šoma go di-dropdown, di-popover, le ditlhagišo tša didirišwa.
Boleng bja go se fetoge bja fallbackPlacementse fetotšwe go ['top', 'right', 'bottom', 'left']bakeng sa go bewa ga dielemente tše kaone tša Popper. E šoma go di-dropdown, di-popover, le ditlhagišo tša didirišwa.
Tlošitšwe thalela go tšwa mekgweng ya setšhaba ya go se fetoge go swana le _getInstance()→ getInstance().