Ho fallela ho v5

v5.2.0

Moqapi o khathollang

Bootstrap v5.2.0 e na le ntlafatso e poteletseng ea moralo bakeng sa likarolo tse seng kae le thepa ho pholletsa le morero, haholo-holo ka litekanyetso tse hloekisitsoengborder-radius holim'a likonopo le li-control tsa liforomo . Litokomane tsa rona le tsona li nchafalitsoe ka leqephe le lecha la lehae, moralo o bonolo oa litokomane o seng o sa putlame likarolo tsa lehlakore, le mehlala e hlahelletseng ea Litšoantšo tsa Bootstrap .

Mefuta e mengata ea CSS

Re ntlafalitse likarolo tsohle tsa rona ho sebelisa mefuta-futa ea CSS. Le hoja Sass e ntse e tšehetsa ntho e 'ngoe le e' ngoe, karolo e 'ngoe le e' ngoe e nchafalitsoe ho kenyelletsa mefuta-futa ea CSS lihlopheng tsa motheo tsa likarolo (mohlala, .btn), e lumellang hore ho be le tloaelo ea nako ea sebele ea Bootstrap. Litokollong tse latelang, re tla tsoelapele ho atolosa tšebeliso ea rona ea mefuta-futa ea CSS ho ea ka sebopeho sa rona, liforomo, bathusi le lisebelisoa tsa rona. Bala haholoanyane ka mefuta-futa ea CSS karolong e 'ngoe le e 'ngoe maqepheng a eona a litokomane.

Tšebeliso ea rona ea mefuta-futa ea CSS e tla batla e sa fella ho fihlela Bootstrap 6. Leha re ka thabela ho kenya ts'ebetsong tsena ka botlalo ho pholletsa le boto, li na le kotsi ea ho baka liphetoho tse senyehang. Ka mohlala, ho beha $alert-border-width: var(--bs-border-width)khoutu ea mohloli oa rona ho senya Sass e ka bang teng khoutu ea hau haeba u ne u etsa joalo $alert-border-width * 2ka lebaka le itseng.

Ka hona, hohle moo ho ka khonehang, re tla tsoelapele ho hatela pele ho mefuta e mengata ea CSS, empa ka kopo hlokomela hore ts'ebetso ea rona e ka fokotsoa hanyane ho v5.

E ncha_maps.scss

Bootstrap v5.2.0 e hlahisitse faele e ncha ea Sass ka _maps.scss. E hula limmapa tse 'maloa tsa Sass _variables.scssho rarolla bothata moo lintlafatso tsa' mapa oa mantlha li sa kang tsa sebelisoa ho limmapa tsa bobeli tse li atolosang. Mohlala, lintlafatso $theme-colorsli ne li sa sebelisoe ho limmapa tse ling tsa sehlooho tse neng li itšetlehile ka $theme-colors, ho senya ts'ebetso ea ts'ebetso ea mantlha. Ka bokhuts'oane, Sass e na le moeli moo hang ha mofuta oa kamehla kapa 'mapa o se o sebelisitsoe , o ke ke oa nchafatsoa. Ho na le khaello e ts'oanang le mefuta ea CSS ha e sebelisoa ho theha mefuta e meng ea CSS.

Ke ka lebaka lena litloaelo tse fapaneng ho Bootstrap li tlamehang ho tla kamora @import "functions", empa pele @import "variables"le tse ling kaofela tsa lintho tse tsoang kantle ho naha. Hoa tšoana le ho limmapa tsa Sass - u tlameha ho hlokomoloha li-default pele li sebelisoa. Limmapa tse latelang li fetiselitsoe ho tse ncha _maps.scss:

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

Mokhoa oa hau oa tloaelo oa Bootstrap CSS o lokela ho shebahala tjena ka ho kenya limmapa tse fapaneng.

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

Lisebelisoa tse ncha

• Lisebelisoa tse atolositsoeng ho kenyelletsa font-weightlifonti.fw-semibold tsa semibold.
• border-radiusLisebelisoa tse atolositsoeng ho kenyelletsa mefuta e 'meli e mecha, .rounded-4le .rounded-5, bakeng sa likhetho tse ling.

Liphetoho tse ling

• $enable-container-classesKhetho e ncha e hlahisitsoe . - Joale ha u khetha ho kena molemong oa liteko tsa CSS Grid, .container-*litlelase li ntse li tla hlophisoa, ntle le haeba khetho ena e behiloe ho false. Li-container le tsona joale li boloka boleng ba tsona.

• Karolo ea Offcanvas hona joale e na le mefuta e fapaneng e arabelang . Sehlopha sa pele .offcanvasse lula se sa fetohe - se pata litaba ho libaka tsohle tsa pono. Ho etsa hore e arabele, fetola sehlopha seo .offcanvasho sehlopha sefe kapa sefe .offcanvas-{sm|md|lg|xl|xxl}.

