Biçe ser naveroka sereke Biçe navîgasyon belgeyan
Check
in English

Koçberî bo v5

Guhertinên pelên çavkaniya Bootstrap, belgekirin, û pêkhateyan bişopînin û binirxînin da ku ji we re bibin alîkar ku hûn ji v4-ê berbi v5-yê veguhezînin.

Li ser vê rûpelê

v5.2.0

Sêwirana nûvekirî

Bootstrap v5.2.0 nûvekirinek sêwiranê ya nazik ji bo çend pêkhate û taybetmendiyên li seranserê projeyê vedihewîne, nemaze bi navgîniya nirxên safîkirî border-radiusyên li ser bişkokan û kontrolên formê . Belgeyên me di heman demê de bi malperek nû, sêwirana belgeyên hêsan ên ku êdî beşên kêlekê hilweşîne, û mînakên berbiçav ên Bootstrap -ê jî hatine nûve kirin.

Zêdetir guherbarên CSS

Me hemî pêkhateyên xwe nûve kir da ku guhêrbarên CSS bikar bînin. Digel ku Sass hîn jî her tiştî di bin çavan de digire, her pêkhateyek hate nûve kirin da ku guhêrbarên CSS-ê li ser çînên bingehîn ên pêkhateyê vehewîne (mînak, .btn), rê dide ku bêtir xwerûkirina Bootstrap-ê di wextê rast de bike. Di weşanên paşîn de, em ê berdewam bikin ku karanîna xwe ya guhêrbarên CSS-ê di sêwirandin, form, arîkar û karûbarên xwe de berfireh bikin. Li ser rûpelên belgeyên wan ên têkildar li ser guhêrbarên CSS-ê yên di her pêkhateyê de bêtir bixwînin.

Bikaranîna guhêrbar a CSS-ê heya Bootstrap 6-ê dê hinekî neqediya be. Her çend em hez dikin ku van bi tevahî li seranserê panelê bicîh bikin, ew xetera ku bibin sedema guhertinan dikişînin. Mînakî, danîna koda çavkaniya me ger we ji ber hin sedeman $alert-border-width: var(--bs-border-width)dikir Sass-a potansiyel di koda we de dişkîne .$alert-border-width * 2

Bi vî rengî, li ku derê mimkun be, em ê berdewam bikin ku berbi guhêrbarên CSS-ê yên din ve biçe, lê ji kerema xwe fam bikin ku pêkanîna me dibe ku di v5 de hinekî sînordar be.

Nşh_maps.scss

Bootstrap v5.2.0 pelek nû ya Sass bi _maps.scss. Ew gelek nexşeyên Sass ji wan derdixe _variables.scssda ku pirsgirêkek rast bike ku nûvekirinên nexşeyek orjînal li nexşeyên duyemîn ên ku wan dirêj dikin nehatine sepandin. Mînakî, nûvekirinên ku $theme-colorsli ser nexşeyên mijarê yên din ên ku xwe dispêrin $theme-colors, nehatin sepandin, rêyên xebata xwerû ya sereke dişkînin. Bi kurtasî, Sass xwedan sînorek e ku gava guhêrbarek xwerû an nexşeyek were bikar anîn , ew nikare were nûve kirin. Digel guhêrbarên CSS-ê de kêmasiyek wusa heye dema ku ew ji bo berhevkirina guhêrbarên din ên CSS têne bikar anîn.

Ji ber vê yekê pêdivî ye ku xwerûkirinên guhêrbar ên di Bootstrap-ê de li dû @import "functions", lê berî @import "variables"û yên mayî staka importa me werin. Heman tişt ji bo nexşeyên Sass-ê jî derbas dibe - berî ku ew werin bikar anîn divê hûn pêşnumayan derbas bikin. Nexşeyên jêrîn ji nû ve hatine veguheztin _maps.scss:

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

Avahiyên weyên xwerû yên Bootstrap CSS-ê divê naha bi importek nexşeyên cûda re tiştek wusa xuya bikin.

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

Karûbarên nû

