Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
Check
in English

Fa'asolo ile v5

Su'esu'e ma toe iloilo suiga i faila fa'apogai a Bootstrap, fa'amaumauga, ma vaega e fesoasoani ia te oe e femalaga'i mai le v4 i le v5.

I luga o lenei itulau

v5.2.0

Fa'afouina mamanu

O le Bootstrap v5.2.0 o loʻo faʻaalia ai se faʻafouga faʻapitoa mo le lima o vaega ma meatotino i luga o le poloketi, aemaise lava e ala i border-radiustau faʻamamaina i luga o faʻamau ma faʻatonuga . Ua toe faʻafouina a matou faʻamaumauga i se itulau fou, faʻasologa o faʻamatalaga faigofie e le toe faʻaumatia vaega o le itu, ma faʻataʻitaʻiga sili atu o Bootstrap Icons .

E tele fesuiaiga CSS

Ua matou fa'afouina a matou vaega uma e fa'aoga ai suiga CSS. A'o fa'atumauina pea e Sass mea uma, o vaega ta'itasi ua fa'afouina e aofia ai fesuiaiga o le CSS i luga o vasega fa'avae vaega (fa'ata'ita'iga, .btn), fa'ataga mo le fa'aogaina o le Bootstrap i le taimi moni. I fa'asalalauga mulimuli ane, o le a fa'aauau pea le fa'alauteleina o lo matou fa'aogaina o fesuiaiga CSS i la matou fa'atulagaina, fomu, fesoasoani, ma mea aoga. Faitau atili e uiga i fesuiaiga CSS i vaega taʻitasi i luga o latou itulau faʻamaumauga.

O la matou fa'aoga fesuia'i CSS o le a fai si le atoatoa se'ia o'o i le Bootstrap 6. E ui matou te manana'o e fa'atino atoatoa nei mea i luga o le laupapa, e ono tula'i mai le fa'atupuina o suiga. Mo se faʻataʻitaʻiga, faʻapipiʻi $alert-border-width: var(--bs-border-width)i totonu o la matou faʻailoga faʻaupuga e motusia ai le Sass i lau lava code pe afai o loʻo e faia $alert-border-width * 2mo se mafuaʻaga.

O lea la, i so'o se mea e mafai ai, o le a fa'aauau pea ona matou una'i atu i le tele o fesuiaiga CSS, ae fa'amolemole ia iloa e ono fa'atapula'a la matou fa'atinoga i v5.

Fou_maps.scss

Bootstrap v5.2.0 faʻafeiloaʻi se faila Sass fou ma _maps.scss. Na te toso mai nisi fa'afanua Sass _variables.scsse fa'aleleia ai se fa'afitauli e le'i fa'aogaina fa'afouga i se fa'afanua muamua i fa'afanua lona lua e fa'alautele ai. Mo se fa'ata'ita'iga, e $theme-colorsle'i fa'aogaina fa'afouga i isi fa'afanua autu e fa'alagolago i le $theme-colors, talepeina fa'asologa o galuega masani. I se faapuupuuga, o Sass e iai le tapulaʻa pe a faʻaaoga se fesuiaiga le aoga poʻo se faʻafanua , e le mafai ona faʻafouina. O lo'o i ai se fa'aletonu fa'apena i fesuiaiga CSS pe a fa'aaogaina e fai ai isi fesuiaiga CSS.

O le mea lea e tatau ai ona oʻo mai suiga faʻapitoa i Bootstrap pe a uma @import "functions", ae muamua @import "variables"ma le isi vaega o la matou faʻaulufale mai. E fa'apea fo'i ona fa'atatau i fa'afanua Sass—e tatau ona e fa'ato'a fa'aletonu fa'aletonu ae le'i fa'aaogaina. O fa'afanua nei ua si'i atu i le fa'afanua fou _maps.scss:

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

O lau masani Bootstrap CSS fau e tatau ona foliga fa'apenei ma se isi fa'afanua fa'aulufale mai.

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

Fa'aoga fou