• Likarohano tsa litafole tse teteaneng li se li khetha ho kena. - Re tlositse moeli o motenya le o thata ho feta oa ho tlola moeli lipakeng tsa lihlopha tsa litafole mme ra o isa sehlopheng sa boikhethelo seo u ka se sebelisang, .table-group-divider. Sheba litokomane tsa tafole ka mohlala.

• Scrollspy e ngotsoe bocha ho sebelisa Intersection Observer API , ho bolelang hore ha u sa hloka li-wrappers tsa motsoali, li-offsetdeprecates config, le tse ling. Batla hore ts'ebetso ea hau ea Scrollspy e nepahale le ho ts'oara maemo a bona a nav.

• Li-Popovers le lisebelisoa tsa lisebelisoa joale li sebelisa mefuta-futa ea CSS. Mefuta e meng ea CSS e ntlafalitsoe ho tsoa ho balekane ba bona ba Sass ho fokotsa palo ea mefuta. Ka lebaka leo, mefuta e meraro e tlositsoe tokollong ena: $popover-arrow-color, $popover-arrow-outer-color, le $tooltip-arrow-color.

• .text-bg-{color}E kentse bathusi ba bacha . Sebakeng sa ho beha lisebelisoa tsa motho ka mong .text-*le .bg-*lisebelisoa, joale u ka sebelisa bathusi ho.text-bg-* theha background-colorbokapele bo fapaneng color.

• Ho .form-check-reversekentsoe se feto-fetohang ho fetola tatellano ea lileibole le li-checkbox tse amanang le tsona.

• E kenyellelitsoe likholomo tse metsero litafoleng ka sehlopha se secha .table-striped-columns.

Bakeng sa lenane le feletseng la liphetoho, bona morero oa v5.2.0 ho GitHub .

v5.1.0

• E kentse tšehetso ea liteko bakeng sa sebopeho sa Grid ea CSS . - Ona ke mosebetsi o ntseng o tsoela pele, 'me ha o e-s'o lokele ho sebelisoa, empa o ka kena karolong e ncha ka Sass. Ho e nolofalletsa, tima grid ea kamehla, ka ho beha $enable-grid-classes: falsele ho nolofalletsa CSS Grid ka ho beha $enable-cssgrid: true.

• Li-navbar tse ntlafalitsoeng ho tšehetsa offcanvas. - Eketsa li-drawer tsa offcanvas ka har'a navbar efe kapa efe ka .navbar-expand-*litlelase tse arabelang le matšoao a mang a offcanvas.

• E kentse karolo e ncha ea setšoantšisi . - Karolo ea rona e ncha, mokhoa oa ho fana ka lithibelo tsa nakoana sebakeng sa litaba tsa 'nete ho thusa ho bonts'a hore ho na le ho hong ho ntseng ho hlaha sebakeng sa hau sa marang-rang kapa sesebelisoa.

• Ho putlama plugin hona joale e ts'ehetsa ho putlama ho hoholo . - Eketsa .collapse-horizontalho hau .collapseho putlama ho e width-na le height. Qoba ho penta bocha sebatli ka ho seta min-heightkapa height.

• E kentse li-stack tse ncha le bathusi ba melao e emeng. - Kenya lisebelisoa tse ngata tsa flexbox kapele ho theha meralo e tloaelehileng ka mekoloko . Kgetha ho tse tshekaletseng ( .hstack) le tse otlolohileng ( .vstack) mekgobo. Kenya li- divider tse otlolohileng tse ts'oanang le <hr>likarolo ka lithusi tse ncha.vr .

• E kentse mefuta e mecha ea :rootCSS ea lefats'e. - E kentse mefuta e mengata e mecha ea CSS :rootboemong ba ho laola <body>mekhoa. Tse ling li teng mesebetsing, ho kenyeletsoa lits'ebeletso tsa rona le likarolo, empa hajoale bala mefuta e fapaneng ea CSS karolong ea Customize .

• Lisebelisoa tse ntlafalitsoeng tsa mebala le bokamorao ho sebelisa mefuta-futa ea CSS, le ho eketsa khanya e ncha ea mongolo le lisebelisoa tsa ho bonesa bokamorao. - .text-* 'me .bg-*lits'ebeletso li se li hahiloe ka mefuta e fapaneng ea CSS le rgba()boleng ba mebala, e u lumellang hore u iketsetse ts'ebeliso efe kapa efe ka lisebelisoa tse ncha tsa opacity.

• E kentse mehlala e mecha ea snippet e thehiloeng ho bonts'a mokhoa oa ho etsa likarolo tsa rona. - Hula u itokiselitse ho sebelisa likarolo tse ikhethileng le mekhoa e meng e tloaelehileng ea meralo ka mehlala ea rona e mecha ea Li- Snippets . E kenyelletsa botlaaseng , marotholi , lihlopha tsa lenane , le mekhoa .

• E tlositse mekhoa e sa sebelisoeng ea maemo ho li-popovers le lisebelisoa tsa lisebelisoa kaha tsena li sebetsoa ke Popper feela. $tooltip-margine tlositsoe 'me e behiloe nullmolemong oa ts'ebetso.

