Migrate amin'ny v5

Araho sy avereno jerena ny fanovana ny rakitra loharano Bootstrap, ny antontan-taratasy ary ny singa hanampy anao hifindra monina manomboka amin'ny v4 mankany v5.

Amin'ity pejy ity

v5.2.0

Famolavolana nohavaozina

Bootstrap v5.2.0 dia manasongadina fanavaozana endrika an-kolaka ho an'ny singa sy fananana vitsivitsy manerana ny tetikasa, indrindra amin'ny alàlan'ny border-radiussoatoavina voadio amin'ny bokotra sy ny fanaraha-maso ny endrika . Nohavaozina ihany koa ny antontan-taratasinay miaraka amin'ny pejin-tranonkala vaovao, fandrafetana antontan-taratasy tsotra kokoa izay tsy manapotika intsony ny ampahany amin'ny sisiny, ary ohatra misongadina kokoa amin'ny kisary Bootstrap .

Variana CSS bebe kokoa

Nohavaozinay ny singa rehetra hampiasainay ny fari-piadidiana CSS. Na dia mbola manohana ny zava-drehetra aza i Sass, dia nohavaozina ny singa tsirairay mba hampidirana ny fari-piainan'ny CSS amin'ny kilasin'ny singa fototra (ohatra, .btn), ahafahana manamboatra Bootstrap amin'ny fotoana tena izy. Amin'ny famoahana manaraka dia hanohy hanitarana ny fampiasanay ny fari-piainan'ny CSS izahay amin'ny endrika, endrika, mpanampy ary fitaovana. Vakio bebe kokoa momba ny fari-piainan'ny CSS ao amin'ny singa tsirairay ao amin'ny pejin'ny antontan-taratasiny.

Somary tsy feno ny fampiasanay ny CSS raha tsy amin'ny Bootstrap 6. Na dia tianay aza ny hampihatra azy ireo amin'ny ankapobeny, dia atahorana hiteraka fiovana izy ireo. Ohatra, ny fametrahana $alert-border-width: var(--bs-border-width)ao amin'ny kaody loharanontsika dia manapaka ny mety ho Sass ao amin'ny kaody anao manokana raha toa ka $alert-border-width * 2noho ny antony iray no nanaovanao izany.

Noho izany, na aiza na aiza azo atao, dia hanohy hanosika ny fari-piadidiana CSS bebe kokoa izahay, saingy azafady mba fantaro fa mety ho voafetra kely ny fampiharana anay amin'ny v5.

Vaovao`_maps.scss`

Bootstrap v5.2.0 dia nampiditra rakitra Sass vaovao misy _maps.scss. Misintona sarintany Sass maromaro izy io _variables.scssmba hamahana olana iray izay tsy nampiharina tamin'ny sari-tany faharoa ny fanavaozana ny sari-tany tany am-boalohany. Ohatra, $theme-colorstsy nampiharina tamin'ny sari-tany lohahevitra hafa niantehitra tamin'ny $theme-colors, manapaka ny rindranasan'asa fanamboarana fototra. Raha fintinina, ny Sass dia manana fetra izay tsy azo havaozina raha vantany vao ampiasaina ny fari-piadidiana na sarintany . Misy lesoka mitovy amin'izany amin'ny fari-piainan'ny CSS rehefa ampiasaina amin'ny fandrafetana ny fari-pahaizan'ny CSS hafa.

Izany no mahatonga ny fanovana miovaova ao amin'ny Bootstrap tsy maintsy ho avy aorian'ny @import "functions", fa alohan'ny @import "variables"sy ny ambiny fanafarana entana. Toy izany koa no mihatra amin'ny sari-tany Sass—tsy maintsy asianao ny default alohan'ny hampiasana azy. Nafindra tany amin'ny vaovao ireto sari-tany manaraka ireto _maps.scss:

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

Ny fananganana Bootstrap CSS mahazatra anao dia tokony ho tahaka izao miaraka amin'ny fanafarana sarintany misaraka.

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

Utiliti vaovao

font-weightFitaovana nitarina mba hampidirana .fw-semiboldireo endritsoratra semibold .
Fitaovana border-radiusnitarina mba hampidirana habe roa vaovao, .rounded-4ary .rounded-5, ho an'ny safidy bebe kokoa.

Fanovana fanampiny

