Kusamukira ku v5

v5.2.0

Mapangidwe otsitsimula

Bootstrap v5.2.0 imakhala ndi zosintha zowoneka bwino za zigawo zingapo ndi katundu pa projekiti yonse, makamaka kudzera mumitengo yoyengedwa bwino pamabatani ndi zowongolera border-radiusmawonekedwe . Zolemba zathu zasinthidwanso ndi tsamba lofikira latsopano, masanjidwe osavuta a zolemba omwe sagwetsanso magawo am'mbali, ndi zitsanzo zodziwika bwino za Zithunzi za Bootstrap .

Zambiri za CSS

Tasintha magawo athu onse kuti agwiritse ntchito zosintha za CSS. Ngakhale Sass imathandizirabe chilichonse, chigawo chilichonse chasinthidwa kuti chiphatikizepo zosintha za CSS pamakalasi oyambira (mwachitsanzo, .btn), kulola kusintha kwanthawi yeniyeni kwa Bootstrap. M'mabuku otsatirawa, tipitiliza kukulitsa kugwiritsa ntchito kwathu zosintha za CSS m'mapangidwe athu, mafomu, othandizira, ndi zofunikira. Werengani zambiri zamitundu yosiyanasiyana ya CSS mu gawo lililonse patsamba lawo lazolemba.

Kugwiritsiridwa ntchito kwathu kwa CSS kudzakhala kosakwanira mpaka Bootstrap 6. Ngakhale tingakonde kugwiritsa ntchito izi pagulu lonse, zimakhala ndi chiopsezo choyambitsa kusintha. Mwachitsanzo, kukhazikitsa $alert-border-width: var(--bs-border-width)mu code yathu yoyambira kumaswa Sass mu code yanu ngati mukuchita $alert-border-width * 2pazifukwa zina.

Chifukwa chake, ngati kuli kotheka, tipitiliza kukankhira kumitundu yambiri ya CSS, koma chonde dziwani kuti kukhazikitsa kwathu kungakhale kochepa mu v5.

Chatsopano_maps.scss

Bootstrap v5.2.0 idabweretsa fayilo yatsopano ya Sass yokhala ndi _maps.scss. Imatulutsa mamapu angapo a Sass _variables.scsskuti akonze vuto pomwe zosintha zamapu oyambilira sizinagwiritsidwe ntchito pamapu apachiwiri omwe amawonjezera. Mwachitsanzo, zosintha $theme-colorssizinagwiritsidwe ntchito pamapu ena amutu omwe amadalira $theme-colors, kuswa mayendedwe ofunikira. Mwachidule, Sass ili ndi malire pomwe kusintha kosasintha kapena mapu atagwiritsidwa ntchito , sikungasinthidwe. Pali kuperewera kofananako ndi zosintha za CSS zikagwiritsidwa ntchito popanga mitundu ina ya CSS.

Ichi ndichifukwa chake masinthidwe osinthika mu Bootstrap amayenera kubwera pambuyo pake @import "functions", koma m'mbuyomu @import "variables"komanso zina zonse zomwe timalowetsa. Zomwezo zimagwiranso ntchito ku mamapu a Sass-muyenera kunyalanyaza zotsalira musanagwiritse ntchito. Mamapu otsatirawa asunthidwa kupita ku atsopano _maps.scss:

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

Zomanga zanu za Bootstrap CSS ziyenera kuwoneka motere ndikulowetsa mamapu osiyana.

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

Zatsopano zothandizira

• font-weightZothandizira zowonjezera kuti ziphatikizepo mafonti .fw-semibolda semibold.
• Zothandizira border-radiuszowonjezera kuti zikhale ndi makulidwe awiri atsopano, .rounded-4ndi .rounded-5, kuti musankhe zina.

Zosintha zina

• Tinayambitsa $enable-container-classesnjira yatsopano. - Tsopano polowa muzoyeserera za CSS Grid, .container-*makalasi adzapangidwabe, pokhapokha ngati izi zakhazikitsidwa false. Zotengera nazonso tsopano zimasunga mayendedwe awo.

• Chigawo cha Offcanvas tsopano chili ndi mitundu yosiyanasiyana . Gulu loyambirira .offcanvassilinasinthe - limabisa zomwe zili pamawonekedwe onse. Kuti ayankhe, sinthani .offcanvaskalasiyo kukhala .offcanvas-{sm|md|lg|xl|xxl}kalasi iliyonse.

• Ogawa matebulo okulirapo tsopano alowa. - Tachotsa zokulirapo komanso zovuta kwambiri kupitilira malire pakati pamagulu a tebulo ndikusunthira ku kalasi yomwe mungagwiritse ntchito, .table-group-divider. Onani madotolo a tebulo mwachitsanzo.