U batla lintlha tse ling? Bala poso ea blog ea v5.1.0.

Ho itšetleha

• jQuery e oele.
• E ntlafalitsoe ho tloha ho Popper v1.x ho ea ho Popper v2.x.
• E ile ea nkela Libsass sebaka ka Dart Sass joalo ka ha moqapi oa rona oa Sass o fuoe Libsass o ile oa tlosoa.
• E falletse ho tloha Jekyll ho ea Hugo bakeng sa ho haha ​​​​litokomane tsa rona

Tšehetso ea sebatli

• E theohile Internet Explorer 10 le 11
• E theohile Microsoft Edge <16 (Legacy Edge)
• E theohile Firefox <60
• Safari e oeleng <12
• E theohile iOS Safari <12
• Chrome e theohile <60

Litokomane lia fetoha

• Leqephe la lehae le hlophisitsoeng bocha, sebopeho sa litokomane, le botlaaseng ba leqephe.
• Tataiso e ncha e kentsoeng ea Parcel .
• E kentse karolo e ncha ea Customize , e nkelang leqephe la Theming ea v4 , ka lintlha tse ncha ho Sass, likhetho tsa tlhophiso ea lefats'e, merero ea mebala, mefuta-futa ea CSS, le tse ling.
• E hlophisitse bocha litokomane tsohle tsa foromo ka karolo e ncha ea Liforomo , e arola litaba ka maqephe a tsepamisitsoeng haholo.
• Ka mokhoa o ts'oanang, e ntlafalitse karolo ea Layout , ho hlahisa litaba tsa grid ka mokhoa o hlakileng haholoanyane.
• E rehiloe bocha leqephe la karolo ea "Navs" ho "Navs & Tabs".
• E rehiloe lebitso la leqephe la "Checks" ho "Checks & radios".
• E ntlafalitse sebaka sa marang-rang 'me sa eketsa subnav e ncha ho etsa hore ho be bonolo ho potoloha libaka tsa rona le liphetolelo tsa litokomane.
• E kentse khaoletso e ncha ea keyboard bakeng sa sebaka sa ho batla: Ctrl + /.

Sass

• Re lahlile likhokahano tsa 'mapa oa Sass ho etsa hore ho be bonolo ho tlosa boleng bo sa hlokahaleng. Hopola hore joale o tlameha ho hlalosa boleng bohle ho limmapa tsa Sass joalo ka $theme-colors. Sheba mokhoa oa ho sebetsana le limmapa tsa Sass .

• Ho senya Renamed color-yiq()mosebetsi le mefuta e amanang le eona color-contrast()kaha ha e sa amana le sebaka sa mebala sa YIQ. Sheba #30168.

  • $yiq-contrasted-thresholde rehelletsoe ka $min-contrast-ratio.
  • $yiq-text-dark'me $yiq-text-lightka ho latellana ba rehoa bocha ho $color-contrast-darkle $color-contrast-light.

• Breaking Media query mixins parameters e fetohile bakeng sa mokhoa o utloahalang haholoanyane.

  • media-breakpoint-down()e sebelisa sebaka sa phomolo ka bosona ho fapana le sebaka se latelang sa khefu (mohlala, media-breakpoint-down(lg)ho fapana le media-breakpoint-down(md)litebello tse nyane ho feta lg).
  • Ka mokhoa o ts'oanang, paramethara ea bobeli ho media-breakpoint-between()eona e sebelisa sebaka sa phomolo ka boeona ho fapana le sebaka se latelang sa phomolo (mohlala, media-between(sm, lg)sebakeng sa media-breakpoint-between(sm, md)litebello tsa pono lipakeng tsa smle lg).

• Ho senya Tlosa mekhoa ea khatiso le $enable-print-stylesho fetoha. Litlelase tsa ponts'o ea khatiso li ntse li le teng. Sheba #28339 .

• Breaking Dropped color(), theme-color(), le gray()mesebetsi molemong oa mefuta-futa. Sheba #29083 .

• Ho senya Renamed theme-color-level()mosebetsi ho color-level()hona joale o amohela 'mala ofe kapa ofe oo o o batlang ho e-na le $theme-colormebala feela. Bona #29083 Hlokomela: color-level() hamorao e ile ea theoha v5.0.0-alpha3.

• Ho qhetsola Ho rehelloa bocha $enable-prefers-reduced-motion-media-queryle $enable-pointer-cursor-for-buttonsho isa $enable-reduced-motionle $enable-button-pointersbakeng sa bokgutshoanyane.

• Ho senya Tlosa bg-gradient-variant()motsoako. Sebelisa .bg-gradientsehlopha ho kenya li-gradient ho likarolo ho fapana le .bg-gradient-*litlelase tse hlahisitsoeng.