Suiga faaopoopo

  • Fa'ailoa $enable-container-classesavanoa fou. - I le taimi nei pe a filifili i le faʻataʻitaʻiga CSS Grid layout, o .container-*vasega o le a tuʻufaʻatasia pea, seivagana ua seti lenei filifiliga i false. O koneteina fo'i o lo'o tausia nei a latou fa'atauga o alavai.

  • O le vaega Offcanvas ua i ai nei suiga tali . O le .offcanvasvasega muamua e tumau e le suia-e natia mea i luga o va'aiga uma. Ina ia tali mai, sui lena .offcanvasvasega i soo se .offcanvas-{sm|md|lg|xl|xxl}vasega.

  • Vaevae laulau mafiafia ua filifilia nei. — Ua matou aveesea le mafiafia ma sili atu ona faigata ona soloia tuaoi i le va o vaega laulau ma siitia atu i se vasega e filifili e mafai ona e faaaogaina, .table-group-divider. Va'ai le laulau docs mo se fa'ata'ita'iga.

  • Scrollspy ua toe tusia e faʻaoga le Intersection Observer API , o lona uiga e te le toe manaʻomia ni afifi matua, faʻateʻainaoffsetconfig, ma isi mea. Vaavaai mo au fa'atinoga Scrollspy ina ia sili atu ona sa'o ma tumau i la latou fa'ailoga nav.

  • Popovers ma tooltips o loʻo faʻaaoga nei suiga CSS. O nisi o fesuiaiga CSS ua toe faʻafouina mai a latou Sass paʻaga e faʻaitiitia ai le numera o fesuiaiga. O le i'uga, e tolu suiga ua le toe fa'aaogaina i lenei fa'asalalauga: $popover-arrow-color, $popover-arrow-outer-color, ma $tooltip-arrow-color.

  • Faaopoopo .text-bg-{color}fesoasoani fou. Nai lo le faʻatulagaina o tagata taʻitoʻatasi .text-*ma .bg-*mea faʻaoga, e mafai nei ona e faʻaogaina fesoasoani .text-bg-*e faʻapipiʻi se background-colorfaʻatusatusa i luma color.

  • Fa'aopoopo .form-check-reversele suiga e fa'asolo ai le fa'asologa o fa'ailoga ma pusa siaki/leitio.

  • Fa'aopoopoina laina laina lagolago i laulau e ala i le .table-striped-columnsvasega fou.

Mo se lisi atoa o suiga, va'ai le v5.2.0 poloketi ile GitHub .

v5.1.0

  • Fa'aopoopoina le lagolago fa'ata'ita'i mo CSS Grid layout . - O se galuega o loʻo faʻagasolo, ma e leʻi sauni mo le faʻaogaina o le gaosiga, ae e mafai ona e filifili i le ata fou e ala i Sass. Ina ia mafai ai, faʻamalo le faʻasologa faʻaletonu, e ala i le seti $enable-grid-classes: falsema faʻatagaina le CSS Grid e ala i le seti $enable-cssgrid: true.

  • Fa'afou navbars e lagolago ai le tapoleni. - Fa'aopoopo fa'ailoga tapoleni i so'o se navbar fa'atasi ai ma .navbar-expand-*vasega tali mai ma nisi fa'ailoga fa'ailoga.

  • Fa'aopoopo vaega fou fa'apipi'i . - O la matou vaega fou, o se auala e tuʻuina atu ai poloka le tumau e sui ai mea moni e fesoasoani e faʻaalia ai o loʻo faʻapipiʻiina pea se mea i lau 'upega tafaʻilagi poʻo le app.

  • O lo'o lagolagoina nei e le Collapse plugin le pa'u faalava . — Faaopoopo .collapse-horizontali lau .collapsee fa'asolo ai widthle height. Aloese mai le toe valiina o le browser e ala i le setiina o se min-heightpe height.

  • Fa'aopoopo fesoasoani fa'aputu fou ma tulafono tu'usa'o. — Fa'atopetope fa'aoga mea e tele flexbox e fa'atopetope ai fa'ata'ita'iga masani ma fa'aputu . Filifili mai fa'aputuga faalava ( .hstack) ma sa'o ( .vstack). Fa'aopoopo fa'asaga tu'usa'o e tutusa ma <hr>elemene ma fesoasoani fou.vr .

  • Fa'aopoopo suiga fou :rootCSS lalolagi. - Faʻaopoopo nisi suiga fou CSS i le :roottulaga mo le puleaina o <body>sitaili. E tele mea o loʻo i totonu o galuega, e aofia ai a matou mea faʻaoga ma vaega, ae mo le taimi nei faitau le CSS fesuiaiga i le vaega Customize .

  • Toe fa'afo'i le lanu ma fa'aoga fa'aoga e fa'aoga ai suiga CSS, ma fa'aopoopo i ai fa'amatalaga fou ma fa'aoga opacity pito i tua . - .text-* ma .bg-*faʻaoga ua fausia nei ma fesuiaiga CSS ma faʻailoga rgba()lanu, faʻatagaina oe e faigofie ona faʻavasegaina soʻo se mea aoga ma mea faʻaoga fou.

  • Fa'aopoopoina fa'ata'ita'iga snippet fou fa'avae e fa'aalia ai le fa'avasegaina oa tatou vaega. - Toso sauni e faʻaoga vaega faʻapitoa ma isi mamanu masani masani ma a matou faʻataʻitaʻiga Snippets fou . E aofia ai vae , pa'u i lalo , lisi kulupu , ma modals .

  • Ave'ese sitaili fa'atulagaina e le'i fa'aaogaina mai popovers ma meafaigaluega aua o nei mea e taulimaina na'o Popper. $tooltip-marginua le toe faaaogaina ma ua seti nulli le faagasologa.