Guherandinên Additional

  • $enable-container-classesVebijêrkek nû destnîşan kir. - Naha dema ku hûn li ser sêwirana CSS Grid-a ceribandî hilbijêrin, .container-*ders dê hîn bêne berhev kirin, heya ku ev vebijark li ser neyê danîn false. Konteyniran jî êdî nirxên xwe yên gemarê diparêzin.

  • Parçeyek Offcanvas naha xwedan guhertoyên bersivdar e . Dersa orîjînal .offcanvasnayê guhertin - ew naverokê li hemî dîmenderan vedişêre. Ji bo ku ew bibe bersiv, wê .offcanvaspolê bi her .offcanvas-{sm|md|lg|xl|xxl}polê biguhezînin.

  • Dabeşên masê yên qalind naha bijartî ne. - Me sînorê di navbera komên tabloyê de zexmtir û dijwartir rakir û ew veguhezand çînek vebijarkî ya ku hûn dikarin serlêdan bikin .table-group-divider,. Ji bo nimûne belgeyên tabloyê bibînin.

  • Scrollspy ji nû ve hatî nivîsandin da ku API-ya Intersection Observer bikar bîne , ev tê vê wateyê ku hûn êdî hewceyî pêçanên dêûbav ên têkildar nabin,offset, û hêj bêtir. Li pêkanînên Scrollspy-ya xwe bigerin ku di ronîkirina navika wan de rasttir û domdar bin.

  • Popover û amûran naha guhêrbarên CSS bikar tînin. Hin guhêrbarên CSS ji hevpîşeyên xwe yên Sassê hatine nûve kirin da ku hejmara guherbaran kêm bikin. Wekî encamek, sê guhêrbar di vê berdanê de hatine paşguh kirin: $popover-arrow-color, $popover-arrow-outer-color, û $tooltip-arrow-color.

  • .text-bg-{color}Alîkarên nû lê zêde kirin. Li şûna danîna kesane û .text-*karûbaran .bg-*, hûn naha dikarin arîkaran bikar bînin da ku .text-bg-*pêşekekbackground-color berevajî saz bikin color.

  • Guherker .form-check-reverselê zêde kir ku rêza etîketan û qutiyên/radyoyên pêwenddar biguherîne.

  • Piştgiriya stûnên zirav bi navgîniya pola nû li tabloyan zêde kirin .table-striped-columns.

Ji bo navnîşek bêkêmasî ya guhertinan, projeya v5.2.0 li ser GitHub bibînin .

v5.1.0

  • Piştgiriya ceribandinê ji bo sêwirana CSS Grid zêde kir. - Ev xebatek li pêş e, û hîn ji bo karanîna hilberînê ne amade ye, lê hûn dikarin bi riya Sass ve taybetmendiya nû hilbijêrin. Ji bo çalakkirina wê, bi mîhengê tora xwerû neçalak bikin $enable-grid-classes: falseû bi mîhengê Tûra CSS-ê çalak bikin $enable-cssgrid: true.

  • Navbarên nûvekirî ji bo piştgirîkirina offcanvas. - Bi dersên bersivdar û hin nîşankirina offcanvas - ê re di her navbarê de berkêşkên offcanvas zêde bikin..navbar-expand-*

  • Parçeyek cîhgira nû lê zêde kir. - Pêkhateya meya herî nû, rêyek ji bo peydakirina blokên demkî li şûna naveroka rastîn da ku bibe alîkar ku destnîşan bike ku tiştek hîn di malper an sepana we de tê barkirin.

  • Pêveka Hilweşînê naha hilweşîna horizontal piştgirî dike . - Ji .collapse-horizontalbo .collapsehilweşandina li widthşûna xwe zêde bike height. Ji nûve boyaxkirina gerokê bi danîna min-heightan height.

  • Alîkarên qaîdeyên stalk û vertîkal ên nû lê zêde kirin. - Zû gelek taybetmendiyên flexbox-ê bicîh bikin da ku zû bi çîpên xwerû sêwiranên xwerû biafirînin . Ji stûnên horizontî ( .hstack) û vertîkal ( .vstack) hilbijêrin. Bi alîkarên nû re dabeşkerên vertîkal ên mîna <hr>hêmanan zêde bikin ..vr

  • Guherbarên nû yên :rootCSS yên gerdûnî zêde kirin. -:root Ji bo şêwazên kontrolê gelek guhêrbarên CSS yên nû li astê zêde <body>kirin. Zêdetir di xebatan de ne, tevî karûbar û pêkhateyên me, lê heya niha di beşa Xweserî de guhêrbarên CSS bixwînin .

  • Karûbarên reng û paşerojê ji nû ve sererast kirin da ku guhêrbarên CSS bikar bînin, û nezelaliya nivîsê û karûbarên nezelaliya paşîn lê zêde kirin. - .text-* û .bg-*karûbar naha bi guhêrbarên CSS û rgba()nirxên rengan têne çêkirin, dihêlin hûn bi hêsanî her karûbarek bi karûbarên nû yên nezelaliyê xweş bikin.

  • Nimûneyên hûrgelên nû yên li ser bingehê zêde kirin da ku nîşan bidin ka meriv çawa hêmanên xwe xweş dike. - Bi mînakên meyên nû yên Snippets re amade bibin ku hûn hêmanên xwerû û sêwirana hevpar ên din bikar bînin . Di nav xwe de pêpelok , daxistinan , komên lîsteyê û modal hene .

  • Şêweyên pozîsyona neyên bikar anîn ji popover û şîretên amûran derxistin ji ber ku ev tenê ji hêla Popper ve têne rêve kirin. $tooltip-marginhatiye betalkirin û nulldi vê pêvajoyê de hatiye danîn.