• Breaking E tlositsoe metsoako e neng e sa sebelisoe pele:

  • hover,,, le hover-focus_plain-hover-focushover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(e boetse e lahlile sehlopha sa lisebelisoa tse amanang, .text-hide)
  • visibility()
  • form-control-focus()

• Ho senya Renamed scale-color()ts'ebetso ho shift-color()qoba ho thulana le ts'ebetso ea Sass ea ho lekanya mebala.

• box-shadowli-mixins joale li lumella nullboleng le ho theoha noneho tsoa likhang tse ngata. Sheba #30394 .

• Hona border-radius()joale mixin e na le boleng ba kamehla.

Mokhoa oa mebala

• Sistimi ea mebala e neng e sebetsa le color-level()e $theme-color-intervaltlositsoeng molemong oa sistimi e ncha ea mebala. Tsohle lighten()le darken()mesebetsi ho codebase ea rona e nkeloa sebaka ke tint-color()le shade-color(). Mesebetsi ena e tla kopanya 'mala le o mosoeu kapa o motšo ho e-na le ho fetola khanya ea oona ka tekanyo e tsitsitseng. E shift-color()tla etsa hore 'mala o be o khanyang kapa o tlose 'mala ho latela hore na boima ba eona bo nepahetse kapa bo fosahetse. Sheba #30622 bakeng sa lintlha tse ling.

• E kentse mebala le mebala e mecha bakeng sa 'mala o mong le o mong, e fana ka mebala e robong e arohaneng bakeng sa' mala o mong le o mong oa motheo, e le mefuta e mecha ea Sass.

• Phapang ea mebala e ntlafalitsoeng. Karolelano ea mebala e fapaneng ho tloha ho 3:1 ho isa ho 4.5:1 le mebala e ntlafalitsoeng ea boputsoa, ​​​​botala, cyan, le pinki ho netefatsa phapang ea WCAG 2.1 AA. E boetse e fetotse 'mala oa rona o fapaneng oa mebala ho tloha $gray-900ho $black.

• Ho ts'ehetsa sistimi ea rona ea mebala, re kentse tloaelo tint-color()le shade-color()mesebetsi e mecha ho kopanya mebala ea rona ka nepo.

Lintlafatso tsa grid

• Qeto e ncha! E kentse sebaka sa phomolo se secha xxlbakeng sa 1400pxle holimo. Ha ho liphetoho libakeng tse ling kaofela.

• Li-gutters tse ntlafalitsoeng. Li-Gutters li se li behiloe ka li-rems, 'me li tšesaane ho feta v4 ( 1.5rem, kapa hoo e ka bang 24px, ho tloha ho 30px). Sena se hokahanya likhoele tsa sistimi ea rona le lisebelisoa tsa rona tsa sebaka.

  • E kentse sehlopha se secha sa li-gutter ( .g-*, .gx-*, le .gy-*) ho laola li-gutter tse tšekaletseng/tse emeng, li-gutter tse tšekaletseng, le li-gutter tse emeng.
  • Breaking Renamed .no-guttersho .g-0tsamaisana le lisebelisoa tse ncha tsa gutter.

• Likholomo ha li sa position: relativesebetsa, kahoo u ka tlameha ho kenya .position-relativelikarolo tse ling ho khutlisetsa boitšoaro boo.

• Ho robeha ho ile ha theola lihlopha tse 'maloa .order-*tseo hangata li neng li sa sebelisoe. Hona joale re fana feela ka .order-1ntle .order-5ho lebokose.

• Ho robeha ho thehile .mediakarolo kaha e ka kopitsoa habonolo le lisebelisoa. Sheba #28265 le leqephe la lisebelisoa tsa flex mohlala .

• Ho robeha bootstrap-grid.css hona joale ho sebetsa feela kholomong box-sizing: border-boxho e-na le ho tsosolosa boholo ba lebokose la lefats'e. Ka tsela ena, mekhoa ea rona ea grid e ka sebelisoa libakeng tse ngata ntle le tšitiso.

• $enable-grid-classesha e sa thibela tlhahiso ea lihlopha tsa lijana. Sheba #29146.

• E ntlafalitse make-colmixin hore e be ea kamehla ho likholomo tse lekanang ntle le boholo bo boletsoeng.

Content, Reboot, joalo-joalo

• Hona joale RFS e sebelisoa ke kamehla. Lihlooho tse sebelisangfont-size()mixin li tla ikamahanya le maemo a tsonafont-sizele sebaka sa pono. Karolo ena e kile ea khetha ho kena ka v4.

• Breaking E ntlafalitse typography ea rona ho fetola $display-*mefuta ea rona le $display-font-sizes'mapa oa Sass. E boetse e tlositse $display-*-weightmefuta-futa ea motho ka mong bakeng sa s e le 'ngoe $display-font-weightle e lokisitsoeng font-size.

• .display-*E ekelitse boholo ba lihlooho tse peli tse ncha , .display-5le .display-6.

• Lihokelo li thathamisitsoe ka mokhoa oa kamehla (eseng feela ho hover), ntle le haeba e le karolo ea likarolo tse itseng.