Mana'o nisi fa'amatalaga? Faitau le v5.1.0 blog post.

Talofa! Suiga i la matou uluai faʻasalalauga tele o Bootstrap 5, v5.0.0, o loʻo faʻamauina i lalo. Latou te le atagia mai suiga fa'aopoopo o lo'o fa'aalia i luga.

Fa'alagolago

  • Pa'u le jQuery.
  • Fa'aleleia mai le Popper v1.x i le Popper v2.x.
  • Suia le Libsass ma Dart Sass ona o le matou Sass compiler na tuʻuina atu ia Libsass ua faʻaumatia.
  • Na siitia mai Jekyll i Hugo mo le fausiaina oa matou pepa

Lagolago su'esu'e

  • Tu'u le Internet Explorer 10 ma le 11
  • Pa'u Microsoft Edge <16 (Legacy Edge)
  • Pa'u Firefox <60
  • Pa'u Safari <12
  • Pa'u iOS Safari <12
  • Pa'u Chrome <60

Suiga fa'amaumauga

  • Toe fa'atulagaina itulau autu, fa'atulagaina o pepa, ma vae.
  • Fa'aopoopo le ta'iala fou o Parcel .
  • Faʻaopoopoina le vaega fou Faʻasinomaga , suia le v4's Theming page , faʻatasi ai ma faʻamatalaga fou i luga o Sass, filifiliga faʻatulagaina o le lalolagi, lanu lanu, fesuiaiga CSS, ma isi mea.
  • Toe fa'atulagaina uma pepa fa'amaumauga i le vaega fou o Fomu , vaevae le anotusi i itulau e sili atu ona taula'i.
  • E fa'apena fo'i, fa'afou le vaega Layout , e fa'amanino atili ai le fa'asologa o mea.
  • Toe fa'aigoa "Navs" itulau vaega i le "Navs & Tabs".
  • Toe fa'aigoa "Siaki" itulau i le "Siaki & leitio".
  • Toe fa'atulaga le navbar ma fa'aopoopo i ai se subnav fou e fa'afaigofie ai le fe'avea'i o matou saite ma fa'amatalaga o fa'amaumauga.
  • Fa'aopoopoina le ala pupuu fou mo le fanua su'esu'e: Ctrl + /.

Sass

  • Ua matou lafoa'ia le fa'aogaina o fa'afanua Sass fa'apipi'i ina ia fa'afaigofie ona aveese fa'atauga fa'aletonu. Ia manatua e tatau nei ona e faʻamalamalamaina tulaga taua uma i faʻafanua Sass pei o $theme-colors. Siaki pe fa'afefea ona fai fa'afanua Sass .

  • gauToe fa'aigoaina color-yiq()galuega ma fa'afeso'ota'i e feso'ota'i i le color-contrast()aua ua le toe feso'ota'i ile YIQ lanu avanoa. Va'ai #30168.

    • $yiq-contrasted-thresholdua toe faaigoa ia $min-contrast-ratio.
    • $yiq-text-darkma $yiq-text-lightua toe faaigoa i le $color-contrast-darkma $color-contrast-light.

  • gauFa'asalalauga fesili fa'afefiloi fa'amaufa'ailoga ua suia mo se faiga fa'atatau.

    • media-breakpoint-down()fa'aaoga le va'aiga lava ia nai lo le isi va'aiga (fa'ata'ita'iga, media-breakpoint-down(lg)nai lo le media-breakpoint-down(md)va'aiga taula'i la'ititi nai lo lg).
    • E fa'apena fo'i, o le parakalafa lona lua i totonu media-breakpoint-between()o lo'o fa'aogaina fo'i le va'aiga lava ia nai lo le isi va'aiga (fa'ata'ita'iga, media-between(sm, lg)nai lo le media-breakpoint-between(sm, md)va'aiga taula'i i le va smma le lg).

  • gauAve'ese sitaili lolomi ma $enable-print-stylesfesuia'i. O lo'o iai pea vasega fa'aali lolomi. Va'ai #28339 .

  • gauPa'u color(), theme-color(), ma gray()galuega e fiafia i fesuiaiga. Va'ai #29083 .

  • gauToe fa'aigoa theme-color-level()galuega color-level()ma talia nei so'o se lanu e te mana'o ai nai lo na'o $theme-colorlanu. Va'ai #29083 Va'ai mai: color-level() na tu'u mulimuli ane i totonu v5.0.0-alpha3.

  • gauToe fa'aigoa $enable-prefers-reduced-motion-media-queryma $enable-pointer-cursor-for-buttonsi $enable-reduced-motionma $enable-button-pointersfa'apuupuu.

  • gauAveese le bg-gradient-variant()mixin. Fa'aoga le .bg-gradientvasega e fa'aopoopo ai fa'alili i elemene nai lo .bg-gradient-*vasega fa'atupu.

  • gau Ave'ese fa'afefiloi ua le toe fa'aaogaina:

    • hover, hover-focus, plain-hover-focus, mahover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(na faʻaumatia foʻi le vasega aoga faʻapitoa, .text-hide)
    • visibility()
    • form-control-focus()

  • gauToe fa'aigoa scale-color()galuega ina shift-color()ia 'alofia le fete'ena'i ma le galuega a Sass lava ia e fa'afua ai lanu.

  • box-shadowmixins ua fa'atagaina nei nulltulaga taua ma pa'u nonemai le tele o finauga. Va'ai #30394 .

  • O le border-radius()mixin ua i ai nei se tau faaletonu.