Zêdetir agahdarî dixwazin? Posta blogê ya v5.1.0 bixwînin.

Hey heye! Guhertinên yekem serbestberdana meya sereke ya Bootstrap 5, v5.0.0, li jêr têne belge kirin. Ew guheztinên zêde yên ku li jor hatine destnîşan kirin nîşan nakin.

Dependencies

  • jQuery daket.
  • Ji Popper v1.x berbi Popper v2.x ve hatî nûve kirin.
  • Li şûna Libsass Dart Sass guhert ji ber ku berhevkarê me yê Sass-ê ku li Libsas-ê hatî dayîn hate betal kirin.
  • Ji bo avakirina belgeyên me ji Jekyll koçî Hugo kirin

Piştgiriya gerokê

  • Internet Explorer 10 û 11 derxistin
  • Microsoft Edge daket < 16 (Legacy Edge)
  • Firefox daket < 60
  • Safari daket < 12
  • iOS Safari daket < 12
  • Chrome daket < 60

Guhertinên belgekirinê

  • Malpera malê, sêwirana belgeyan, û pêlavê ji nû ve hatî sêwirandin.
  • Rêbernameya Parcelê ya nû lê zêde kir.
  • Beşa Xweserî ya nû lê zêde kir, li şûna rûpela Mijara v4 , bi hûrguliyên nû li ser Sass, vebijarkên veavakirina gerdûnî, nexşeyên rengîn, guhêrbarên CSS, û hêj bêtir.
  • Hemî belgeyên formê ji nû ve di beşa Formên nû de organîze kir, naverokê di nav rûpelên balkêştir de veqetand.
  • Bi heman awayî, beşa Layout nûve kir kir, da ku naveroka torê zelaltir derxe holê.
  • Navê rûpela pêkhateya "Navs" veguherand "Navs & Tabs".
  • Navê rûpela "Kontrolan" kir "Kontrol û radyo".
  • Navbar ji nû ve sêwirand û jêrnavek nû lê zêde kir da ku meriv li dora malper û guhertoyên belgeyên me hêsantir bike.
  • Ji bo qada lêgerînê kurtenivîsa klavyeyê ya nû lê zêde kir: Ctrl + /.

Sass

  • Me hevgirtinên nexşeya xwerû ya Sass ji holê rakirin da ku rakirina nirxên zêde hêsantir bike. Bînin bîra xwe ku hûn naha pêdivî ye ku hûn hemî nirxan di nexşeyên Sass-ê de wekî diyar $theme-colorsbikin. Binihêrin ka meriv çawa bi nexşeyên Sass re mijûl dibe .

  • ŞikandinFonksiyon color-yiq()û guhêrbarên têkildar ji color-contrast()ber ku ew êdî bi cîhê rengê YIQ-ê ve girêdayî ye veguherandin. Binêre #30168.

    • $yiq-contrasted-thresholdtê binavkirin $min-contrast-ratio.
    • $yiq-text-darkû $yiq-text-lightbi rêzê navên wan $color-contrast-darkû $color-contrast-light.

  • ŞikandinParametreyên mixinsên pirsiyariya medyayê ji bo nêzîkatiyek maqûltir hatine guhertin.

    • media-breakpoint-down()Li şûna xala veqetînê ya din, xala veqetînê bixwe bikar tîne (mînak, media-breakpoint-down(lg)li şûna media-breakpoint-down(md)amancên dîmenên ji piçûktir lg).
    • Bi heman awayî, parametreya duyemîn di media-breakpoint-between()dewsa xala veqetandinê ya paşîn de jî xala veqetînê bixwe bikar tîne (mînak, media-between(sm, lg)li şûna ku dîmenên di navbera û -yê de media-breakpoint-between(sm, md)armanc dike ).smlg

  • ŞikandinŞêweyên çapê û $enable-print-stylesguhêrbar rakirin. Dersên pêşandana çapkirinê hîn jî li dora xwe ne. Binêre #28339 .

  • ŞikandinDaxistin color(), theme-color(), û gray()di berjewendiya guhêrbaran de kar dike. Binêre #29083 .

  • ŞikandinFonksîyona guherî theme-color-level()û color-level()niha li şûna tenê $theme-colorrengan her rengê ku hûn dixwazin qebûl dike. Binêre #29083 Hişyar bin: color-level() paşê hat avêtin v5.0.0-alpha3.

  • ŞikandinNav $enable-prefers-reduced-motion-media-queryû $enable-pointer-cursor-for-buttonsbi $enable-reduced-motionû $enable-button-pointersji bo kurtî.

  • ŞikandinMiksîn jê kir bg-gradient-variant(). Dersê bikar bînin da ku li şûna çînên .bg-gradientçêkirî gradientan li hêmanan zêde bikin ..bg-gradient-*

  • Şikandin Miksên ku berê hatine betalkirin hatin rakirin:

    • hover, hover-focus, plain-hover-focus, ûhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(di heman demê de çîna kargêriya têkildar derxist, .text-hide)
    • visibility()
    • form-control-focus()

  • ŞikandinNavê scale-color()fonksiyonê hate guheztin da shift-color()ku bi fonksiyona pîvandina rengê Sass-ê re têkeve hev.

  • box-shadowmixins naha destûrê dide nullnirxan û noneji gelek argumanan davêje. Binêre #30394 .

  • Miksin border-radius()niha nirxek xwerû heye.