Nampiditra $enable-container-classessafidy vaovao. — Amin'izao fotoana izao rehefa misafidy ny fisehon'ny CSS Grid andrana, .container-*dia mbola hangonina ihany ny kilasy, raha tsy apetraka amin'ny false. Ny kaontenera koa izao dia mitazona ny sandan'ny tatatra.
Ny singa Offcanvas dia manana fiovaovana mamaly izao . Ny .offcanvaskilasy tany am-boalohany dia tsy miova — manafina votoaty amin'ny sehatra fijerena rehetra. Mba hahatonga azy ho mamaly dia ovay ho .offcanvaskilasy iray .offcanvas-{sm|md|lg|xl|xxl}io kilasy io.
Ireo mpizara latabatra matevina dia mirotsaka amin'izao fotoana izao. — Nesorinay ny sisin-tany matevina kokoa sy sarotra kokoa hanilihana eo anelanelan'ny vondrona latabatra ary nafindranay ho any amin'ny kilasy tsy voatery azonao ampiharina, .table-group-divider. Jereo ny tabilao tabilao ho ohatra.
Scrollspy dia naverina nosoratana mba hampiasana ny Intersection Observer API , izay midika fa tsy mila fonosin'ny ray aman-dreny havanana intsony ianao, manafoana nyoffsetconfig, sy ny maro hafa. Tadiavo ny fampiharana Scrollspy anao mba ho marina kokoa sy tsy miovaova amin'ny fanasongadinana nav azy.
Popovers sy tooltips izao dia mampiasa fari-piadidiana CSS. Nohavaozina avy amin'ny mpiara-miasa aminy Sass ny fari-pahaizan'ny CSS sasany mba hampihenana ny isan'ny miovaova. Vokatr'izany dia misy karazany telo tsy ampiasaina amin'ity famoahana ity: $popover-arrow-color, $popover-arrow-outer-color, ary $tooltip-arrow-color.
Nampiana .text-bg-{color}mpanampy vaovao. Raha tokony hametraka ny tsirairay .text-*sy ny .bg-*fitaovana ampiasaina ianao, dia azonao atao izao ny mampiasa ny .text-bg-*mpanampy mba hametraka amin'ny lafiny background-coloranoloana mifanohitra color.
Nampiana .form-check-reversemodifier hamadika ny filaharan'ny etikety sy ny boaty/radio mifandraika amin'izany.
Nampiana tsanganana miolakolaka amin'ny tabilao amin'ny alalan'ny .table-striped-columnskilasy vaovao.

Raha mila lisitra feno ny fanovana, jereo ny tetikasa v5.2.0 ao amin'ny GitHub .

v5.1.0

Fanampiana andrana natao ho an'ny lamina CSS Grid . — Asa an-dalam-pandrosoana ity, ary mbola tsy vonona amin'ny fampiasana famokarana, fa afaka misafidy amin'ny endri-javatra vaovao amin'ny alàlan'ny Sass ianao. Mba hahafahan'izy io, esory ny grid default, amin'ny alàlan'ny fametrahana $enable-grid-classes: falseary avelao ny CSS Grid amin'ny alàlan'ny fametrahana $enable-cssgrid: true.
Navbar nohavaozina hanohanana ny offcanvas. - Manampia drawer offcanvas amin'ny navbar rehetra miaraka amin'ireo .navbar-expand-*kilasy mamaly sy marika offcanvas sasany.
Nampiana singa mpihazona toerana vaovao . — Ny singanay vaovao indrindra, fomba iray hanomezana sakana vonjimaika ho solon'ny votoaty tena izy mba hanamafisana fa mbola misy zavatra mipetaka ao amin'ny tranokalanao na ny fampiharana.
Collapse plugin izao dia manohana ny firodana marindrano . — Ampidiro .collapse-horizontalao amin'ny anao ny .collapsehandrava ny widthfa tsy ny height. Fadio ny fandokoana indray ny navigateur amin'ny fametrahana a min-heightor height.
Nampiana stack vaovao sy mpanampy fitsipika mitsangana. - Ampiharo haingana ny fananana flexbox marobe mba hamoronana drafitra manokana miaraka amin'ny stacks . Misafidiana avy amin'ny mitsivalana ( .hstack) sy mitsangana ( .vstack). Manampia mpizara mitsangana mitovy amin'ny <hr>singa miaraka amin'ireo mpanampy vaovao.vr .
Nampiana :rootvarimbazaha CSS eran-tany vaovao. - Nanampy varimbazaha CSS vaovao maromaro ho amin'ny :rootambaratonga mifehy ny <body>fomba. Bebe kokoa no ao anatin'ny asa, ao anatin'izany ny kojakoja sy singa rehetra, fa vakio izao ny fari-piadidiana CSS ao amin'ny fizarana Customize .
Fampiasana loko sy fiaviana nohavaozina mba hampiasana ny fari-piainan'ny CSS, ary nampiana fampiasa amin'ny opacity lahatsoratra vaovao sy ny fampahalalam- baovao. - .text-* ary ny .bg-*fitaovana ampiasaina amin'izao fotoana izao dia natsangana miaraka amin'ny fari-piainan'ny CSS sy rgba()ny sandan'ny loko, ahafahanao mampifanaraka mora foana ny fitaovana rehetra miaraka amin'ny fitaovana opacity vaovao.
Nampiana ohatra snippet vaovao mifototra amin'ny fampisehoana ny fomba fanamboarana ny singantsika. - Misintona vonona hampiasa singa namboarina sy endrika hafa mahazatra miaraka amin'ireo ohatra Snippets vaovao . Ahitana footers , dropdowns , list group , ary modals .
Nesorina tao amin'ny popovers sy ny toro-làlana ny fomba fametrahana toerana tsy ampiasaina satria Popper irery ihany no misahana izany. $tooltip-marginefa nolavina ary napetraka nullao anatin'ny dingana.