Faiga lanu

  • Le faiga lanu sa galulue faatasi color-level()ma $theme-color-intervalna aveesea mo se faiga lanu fou. O mea uma lighten()ma darken()galuega i totonu o la tatou codebase ua suia i le tint-color()ma shade-color(). O nei gaioiga o le a faʻafefiloi le lanu ma le paʻepaʻe poʻo le uliuli nai lo le suia o lona mama i se aofaiga tumau. O shift-color()le a fa'alili pe paolo se lanu e fa'atatau i lona fua mamafa e lelei pe leaga. Va'ai #30622 mo nisi fa'amatalaga.

  • Fa'aopoopo lanu fou ma paolo mo lanu uma, e maua ai lanu eseese e iva mo lanu fa'avae ta'itasi, e pei o suiga fou Sass.

  • Fa'aleleia le eseesega o lanu. Fa'afefeteina le fa'atusatusaga o lanu mai le 3:1 i le 4.5:1 ma fa'afou lanu lanumoana, lanu meamata, cyan, ma piniki ina ia mautinoa le WCAG 2.1 AA fa'atusatusa. Na suia fo'i le matou lanu fa'atusatusa lanu mai $gray-900i le $black.

  • Ina ia lagolagoina la matou faiga lanu, ua matou faʻaopoopoina tu tint-color()ma aga fou shade-color()e faʻafefiloi lelei a matou lanu.

Fa'afou fa'asologa

  • New breakpoint! Fa'aopoopo le xxlva'aiga fou mo 1400pxma luga. Leai se suiga i isi nofoaga malolo uma.

  • Fa'aleleia alavai. Ua seti nei alavai i rem, ma e vaapiapi nai lo le v4 ( 1.5rem, pe tusa o le 24px, lalo mai 30px). Ole mea lea e fa'aogaina ai alavai ole faiga fa'ata'oto ma a tatou mea fa'aoga avanoa.

    • Fa'aopoopo le vasega alavai fou ( .g-*, .gx-*, ma .gy-*) e pulea ai alavai faalava/tutusa, alavai faalava, ma alavai sa'o.
    • gauToe fa'aigoa .no-gutterse .g-0fa'afetaui mea fa'aoga fou.

  • Ua le toe position: relativefa'aogaina koluma, atonu e te fa'aopoopo .position-relativei nisi elemene e toe fa'afo'i ai lena amio.

  • gauFa'amuta nisi o .order-*vasega e masani ona le fa'aaogaina. Ua na'o matou tu'uina atu .order-1i .order-5fafo o le pusa.

  • gauFa'ato'a le .mediavaega ona e faigofie ona toe fa'atusa ma mea fa'aoga. Va'ai #28265 ma le itulau flex utilities mo se fa'ata'ita'iga .

  • gau bootstrap-grid.cssua na'o le fa'aoga box-sizing: border-boxi le koluma nai lo le toe setiina o le pusa-fa'alelalolagi. O le auala lea, e mafai ona fa'aogaina a tatou sitaili fa'asologa i le tele o nofoaga e aunoa ma le fa'alavelave.

  • $enable-grid-classese le toe fa'agataina le fa'atupuina o vasega pusa. Va'ai #29146.

  • Fa'afou le make-colmixin e fa'aletonu i koluma tutusa e aunoa ma se lapo'a fa'apitoa.