• Litafole tse entsoeng bocha ho nchafatsa litaele tsa tsona le ho li aha bocha ka mefuta ea CSS bakeng sa taolo e eketsehileng holim'a setaele.

• Ho pshatla litafole tsa Nested ha ho sa rua mekhoa.

• Ho robeha .thead-light le .thead-darkho lahloa molemong oa .table-*lihlopha tse fapaneng tse ka sebelisoang bakeng sa likarolo tsohle tsa tafole ( thead, tbody, tfoot, tr, thle td).

• Ho pshatla Motsoako table-row-variant()o rehiloe hape table-variant()mme o amohela li-parameter tse 2 feela: $color(lebitso la mebala) le $value(khoutu ea mebala). 'Mala oa moeli le mebala ea molumo e baloa ka bo eona ho latela mefuta-futa ea tafole.

• Arola mefuta e fapaneng ea padding ea lisele tsa tafole ka har'a -yle -x.

• Ho robeha Ho theohile .pre-scrollablesehlopha. Sheba #29135

• Lisebelisoa .text-* tse robehileng ha li sa eketsa hover le libaka tse tsepamisisang maikutlo ho lihokelo. .link-*litlelase tsa bathusi li ka sebelisoa ho e-na le hoo. Sheba #29267

• Ho robeha Ho theohile .text-justifysehlopha. Sheba #29793

• Ho qhetsola <hr>joale lisebelisoa li sebelisoa heightho e-na le borderho tšehetsa sizetšobotsi hamolemo. Sena se boetse se nolofalletsa ts'ebeliso ea lisebelisoa tsa marang-rang ho theha likarohano tse teteaneng (mohlala, <hr class="py-1">).

• Seta botjha ho tsepameng padding-leftle <ul>dikarolo <ol>ho tloha ho ya kamehla ho ya 40pxho 2rem.

• E ekelitsoe $enable-smooth-scroll, e sebetsang scroll-behavior: smoothlefats'eng ka bophara-ntle le basebelisi ba kopang ho fokotsa motsamao ka prefers-reduced-motionpotso ea media. Sheba #31877

RTL

• Mefuta e fapaneng ea tataiso e otlolohileng, lisebelisoa, le li-mixins kaofela li rehiloe lebitso ho sebelisa thepa e utloahalang joalo ka e fumanoang ho flexbox meralo-mohlala, startle endsebakeng sa leftle right.

Mefuta

• E kentse liforomo tse ncha tse phaphametseng! Re khothalelitse mohlala oa "Floating labels" ho likarolo tsa liforomo tse tšehetsoeng ka botlalo. Sheba leqephe le lecha la li-labels tsa Floating.

• Ho senya likarolo tsa tlhaho tse Kopantsoeng le tse ikhethileng. Mabokose a cheke, liea-le-moea, likhetho, le lintho tse ling tse kentsoeng tse neng li e-na le litlelase tsa khale le tsa tloaelo ho v4 li kopantsoe. Hona joale hoo e batlang e le likarolo tsohle tsa rona tsa foromo li tloaelehile ka ho feletseng, haholo ntle le tlhoko ea tloaelo ea HTML.

  • .custom-control.custom-checkboxhona joale .form-check.
  • .custom-control.custom-custom-radiohona joale .form-check.
  • .custom-control.custom-switchhona joale .form-check.form-switch.
  • .custom-selecthona joale .form-select.
  • .custom-file'me .form-fileli nkeloe sebaka ke mekhoa e tloaelehileng holim'a .form-control.
  • .custom-rangehona joale .form-range.
  • Letsoalloa .form-control-filele .form-control-range.

• Ho robeha ho theohile .input-group-appendle .input-group-prepend. Hona joale o ka eketsa likonopo le .input-group-textjoalo ka bana ba tobileng ba lihlopha tsa ho kenya.

• Sebaka sa nako e telele se sieo sa moeli oa sehlopha sa ho kenya se nang le phoso ea netefatso qetellong se tla lokisoa ka ho eketsa .has-validationsehlopha ho lihlopha tse kenyang ka netefatso.

• Ho senya Lihlopha tsa sebopeho se ikhethileng bakeng sa sistimi ea rona. Sebelisa marang-rang le lisebelisoa tsa rona sebakeng sa .form-group, .form-row, kapa .form-inline.

• Li-Labels tsa Breaking Form joale li hloka .form-label.

• Breaking .form-text ha e sa seta display, e u lumellang hore u thehe mongolo oa inline kapa thibela ka mokhoa oo u batlang ka ho fetola karolo ea HTML.

• Taolo ea liforomo ha e sa sebelisoa e tsitsitse heightha ho khoneha, ho e-na le hoo e ikemiseditse ho min-heightntlafatsa ho itlhophisa le ho tsamaisana le dikarolo tse ding.

• Matšoao a netefatso ha a sa sebelisoa ho <select>s le multiple.