Sîstema rengîn

  • Pergala rengîn a ku bi pergalek rengîn a nû re xebitî color-level()û $theme-color-intervalhat rakirin. Hemî lighten()û darken()fonksiyonên di bingeha koda me de bi tint-color()û têne guheztin shade-color(). Van fonksiyonan dê reng bi spî an reş re tevlihev bikin li şûna ku ronahiya wê bi mîqdarek diyar biguhezînin. Li shift-color()gorî pîvana giraniya wê pozîtîf an neyînî ye, dê rengek reng bide an jî siya bide. Ji bo bêtir agahdarî li #30622 binêre.

  • Ji bo her reng reng û rengên nû lê zêde kirin, ji bo her rengê bingehîn neh rengên cihêreng peyda dikin, wekî guhêrbarên Sass-ê yên nû.

  • Berevajî rengê çêtir kirin. Rêjeya berevajiya rengan ji 3:1 berbi 4,5:1 vekir û rengên şîn, kesk, şîn û pembe nûve kir da ku berevajiya WCAG 2.1 AA misoger bike. Her weha rengê dijberiya rengê me ji $gray-900bo guhert $black.

  • Ji bo ku pergala xweya rengîn piştgirî bikin, me xwerû tint-color()û shade-color()fonksiyonên nû lê zêde kiriye da ku rengên xwe bi guncan tevlihev bikin.

Nûvekirinên Grid

  • Xala nû ya veqetînê! xxlJi bo û jor xala veqetînê ya nû 1400pxlê zêde kir. Ji bo hemî xalên şikestî yên din nayê guhertin.

  • Kevirên çêtir kirin. Gutters niha li rems têne danîn, û ji v4 tengtir in ( 1.5rem, an jî li ser 24px, ji xwarê 30px). Ev rêgezên pergala meya torê bi karûbarên meya veqetandinê re hevaheng dike.

    • Ji bo kontrolkirina kelûpelên horizontî/vertîkal, kelûpelên horizontî, û gemarên vertîkal çîna gutterê ya nû ( .g-*, .gx-*, û ) lê zêde kirin..gy-*
    • ŞikandinNavê wî hate guheztin .no-guttersda .g-0ku bi karûbarên nû yên gutterê re hevber bike.

  • Stûn êdî ne position: relativesepandine, ji ber vê yekê dibe ku hûn neçar bin .position-relativeku hin hêmanan lê zêde bikin da ku wê tevgerê sererast bikin.

  • ŞikandinÇend .order-*dersên ku gelek caran nehatine bikaranîn avêtin. Em niha tenê ji .order-1sindoqê .order-5pêşkêş dikin.

  • ŞikandinParçeyek avêtin ji .mediaber ku ew bi hêsanî dikare bi karûbaran re were dubare kirin. Ji bo mînakek #28265 û rûpela karûbarên flex bibînin .

  • Şikandin bootstrap-grid.cssnaha box-sizing: border-boxli şûna ku pîvana qutiya gerdûnî ji nû ve were vegerandin, tenê li stûnê tê sepandin. Bi vî rengî, şêwazên meya tora me dikare li bêtir cîhan bêyî destwerdanê were bikar anîn.

  • $enable-grid-classesêdî hilberîna çînên konteynerê asteng nake. Binêre #29146.

  • Miksin make-colwekî stûnên wekhev bêyî mezinahiyek diyarkirî wekî xwerû nûve kir.