Anotusi, Toe Toe, ma isi

  • Ua mafai nei le RFS ona o le faaletonu. O ulutala e fa'aaoga ai lefont-size()mixin o le a otometi lava ona fetu'una'ifont-sizei le fua ma le va'aiga. O lenei vaega na muamua filifili i totonu ma v4.

  • gauToe fa'alelei a matou fa'aaliga lomitusi e sui ai a matou $display-*fesuiaiga ma se $display-font-sizesfa'afanua Sass. Aveese fo'i $display-*-weightsuiga ta'itasi mo se tasi $display-font-weightma fetu'una'i font-sizes.

  • Faaopoopo i ai .display-*ulutala fou e lua, .display-5ma .display-6.

  • O so'oga o lo'o vaseina e ala i le fa'aletonu (e le na'o le fa'afefe), se'i vagana o se vaega o vaega fa'apitoa.

  • Toe fa'avasegaina laulau e fa'afou ai a latou sitaili ma toe fausia i latou CSS fesuiaiga mo le sili atu le pulea o sitaili.

  • gauO laulau fa'aputu e le toe fa'atosinaina sitaili.

  • gau .thead-lightma .thead-darkua pa'u i lalo i .table-*vasega eseese e mafai ona fa'aoga mo elemene laulau uma ( thead, tbody, tfoot, tr, thma td).

  • gauO le table-row-variant()mixin ua toe fa'aigoaina table-variant()ma talia na'o le 2 ta'iala: $color(igoa lanu) ma le $value(lanu lanu). O le lanu tuaoi ma lanu fa'ailo e otometi lava ona fa'atatau i luga ole la'au fa'atatau o suiga.

  • Vaevae le laulau fa'apipi'i fuala'au i totonu -yma -x.

  • gauPa'u .pre-scrollablevasega. Va'ai #29135

  • gau .text-*e le'o toe fa'aopoopoina e fa'aoga le fa'apepe ma le fa'atatau i so'oga. .link-*e mafai ona fa'aoga vasega fesoasoani. Va'ai #29267

  • gauPa'u .text-justifyvasega. Va'ai #29793

  • gau <hr>o lo'o fa'aoga nei elemene heightnai lo le borderlagolagoina lelei o le sizeuiga. E mafai ai fo'i ona fa'aogaina mea fa'apipi'i e fai ai vaeluaga mafiafia (fa'ata'ita'iga, <hr class="py-1">).

  • Toe seti fa'alava fa'alava i padding-leftluga <ul>ma <ol>elemene mai le browser default 40pxi le 2rem.

  • Fa'aopoopo $enable-smooth-scroll, lea e fa'aoga scroll-behavior: smoothi le lalolagi atoa-sei vagana ai tagata fa'aoga o lo'o talosaga mo se fa'aitiitiga lafo e ala i prefers-reduced-motionfa'amatalaga fa'asalalau. Va'ai #31877

RTL

  • Fa'asagaga fa'asaga i suiga fa'apitoa, mea fa'aoga, ma fa'afefiloi ua toe fa'aigoaina uma e fa'aoga ai mea fa'atatau e pei o mea o lo'o maua i fa'ata'otoga flexbox—fa'ata'ita'iga, startma endsui ole leftma right.

Fomu

  • Fa'aopoopo fomu fa'afefete fou! Ua matou fa'alauiloa le fa'ata'ita'iga Fa'ailoga Floating e lagolago atoatoa vaega fo'i. Va'ai le itulau fou o igoa Fa'alele.

  • gau Tu'ufa'atasi elemene fa'ale-aganu'u ma tu'ufa'atasiga. Pusa siaki, leitio, filifili, ma isi mea sa i ai vasega fa'ale-aganu'u ma aganu'u ile v4 ua tu'ufa'atasia. Ole taimi nei e toetoe lava o a tatou elemene foliga uma e masani lava, o le tele e aunoa ma le manaʻomia mo HTML masani.

    • .custom-control.custom-checkboxua .form-check.
    • .custom-control.custom-custom-radioua .form-check.
    • .custom-control.custom-switchua .form-check.form-switch.
    • .custom-selectua .form-select.
    • .custom-filema .form-fileua suia i sitaili masani i luga o .form-control.
    • .custom-rangeua .form-range.
    • Pa'u le nu'u .form-control-filema .form-control-range.

  • gauPa'u .input-group-appendma .input-group-prepend. E mafai nei ona e fa'aopoopo fa'amau ma fa'atama'i .input-group-textsa'o o vaega fa'aoga.

  • Ole laina ole tuaoi ole umi ole va'ava'ai ile vaega o lo'o iai fa'atasi ma fa'amatalaga fa'amatalaga fa'amaonia ua mae'a fa'amautuina e ala ile fa'aopoopoina o se .has-validationvasega fa'aopoopo ile vaega fa'aofi fa'atasi ma le fa'amaoniga.

  • gau Tu'u ese vasega fa'atulagaina fa'apitoa mo la matou faiga fa'ata. Fa'aoga la matou fa'asologa ma mea aoga nai lo le .form-group, .form-row, po'o le .form-inline.

  • gauE mana'omia nei fa'ailoga pepa .form-label.

  • gau .form-textle toe setiina display, e mafai ai ona e fatuina i totonu poʻo poloka fesoasoani tusitusiga e pei ona e manaʻo ai e ala i le suia o le elemene HTML.

  • E le'o toe fa'aogaina fo'i fa'atonuga heightpe a mafai, nai lo le fa'atuai min-heighte fa'aleleia le fa'avasegaina ma le fetaui ma isi vaega.

  • Ua le toe fa'aogaina ata fa'amaonia i <select>s ma multiple.

  • Toe fa'atulagaina faila Sass puna i lalo o scss/forms/le , e aofia ai sitaili vaega fa'aoga.

Vaega

  • Tu'ufa'atasiga paddingfa'atatau mo fa'aliga, fala falaoa, kata, pa'u i lalo, vaega lisi, mods, popovers, ma meafaigaluega e fa'atatau i la tatou $spacerfesuiaiga. Va'ai #30564 .

Accordion

Fa'aliga

Faailoga

  • gauTu'u uma .badge-*vasega lanu mo mea aoga i tua (fa'ata'ita'iga, fa'aoga .bg-primarynai lo le .badge-primary).

  • gauPa'u — .badge-pillfaaaoga le .rounded-pillaoga nai lo lena.

  • gauAve'ese sitaili fa'ae'e ma taula'i <a>ma <button>elemene.

  • Fa'ateleina le fa'aogaina o fa'ailoga mo pine mai .25em/ .5emi .35em/ .65em.

  • Fa'afaigofie le fa'aaliaina o pa'u falaoa e ala i le aveeseina o le padding, background-color, ma le border-radius.

  • Fa'aopoopo mea totino aganu'u CSS fou --bs-breadcrumb-dividermo le fa'avasegaina faigofie e aunoa ma le mana'omia e toe fa'aopoopo CSS.

Fa'amau

  • gau Kiki ki , ma pusa siaki po'o leitio, e le toe mana'omia le JavaScript ma maua se fa'ailoga fou. Matou te le toe manaʻomia se elemene afifi, faʻaopoopo.btn-checki le<input>, ma faʻapipiʻi ma soʻo se.btnvasega i luga o le<label>. Va'ai #30650 . O fa'amaumauga mo lea mea ua si'i mai le matou itulau Fa'amau i le vaega fou o Pepa.

  • gau Pa'u .btn-blockmo mea aoga. Nai lo le fa'aogaina .btn-blocki luga o le .btn, afifi au faamau .d-gridma se .gap-*aoga e fa'atalatala pe a mana'omia. Su'e i vasega tali atu mo le sili atu ona pulea i latou. Faitau le docs mo nisi faʻataʻitaʻiga.

  • Fa'afouina a matou button-variant()ma button-outline-variant()mixins e lagolago ai fa'aputuga fa'aopoopo.

  • Fa'afou fa'amau e fa'amautinoa ai le fa'aopoopoina o le fa'atusatusaga i le fa'afefete ma fa'agaoioi setete.

  • O fa'amau fa'aletonu ua iai nei pointer-events: none;.

Kata

  • gauPa'u .card-decki le fiafia i la matou fa'asologa. Afifi au kata i vasega koluma ma fa'aopopo se .row-cols-*atigipusa matua e toe fai ai fa'ato'aga kata (ae sili atu le fa'atonuina o le fa'aogaina o le tali).

  • gauPa'u .card-columnsi le lagolagoina o Masonry. Va'ai #28922 .

  • gauSuia le .cardaccordion faavae i se vaega fou Accordion .

  • Fa'aopoopoina le .carousel-darksuiga fou mo tusitusiga pogisa, fa'atonuga, ma fa'ailoga (sili mo ata mama).

  • Suia chevron icons mo carousel controls i SVG fou mai Bootstrap Icons .

Tapuni faamau

  • gauToe fa'aigoaina .closemo .btn-closese igoa fa'aitiiti.

  • Fa'aaoga nei fa'amau tapuni se background-image(SVG fa'apipi'i) nai lo le &times;i le HTML, fa'ataga mo le fa'avasegaina faigofie e aunoa ma le mana'omia e pa'i i lau fa'ailoga.

  • Fa'aopoopo le .btn-close-whitesuiga fou e fa'aoga filter: invert(1)e mafai ai ona fa'ate'a ese aikona fa'atusa maualuga atu i tua pogisa.

Pa'u

  • Ave'ese le taula ta'ai mo accordions.

  • Fa'aopoopo suiga fou .dropdown-menu-darkma fa'afeso'ota'i fesuiaiga mo fa'ato'aga pogisa i lalo.

  • Faaopoopo suiga fou mo $dropdown-padding-x.

  • Fa'apogisa le vase pa'u i lalo mo le fa'aleleia atili o le fa'atusatusaga.

  • gauO mea uma na tutupu mo le pa'u i lalo o lo'o fa'aosoina i luga o le pa'u toggle ki ma fa'aoso i luga i le elemene matua.

  • O lo'o iai nei le data-bs-popper="static"uiga fa'atulagaina o menus dropdown pe a fa'amautu le fa'atulagaina o le pa'u i lalo, po'o le pa'u i lalo i le navbar. E fa'aopoopoina e la matou JavaScript ma fesoasoani ia i matou e fa'aoga sitaili tulaga masani e aunoa ma le fa'alavelave i le tulaga o Popper.

  • gauPa'u fliple filifiliga mo le pa'u i lalo fa'apipi'i e fiafia i le fa'atulagaina o Popper. E mafai nei ona e fa'amalo le amio fe'avea'i e ala i le tu'uina atu o se laina gaogao mo le fallbackPlacementsfilifiliga i le suiga fa'alili.

  • E mafai nei ona kiliki i lalo menus ma se autoClosefilifiliga fou e taulima ai le amio tapunia taʻavale . E mafai ona e fa'aogaina le filifiliga lea e talia ai le kiliki i totonu po'o fafo atu o le lisi pa'ū e fa'afeso'ota'i.

  • Fa'ato'alalo ua lagolagoina .dropdown-items afifi i <li>s.

Jumbotron

Lisi vaega

  • Fa'aopoopo nullsuiga fou mo font-size, font-weight, color, ma :hover colorle .nav-linkvasega.
  • gauUa mana'omia e Navbars se atigipusa i totonu (e fa'afaigofie tele le fa'aogaina o avanoa ma mana'omia le CSS).
  • gauE .activele mafai ona toe fa'aoga le vasega i .nav-itemle s, e tatau ona fa'aoga sa'o ile .nav-links.