Mila fanazavana fanampiny? Vakio ny lahatsoratra bilaogy v5.1.0.

Salama e! Ny fiovana amin'ny famoahana lehibe voalohany Bootstrap 5, v5.0.0, dia voarakitra eto ambany. Tsy taratry ny fanovana fanampiny aseho etsy ambony izy ireo.

miankina

Nidina jQuery.
Nohavaozina avy amin'ny Popper v1.x ho Popper v2.x.
Nosoloana an'i Libsass tamin'ny Dart Sass satria tsy nampiasaina intsony ny compiler Sass nomena an'i Libsass.
Nifindra tany Jekyll nankany Hugo noho ny fananganana ny antontan-taratasinay

Fanohanana navigateur

Nidina ny Internet Explorer 10 sy 11
Nidina ny Microsoft Edge <16 (Legacy Edge)
Nidina ny Firefox <60
Nidina Safari <12
Nidina iOS Safari <12
Nidina Chrome <60

Fanovana ny antontan-taratasy

Pejin-trano nohavaozina, filaharan'ny docs ary footer.
Nampiana torolàlana Parcel vaovao .
Nampiana fizarana Customize vaovao , manolo ny pejy Theming an'ny v4 , miaraka amin'ny antsipiriany vaovao momba ny Sass, safidy fanamafisam-peo maneran-tany, rafitra loko, varimbazaha CSS, sy ny maro hafa.
Namboarina ny antontan-taratasin'ny endrika rehetra ho fizarana Forms vaovao , mizara ny atiny ho pejy mifantoka kokoa.
Toy izany koa, nohavaozina ny fizarana Layout , mba hamolavolana ny votoatin'ny grid mazava kokoa.
Novana anarana hoe "Navs" ho "Navs & Tabs".
Novana anarana hoe “Checks” ho “Checks & radios” ny pejy.
Namboarina ny navbar ary nanampy subnav vaovao hanamora ny fandehanana manodidina ny tranokalanay sy ny dikan-doka.
Nampiana hitsin-dàlana fitendry vaovao ho an'ny saha karoka: Ctrl + /.

Sass

Nafoinay ny fitambaran'ny sari-tany Sass default mba hanamora ny fanesorana ny sanda miverimberina. Ataovy ao an-tsaina fa tsy maintsy mamaritra ny soatoavina rehetra ao amin'ny sarintany Sass ianao izao $theme-colors. Jereo ny fomba hiatrehana ny sarintany Sass .
MafanaNy asa novana anarana color-yiq()sy ny fari-piainana mifandraika amin'ny color-contrast()hoe tsy mifandraika amin'ny habaka loko YIQ intsony. Jereo ny #30168.
- $yiq-contrasted-thresholddia novana anarana ho $min-contrast-ratio.
- $yiq-text-darkary $yiq-text-lightsamy nomena anarana hoe $color-contrast-darkand $color-contrast-light.
MafanaNiova ho amin'ny fomba lojika kokoa ny mari-pamantarana mixins query media.
- media-breakpoint-down()dia mampiasa ny toerana fiatoana ho solon'ny toerana fiatoana manaraka (oh, media-breakpoint-down(lg)raha tokony ho media-breakpoint-down(md)lasibatra kely kokoa noho ny lg).
- Toy izany koa, ny masontsivana faharoa ao amin'ny media-breakpoint-between()dia mampiasa ny toerana fiatoana ihany koa fa tsy ny teboka manaraka (oh, media-between(sm, lg)fa tsy media-breakpoint-between(sm, md)mikendry ny toerana fijerena eo anelanelan'ny smsy lg).
MafanaNesorina ny fomba fanontam-pirinty sy $enable-print-stylesmiovaova. Mbola misy ny kilasy fampisehoana printy. Jereo ny #28339 .
MafanaNilatsaka color(), theme-color(), ary gray()miasa ho an'ny variables. Jereo ny #29083 .
MafanaFampiasa novana anarana ary manaiky izay loko tianao fa tsy loko theme-color-level()fotsiny . Jereo ny #29083 Tandremo: nalatsaka tao aoriana .color-level()$theme-color color-level()v5.0.0-alpha3
MafanaNovana anarana $enable-prefers-reduced-motion-media-querysy $enable-pointer-cursor-for-buttonsho $enable-reduced-motionary $enable-button-pointersho fohifohy.
MafanaNesorina ny bg-gradient-variant()mixin. Ampiasao ny .bg-gradientkilasy mba hanampiana gradients amin'ny singa fa tsy ny .bg-gradient-*kilasy novokarina.
Mafana Nesorina ny mixins efa lany teo aloha:
- hover, hover-focus, plain-hover-focus, aryhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(nandao ihany koa ny kilasin'ny fitaovana mifandraika amin'izany, .text-hide)
- visibility()
- form-control-focus()
MafanaFampiasa novana anarana scale-color()mba shift-color()hialana amin'ny fifandonana amin'ny fiasan'ny fanamafisam-peo an'i Sass manokana.
box-shadowmixins izao dia mamela nullny soatoavina ary miala noneamin'ny tohan-kevitra maro. Jereo ny #30394 .
Ny border-radius()mixin izao dia manana sanda default.