Naverok, Reboot, hwd

  • RFS niha ji hêla xwerû ve çalak e. Sernavên ku mixin bikar tîninfont-size()dê bixweberfont-sizeli gorî dîmendera pîvana xwe rast bikin. Vê taybetmendiyê berê bi v4-ê vebijark bû.

  • ŞikandinTîpografiya dîmendera me ji nû ve sererast kir da ku guhêrbarên me $display-*biguhezîne û bi nexşeyek $display-font-sizesSass. Di heman demê de guhêrbarên takekesî $display-*-weightji bo yek s rakirin $display-font-weightû sererast kirin font-size.

  • Du .display-*mezinahiyên sernivîsê yên nû lê zêde kirin, .display-5û .display-6.

  • Girêdan ji hêla xwerû ve têne xêz kirin (ne tenê li ser hover), heya ku ew beşek ji pêkhateyên taybetî ne.

  • Tabloyên ji nû ve dîzayn kirin da ku şêwazên xwe nûve bikin û wan bi guhêrbarên CSS-ê ji nû ve ava bikin da ku bêtir kontrol li ser şêwazê bikin.

  • ŞikandinTabloyên hêlînkirî êdî şêwazên mîras nagirin.

  • Şikandin .thead-lightû .thead-darkji bo .table-*çînên variant ên ku ji bo hemî hêmanên tabloyê têne bikar anîn têne avêtin ( thead, tbody, tfoot, tr, thû td).

  • ŞikandinNavê table-row-variant()mixin bi table-variant()tenê 2 parameteran dipejirîne: $color(navê reng) û $value(koda rengîn). Rengê sînor û rengên devokê bixweber li ser bingeha guhêrbarên faktora tabloyê têne hesibandin.

  • Guherbarên padding hucreya sifrê di nav -yû -x.

  • ŞikandinDers berdan .pre-scrollable. Binêre #29135

  • Şikandin .text-*karûbar êdî hover û dewletên balê nadin girêdanan. .link-*dersên alîkar dikarin li şûna bên bikaranîn. Binêre #29267

  • ŞikandinDers berdan .text-justify. Binêre #29793

  • Şikandin <hr>hêman niha heightli şûna borderku çêtir piştgirî bidin sizetaybetmendiyê bikar tînin. Ev di heman demê de karanîna karûbarên padding dide ku dabeşkerên stûrtir biafirîne (mînak, <hr class="py-1">).

  • padding-leftLi ser horizontî ya xwerû <ul>û <ol>hêmanên ji xwerû yên gerokê 40pxvedigerin 2rem.

  • Zêde kirin $enable-smooth-scroll, ku li gerdûnî tê sepandin scroll-behavior: smooth- ji xeynî bikarhênerên ku bi riya prefers-reduced-motionpirsa medyayê kêm tevgerê dipirsin. Binêre #31877

RTL

  • Guherbarên taybetî yên rêwerzên asoyî, karûbar û mixîn hemî hatine guheztin da ku taybetmendiyên mantiqî yên mîna yên ku di sêwiranên flexbox-ê de têne dîtin bikar bînin-mînak, startû endli şûna leftû right.

Forms

  • Formên nû yên herikîn lê zêde kirin! Me mînaka etîketên Floating ji bo pêkhateyên formê bi tevahî piştgirî daye pêşdebirin. Li rûpela nû ya labelên Floating binêre.

  • Şikandin Hêmanên forma xwemalî û xwerû yên hevgirtî. Qutiyên kontrolê, radyo, hilbijartî, û têketinên din ên ku di v4-ê de dersên xwemalî û xwerû hebûn hatine yek kirin. Naha hema hema hemî hêmanên forma me bi tevahî xwerû ne, piranî bêyî hewcedariya HTML-ya xwerû.

    • .custom-control.custom-checkboxniha ye .form-check.
    • .custom-control.custom-custom-radioniha ye .form-check.
    • .custom-control.custom-switchniha ye .form-check.form-switch.
    • .custom-selectniha ye .form-select.
    • .custom-fileû .form-filebi şêwazên xwerû yên li jor hatine guheztin .form-control.
    • .custom-rangeniha ye .form-range.
    • Davêt zikmakî .form-control-fileû .form-control-range.

  • ŞikandinDaketin .input-group-appendû .input-group-prepend. Naha hûn dikarin bişkokan û .input-group-textwekî zarokên rasterast ên komên têketinê lê zêde bikin.

  • Radyoya sînora winda ya dirêj a li ser koma têketinê bi xeletiya berteka erêkirinê di dawiyê de bi lêzêdekirina .has-validationçînek din li komên têketinê yên bi erêkirinê ve tê rast kirin.

  • Şikandin Ji bo pergala meya torê dersên sêwirana taybet-formê daxistin. .form-groupLi şûna , .form-row, an torgilok û karûbarên me bikar bînin .form-inline.

  • ŞikandinLabelên formê niha hewce ne .form-label.

  • Şikandin .form-textnema destnîşan dike display, dihêle hûn tenê bi guheztina hêmana HTML-ê wekî ku hûn dixwazin nivîsa arîkariyê ya hundurîn biafirînin an asteng bikin.

  • Kontrolên formê êdî heightdema ku mimkun be rast nayên bikar anîn, li şûna ku ji min-heightbo çêtirkirina xwerûkirin û lihevhatina bi pêkhateyên din re were paşve xistin.

  • Îkonên erêkirinê êdî li <select>s bi multiple.

  • Pelên Sass yên çavkaniyê ji nû ve hatine rêz kirin scss/forms/, di nav de şêwazên koma têketinê.