• Scrollspy yalembedwanso kuti igwiritse ntchito Intersection Observer API , zomwe zikutanthauza kuti simukufunikanso zokutira za makolo achibale, kutsitsaoffsetconfig, ndi zina zambiri. Yang'anani kuti machitidwe anu a Scrollspy akhale olondola komanso osasinthasintha pakuwunikira kwawo.

• Popovers ndi zida zothandizira tsopano zimagwiritsa ntchito zosintha za CSS. Zosintha zina za CSS zasinthidwa kuchokera kwa anzawo a Sass kuti achepetse kuchuluka kwa zosintha. Zotsatira zake, zosintha zitatu zachotsedwa pakutulutsidwa uku: $popover-arrow-color, $popover-arrow-outer-color, ndi $tooltip-arrow-color.

• Anawonjezera .text-bg-{color}othandizira atsopano. M'malo moyika zinthu zapayekha .text-*ndi .bg-*zofunikira, mutha kugwiritsa ntchito .text-bg-*othandizirawo kukhazikitsa background-colorkutsogolo kosiyana color.

• Onjezani .form-check-reversezosintha kuti musinthe mawonekedwe a zilembo ndi ma cheke/mawayilesi ogwirizana nawo.

• Thandizo lowonjezera lamizeremizere kumatebulo kudzera .table-striped-columnsm'kalasi yatsopano.

Kuti muwone mndandanda wathunthu wa zosintha, onani pulojekiti ya v5.2.0 pa GitHub .

v5.1.0

• Onjezani zoyeserera zamapangidwe a Gridi ya CSS . - Iyi ndi ntchito yomwe ikuchitika, ndipo sinakonzekere kugwiritsidwa ntchito, koma mutha kulowa mu gawo latsopanolo kudzera pa Sass. Kuti izi zitheke, zimitsani gridi yokhazikika, pokhazikitsa $enable-grid-classes: falsendikuthandizira CSS Grid pokhazikitsa $enable-cssgrid: true.

• Ma navbar osinthidwa kuti athandizire ma offcanvas. - Onjezani zotengera zakunja mu navbar iliyonse yokhala ndi .navbar-expand-*makalasi omvera komanso zolemba zina zakunja.

• Wowonjezera gawo latsopano la chosungira . - Chigawo chathu chatsopano kwambiri, njira yoperekera midadada kwakanthawi m'malo mwa zomwe zili zenizeni kuti zithandizire kuwonetsa kuti china chake chikutsegula patsamba lanu kapena pulogalamu yanu.

• Pulagi yowonjezera tsopano imathandizira kugwa kopingasa . - Onjezani .collapse-horizontalku zanu .collapsekuti mugwe widthm'malo mwa height. Pewani kupentanso msakatuli pokhazikitsa min-heightkapena height.

• Onjezani ma stack atsopano ndi othandizira malamulo oyimirira. - Gwiritsani ntchito mwachangu ma flexbox angapo kuti mupange masanjidwe anu mwachangu ndi masitaki . Sankhani kuchokera m'magulu opingasa ( .hstack) ndi ofukula ( .vstack). Onjezani zogawa zoyima zofanana ndi <hr>zinthu zomwe zili ndi othandizira atsopano.vr .

• Adawonjezera mitundu yatsopano yapadziko lonse ya :rootCSS. - Anawonjezera zingapo zatsopano za CSS :rootpamlingo wowongolera <body>masitayelo. Zambiri zili m'ntchito, kuphatikiza zida zathu zonse ndi zida, koma pakadali pano werengani zosintha za CSS mugawo la Sinthani Mwamakonda Anu .

• Zosintha zamitundu ndi zakumbuyo kuti zigwiritse ntchito zosintha za CSS, ndikuwonjezera mawonekedwe atsopano owoneka bwino komanso mawonekedwe akumbuyo . - .text-* ndipo .bg-*zogwiritsidwa ntchito tsopano zimamangidwa ndi mitundu ya CSS ndi rgba()mitundu yamitundu, kukulolani kuti musinthe mosavuta chilichonse chothandizira ndi zida zatsopano za opacity.

• Adawonjezeranso zitsanzo zatsopano zowonetsera momwe mungasinthire magawo athu. - Kokani mwakonzeka kugwiritsa ntchito zida zosinthidwa makonda ndi mapangidwe ena wamba ndi zitsanzo zathu zatsopano za Snippets . Mulinso zolembedwa pansi , zotsikira pansi , magulu amndandanda , ndi ma modals .

• Kuchotsa masitayelo osagwiritsidwa ntchito pa popovers ndi zida za zida popeza izi zimayendetsedwa ndi Popper yekha. $tooltip-marginyachotsedwa ntchito ndipo yakhazikitsidwa kuti nullichitike.