Rafitra loko

Ny rafitra loko izay niasa color-level()sy $theme-color-intervalnesorina noho ny rafitra loko vaovao. Nosoloina lighten()sy . _ _ Ireo fiasa ireo dia hampifangaro ny loko amin'ny fotsy na mainty fa tsy manova ny fahamaivanany amin'ny vola raikitra. Ny loko na ny aloky ny loko dia miankina amin'ny hoe tsara na ratsy ny mari-pamantarana lanja. Jereo ny #30622 raha mila fanazavana fanampiny.darken()tint-color()shade-color()shift-color()
Nampiana loko sy loko vaovao ho an'ny loko tsirairay, manome loko sivy misaraka ho an'ny loko fototra tsirairay, ho variana Sass vaovao.
Nohatsaraina ny fifanoherana loko. Nifanohitra tamin'ny loko 3:1 ka hatramin'ny 4.5:1 ary nohavaozina ny loko manga, maitso, cyan ary mavokely mba hiantohana ny fifanoherana WCAG 2.1 AA. Nanova ihany koa ny loko mifanohitra amin'ny loko avy $gray-900amin'ny $black.
Mba hanohanana ny rafitra fandokoanay, dia nampiana fomba amam-panao tint-color()sy shade-color()fiasa vaovao mba hampifangaroana ny lokonay araka ny tokony ho izy.

Grid fanavaozana

Fiatoana vaovao! Niampy teboka fiatoana vaovao xxlho an'ny 1400pxsy ambony. Tsy misy fiovana amin'ny toerana fiatoana hafa rehetra.
Nohatsaraina tatatra. Ny tatatra dia napetraka amin'ny rem, ary tery kokoa noho ny v4 ( 1.5rem, na manodidina ny 24px, midina avy amin'ny 30px). Izany dia mampifanaraka ny tatatra amin'ny rafitry ny grid miaraka amin'ny fitaovana fanasarahanay.
- Nampiana kilasy tatatra vaovao ( .g-*, .gx-*, ary .gy-*) hifehy ny tatatra marindrano/mitsangana, tatatra marindrano ary tatatra mitsangana.
- MafanaNovana anarana .no-guttersmba .g-0hifanaraka amin'ny fitaovana tatatra vaovao.
Tsy nampiharina intsony ny tsanganana position: relative, ka mety tsy maintsy manampy .position-relativesinga sasany ianao hamerenana io fihetsika io.
Mafana.order-*Nandatsaka kilasy maromaro izay matetika tsy nampiasaina. Ny out of the box ihany no omenay .order-1izao ..order-5
MafanaNidina ny .mediasinga satria azo averina mora foana amin'ny fitaovana. Jereo ny #28265 sy ny pejin'ny flex utility ho ohatra .
Mafana bootstrap-grid.cssmihatra box-sizing: border-boxamin'ny tsanganana fotsiny izao fa tsy mamerina ny fatran'ny boaty manerantany. Amin'izany fomba izany dia azo ampiasaina any amin'ny toerana maro tsy misy fanelingelenana ny fomba fiasantsika.
$enable-grid-classestsy manafoana intsony ny famokarana kilasy container intsony. Jereo ny #29146.
Nohavaozina ny make-colmixin ho default amin'ny tsanganana mitovy tsy misy habe voafaritra.

Content, Reboot, sns