Components

  • Nirxên yekbûyî paddingyên ji bo hişyarî, nanpêj, kart, dakêşan, komên navnîşan, modal, popover, û şîretên amûran ên ku li ser guhêrbarên me bin $spacer. Binêre #30564 .

Akordîyon

Alerts

  • Alerts niha mînakên bi îkonan hene .

  • <hr>Di her hişyariyê de şêwazên xwerû yên ji bo s rakirin ji ber ku ew berê bikar tînin currentColor.

Badges

  • ŞikandinHemî .badge-*çînên rengan ji bo karûbarên paşerojê avêtin (mînak, .bg-primaryli şûna bikar bînin .badge-primary).

  • ŞikandinDaxistin - li şûna wê .badge-pillamûrê .rounded-pillbikar bînin.

  • Şikandin<a>Ji bo û <button>hêmanan şêwazên hover û fokusê rakirin .

  • .25emJi bo nîşanan ji / .5ember .35em/ paddingek xwerû zêde kir .65em.

  • paddingBi rakirina , background-color, û , xuyangiya xwerû ya nanê sivik hêsan kir border-radius.

  • Taybetmendiya xwerû ya CSS-ê ya nû lê zêde kir --bs-breadcrumb-dividerji bo xwerûkirina hêsan bêyî ku hewce bike ku CSS ji nû ve berhev bike.

Buttons

  • Şikandin Bişkojkên guheztinê , bi qutikên kontrolê an radyoyan, êdî JavaScript hewce nake û nîşana nû heye. Em êdî ne hewceyî hêmanek pêçandî ne, lê zêde.btn-checkbikin<input>, û bi çi.btnçînên li ser hev re bikin<label>. Binêre #30650 . Belgeyên ji bo vê yekê ji rûpela meya Bişkokan derbasî beşa nû ya Formên bûne.

  • Şikandin Ji .btn-blockbo karûbaran avêtin. Li şûna ku .btn-blockhûn li ser bikar bînin .btn, bişkokên xwe bi pêç bikin .d-gridû .gap-*amûrek ku li gorî hewcedariyê wan cîh bikin. Ji bo kontrolkirina hê bêtir li ser dersên bersivdar veguherînin. Ji bo çend mînakan belgeyan bixwînin.

  • button-variant()Me û mixînên me button-outline-variant()nûve kirin da ku pîvanên din piştgirî bikin.

  • Bişkokên nûve kirin da ku berevajî zêde li ser hover û dewletên çalak peyda bikin.

  • Bişkokên neçalak niha hene pointer-events: none;.

Qert

  • ŞikandinDi .card-deckberjewendiya tora me de daket. Kartên xwe di qursên stûnê de bipêçin û .row-cols-*konteynirek dêûbav lê zêde bikin da ku dek û dolaban ji nû ve biafirînin (lê digel bêtir kontrola li ser hevrêziya bersivdar).

  • ŞikandinDi berjewendiya Masoniyê .card-columnsde derket. Binêre #28922 .

  • ŞikandinAkordeyona .cardbingehîn bi pêkhateyek Accordionê ya nû veguherand .

  • Guhertoya nû ji bo .carousel-darknivîsa tarî, kontrol û nîşangiran zêde kir (ji bo paşmayên sivik mezin).

  • Ji bo kontrolên carousel îkonên chevron bi SVG-yên nû yên ji Bootstrap Icons veguherandin .

Bişkojka Girtin

  • ŞikandinNavê .closeji .btn-closebo navekî kêmtir gelemperî hate guhertin.

  • Bişkojkên Girtinê naha li background-imageşûna a &times;di nav HTML-ê de (SVG-ya pêvekirî) bikar tînin, bêyî ku hewcedarî bi îşaretkirina nîşana we bikin, rê dide xwerûkirina hêsantir.

  • Guhertoya nû lê zêde .btn-close-whitekir ku ji filter: invert(1)bo çalakkirina berevajiya bilindtir îkonan li hember paşnavên tarî vedigire.