Mukufuna zambiri? Werengani v5.1.0 blog positi.

Zodalira

• Yatsitsa jQuery.
• Adakwezedwa kuchokera ku Popper v1.x kupita ku Popper v2.x.
• M'malo mwa Libsass ndi Dart Sass monga gulu lathu la Sass lopatsidwa Libsass lidachotsedwa.
• Tinasamuka ku Jekyll kupita ku Hugo kuti tipange zolemba zathu

Thandizo la msakatuli

• Yagwetsa Internet Explorer 10 ndi 11
• Yagwetsa Microsoft Edge <16 (Legacy Edge)
• Yatsitsa Firefox <60
• Wagwetsa Safari <12
• Yagwetsa iOS Safari <12
• Kutsitsa Chrome <60

Zolemba zosintha

• Tsamba loyamba lokonzedwanso, mawonekedwe a ma docs, ndi pansi.
• Adawonjezedwa kalozera watsopano wa Parcel .
• Onjezani gawo latsopano la Sinthani Mwamakonda Anu , m'malo mwa v4's Theming page , ndi zatsopano pa Sass, zosankha zapadziko lonse lapansi, ziwembu zamitundu, zosintha za CSS, ndi zina zambiri.
• Anakonzanso zolemba zonse za fomu kukhala gawo latsopano la Mafomu , ndikugawa zomwe zili m'masamba omwe amawunikira kwambiri.
• Momwemonso, sinthani gawo la Layout , kuti muwonetsetse zomwe zili mu gridi momveka bwino.
• Tsamba lagawo la "Navs" losinthidwa kukhala "Navs & Tabs".
• Tsamba la "Checks" linasinthidwa kukhala "Macheke & mawayilesi".
• Kupanganso navbar ndikuwonjezera subnav yatsopano kuti zikhale zosavuta kuti muzitha kuzungulira masamba athu ndi zolemba zathu.
• Onjezani njira yachidule ya kiyibodi pakusaka: Ctrl + /.

Sass

• Tasiya kuphatikizika kwa mapu a Sass kuti zikhale zosavuta kuchotsa zinthu zosafunika. Kumbukirani kuti tsopano muyenera kufotokozera zonse zomwe zili mumapu a Sass monga $theme-colors. Onani momwe mungathanirane ndi mamapu a Sass .

• KuswaNtchito color-yiq()yosinthidwa ndi zosintha zina zomwe color-contrast()sizikugwirizana ndi malo amtundu wa YIQ. Onani #30168.

  • $yiq-contrasted-thresholdimasinthidwa kukhala $min-contrast-ratio.
  • $yiq-text-darkndipo $yiq-text-lightmotsatana amasinthidwa kukhala $color-contrast-darkndi $color-contrast-light.

• KuswaMedia query mixins parameters zasintha kuti zikhale zomveka bwino.

  • media-breakpoint-down()imagwiritsa ntchito podulira yokha m'malo mongodukanso (mwachitsanzo, media-breakpoint-down(lg)m'malo mwa media-breakpoint-down(md)malo owonera ang'onoang'ono kuposa lg).
  • Momwemonso, gawo lachiwiri mkati media-breakpoint-between()limagwiritsanso ntchito malo opumira okha m'malo mwa malo opumira (mwachitsanzo, media-between(sm, lg)m'malo mwa media-breakpoint-between(sm, md)malo owonera pakati smndi lg).

• KuswaKuchotsa masitayelo osindikizira ndikusintha $enable-print-styles. Makalasi owonetsera osindikiza akadalipo. Onani #28339 .

• KuswaAdagwetsedwa color(), theme-color(), ndi gray()ntchito mokomera zosintha. Onani #29083 .

• KuswaNtchito theme-color-level()yosinthidwa kukhala color-level()ndipo tsopano ikuvomereza mtundu uliwonse womwe mukufuna m'malo mwa $theme-colormitundu yokha. Onani #29083 Chenjerani: color-level() pambuyo pake idatsitsidwa v5.0.0-alpha3.

• KuswaWasinthidwanso $enable-prefers-reduced-motion-media-queryndi $enable-pointer-cursor-for-buttonskuti $enable-reduced-motionndi $enable-button-pointersmwachidule.

• KuswaAnachotsa bg-gradient-variant()mixin. Gwiritsani ntchito .bg-gradientkalasi kuti muwonjezere ma gradients kuzinthu m'malo mwa .bg-gradient-*makalasi opangidwa.

• Kuswa Zosakaniza zomwe zidachotsedwa kale:

  • hover,,, ndi hover-focus_plain-hover-focushover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(adatsitsanso gulu lothandizira, .text-hide)
  • visibility()
  • form-control-focus()