RFS dia alefa amin'ny alàlan'ny default. Ny lohateny mampiasa nyfont-size()mixin dia hanitsy ho azyfont-sizeny haavony miaraka amin'ny seranan-tsambo. Ity endri-javatra ity dia nifidy tamin'ny v4.
MafanaNamboarina ny typography asehonay mba hanoloana ny $display-*fari-piainanay sy ny $display-font-sizessarintany Sass. Nesorina ihany koa ny $display-*-weightfari-piainan'ny tsirairay ho an'ny s tokana $display-font-weightary namboarina font-size.
Nanampy .display-*habe vaovao roa, .display-5ary .display-6.
Ny rohy dia tsipihina amin'ny alàlan'ny default (fa tsy eo amin'ny hover fotsiny), raha tsy hoe anisan'ny singa manokana.
Tabilao novolavolaina mba hamelombelona ny fomban-dry zareo ary hanorina azy ireo indray miaraka amin'ny fari-piainan'ny CSS mba hifehezana bebe kokoa ny fanaingoana.
MafanaTsy mandova fomba intsony ny latabatra misy akany.
Mafana .thead-lightary .thead-darkalatsaka ho an'ny .table-*kilasy variana izay azo ampiasaina amin'ny singa latabatra rehetra ( thead, tbody, tfoot, tr, thary td).
MafanaNy table-row-variant()mixin dia novana anarana table-variant()ary tsy manaiky afa-tsy 2 parameter: $color(anarana loko) sy $value(kaody loko). Ny loko sisin-tany sy ny loko lantom-peo dia kajy ho azy mifototra amin'ny fari-piainan'ny latabatra.
Zarao ho -ysy -x.
MafanaNiala .pre-scrollablekilasy. Jereo ny #29135
Mafana .text-*tsy manampy fanjakana hover sy fifantohana amin'ny rohy intsony ny utility. .link-*azo ampiasaina kosa ny kilasy mpanampy. Jereo ny #29267
MafanaNiala .text-justifykilasy. Jereo ny #29793
Mafana <hr>ampiasaina ankehitriny ny singa heightfa tsy borderhanohanana tsara kokoa ny sizetoetra. Izany koa dia mamela ny fampiasana fitaovana padding mba hamoronana fisarahana matevina kokoa (oh, <hr class="py-1">).
Avereno amboarina padding-leftho . <ul>_ _<ol>40px2rem
Nampiana $enable-smooth-scroll, izay mihatra scroll-behavior: smoothmaneran-tany—afa-tsy ho an'ireo mpampiasa mangataka ny fampihenana ny hetsika amin'ny alalan'ny prefers-reduced-motionfangatahan'ny media. Jereo ny #31877

RTL

Ny fari-pitsipika marindrano voafaritra, ny fitaovana ary ny mixins dia novana anarana mba hampiasana toetra lojika toy ny hita ao amin'ny fandrindrana flexbox—oh, startary endho solon'ny leftsy right.

teny

Nampiana endrika mitsingevana vaovao! Nampiroborobo ny ohatra etikety mitsingevana izahay ho singa endrika tohana tanteraka. Jereo ny pejy etikety mitsingevana vaovao.
Mafana Singa endrika teratany sy fanao mahazatra. Natambatra ny boaty, radio, voafantina, ary ny fampidirana hafa izay nanana kilasy teratany sy mahazatra ao amin'ny v4. Ankehitriny dia saika ny singa rehetra amin'ny endrika dia efa mahazatra tanteraka, ny ankamaroany dia tsy mila HTML manokana.
- .custom-control.custom-checkboxdia izao .form-check.
- .custom-control.custom-custom-radiodia izao .form-check.
- .custom-control.custom-switchdia izao .form-check.form-switch.
- .custom-selectdia izao .form-select.
- .custom-fileary .form-filenosoloina fomba fanao eo ambonin'ny .form-control.
- .custom-rangedia izao .form-range.
- Nandatsaka teratany .form-control-fileary .form-control-range.
MafanaNilatsaka .input-group-appendary .input-group-prepend. Afaka manampy bokotra fotsiny ianao izao ary .input-group-textho zanaka mivantana amin'ny vondrona fampidirana.
Ny sisin-tany tsy hita efa ela amin'ny vondrona fampidirana miaraka amin'ny tsikombakomba amin'ny valin'ny fanamarinana dia raikitra ihany amin'ny alàlan'ny fampidirana .has-validationkilasy fanampiny amin'ny vondrona fampidirana misy fanamarinana.
Mafana Nandatsaka kilasy fandrindrana manokana ho an'ny rafitra grid-tsika. Ampiasao ny tambajotra sy ny fitaovana ampiasainay fa tsy ny .form-group, .form-row, na .form-inline.
MafanaMila .form-label.
Mafana .form-textno sets intsony display, mamela anao hamorona inline na hanakana lahatsoratra fanampiana araka izay irinao amin'ny fanovana ny singa HTML.
Ny fanaraha-maso ny endrika dia tsy ampiasaina raikitra intsony heightraha azo atao, fa manemotra ny min-heightfanatsarana ny fanamboarana sy ny fampifanarahana amin'ny singa hafa.
Tsy mihatra amin'ny <select>s miaraka amin'ny multiple.
Ny rakitra Sass loharano narindra indray eo ambanin'ny scss/forms/, ao anatin'izany ny fomba vondrona fampidirana.

singa

Sanda mitambatra ho an'ny fanairana, mofo, karatra, fidinana ambany, vondrona lisitra, modals padding, popover, ary toro-hevitra mifototra amin'ny $spacerfari-piainantsika. Jereo ny #30564 .

angorodao

Nampiana singa accordion vaovao .

fanairana

Misy ohatra misy kisary izao ny fanairana .
Nesorina ny fomba fanao ho an'ny <hr>s isaky ny fanairana satria efa mampiasa currentColor.

Badges

MafanaNandao ny .badge-*kilasy loko rehetra ho an'ny fitaovana afara (ohatra, fampiasana .bg-primaryfa tsy .badge-primary).
MafanaNilatsaka .badge-pill- ampiasao ny .rounded-pillfitaovana fa tsy.
MafanaNesorina ny fomba fantson-drivotra sy fifantohana ho an'ny <a>singa <button>.
Nitombo padding default ho an'ny badge avy amin'ny .25em/ .5emmankany .35em/ .65em.

Mofo

Nanatsotra ny endriky ny mofon-mofo mahazatra amin'ny alàlan'ny fanesorana padding, background-color, ary border-radius.
Nampiana fananana mahazatra CSS vaovao --bs-breadcrumb-dividerho an'ny fanamboarana mora nefa tsy mila mamerina ny CSS.

bokotra

Mafana Ny bokotra toggle , miaraka amin'ny boaty na radio, dia tsy mila JavaScript intsony ary manana marika vaovao. Tsy mila singa famonosana intsony izahay, ampio.btn-checkamin'ny<input>, ary ampifandraiso amin'ny.btnkilasy rehetra ao amin'ny<label>. Jereo ny #30650 . Ny antontan-taratasy momba izany dia nifindra avy amin'ny pejin'ny Buttons mankany amin'ny fizarana Forms vaovao.
Mafana Hiverina .btn-blockany amin'ny utilities. Raha tokony hampiasaina .btn-blockamin'ny .btn, fonosy amin'ny bokotra .d-gridary .gap-*fitaovana iray hanalana azy ireo araka izay ilaina. Miverena any amin'ny kilasy mandray andraikitra mba hifehezana bebe kokoa azy ireo. Vakio ny doka ho an'ny ohatra sasany.
Nohavaozina ny anay button-variant()sy ny button-outline-variant()mixins hanohanana masontsivana fanampiny.
Bokotra nohavaozina mba hiantohana ny fitomboan'ny fifanoherana amin'ny hover sy ny fanjakana mavitrika.
Ny bokotra kilemaina izao dia manana pointer-events: none;.

KARATRA ARA-BAIBOLY

MafanaNidina .card-deckho an'ny grid-nay. Afangaro amin'ny kilasin'ny tsanganana ny karatrao ary ampio .row-cols-*fitoeran'entana ho an'ny ray aman-dreny hamerenana ny tokotanin'ny karatra (saingy manana fifehezana bebe kokoa amin'ny fampifanarahana mamaly).
MafanaNidina .card-columnsho an'ny Masonry. Jereo ny #28922 .
MafanaNosoloina singa .cardakorandriaka vaovao ny akorandriaka mifototra .

Carousel

Nampiana .carousel-darkkarazany vaovao ho an'ny lahatsoratra maizina, fanaraha-maso ary tondro (tsara ho an'ny fiaviana maivana kokoa).
Nosoloina kisary chevron ho an'ny fanaraha-maso carousel miaraka amin'ny SVG vaovao avy amin'ny kisary Bootstrap .

bokotra akaiky

MafanaNovana anarana .closeho .btn-closeanarana tsy dia mahazatra.
Ny bokotra akaiky izao dia mampiasa background-image(SVG mipetaka) fa tsy ×ao amin'ny HTML, mamela ny fanamboarana mora kokoa tsy mila hikasika ny marikao.
Nampiana .btn-close-whitevariana vaovao izay ampiasaina filter: invert(1)ahafahana mampifanohitra kokoa ny kisary amin'ny fiaviana maizina kokoa.

firodanan'ny

Nesorina ny scroll anchorion ho an'ny accordions.

Dropdowns

Nampiana .dropdown-menu-darkkarazany vaovao sy ny fari-piainana mifandraika amin'ny fanidiana maizimaizina amin'ny fangatahana.
Nampiana variable vaovao ho an'ny $dropdown-padding-x.
Nohamaizinina ny mpizara midina mba hanatsara ny fifanoherana.
MafanaNy hetsika rehetra ho an'ny fampidinana dia atomboka amin'ny bokotra toggle midina ary avy eo miboiboika mankany amin'ny singa ray.
Ny menus dropdown izao dia manana data-bs-popper="static"toetra napetraka rehefa static ny toerana misy ny dropdown, na ao amin'ny navbar ny fidinana. Nampidirin'ny JavaScript-nay izany ary manampy anay hampiasa fomba fanao mahazatra nefa tsy manelingelina ny toeran'i Popper.
MafanaSafidy flipnilatsaka ho an'ny plugin dropdown ho an'ny konfigurasi Popper teratany. Azonao atao izao ny manafoana ny fihetsika mivadika amin'ny alàlan'ny fandefasana array tsy misy na inona na inona ho an'ny fallbackPlacementssafidy amin'ny modifier flip .
Ny menio midina dia azo kitihina miaraka amin'ny autoClosesafidy vaovao hifehezana ny fitondran-tena manakaiky ny fiara . Azonao atao ny mampiasa ity safidy ity hanaiky ny kitiho ao anatiny na ivelan'ny menio midina mba hahatonga azy hifampiraharaha.
Ny dropdowns izao dia manohana .dropdown-items voafono <li>s.

Jumbotron

MafanaNidina ny singa jumbotron satria azo averina amin'ny fitaovana. Jereo ny ohatra Jumbotron vaovao ho an'ny demo.

Vondrona lisitra

Nampiana .list-group-numberedmpanova vaovao amin'ny lisitra vondrona.

Navs sy tabs

Nampiana nullvariables vaovao ho an'ny font-size, font-weight, color, ary :hover colorny .nav-linkkilasy.

Navbars

MafanaNy Navbars izao dia mitaky kaontenera ao anatiny (mba hanatsorana ny fepetra takian'ny elanelana sy CSS ilaina).
MafanaTsy .activeazo ampiharina amin'ny .nav-items intsony ny kilasy, tsy maintsy ampiharina mivantana amin'ny .nav-links.

Offcanvas

Nampiana ny singa offcanvas vaovao .

Pagination

Ny rohin'ny fanoharana izao dia efa azo namboarina margin-leftizay mihodinkodina mavitrika amin'ny zoro rehetra rehefa misaraka.
Nampiana transitions amin'ny rohy pagination.

Popovers

Mafana.arrowNovana anarana ho ao amin'ny maodely popover .popover-arrowdefault.
whiteListSafidy novana anarana ho allowList.

Spinners

Manome voninahitra izao ny Spinners prefers-reduced-motion: reduceamin'ny fanalefahana ny animation. Jereo ny #31882 .
Nohatsaraina ny fampifanarahana mitsangana spinner.

Toasts

Ny toast izao dia azo apetraka ao amin'ny a .toast-containermiaraka amin'ny fanampian'ny fitaovana fametrahana toerana .
Nanova ny faharetan'ny toast ho 5 segondra.
Nesorina overflow: hiddentamin'ny toast ary nosoloina border-radiuss mety misy calc()fiasa.

Tooltips

MafanaNovana anarana .arrowho .tooltip-arrowao amin'ny maodelin'ny toro-lalana mahazatra.
MafanaNy sandan'ny default ho an'ny fallbackPlacementsdia novaina mba ['top', 'right', 'bottom', 'left']hametrahana singa popper tsara kokoa.
MafanawhiteListSafidy novana anarana ho allowList.

Asa vaventy

MafanaNanova anarana fitaovana maromaro mba hampiasana anarana lojika fa tsy anarana tari-dalana miaraka amin'ny fanampiana RTL:
- Novana anarana .left-*sy .right-*ho .start-*ary .end-*.
- Novana anarana .float-leftsy .float-rightho .float-startary .float-end.
- Novana anarana .border-leftsy .border-rightho .border-startary .border-end.
- Novana anarana .rounded-leftsy .rounded-rightho .rounded-startary .rounded-end.
- Novana anarana .ml-*sy .mr-*ho .ms-*ary .me-*.
- Novana anarana .pl-*sy .pr-*ho .ps-*ary .pe-*.
- Novana anarana .text-leftsy .text-rightho .text-startary .text-end.
MafanaDisables négatif by default.
Nampiana .bg-bodykilasy vaovao ho an'ny fametrahana haingana ny <body>'background' ho singa fanampiny.
Nampiana fampiasa toerana vaovao ho an'ny top, right, bottom, ary left. Ny sanda dia misy 0, 50%, ary 100%ho an'ny fananana tsirairay.
Nampiana vaovao .translate-middle-x& .translate-middle-ykojakoja ho an'ny singa mitsivalana na mitsangana afovoany / raikitra.
Nampiana border-widthfitaovana vaovao .
MafanaNovana anarana .text-monospaceho .font-monospace.
MafanaNesorina .text-hidesatria fomba efa tranainy amin'ny fanafenana lahatsoratra tsy tokony hampiasaina intsony.
Fitaovana fanampiny .fs-*ho an'ny font-sizekojakoja (miaraka amin'ny RFS afaka). Ireo dia mampiasa mitovy amin'ny lohatenin'ny HTML (1-6, lehibe ka hatramin'ny kely), ary azo ovaina amin'ny alàlan'ny sarintany Sass.
MafanaUtilities .font-weight-*novana anarana .fw-*ho fohy sy tsy miovaova.
MafanaUtilities .font-style-*novana anarana .fst-*ho fohy sy tsy miovaova.
Nampiana .d-gridmba hampisehoana kojakoja sy kojakoja vaovao gap( .gap) ho an'ny CSS Grid sy flexbox layout.
MafanaNesorina .rounded-smsy rounded-lg, ary nampiditra ambaratonga vaovao amin'ny kilasy, .rounded-0ho .rounded-3. Jereo ny #31687 .
Nampiana line-heightfitaovana vaovao: .lh-1, .lh-sm, .lh-baseary .lh-lg. Jereo eto .
Nafindra ny .d-nonefitaovana ao amin'ny CSS mba hanome lanja bebe kokoa noho ny fampiratiana hafa.
Nanitatra ny .visually-hidden-focusablempanampy mba hiasa amin'ny kaontenera, mampiasa :focus-within.

mpanampy

Mafana Ny mpanampy embed mandray andraikitra dia novana ho mpanampy amin'ny ratio miaraka amin'ny anaran'ny kilasy vaovao sy fitondran-tena nohatsaraina, ary koa ny fari-piadidiana CSS manampy.
- Ny kilasy dia novana anarana mba hiova byamin'ny xlafiny lafiny. Ohatra, .ratio-16by9izao .ratio-16x9.
- Nafoinay ny .embed-responsive-itemmpifidy vondrona sy singa ho solon'ny .ratio > *mpifidy tsotra kokoa. Tsy mila kilasy intsony, ary ny mpanampy ratio dia miasa amin'ny singa HTML rehetra.
- Ny $embed-responsive-aspect-ratiossarintany Sass dia novana anarana $aspect-ratiosary nohamafisina ny sandany mba hampidirana ny anaran'ny kilasy sy ny isan-jato ho key: valuempivady.
- Ny varimbazaha CSS dia novolavolaina ary ampidirina ho an'ny sanda tsirairay ao amin'ny sarintany Sass. Ovay ny --bs-aspect-ratiofari-pitsipika eo amin'ny .ratiomba hamoronana aspect ratio manokana .
Mafana Ny kilasy "mpamaky efijery" dia kilasy "miafina hita maso" ankehitriny .
- Nanova ny rakitra Sass avy scss/helpers/_screenreaders.scssamin'nyscss/helpers/_visually-hidden.scss
- Novana anarana .sr-onlyary .sr-only-focusableho .visually-hiddenary.visually-hidden-focusable
- Novana anarana sr-only()sy sr-only-focusable()mixins ho visually-hidden()ary visually-hidden-focusable().
bootstrap-utilities.cssizao koa dia ahitana ny mpanampy anay. Tsy mila ampidirina amin'ny fanamboarana manokana intsony ny mpanampy.

JavaScript

Nandao ny fiankinan-doha amin'ny jQuery ary namerina nanoratra plugins mba ho ao amin'ny JavaScript mahazatra.
MafanaNy toetran'ny data ho an'ny plugin JavaScript rehetra dia nomena anarana mba hanavahana ny fiasa Bootstrap amin'ny antoko fahatelo sy ny kaody anao manokana. Ohatra, mampiasa isika data-bs-togglefa tsy data-toggle.
Ny plugins rehetra izao dia afaka manaiky mpifidy CSS ho hevitra voalohany. Azonao atao ny mandefa singa DOM na mpifidy CSS manan-kery mba hamoronana ohatra vaovao momba ny plugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigazo ampitaina ho toy ny fiasa izay manaiky ny config Popper default an'ny Bootstrap ho toy ny tohan-kevitra, mba hahafahanao manambatra an'io config default io amin'ny lalanao. Mihatra amin'ny dropdowns, popovers, ary tooltips.
Ny sandan'ny default ho an'ny fallbackPlacementsdia novaina ['top', 'right', 'bottom', 'left']ho fametrahana tsara kokoa ny singa Popper. Mihatra amin'ny dropdowns, popovers, ary tooltips.
Nesorina tamin'ny fomba static ho an'ny daholobe toy ny _getInstance()→ getInstance().