Jiberhevketin

  • Ji bo akordeyonan lengerkirina pêlikê rakirin.

  • Guhertoya nû .dropdown-menu-darkû guhêrbarên têkildar ji bo dakêşên tarî yên li ser daxwazê ​​zêde kirin.

  • Guherbarek nû ji bo zêde kir $dropdown-padding-x.

  • Ji bo berevajîkirina çêtir dabeşkara dakêşanê tarî kir.

  • ŞikandinHemî bûyerên ji bo dakêşanê naha li ser bişkoja veguheztina dakêşanê têne destnîşan kirin û dûv re berbi hêmana dêûbav ve têne guheztin.

  • Dema ku pozîsyona dakêşanê statîk be, an dakêşana dakêşanê di navbarê de be, naha pêşekên dakêşanê xwedan data-bs-popper="static"taybetmendiyek heye. Ev ji hêla JavaScript-a me ve hatî zêdekirin û ji me re dibe alîkar ku şêwazên pozîsyona xwerû bikar bînin bêyî ku destwerdana pozîsyona Popper bikin.

  • ŞikandinVebijarka flipji bo pêveka dakêşanê di berjewendiya veavakirina Popper ya xwecî de daket. Naha hûn dikarin bi derbaskirina rêzek vala ji bo fallbackPlacementsvebijarkê di modifîfatora flip de tevgera felqê neçalak bikin .

  • Pêşekên dakêşanê naha dikarin bi autoClosevebijarkek nû ve werin klîk kirin da ku tevgera girtina otomatîkî birêve bibe . Hûn dikarin vê vebijarkê bikar bînin da ku klîk li hundur an derveyî menuya dakêşanê qebûl bikin da ku wê înteraktîf bikin.

  • Dropdowns naha piştgirî didin .dropdown-items-yên ku di s-yê de hatine pêçan <li>.

Jumbotron

Lîsteya koma

  • nullGuherbarên nû ji bo font-size, font-weight, color, û :hover colorli .nav-linkpolê zêde kirin.
  • ŞikandinNavbar naha konteynirek di hundurê de hewce dike (ji bo ku hewcedariyên cihêbûnê û CSS-ya hewcedar bi giranî hêsan bikin).
  • ŞikandinÇîn .activeêdî nikare li ser .nav-items were sepandin, divê rasterast li ser .nav-links were sepandin.

Offcanvas

Pagination

  • Zencîreyên pagasyonê naha xwedan xwerû margin-lefthene ku dema ku ji hev têne veqetandin bi dînamîk li her quncikê têne dorpêç kirin.

  • transitionS li girêdanên pagasyonê zêde kirin .

Popovers

  • ŞikandinDi şablonê meya popoverê .arrowya .popover-arrowxwerû de nav lê hatiye guhertin.

  • Navê whiteListvebijarkê ji bo allowList.

Spinners

  • Spinner naha prefers-reduced-motion: reducebi hêdîkirina anîmasyonan rûmet dikin. Binêre #31882 .

  • Lihevhatina vertîkal a spinnerê çêtir kirin.

Toasts

  • Toasts naha dikarin bi alîkariya karûbarên pozîsyonê ve di nav de bêne danîn ..toast-container

  • Demjimêra toastê ya xwerû li 5 çirkeyan guhert.

  • Ji overflow: hiddentoastan derxistin û border-radiusbi calc()fonksiyonên s-yên rast veguherandin.

Tooltips

  • ŞikandinDi şablonê meya amûra xwerû .arrowya xwerû de nav lê hatiye guhertin..tooltip-arrow

  • ŞikandinNirxa xwerû ya fallbackPlacementsji ['top', 'right', 'bottom', 'left']bo bi cîhkirina çêtir hêmanên popper ve tê guheztin.

  • ŞikandinNavê whiteListvebijarkê ji bo allowList.

Utilities

  • ŞikandinNavê gelek karûbaran hate guheztin da ku navên milkê mantiqî li şûna navên rêwerzan bi lêzêdekirina piştgiriya RTL bikar bînin:

    • Binavkirin .left-*û .right-*ji bo .start-*û .end-*.
    • Binavkirin .float-leftû .float-rightji bo .float-startû .float-end.
    • Binavkirin .border-leftû .border-rightji bo .border-startû .border-end.
    • Binavkirin .rounded-leftû .rounded-rightji bo .rounded-startû .rounded-end.
    • Binavkirin .ml-*û .mr-*ji bo .ms-*û .me-*.
    • Binavkirin .pl-*û .pr-*ji bo .ps-*û .pe-*.
    • Binavkirin .text-leftû .text-rightji bo .text-startû .text-end.

  • ŞikandinJi hêla xwerû ve marjîneyên neyînî neçalak kirin.

  • Dersa nû lê zêde .bg-bodykir ji bo zû vesazkirina <body>paşnavê ' li hêmanên zêde.

  • Ji bo , , , û karûbarên pozîsyona nû zêde kirin . Nirx , , û ji bo her milkê vedigirin.toprightbottomleft050%100%

  • Karûbarên nû .translate-middle-xû .translate-middle-ybikêrhatî li hêmanên pozîsyona mutleq/sabitkirî yên horîzontal an verastîkî lê zêde kirin.

  • border-widthKarûbarên nû lê zêde kirin.

  • Şikandin.text-monospaceNavê xwe guhert .font-monospace.

  • ŞikandinJi .text-hideber ku ew rêbazek kevnar e ji bo veşartina nivîsê ku divê êdî neyê bikar anîn hate rakirin.

  • Karûbarên .fs-*ji bo font-sizekarûbaran zêde kirin (bi RFS çalak). Vana heman pîvanê wekî sernavên xwerû yên HTML-ê (1-6, mezin û piçûk) bikar tînin, û dikarin bi nexşeya Sass ve werin guheztin.

  • ŞikandinJi bo kurtahî û domdariyê navgîniya kargêran hate .font-weight-*guheztin ..fw-*

  • ŞikandinJi bo kurtahî û domdariyê navgîniya kargêran hate .font-style-*guheztin ..fst-*

  • Ji bo nexşeyên CSS Grid û flexbox li ser karûbar û karûbarên nû ( ) hatin .d-gridzêdekirin gap..gap

  • ŞikandinRakir .rounded-smû rounded-lg, û pîvanek nû ya çînên destnîşan kir, .rounded-0ku .rounded-3. Binêre #31687 .

  • line-heightKarûbarên nû lê zêde kirin: .lh-1, .lh-sm, .lh-baseû .lh-lg. Li vir bibînin .

  • Di CSS .d-none-a me de karûbar bar kir da ku giraniya wê li ser karûbarên din ên dîmenderê bide.

  • Alîkarî dirêj kir .visually-hidden-focusableku li ser konteyneran jî bixebite, bi kar tîne :focus-within.