• Mohloli o hlophisitsoeng bocha Lifaele tsa Sass tlas'a scss/forms/, ho kenyeletsoa le mekhoa ea lihlopha tsa ho kenya.

Likaroloana

• Maemo a kopaneng paddinga litemoso, li-breadcrumbs, likarete, li-dropdown, lihlopha tsa lenane, li-modal, li-popovers, le malebela a lisebelisoa ho ipapisitse le $spacerphapang ea rona. Sheba #30564 .

Accordion

• E kentse karolo e ncha ea accordion .

Litemoso

• Litlhokomeliso joale li na le mehlala e nang le litšoantšo .

• E tlositse mekhoa e tloahelehileng bakeng sa <hr>s tlhokomelisong ka 'ngoe kaha ba se ba ntse ba e sebelisa currentColor.

Libeche

• Ho qhaqha Ho lahlile lihlopha tsohle .badge-*tsa mebala bakeng sa lisebelisoa tsa morao-rao (mohlala, sebelisa .bg-primarysebakeng sa .badge-primary).

• Ho robeha .badge-pillho oele - sebelisa sesebelisoa ho .rounded-pille-na le hoo.

• Ho senya Tlosa hover le mekhoa e tsepamisitsoeng bakeng sa <a>le <button>likarolo.

• Keketseho ea li-padding ea kamehla bakeng sa libeche ho tloha ho .25em/ .5emho ea .35em/ .65em.

Li-breadcrumbs

• E nolofalitse ponahalo ea kamehla ea breadcrumbs ka ho tlosa padding, background-color, le border-radius.

• E kentse thepa e ncha ea CSS --bs-breadcrumb-dividerbakeng sa ho e etsa habonolo ntle le ho hloka ho bokella CSS hape.

Likonopo

• Ho senya likonopo tsa Toggle , tse nang le li-checkbox kapa liea-le-moea, ha li sa hloka JavaScript 'me li na le letšoao le lecha. Ha re sa hloka ntho e phuthelang, eketsa .btn-checkho <input>, 'me u e kopanye le lihlopha life kapa life .btntsa <label>. Sheba #30650 . Litokomane tsa sena li tlohile leqepheng la rona la Likonopo ho ea karolong e ncha ea Liforomo.

• Ho robeha ho Lahliloe .btn-blockbakeng sa lisebelisoa. Sebakeng sa ho sebelisa .btn-blockho .btn, thatela likonopo tsa hau ka .d-gridsesebelisoa .gap-*sa ho li beha ha ho hlokahala. Fetohela ho lihlopha tse arabelang ho fumana taolo e eketsehileng holim'a tsona. Bala litokomane bakeng sa mehlala e meng.

• E ntlafalitse rona button-variant()le button-outline-variant()li-mixins ho ts'ehetsa liparamente tse ling.

• Likonopo tse nchafalitsoeng ho netefatsa phapang e ntseng e eketseha ho hover le libaka tse sebetsang.

• Likonopo tse holofetseng li na le pointer-events: none;.

Karete

• Ho robeha .card-deckho theohile molemong oa grid ea rona. Koaela likarete tsa hau ka litlelase tsa likholomo 'me u kenye .row-cols-*setshelo sa motsoali ho etsa li-deck tsa likarete (empa ka taolo e eketsehileng mabapi le tatellano e arabelang).

• Ho robeha ho Oele .card-columnsmolemong oa Masonry. Sheba #28922 .

• Ho robeha Ho nkela sebaka sa .cardaccordion e thehiloeng ka karolo e ncha ea Accordion .

Carousel

• .carousel-darkE kentse mofuta o mocha oa mongolo o lefifi, li-control le matšoao (e ntle bakeng sa nalane e bobebe).

• E nkeloe sebaka ke li-icon tsa chevron bakeng sa taolo ea carousel ka li-SVG tse ncha tse tsoang ho Litšoantšo tsa Bootstrap .

Konopo ea ho koala

• Ho qhetsola Ho reheletsoe .closeho .btn-closebakeng sa lebitso le sa tloaelehang.

• Likonopo tse koalang joale li sebelisa background-image(SVG e kentsoeng) ×sebakeng sa HTML, e u lumellang hore u iketsetse habonolo ntle le tlhoko ea ho ama letšoao la hau.

• E kenyellelitse mofuta o mocha .btn-close-whiteo sebelisang filter: invert(1)ho lumella li-icon tsa phapang tse phahameng khahlano le maemo a lefifi.

Koaleha

• E tlositsoe moqolo oa anchoring bakeng sa li-accordions.

Litheohelang

• E kentse mefuta e mecha .dropdown-menu-darkle e amanang le eona bakeng sa li-dropdown tse lefifi tse batloang.

• E kentse phapano e ncha bakeng sa $dropdown-padding-x.

• E fifalitse karohano ea litheolelo bakeng sa phapang e ntlafetseng.

• Ho senya Liketsahalo tsohle bakeng sa ho theoha hona joale li hlahisoa ho konopo ea toggle e theolelang, 'me li bubble ho fihla karolong ea motsoali.