Fa'alavalava

  • Fa'aopoopo le vaega fou o le tapoleni .

Itulautusi

  • O feso'ota'iga fa'akomepiuta ua i ai nei e mafai ona fa'avasegaina margin-lefte fa'ata'amilomilo malosi i tulimanu uma pe a vavae'ese mai le tasi ma le isi.

  • Fa'aopoopo transitions i fa'aso'oga o itulau.

Popovers

  • gauToe fa'aigoa .arrowi .popover-arrowla matou fa'ata'ita'iga fa'apipi'i fa'aletonu.

  • Toe sui igoa whiteListi le allowList.

Tagata milo

  • Ua fa'aaloalo nei Spinners prefers-reduced-motion: reducee ala i le fa'agesegese o fa'afiafiaga. Va'ai #31882 .

  • Fa'alelei le fa'aoga tu'usa'o o le spinner.

Toasts

  • Toasts e mafai nei ona tu'u i totonu o se .toast-containerfa'atasi ai ma le fesoasoani a le fa'atulagaina o mea aoga .

  • Suia le umi o le toast i le 5 sekone.

  • Ave'ese overflow: hiddenmai toasts ma suia i border-radiuss talafeagai ma calc()galuega tauave.

Mea faigaluega

  • gauToe fa'aigoa .arrowile .tooltip-arrowmatou fa'ata'ita'iga fa'aoga meafaigaluega.

  • gauO le tau fa'aletonu mo le fallbackPlacementsua suia i ['top', 'right', 'bottom', 'left']mo le fa'aogaina lelei o elemene popper.

  • gauToe sui igoa whiteListi le allowList.