Alîkar

  • Şikandin Alîkarên tevnesaziyê yên bersivdar bi navên pola nû û tevgerên çêtir, û her weha guhêrbarek arîkar a CSS-ê wekî alîkarên rêjeyê hatine guheztin.

    • byNavê dersan ji bo ku xdi rêjeya aspektê de were guheztin hatine guhertin . Mînakî, .ratio-16by9niha ye .ratio-16x9.
    • Me .embed-responsive-itemhilbijêra koma û hêmanan daxist ber hilbijêrek hêsantir .ratio > *. Zêde pola hewce nake, û alîkarê rêjeyê naha bi her hêmanek HTML-ê re dixebite.
    • Nexşeya $embed-responsive-aspect-ratiosSass hate guheztin $aspect-ratiosû nirxên wê hatine hêsan kirin da ku navê polê û sedî wekî key: valuecotê tê de hebe.
    • Guhertoyên CSS naha têne çêkirin û ji bo her nirxek di nexşeya Sass de têne girtin. Guherbarê --bs-aspect-ratioli ser biguhezînin da ku rêjeyek taybetmendî.ratio biafirîne .

  • Şikandin Dersên "xwendevanê ekranê" naha dersên "bi dîtbarî veşartî" ne .

    • Dosya Sass ji scss/helpers/_screenreaders.scssbo guhertinscss/helpers/_visually-hidden.scss
    • Binavkirin .sr-onlyû .sr-only-focusableji bo .visually-hiddenû.visually-hidden-focusable
    • Binavkirin sr-only()û sr-only-focusable()tevlihev kirin visually-hidden()û visually-hidden-focusable().

  • bootstrap-utilities.cssniha alîkarên me jî di nav de ne. Alîkarî êdî ne hewce ne ku di avahiyên xwerû de werin îtxal kirin.

JavaScript

  • Girêdana jQuery derxist û pêvekên ji nû ve nivîsandin da ku di JavaScript-a birêkûpêk de bin.

  • ŞikandinTaybetmendiyên daneyê yên ji bo hemî pêvekên JavaScript-ê naha navên navan têne danîn da ku bibin alîkar ku fonksiyona Bootstrap ji aliyên sêyemîn û koda we cûda bike. Mînakî, em data-bs-toggleli şûna data-toggle.

  • Hemî pêvek naha dikarin hilbijêrek CSS wekî argumana yekem qebûl bikin. Hûn dikarin hêmanek DOM an jî hilbijêrek CSS-ya derbasdar derbas bikin da ku mînakek nû ya pêvekê biafirînin:

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

  • popperConfigdikare wekî fonksiyonek ku veavakirina Popper-a xwerû ya Bootstrap-ê wekî arguman qebûl dike were derbas kirin, da ku hûn vê veavakirina xwerû di riya xwe de bikin yek. Li ser dakêşan, popover, û serişteyên amûran tê sepandin.

  • Nirxa xwerû ya ji fallbackPlacementsbo ['top', 'right', 'bottom', 'left']bi cîhkirina hêmanên Popper çêtir tê guheztin. Li ser dakêşan, popover, û serişteyên amûran tê sepandin.

  • Ji rêbazên statîk ên gelemperî yên mîna _getInstance()→ xêzkirina binî hate rakirin getInstance().