• KuswaNtchito scale-color()yosinthidwa kuti shift-color()mupewe kugundana ndi mawonekedwe a Sass omwe amakulitsa mtundu.

• box-shadowmixins tsopano amalola nullzikhalidwe ndikutsika nonekuchokera kumakangano angapo. Onani #30394 .

• Kusakaniza border-radius()tsopano kuli ndi mtengo wokhazikika.

Mtundu dongosolo

• Dongosolo lamitundu lomwe lidagwira ntchito color-level()ndikuchotsedwa $theme-color-intervalndikusintha mtundu watsopano. Zonse lighten()ndi darken()ntchito mu codebase yathu zimasinthidwa tint-color()ndi shade-color(). Ntchitozi zidzasakaniza mtundu ndi zoyera kapena zakuda m'malo mosintha kuwala kwake ndi kuchuluka kwake. Chiwongolerocho shift-color()chimakongoletsa kapena mthunzi wamtundu kutengera kulemera kwake kapena koyipa. Onani #30622 kuti mumve zambiri.

• Onjezani matani ndi mithunzi yatsopano pamtundu uliwonse, ndikupereka mitundu isanu ndi inayi pamtundu uliwonse, monga mitundu yatsopano ya Sass.

• Kusiyanitsa kwamitundu bwino. Chiyerekezo chosiyanitsa chamitundu kuchokera pa 3:1 mpaka 4.5:1 ndi mitundu yosinthidwa ya buluu, yobiriwira, yacyan, ndi yapinki kuti muwonetsetse kusiyana kwa WCAG 2.1 AA. Tinasinthanso mtundu wathu wosiyanitsa mitundu $gray-900kukhala $black.

• Kuti tithandizire dongosolo lathu lamitundu, tawonjezera machitidwe atsopano tint-color()ndi shade-color()magwiridwe antchito kuti tisakanize mitundu yathu moyenera.

Zosintha zamagridi

• Malo atsopano! Anawonjezera xxlbreakpoint yatsopano 1400pxndi mmwamba. Palibe zosintha pazigawo zina zonse.

• Magutter abwino. Miyendo tsopano yayikidwa mu rems, ndipo ndi yopapatiza kuposa v4 ( 1.5rem, kapena pafupifupi 24px, kutsika kuchokera 30px). Izi zimagwirizana ndi ma gutters a gridi yathu ndi zida zathu zamatayala.

  • Onjezani kalasi yatsopano ya gutter ( .g-*, .gx-*, ndi .gy-*) kuti muwongolere mitsinje yopingasa/yoyimirira, ngalande zopingasa, ndi ngalande zoyima.
  • KuswaAdasinthidwa .no-gutterskuti .g-0agwirizane ndi zida zatsopano zamagutter.

• Mizati sinagwiritsidwenso position: relativentchito, kotero mungafunike kuwonjezera .position-relativepazinthu zina kuti mubwezeretse khalidwelo.

• KuswaAnasiya .order-*makalasi angapo omwe nthawi zambiri samagwiritsidwa ntchito. Tsopano tikungopereka .order-1kuchokera .order-5mu bokosi.

• KuswaYagwetsa .mediachigawocho chifukwa chitha kufananizidwa mosavuta ndi zofunikira. Onani #28265 ndi tsamba lazothandizira zosinthika mwachitsanzo .

• Kuswa bootstrap-grid.csstsopano ikugwira box-sizing: border-boxntchito pazagawo m'malo mokhazikitsanso kukula kwa bokosi lonse. Mwanjira iyi, masitaelo athu a gridi amatha kugwiritsidwa ntchito m'malo ambiri popanda kusokonezedwa.

• $enable-grid-classessikuletsanso kupanga makalasi a chidebe. Onani #29146.

• Idasinthidwa make-colmixin kuti ikhale yosasinthika kukhala mizati yofanana popanda kukula kwake.

Content, Yambitsaninso, etc

• RFS tsopano yayatsidwa mwachisawawa. Mitu yogwiritsa ntchitofont-size()mixin imangosintha kuti igwirizanefont-sizendi mawonekedwe. Izi zidalowa kale ndi v4.

• KuswaTinakonzanso kalembedwe kathu kuti tisinthe $display-*masinthidwe athu ndi $display-font-sizesmapu a Sass. Komanso anachotsa $display-*-weightzosintha payekha kwa limodzi $display-font-weightndi kusintha font-sizes.

• Anawonjezanso mitu iwiri yatsopano .display-*, .display-5ndi .display-6.

• Maulalo amatsindikiridwa mwachisawawa (osati kungosuntha), pokhapokha ngati ali gawo lazinthu zinazake.

• Matebulo opangidwanso kuti atsitsimutse masitayelo awo ndikuwamanganso ndi zosintha za CSS kuti aziwongolera masitayelo.