• Manane a theoha hona joale a na le data-bs-popper="static"sebopeho se behiloeng ha boemo ba ho theoha bo tsitsitse, kapa ho theoha ho navbar. Sena se eketsoa ke JavaScript ea rona mme se re thusa ho sebelisa mekhoa ea maemo a tloaelehileng ntle le ho kena-kenana le boemo ba Popper.

• Khetho ea Breaking Drop flipbakeng sa plugin e theoha molemong oa tlhophiso ea tlhaho ea Popper. Hona joale o ka tima mokhoa oa ho phethola ka ho fetisa lethathamo le se nang letho bakeng sa fallbackPlacementskhetho ea flip modifier.

• Menu e theohang joale e ka tobeha ka autoClosekhetho e ncha ea ho sebetsana le boits'oaro bo haufi-ufi . U ka sebelisa khetho ena ho amohela ho tobetsa ka hare kapa ka ntle ho menu e theoha ho etsa hore e sebelisane.

• Dropdowns joale tšehetso .dropdown-iteme phuthetsoe ka <li>s.

Jumbotron

• Ho robeha ho thehile karolo ea jumbotron kaha e ka kopitsoa ka lisebelisoa. Sheba mohlala oa rona o mocha oa Jumbotron bakeng sa demo.

Sehlopha sa lenane

• .list-group-numberedE kentse phetoho e ncha ho lihlopha tsa lenane.

Navs le li-tab

• nullE kentse mefuta e mecha bakeng sa font-size, font-weight, color, le :hover colorphaposing .nav-link.

Navbar

• Ho senya Navbar hona joale ho hloka setshelo ka hare ho (ho nolofatsa litlhoko tsa sebaka le CSS e hlokahalang).
• Ho senya Sehlopha .activese ke ke sa hlola se sebelisoa ho .nav-items, se tlameha ho sebelisoa ka ho toba ho .nav-links.

Offcanvas

• E kentse karolo e ncha ea offcanvas .

Pagination

• Lihokelo tsa pagination joale li na le mokhoa oa ho ikhethela margin-lefttse pota-potiloeng ka matla likhutlong tsohle ha li arotsoe ho tse ling.

• E kenyellelitsoe transitions ho lihokelo tsa pagination.

Bafutsana

• Ho Fetola Re Renamed .arrowho .popover-arrowtemplate ea rona ea kamehla ea popover.

• whiteListKhetho e reheletsoeng ho allowList.

Li-spinners

• Hona joale li-spinners li hlompha prefers-reduced-motion: reduceka ho fokotsa lipopae. Sheba #31882 .

• Telamiso e otlolohileng ea spinner.

Li-toast

• Hona joale li-toast li ka behoa ho a .toast-containerka thuso ea ho beha lisebelisoa .

• E fetotse nako ea toast ea kamehla ho metsotsoana e 5.

• E tlositsoe overflow: hiddenho toasts mme e nkeloe sebaka ke border-radiuss e nepahetseng ka calc()mesebetsi.

Lisebelisoa

• Ho Fetola Re Rename .arrowto .tooltip-arrowho template ea rona ea kamehla ea lisebelisoa.

• Ho qhekella Boleng ba kamehla bakeng sa fallbackPlacementsho fetotsoe ['top', 'right', 'bottom', 'left']bakeng sa ho beoa hantle ha likarolo tsa popper.

• Ho senya Renamed whiteListkgetho ea ho allowList.

Lisebelisoa

• Ho senya Rena lisebelisoa tse 'maloa ho sebelisa mabitso a thepa a utloahalang ho e-na le mabitso a tataiso ka kenyelletso ea tšehetso ea RTL:

  • E reheletsoe bocha .left-*le .right-*ho .start-*le ho .end-*.
  • E reheletsoe bocha .float-leftle .float-rightho .float-startle ho .float-end.
  • E reheletsoe bocha .border-leftle .border-rightho .border-startle ho .border-end.
  • E reheletsoe bocha .rounded-leftle .rounded-rightho .rounded-startle ho .rounded-end.
  • E reheletsoe bocha .ml-*le .mr-*ho .ms-*le ho .me-*.
  • E reheletsoe bocha .pl-*le .pr-*ho .ps-*le ho .pe-*.
  • E reheletsoe bocha .text-leftle .text-rightho .text-startle ho .text-end.

• Ho senya Mekhabiso e sa sebetseng hantle ka ho sa feleng.

• E kentse sehlopha se secha .bg-bodybakeng sa ho beha semelo sa 'mele kapele ho <body>likarolo tse ling.

• E kentse lisebelisoa tse ncha tsa boemo bakeng sa top, right, bottom, le left. Boleng bo kenyeletsa 0, 50%, le 100%bakeng sa thepa ka 'ngoe.

• E kentse lisebelisoa tse ncha .translate-middle-xle .translate-middle-ylits'ebeletso ho lintho tse maemong a holimo kapa tse theohileng bohareng.