Utilities

  • gauToe fa'aigoaina le tele o mea aoga e fa'aoga ai igoa o meatotino fa'atatau nai lo igoa fa'atonu ma le fa'aopoopoina o le lagolago a le RTL:

    • Toe faaigoa .left-*ma .right-*ia .start-*ma .end-*.
    • Toe faaigoa .float-leftma .float-rightia .float-startma .float-end.
    • Toe faaigoa .border-leftma .border-rightia .border-startma .border-end.
    • Toe faaigoa .rounded-leftma .rounded-rightia .rounded-startma .rounded-end.
    • Toe faaigoa .ml-*ma .mr-*ia .ms-*ma .me-*.
    • Toe faaigoa .pl-*ma .pr-*ia .ps-*ma .pe-*.
    • Toe faaigoa .text-leftma .text-rightia .text-startma .text-end.

  • gauFa'aleaogaina le fa'atagata le lelei ona o le fa'aletonu.

  • Fa'aopoopo le .bg-bodyvasega fou mo le fa'atulagaina vave o le <body>'s background i elemene fa'aopoopo.

  • Fa'aopoopo tulaga fa'aoga fou mo top, right, bottom, ma left. O tau e aofia ai 0, 50%, ma 100%mo meatotino taitasi.

  • Fa'aopoopo mea fou .translate-middle-x& .translate-middle-yfa'aoga ile fa'alava po'o le tu'u sa'o totonugalemu elemene tu'usa'o.

  • Fa'aopoopo border-widthmea faigaluega fou .

  • gauToe sui igoa .text-monospaceia .font-monospace.

  • gauAve'esea .text-hideona ose auala tuai mo le nanaina o tusitusiga e le tatau ona toe fa'aogaina.

  • Fa'aopoopo .fs-*mea fa'aoga mo font-sizemea aoga (fa'atasi ai ma le RFS ua mafai). O lo'o fa'aogaina e nei mea le fua tutusa ma ulutala fa'aletonu a le HTML (1-6, lapopo'a i le la'ititi), ma e mafai ona suia e ala i le fa'afanua Sass.

  • gauToe fa'aigoa .font-weight-*fa'aoga .fw-*mo le fa'apuupuu ma le fa'atumauina.

  • gauToe fa'aigoa .font-style-*fa'aoga .fst-*mo le fa'apuupuu ma le fa'atumauina.

  • Fa'aopoopo .d-gride fa'aalia ai mea aoga ma gapmea fa'aoga fou ( .gap) mo CSS Grid ma flexbox layouts.

  • gauAve'esea .rounded-smma rounded-lg, ma fa'alauiloa mai se fua fou o vasega, .rounded-0i le .rounded-3. Va'ai #31687 .

  • Fa'aopoopo line-heightmea aoga fou: .lh-1, .lh-sm, .lh-basema .lh-lg. Va'ai iinei .

  • Si'itia le .d-noneaoga i totonu o la tatou CSS e fa'asili atu ai le mamafa nai lo isi fa'aoga fa'aaliga.

  • Fa'alautele le .visually-hidden-focusablefesoasoani e galue fo'i i koneteina, fa'aaoga :focus-within.

Fesoasoani

  • gau O fesoasoani fa'apipi'i tali ua toe fa'aigoaina e fa'atatau i fesoasoani fa'atasi ma igoa fou o vasega ma fa'aleleia amioga, fa'apea fo'i ma se suiga fesoasoani CSS.

    • Ua toe fa'aigoa vasega ina ia suia byi xle fa'atusa. Mo se faataitaiga, .ratio-16by9o le taimi nei .ratio-16x9.
    • Ua matou fa'ate'aina le .embed-responsive-itemma le elemene vaega filifilia e fa'atatau i se filifiliga faigofie .ratio > *. Leai se isi vasega e manaʻomia, ma o loʻo galue nei le fesoasoani faʻatusatusa i soʻo se elemene HTML.
    • O le $embed-responsive-aspect-ratiosfa'afanua Sass ua toe fa'aigoaina $aspect-ratiosma ua fa'afaigofie ona fa'atatau e aofia ai le igoa o le vasega ma le pasene o le key: valuepaga.
    • CSS fesuia'i ua fa'atupuina ma fa'aaofia mo tau ta'itasi ile fa'afanua Sass. Suia le --bs-aspect-ratiofesuiaiga i luga o le .ratioe fatu ai soʻo se fua faʻatatau masani .

  • gau O vasega o le “Screen reader” ua avea nei ma vasega “natia vaaia” .

    • Suia le faila Sass mai scss/helpers/_screenreaders.scsslescss/helpers/_visually-hidden.scss
    • Toe faaigoa .sr-onlyma .sr-only-focusableia .visually-hiddenma.visually-hidden-focusable
    • Toe fa'aigoa sr-only()ma sr-only-focusable()fa'afefiloi i visually-hidden()ma visually-hidden-focusable().

  • bootstrap-utilities.csso lea ua aofia ai foi ma o tatou fesoasoani. E le toe mana'omia le fa'aulufale mai o fesoasoani ile fale fa'aleaganu'u.

Javascript

  • Fa'aitiitia le fa'alagolago i le jQuery ma toe tusi fa'apipi'i e fai i le JavaScript masani.

  • gauO fa'amaumauga o fa'amaumauga mo plugini JavaScript uma ua fa'aigoaina nei e fesoasoani e iloa ai le fa'aogaina o Bootstrap mai isi vaega ma lau lava code. Mo se faataitaiga, matou te faaaogaina data-bs-togglenai lo le data-toggle.

  • O plugini uma e mafai nei ona talia se CSS filifilia e fai ma finauga muamua. E mafai ona e pasia se elemene DOM poʻo soʻo se tagata filifilia CSS aoga e fatu ai se faʻataʻitaʻiga fou o le plugin:

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

  • popperConfige mafai ona pasia e avea o se galuega e talia le Bootstrap's default Popper config e fai ma finauga, ina ia mafai ona e tuʻufaʻatasia lenei faʻaoga le lelei i lau ala. Fa'aoga i fa'alalo, popovers, ma meafaigaluega.

  • O le tau fa'aletonu mo le fallbackPlacementsua suia i ['top', 'right', 'bottom', 'left']mo le tu'uina lelei o elemene Popper. Fa'aoga i fa'alalo, popovers, ma meafaigaluega.

  • Ave'esea fa'amaufa'ailoga mai auala fa'apitoa fa'alaua'itele pei _getInstance()ole → getInstance().