• KuswaMatebulo okhala ndi zisa salowanso masitayelo.

• Kuswa .thead-lightndipo .thead-darkamasiyidwa mokomera .table-*makalasi osiyanasiyana omwe angagwiritsidwe ntchito pazinthu zonse za tebulo ( thead, tbody, tfoot, tr, thndi td).

• KuswaMixin table-row-variant()imatchedwanso table-variant()ndipo imavomereza magawo awiri okha: $color(dzina lamtundu) ndi $value(mtundu wamtundu). Mtundu wamalire ndi kamvekedwe ka mawu amawerengedweratu potengera zomwe zili patebulo.

• Gawani zosintha zama cell padding kukhala -yndi -x.

• KuswaKalasi yagwa .pre-scrollable. Onani #29135

• Kuswa .text-*zothandizira sizikuwonjezera hover ndi malo olunjika ku maulalo. .link-*makalasi othandizira angagwiritsidwe ntchito m'malo mwake. Onani #29267

• KuswaKalasi yagwa .text-justify. Onani #29793

• Kuswa <hr>zinthu zomwe zikugwiritsidwa ntchito tsopano heightm'malo bordermothandizira bwino sizechikhalidwecho. Izi zimathandiziranso kugwiritsa ntchito ma padding kuti apange zogawa zokulirapo (mwachitsanzo, <hr class="py-1">).

• Bwezeretsani zopingasa padding-leftzokhazikika <ul>ndi <ol>zinthu kuchokera pa msakatuli wokhazikika 40pxkupita ku 2rem.

• Yowonjezedwa $enable-smooth-scroll, yomwe imagwira ntchito scroll-behavior: smoothpadziko lonse lapansi-kupatula ogwiritsa ntchito omwe amapempha kuti achepetse kuyenda kudzera prefers-reduced-motionpafunso lazama TV. Onani #31877

RTL

• Zosintha, zofunikira, ndi zosakaniza zonse zasinthidwa kuti zigwiritse ntchito zinthu zomveka ngati zomwe zimapezeka mumapangidwe a flexbox - mwachitsanzo, startm'malo endmwa leftndi right.

Mafomu

• Anawonjezera mafomu oyandama atsopano! Takwezera chitsanzo cha zilembo zoyandama kuti zikhale zogwirizana ndi mawonekedwe. Onani tsamba latsopano la zilembo zoyandama.

• Kuswa Zophatikiza zachilengedwe komanso mawonekedwe amtundu. Mabokosi, mawailesi, zosankhidwa, ndi zolowa zina zomwe zinali ndi makalasi achibadwidwe ndi okonda mu v4 aphatikizidwa. Tsopano pafupifupi mawonekedwe athu onse ndi makonda, ambiri popanda kufunikira kwa HTML yachizolowezi.

  • .custom-control.custom-checkboxndi tsopano .form-check.
  • .custom-control.custom-custom-radiondi tsopano .form-check.
  • .custom-control.custom-switchndi tsopano .form-check.form-switch.
  • .custom-selectndi tsopano .form-select.
  • .custom-filendipo .form-fileasinthidwa ndi masitayelo achikhalidwe pamwamba pa .form-control.
  • .custom-rangendi tsopano .form-range.
  • Wagwetsa wamba .form-control-filendi .form-control-range.

• KuswaWagwa .input-group-appendndi .input-group-prepend. Tsopano mutha kungowonjezera mabatani komanso .input-group-textmonga ana achindunji amagulu olowetsa.

• Malo otalikirapo am'malire omwe Akusoweka pagulu lolowetsamo okhala ndi cholakwika chotsimikizira amakhazikika powonjezera .has-validationkalasi yowonjezera kumagulu olowetsamo ndi kutsimikizira.

• Kuswa Makalasi asiyanitsidwa ndi mawonekedwe amtundu wa gridi yathu. Gwiritsani ntchito gridi yathu ndi zofunikira m'malo mwa .form-group, .form-row, kapena .form-inline.

• KuswaZolemba zama fomu tsopano zimafunikira .form-label.

• Kuswa .form-textnosets display, kukulolani kuti mupange zolemba zapaintaneti kapena zotchinga monga momwe mukufunira posintha chinthu cha HTML.

• Kuwongolera mafomu sikugwiritsidwanso ntchito mokhazikika heightngati kuli kotheka, m'malo mwake akungofuna min-heightkusintha makonda ndi kugwirizanitsa ndi zigawo zina.

• Zizindikiro zotsimikizira sizikugwiritsidwanso ntchito ku <select>s ndi multiple.

• Mafayilo okonzedwanso a Sass pansi pa scss/forms/, kuphatikiza masitaelo amagulu olowa.