• border-widthE kentse lisebelisoa tse ncha .

• Breaking Renaed .text-monospaceto .font-monospace.

• Breaking Tloswa .text-hidekaha ke mokhoa oa khale oa ho pata mongolo o seng o sa lokela ho sebelisoa.

• Lisebelisoa tse ekelitsoeng .fs-*bakeng sa font-sizelits'ebeletso (ka RFS e lumelletsoe). Tsena li sebelisa sekala se lekanang le lihlooho tsa kamehla tsa HTML (1-6, tse kholo ho isa ho tse nyane), 'me li ka fetoloa ka 'mapa oa Sass.

• Ho senya Renamed .font-weight-*utility e le .fw-*bokhutšoane le botsitso.

• Ho senya Renamed .font-style-*utility e le .fst-*bokhutšoane le botsitso.

• E kentsoe .d-gridho bonts'a lisebelisoa le lisebelisoa tse ncha gap( .gap) bakeng sa Grid ea CSS le meralo ea flexbox.

• Ho senya Tlosa .rounded-smle rounded-lg, le ho hlahisa sekala se secha sa lihlopha, .rounded-0ho .rounded-3. Sheba #31687 .

• E kentse lisebelisoa tse ncha line-height: .lh-1, .lh-sm, .lh-basele .lh-lg. Bona mona .

• E tsamaisitse .d-nonets'ebeliso ho CSS ea rona ho e fa boima bo fetang lisebelisoa tse ling tsa ponts'o.

• Atolosa .visually-hidden-focusablemothusi hore le eena a sebetse ka lijaneng, a sebelisa :focus-within.

Bathusi

• Ho senya Bathusi ba embed ba arabelang ba rehiloe lebitso la bathusi ba karo-karolelano ba nang le mabitso a macha a lihlopha le boitšoaro bo ntlafetseng, hammoho le phetoho e thusang ea CSS.

  • Litlelase li rehelletsoe ka ho feto-fetoha byho xkarolo ea likarolo. Ka mohlala, .ratio-16by9hona joale .ratio-16x9.
  • Re tlohetse khetho ea .embed-responsive-item'me ea lihlopha bakeng sa khetho e bonolo .ratio > *. Ha ho sa hlokahala sehlopha, 'me mothusi oa karo-karolelano hona joale o sebetsa le ntho efe kapa efe ea HTML.
  • ' $embed-responsive-aspect-ratiosMapa oa Sass o rehelletsoe ' $aspect-ratiosme boleng ba ona bo nolofalitsoe ho kenyelletsa lebitso la sehlopha le peresente joalo ka key: valuepara.
  • Mefuta e fapaneng ea CSS e se e entsoe mme e kenyellelitsoe boleng bo bong le bo bong 'mapeng oa Sass. Fetola --bs-aspect-ratiofeto-fetoha ho .ratioho theha karolo efe kapa efe e tloahelehileng .

• Ho senya litlelase tsa "Screen reader" hona joale ke litlelase tse "fitileng ka pono" .

  • Fetola faele ea Sass ho tloha scss/helpers/_screenreaders.scsshoscss/helpers/_visually-hidden.scss
  • E reheletsoe bocha .sr-onlyle .sr-only-focusableho .visually-hiddenle.visually-hidden-focusable
  • E reha bocha sr-only()le sr-only-focusable()metsoako ho visually-hidden()le visually-hidden-focusable().

• bootstrap-utilities.cssjwale le bathusi ba rona. Bathusi ha ba sa tlameha ho romelloa ka har'a meaho e tloaelehileng.

JavaScript

• E theohile ho itšetleha ka jQuery le ho ngola li-plugins bocha hore li be JavaScript e tloaelehileng.

• Litšobotsi tsa Breaking Data bakeng sa li-plugins tsohle tsa JavaScript li se li ngotsoe ka mabitso ho thusa ho khetholla tšebetso ea Bootstrap ho batho ba boraro le khoutu ea hau. Ka mohlala, re sebelisa data-bs-toggleho e-na le data-toggle.

• Li-plugins tsohle joale li ka amohela khetho ea CSS e le khang ea pele. U ka fetisa karolo ea DOM kapa khetho efe kapa efe e nepahetseng ea CSS ho theha mohlala o mocha oa plugin:

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

• popperConfige ka fetisoa e le ts'ebetso e amohelang tlhophiso ea kamehla ea Bootstrap ea Popper joalo ka khang, e le hore o ka kopanya tlhophiso ena ea kamehla tseleng ea hau. E sebetsa ho dropdowns, popover, le tooltips.

• Boleng ba kamehla ba tokollo bo fallbackPlacementsfetotsoe ['top', 'right', 'bottom', 'left']bakeng sa ho beoa hantle ha likarolo tsa Popper. E sebetsa ho dropdowns, popover, le tooltips.

• E tlositsoe underscore ho tsoa mekhoeng e tsitsitseng ea sechaba joalo ka _getInstance()→ getInstance().