Zigawo

• Makhalidwe paddingogwirizana a zidziwitso, zinyenyeswazi, makadi, zotsikira, magulu amndandanda, ma modals, popovers, ndi zida zothandizira kutengera $spacerkusinthika kwathu. Onani #30564 .

Accordion

• Anawonjezera gawo latsopano la accordion .

Zidziwitso

• Zochenjeza tsopano zili ndi zitsanzo zokhala ndi zithunzi .

• Kuchotsa masitayelo a <hr>s mu chenjezo lililonse popeza amagwiritsa ntchito kale currentColor.

Mabaji

• KuswaYagwetsa .badge-*makalasi onse amitundu pazinthu zakumbuyo (mwachitsanzo, gwiritsani ntchito .bg-primarym'malo mwa .badge-primary).

• KuswaWataya .badge-pill- gwiritsani ntchito .rounded-pillzofunikira m'malo mwake.

• KuswaKuchotsedwa kwa hover ndi masitayelo olunjika a zinthu <a>ndi <button>zinthu.

• Kuchulukitsa zosunga zokhazikika zamabaji kuchokera .25em/ .5emmpaka .35em/ .65em.

Zinyenyeswazi za mkate

• Kufewetsa mawonekedwe osasinthika a breadcrumbs pochotsa padding, background-color, ndi border-radius.

• Onjezani katundu watsopano wa CSS --bs-breadcrumb-dividerkuti musinthe makonda osafunikira kukonzanso CSS.

Mabatani

• Kuswa Mabatani osinthira , okhala ndi ma cheki kapena mawayilesi, safunanso JavaScript ndikukhala ndi chizindikiro chatsopano. Sitikufunanso chinthu chokulunga, onjezani.btn-checkku<input>, ndikuchiphatikiza ndi.btnmakalasi aliwonse pa<label>. Onani #30650 . Zolemba za izi zachoka patsamba lathu la Mabatani kupita ku gawo latsopano la Mafomu.

• Kuswa Zatsitsidwa .btn-blockzothandizira. M'malo mogwiritsa ntchito .btn-block, .btnsungani mabatani anu ndi .d-gridzofunikira .gap-*kuti muwayike ngati pakufunika. Sinthani ku makalasi omvera kuti muwongolere kwambiri. Werengani zolemba za zitsanzo zina.

• Zosintha zathu button-variant()ndi button-outline-variant()zosakaniza kuti zithandizire magawo ena.

• Mabatani osinthidwa kuti muwonetsetse kuti pali kusiyana pakati pa hover ndi zomwe zikugwira ntchito.

• Mabatani olemala tsopano ali ndi pointer-events: none;.

Khadi

• KuswaYagwera .card-deckmokomera gridi yathu. Manga makhadi anu m'makalasi amzambiri ndikuwonjezera .row-cols-*chidebe cha makolo kuti mukonzenso makhadi (koma ndikuwongolera kuwongolera komvera).

• KuswaAdagwera .card-columnsmokomera Masonry. Onani #28922 .

• KuswaM'malo mwa .cardaccordion yokhazikitsidwa ndi gawo latsopano la Accordion .

Carousel

• Onjezani kusinthika kwatsopano .carousel-darkkwamawu akuda, zowongolera, ndi zowonetsa (zabwino pazopepuka).

• M'malo mwa zithunzi za chevron zowongolera ma carousel ndi ma SVG atsopano kuchokera ku Zithunzi za Bootstrap .

Tsekani batani

• KuswaAdasinthidwa .closekukhala .btn-closedzina locheperako.

• Tsekani mabatani tsopano gwiritsani ntchito background-image(SVG yophatikizidwa) m'malo mwa ×HTML, kulola kuti muzitha kusintha mosavuta popanda kufunikira kukhudza chizindikiro chanu.

• Onjezani zosintha zatsopano .btn-close-whitezomwe zimagwiritsa ntchito filter: invert(1)kuti zitheke kusiyanitsa zithunzi zamtundu wakuda.

Kugwa

• Anachotsa mpukutu anangula kwa accordions.

Zotsitsa

• Onjezani zosintha zatsopano .dropdown-menu-darkkomanso zofananira pazotsitsa zakuda zomwe mukufuna.

• Adawonjezera kusintha kwatsopano kwa $dropdown-padding-x.

• Idayimitsa chogawaniza chotsitsa kuti chiwongoleredwe bwino.

• KuswaZochitika zonse zotsitsa tsopano zayambika pa batani lotsitsa ndikusinthidwa mpaka chinthu cha makolo.

• Mindandanda yotsitsa tsopano ili ndi mawonekedwe data-bs-popper="static"pomwe malo otsikira ali osasunthika, kapena kutsika kuli mu navbar. Izi zimawonjezedwa ndi JavaScript yathu ndipo imatithandiza kugwiritsa ntchito masitayelo anthawi zonse osasokoneza momwe Popper amayika.

• KuswaNjira yogwetsedwa flipya pulogalamu yowonjezera yotsitsa m'malo mwa kasinthidwe ka Popper. Tsopano mutha kuletsa kusunthaku podutsa mndandanda wopanda kanthu kuti fallbackPlacementsmusankhe mu flip modifier.

• Ma menyu otsikira tsopano akhoza kudinanso ndi njira yatsopano yothanirana ndi machitidwe autoCloseotseka okha . Mutha kugwiritsa ntchito njirayi kuti muvomereze kudina mkati kapena kunja kwa menyu yotsitsa kuti igwirizane.

• Dropdowns tsopano kuthandizira .dropdown-itemkukulungidwa mu <li>s.

Jumbotron

• KuswaYagwetsa gawo la jumbotron chifukwa lingafanane ndi zofunikira. Onani chitsanzo chathu chatsopano cha Jumbotron chawonetsero.

Lembani gulu

• .list-group-numberedOnjezani zosintha zatsopano pamndandanda wamagulu.

Navs ndi tabu

• nullOnjezani zosintha zatsopano za font-size, font-weight, color, ndi :hover colorkalasi .nav-link.

Navbar

• KuswaMa Navbars tsopano amafunikira chidebe mkati (kuti achepetseko zofunikira za malo ndi CSS yofunikira).
• KuswaKalasi .activesilingagwiritsidwenso ntchito ku .nav-items, liyenera kugwiritsidwa ntchito mwachindunji pa .nav-links.

Offcanvas

• Anawonjezera gawo latsopano la offcanvas .

Pagination

• Maulalo amitundu tsopano ali ndi makonda margin-leftomwe amazunguliridwa pamakona onse akasiyanitsidwa.

• Adawonjezedwa transitionku maulalo amitundu.

Popovers

• KuswaAdasinthidwa .arrowkukhala .popover-arrowmu popover template yathu yokhazikika.

• Njira whiteListyosinthidwa kuti allowList.

Ma spinner

• Spinners tsopano amalemekeza prefers-reduced-motion: reducepochepetsa makanema ojambula. Onani #31882 .

• Kuwongolera molunjika kwa spinner.

Toast

• Ma toast tsopano akhoza kuikidwa mu a mothandizidwa ndi malo opangira zinthu ..toast-container

• Zasinthitsa nthawi yosasinthika ya toast kukhala masekondi 5.

• Amachotsedwa overflow: hiddenku toasts ndikusinthidwa ndi border-radiuss yoyenera ndi calc()ntchito.

Malangizo

• KuswaAdasinthidwa .arrowkukhala .tooltip-arrowpachida chathu chokhazikika.

• KuswaMtengo wokhazikika wa chinthucho fallbackPlacementsumasinthidwa kuti ['top', 'right', 'bottom', 'left']ukhazikike bwino zinthu za popper.

• KuswaNjira whiteListyosinthidwa kuti allowList.

Zothandizira

• KuswaAdasinthidwanso zida zingapo kuti agwiritse ntchito mayina azinthu zomveka m'malo mwa mayina olowera ndikuwonjezera thandizo la RTL:

  • Kusinthidwa .left-*ndi .right-*ku .start-*ndi .end-*.
  • Kusinthidwa .float-leftndi .float-rightku .float-startndi .float-end.
  • Kusinthidwa .border-leftndi .border-rightku .border-startndi .border-end.
  • Kusinthidwa .rounded-leftndi .rounded-rightku .rounded-startndi .rounded-end.
  • Kusinthidwa .ml-*ndi .mr-*ku .ms-*ndi .me-*.
  • Kusinthidwa .pl-*ndi .pr-*ku .ps-*ndi .pe-*.
  • Kusinthidwa .text-leftndi .text-rightku .text-startndi .text-end.

• KuswaKuyimitsa malire oletsa mwachisawawa.

• Anawonjezera .bg-bodykalasi yatsopano kuti <body>muyike maziko a '' kuzinthu zowonjezera.

• Onjezani zida zatsopano za , top, right, bottomndi left. Miyezo imaphatikizapo 0, 50%, ndi 100%katundu aliyense.

• Onjezani zatsopano .translate-middle-x& .translate-middle-yzofunikira pazopingasa kapena zopindika pakati pa zinthu zokhazikika / zokhazikika.

• Anawonjezera zida border-widthzatsopano .

• KuswaAdasinthidwa .text-monospacekukhala .font-monospace.

• KuswaYachotsedwa .text-hidechifukwa ndi njira yakale yobisa mawu yomwe siyenera kugwiritsidwanso ntchito.

• Zowonjezera .fs-*zothandizira font-size(zothandizidwa ndi RFS). Izi zimagwiritsa ntchito sikelo yofanana ndi mitu yokhazikika ya HTML (1-6, yayikulu mpaka yaying'ono), ndipo imatha kusinthidwa kudzera pamapu a Sass.

• KuswaZothandizira .font-weight-*zosinthidwa ngati .fw-*zazifupi komanso zosasinthika.

• KuswaZothandizira .font-style-*zosinthidwa ngati .fst-*zazifupi komanso zosasinthika.

• Zowonjezedwa .d-gridkuti ziwonetsere zofunikira ndi zatsopano gap( .gap) za CSS Grid ndi masanjidwe a flexbox.

• KuswaKuchotsedwa .rounded-smndi rounded-lg, ndikuyambitsa makalasi atsopano, .rounded-0kuti .rounded-3. Onani #31687 .

• Zowonjezera zatsopano line-height: .lh-1, .lh-sm, .lh-basendi .lh-lg. Onani apa .

• Yasuntha .d-nonezofunikira mu CSS yathu kuti ikhale yolemetsa kuposa zida zina zowonetsera.

• Anawonjezera .visually-hidden-focusablewothandizira kuti agwiritsenso ntchito pazitsulo, pogwiritsa ntchito :focus-within.

Othandizira

• Kuswa Othandizira omangika omvera asinthidwa kukhala othandizira chiŵerengero chokhala ndi mayina atsopano a kalasi ndi makhalidwe abwino, komanso kusintha kwa CSS kothandiza.

  • Makalasi asinthidwa kuti asinthe bykukhala xmulingo wa gawo. Mwachitsanzo, .ratio-16by9tsopano .ratio-16x9.
  • Tasiya .embed-responsive-itemkusankha ndi ma element gulu kuti tisankhe chosavuta .ratio > *. Palibenso kalasi yomwe ikufunika, ndipo wothandizira chiŵerengero tsopano akugwira ntchito ndi chinthu chilichonse cha HTML.
  • Mapu $embed-responsive-aspect-ratiosa Sass adasinthidwanso $aspect-ratiosndipo mfundo zake zasinthidwa kuti ziphatikizepo dzina la kalasi ndi kuchuluka kwake ngati key: valueawiriwo.
  • Zosintha za CSS tsopano zapangidwa ndikuphatikizidwa pamtengo uliwonse pamapu a Sass. Sinthani kusintha kwa --bs-aspect-ratiokusintha .ratiokuti mupange mawonekedwe amtundu uliwonse .

• Kuswa Makalasi a "owerenga pazithunzi" tsopano ndi makalasi "obisika" .

  • Kusintha fayilo ya Sass scss/helpers/_screenreaders.scsskukhalascss/helpers/_visually-hidden.scss
  • Kusinthidwa .sr-onlyndi .sr-only-focusableku .visually-hiddenndi.visually-hidden-focusable
  • Amasinthidwa sr-only()ndi sr-only-focusable()kusakaniza kuti visually-hidden()ndi visually-hidden-focusable().

• bootstrap-utilities.csstsopano mulinso otithandizira. Othandizira sakufunikanso kutumizidwa kunja muzomangamanga.

JavaScript

• Kudalira kwa jQuery kwagwetsa ndikulembanso mapulagini kuti akhale mu JavaScript yokhazikika.

• KuswaMawonekedwe a data pamapulagini onse a JavaScript tsopano ali ndi mayina kuti athandizire kusiyanitsa magwiridwe antchito a Bootstrap ndi anthu ena komanso nambala yanu. Mwachitsanzo, timagwiritsa ntchito data-bs-togglem'malo mwa data-toggle.

• Mapulagini onse tsopano atha kuvomereza chosankha cha CSS ngati mkangano woyamba. Mutha kudutsa chinthu cha DOM kapena chosankha chilichonse chovomerezeka cha CSS kuti mupange chitsanzo chatsopano cha pulogalamu yowonjezera:

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

• popperConfigikhoza kuperekedwa ngati ntchito yomwe imavomereza kusinthika kwa Popper ya Bootstrap ngati mkangano, kuti muthe kuphatikizira kasinthidwe kameneka m'njira yanu. Imagwira ntchito ku dropdowns, popovers, ndi tooltips.

• Mtengo wosasinthika wa zinthuzo fallbackPlacementsumasinthidwa kuti ['top', 'right', 'bottom', 'left']ukhazikike bwino zinthu za Popper. Imagwira ntchito ku dropdowns, popovers, ndi tooltips.

• Kuchotsedwa kwapansi panjira zapagulu monga _getInstance()→ getInstance().