Holo i ka ʻike nui Holo i ka hoʻokele docs
Check
in English

Ke neʻe nei i v5

E hahai a nānā i nā loli i nā waihona kumu Bootstrap, nā palapala, a me nā ʻāpana e kōkua iā ʻoe e neʻe mai v4 a i v5.

Ma kēia ʻaoʻao

v5.2.0

Hoʻolālā hou

Hōʻike ʻia ʻo Bootstrap v5.2.0 i kahi hoʻolālā hoʻolālā maʻalahi no ka liʻiliʻi o nā ʻāpana a me nā waiwai ma o ka papahana, ʻoi aku ka nui ma o nā waiwai i hoʻomaʻemaʻe border-radiusʻia ma nā pihi a me nā mana hana . Ua hōʻano hou ʻia kā mākou palapala me kahi ʻaoʻao home hou, ʻoi aku ka maʻalahi o nā palapala palapala ʻaʻole e hāʻule hou i nā ʻāpana o ka ʻaoʻao ʻaoʻao, a me nā hiʻohiʻona kaulana o Bootstrap Icons .

Nā mea hoʻololi CSS hou aku

Ua hōʻano hou mākou i kā mākou ʻāpana āpau e hoʻohana i nā ʻano CSS. ʻOiai ke kākoʻo mau nei ʻo Sass i nā mea a pau, ua hoʻonui ʻia kēlā me kēia ʻāpana e hoʻokomo i nā mea hoʻololi CSS ma nā papa kumu kumu (e laʻa, .btn), e ʻae ana i ka hana maʻamau o Bootstrap. Ma nā hoʻokuʻu ʻana aʻe, e hoʻomau mākou i ka hoʻonui ʻana i kā mākou hoʻohana ʻana i nā ʻano CSS i loko o kā mākou hoʻolālā, nā palapala, nā mea kōkua, a me nā pono hana. E heluhelu hou aʻe e pili ana i nā ʻano CSS i kēlā me kēia ʻāpana ma kā lākou mau palapala palapala.

ʻAʻole paʻa ka hoʻohana ʻana i kā mākou CSS a hiki i ka Bootstrap 6. ʻOiai makemake mākou e hoʻokō pono i kēia mau mea ma ka papa holoʻokoʻa, hiki iā lākou ke hoʻololi i nā loli. No ka laʻana, ʻo ka hoʻonohonoho $alert-border-width: var(--bs-border-width)ʻana i kā mākou kumu kumu e wāwahi ai i ka Sass i kāu code ponoʻī inā ʻoe e hana $alert-border-width * 2nei no kekahi kumu.

No laila, ma nā wahi a pau e hiki ai, e hoʻomau mākou i ka hoʻoikaika ʻana i nā mea hoʻololi CSS hou aʻe, akā e ʻoluʻolu e hoʻomaopopo i ka palena iki o kā mākou hoʻokō ʻana ma v5.

Hou_maps.scss

Ua hoʻokomo ʻo Bootstrap v5.2.0 i kahi faila Sass hou me _maps.scss. Huki ia i kekahi mau palapala ʻāina Sass mai _variables.scsska hoʻoponopono ʻana i kahi pilikia kahi i hoʻopili ʻole ʻia ai nā mea hou i kahi palapala ʻāina kumu i nā palapala ʻāina lua e hoʻonui iā lākou. No ka laʻana, $theme-colorsʻaʻole i hoʻohana ʻia nā mea hou i nā palapala kumumanaʻo ʻē aʻe i hilinaʻi iā $theme-colors, e uhaki ana i nā kahe hana hoʻoponopono kī. I ka pōkole, loaʻa iā Sass ka palena i ka wā i hoʻohana ʻia ai kahi hoʻololi paʻamau a i ʻole palapala ʻāina , ʻaʻole hiki ke hoʻonui ʻia. Aia kekahi hemahema like me nā mea hoʻololi CSS ke hoʻohana ʻia lākou e haku i nā ʻano CSS ʻē aʻe.

ʻO kēia ke kumu e hele mai ai nā hana hoʻololi i Bootstrap ma hope o @import "functions", akā ma mua @import "variables"a me ke koena o kā mākou waihona hoʻokomo. Pili ka mea like i nā palapala ʻāina Sass—pono ʻoe e hoʻopau i nā mea paʻa ma mua o ka hoʻohana ʻana. Ua hoʻoneʻe ʻia kēia mau palapala ʻāina i ka mea hou _maps.scss:

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

ʻO kāu hana Bootstrap CSS maʻamau e like me kēia me kahi hoʻokomo palapala ʻokoʻa.

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

Nā pono hana hou

Hoʻololi hou

  • Hoʻokomo ʻia kahi $enable-container-classeskoho hou. — I kēia manawa ke koho ʻana i ka hoʻolālā CSS Grid hoʻokolohua, e hui pū ʻia .container-*nā papa, ke ʻole kēia koho i hoʻonohonoho ʻia i false. Ke mālama nei nā pahu i kā lākou mau kumu waiwai.

  • Loaʻa nā ʻano like ʻole o ka ʻāpana Offcanvas i kēia manawa . ʻAʻole .offcanvasi hoʻololi ʻia ka papa kumu— hūnā ʻo ia i nā ʻike ma nā wahi nānā a pau. I mea e pane ai, e hoʻololi i kēlā .offcanvaspapa i kekahi .offcanvas-{sm|md|lg|xl|xxl}papa.

  • Ua koho ʻia nā mea hoʻokaʻawale papaʻaina mānoanoa. — Ua wehe mākou i ka ʻoi aku ka mānoanoa a paʻakikī hoʻi e kāpae i ka palena ma waena o nā pūʻulu papaʻaina a hoʻoneʻe iā ia i kahi papa koho hiki iā ʻoe ke noi, .table-group-divider. E nānā i nā palapala papa no kahi laʻana.

  • Ua kākau hou ʻia ʻo Scrollspy e hoʻohana i ka Intersection Observer API , ʻo ia hoʻi, ʻaʻole pono ʻoe i nā mea hoʻopili makua pili, deprecatesoffsetconfig, a me nā mea hou aku. E ʻimi i kāu mau hoʻokō Scrollspy e ʻoi aku ka pololei a me ke kūpaʻa i kā lākou nav highlighting.

  • Ke hoʻohana nei nā Popovers a me nā hāmeʻa i nā mea hoʻololi CSS. Ua hōʻano hou ʻia kekahi mau mea hoʻololi CSS mai kā lākou mau hoa Sass e hōʻemi i ka nui o nā mea hoʻololi. ʻO ka hopena, ua hoʻopau ʻia nā mea hoʻololi ʻekolu i kēia hoʻokuʻu: $popover-arrow-color, $popover-arrow-outer-color, a $tooltip-arrow-color.

  • Hoʻohui i nā .text-bg-{color}mea kōkua hou. Ma kahi o ka hoʻonohonoho ʻana i ka mea hoʻokahi .text-*a me .bg-*nā pono hana, hiki iā ʻoe ke hoʻohana i nā .text-bg-*mea kōkua e hoʻonohonoho i kahi background-colorme ka ʻokoʻa mua color.

  • Hoʻohui .form-check-reverseʻia ka mea hoʻololi e hoʻohuli i ke ʻano o nā lepili a me nā pahu pahu pili / lekiō.

  • Hoʻohui ʻia nā kolamu ʻoniʻoni i kākoʻo i nā papa ma o ka .table-striped-columnspapa hou.

No ka papa inoa piha o nā loli, e ʻike i ka papahana v5.2.0 ma GitHub .

v5.1.0

  • Hoʻohui i ke kākoʻo hoʻokolohua no ka hoʻolālā CSS Grid . - He hana kēia i ka holomua, a ʻaʻole i mākaukau no ka hoʻohana ʻana, akā hiki iā ʻoe ke koho i ka hiʻohiʻona hou ma o Sass. No ka hoʻohana ʻana iā ia, e hoʻopau i ka pahu paʻamau, ma ka hoʻonohonoho ʻana $enable-grid-classes: falsea hiki i ka CSS Grid ma ka hoʻonohonoho ʻana $enable-cssgrid: true.

  • Hōʻano hou ʻia nā navbars e kākoʻo i ka offcanvas. - Hoʻohui i nā mea huki offcanvas i kēlā me kēia navbar me nā .navbar-expand-*papa pane a me kekahi hōʻailona offcanvas.

  • Hoʻohui ʻia kahi mea hoʻohui hou . — ʻO kā mākou mea hou loa, he ala e hāʻawi ai i nā poloka pōkole ma kahi o ka ʻike maoli e kōkua i ka hōʻike ʻana e hoʻouka ana kekahi mea i kāu pūnaewele a i ʻole app.

  • Kākoʻo ʻia ʻo Collapse plugin i ka hāʻule ʻana . — Hoʻohui .collapse-horizontali kāu .collapsee hāʻule i widthka height. Hōʻalo i ka pena hou ʻana o ka polokalamu kele pūnaewele ma ka hoʻonohonoho ʻana a i min-heightʻole height.

  • Hoʻohui ʻia nā mea kōkua hoʻopaʻa a me nā lula kū i luna. - Hoʻopili koke i nā waiwai flexbox he nui e hana wikiwiki i nā hoʻolālā maʻamau me nā pūʻulu . E koho mai nā pūʻulu ʻāpae ( .hstack) a me ke kūpaʻa ( .vstack). Hoʻohui i nā mea hoʻokaʻawale kū pololei e like me <hr>nā mea me nā mea kōkua hou.vr .

  • Hoʻohui hou i nā :rootmea hoʻololi CSS honua. - Hoʻohui i kekahi mau ʻano CSS hou i ka :rootpae no ka hoʻomalu ʻana <body>i nā ʻano. ʻO nā mea hou aʻe i loko o nā hana, e pili ana i kā mākou mau pono a me nā ʻāpana, akā no kēia manawa e heluhelu i nā ʻano CSS ma ka ʻāpana Hoʻonohonoho .

  • Hoʻopili ʻia ka waihoʻoluʻu a me nā pono hana hope e hoʻohana i nā mea hoʻololi CSS, a hoʻohui i ka opacity kikokikona hou a me nā pono opacity hope . - .text-* a .bg-*ua kūkulu ʻia nā pono hana me nā ʻano CSS a me rgba()nā waiwai kala, e ʻae iā ʻoe e hana maʻalahi i nā pono me nā pono opacity hou.

  • Hoʻohui ʻia nā hiʻohiʻona snippet hou e hōʻike ana pehea e hana ai i kā mākou ʻāpana. — Huki mākaukau e hoʻohana i nā ʻāpana i hana ʻia a me nā hiʻohiʻona hoʻolālā maʻamau me kā mākou mau hiʻohiʻona Snippets hou . Loaʻa nā footers , nā hāʻule iho , nā pūʻulu papa inoa , a me nā modals .

  • Wehe ʻia nā ʻano hoʻonohonoho i hoʻohana ʻole ʻia mai nā popovers a me nā hāmeʻa no ka mea ʻo Popper wale nō kēia i mālama ʻia. $tooltip-marginua hoʻopau ʻia a hoʻonohonoho ʻia nulli ke kaʻina hana.

Makemake ʻoe i ka ʻike hou aku? E heluhelu i ka v5.1.0 blog post.

Auē! ʻO nā hoʻololi i kā mākou hoʻokuʻu nui mua o Bootstrap 5, v5.0.0, ua kākau ʻia ma lalo nei. ʻAʻole lākou e hōʻike i nā loli hou i hōʻike ʻia ma luna.

Nā hilinaʻi

  • Hāʻule ka jQuery.
  • Hoʻonui ʻia mai Popper v1.x a i Popper v2.x.
  • Ua hoʻololi ʻo Libsass me Dart Sass e like me kā mākou Sass compiler i hāʻawi ʻia iā Libsass i hoʻopau ʻia.
  • Ua neʻe mai Jekyll a Hugo no ke kūkulu ʻana i kā mākou palapala

Kākoʻo polokalamu kele pūnaewele

  • Haʻalele ʻo Internet Explorer 10 a me 11
  • Hoʻokuʻu ʻia ʻo Microsoft Edge <16 (Legacy Edge)
  • Haʻalele ʻo Firefox <60
  • Hāʻule ʻo Safari <12
  • Haʻalele ʻo iOS Safari <12
  • Hāʻule ka Chrome <60

Hoʻololi palapala

  • ʻO ka ʻaoʻao home i hoʻolālā hou ʻia, ka hoʻolālā docs, a me ka wāwae.
  • Hoʻohui hou ʻia ke alakaʻi Parcel .
  • Hoʻohui hou i ka ʻāpana Hoʻopilikino hou , hoʻololi i ka ʻaoʻao Theming o v4 , me nā kikoʻī hou no Sass, nā koho hoʻonohonoho honua, nā kala kala, nā ʻano CSS, a me nā mea hou aku.
  • Hoʻonohonoho hou i nā palapala palapala a pau i loko o ka ʻāpana Forms hou , e hoʻokaʻawale i ka ʻike i nā ʻaoʻao kikoʻī.
  • Pēlā nō, hōʻano hou i ka ʻāpana Layout , e hoʻomaʻemaʻe i ka ʻike kikoʻī.
  • Kapa hou ʻia ka ʻaoʻao ʻāpana "Navs" i "Navs & Tabs".
  • Ua kapa hou ʻia ka ʻaoʻao "Checks" i "Checks & radios".
  • Hoʻolālā hou i ka navbar a hoʻohui i kahi subnav hou i mea e maʻalahi ai ka hele ʻana a puni kā mākou pūnaewele a me nā mana docs.
  • Hoʻohui ʻia ka pōkole kīpē hou no ke kahua huli: Ctrl + /.

Sass

  • Ua haʻalele mākou i ka hui ʻana o ka palapala ʻāina Sass paʻamau i mea e maʻalahi ai ka wehe ʻana i nā waiwai nui. E hoʻomanaʻo i kēia manawa pono ʻoe e wehewehe i nā waiwai āpau ma nā palapala Sass e like me $theme-colors. E nānā pehea e hana ai me nā palapala ʻāina Sass .

  • HaʻihaʻiHoʻololi color-yiq()hou ʻia ka hana a me nā mea hoʻololi e pili ana i color-contrast()ka mea ʻaʻole pili hou i ka lumi kala YIQ. Nānā #30168.

    • $yiq-contrasted-thresholdua kapa hou ia i $min-contrast-ratio.
    • $yiq-text-darka $yiq-text-lightua kapa hou ia i $color-contrast-darkka $color-contrast-light.

  • HaʻihaʻiUa hoʻololi ʻia nā ʻokoʻa hoʻohui ʻia i ka ʻimi Media no kahi ala kūpono.

    • media-breakpoint-down()hoʻohana i ka breakpoint ponoʻī ma mua o ka breakpoint e hiki mai ana (e laʻa, media-breakpoint-down(lg)ma kahi o media-breakpoint-down(md)nā pahu nānā i ʻoi aku ka liʻiliʻi ma mua o lg).
    • Pēlā nō, hoʻohana ka ʻāpana ʻelua media-breakpoint-between()i ka breakpoint ponoʻī ma mua o ka breakpoint e hiki mai ana (e laʻa, media-between(sm, lg)ma kahi o media-breakpoint-between(sm, md)nā pahu nānā i waena sma me lg).

  • HaʻihaʻiWehe ʻia nā ʻano paʻi a me $enable-print-stylesnā loli. Aia mau nā papa hōʻike paʻi. E nana #28339 .

  • HaʻihaʻiHoʻokuʻu ʻia color(), theme-color(), a me gray()nā hana i makemake i nā mea hoʻololi. E nana #29083 .

  • HaʻihaʻiHana ʻia i ka inoa theme-color-level()hou color-level()a ʻae i kēia manawa i nā kala āu e makemake ai ma mua o nā $theme-colorkala wale nō. E nānā i ka #29083 E makaʻala: color-level() ua hoʻokuʻu ʻia ma hope v5.0.0-alpha3.

  • HaʻihaʻiHoʻololi i ka inoa $enable-prefers-reduced-motion-media-querya no ka pōkole.$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers

  • HaʻihaʻiWehe ʻia ka bg-gradient-variant()mixin. E hoʻohana i ka .bg-gradientpapa e hoʻohui i nā gradients i nā mea ʻeleʻele ma mua o nā .bg-gradient-*papa i hana ʻia.

  • Haʻihaʻi Wehe ʻia nā huila i hoʻopau mua ʻia:

    • hover, hover-focus, plain-hover-focus, ahover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(ua hoʻokuʻu pū i ka papa hana pili, .text-hide)
    • visibility()
    • form-control-focus()

  • HaʻihaʻiHoʻololi scale-color()i ka hana i mea shift-color()e pale aku ai i ka hui ʻana me kā Sass ponoʻī hana hoʻonui kala.

  • box-shadowʻAe nā mixins i nā nullwaiwai a hāʻule nonemai nā manaʻo he nui. E nana #30394 .

  • He border-radius()waiwai paʻamau ka mixin i kēia manawa.

Pūnaehana kala

  • ʻO ka ʻōnaehana waihoʻoluʻu i hana pū color-level()a $theme-color-intervalwehe ʻia no kahi ʻōnaehana kala hou. Hoʻololi ʻia nā hana āpau lighten()a me darken()nā hana ma kā mākou codebase e tint-color()a me shade-color(). E hoʻohui kēia mau hana i ke kala me ke keʻokeʻo a ʻeleʻele paha ma mua o ka hoʻololi ʻana i kona māmā me ka nui paʻa. ʻO shift-color()ke kala a i ʻole ka waihoʻoluʻu e pili ana i ka maikaʻi a i ʻole ka maikaʻi ʻole o kona ʻāpana kaumaha. E ʻike i ka #30622 no nā kikoʻī hou aku.

  • Hoʻohui ʻia nā kala hou a me nā aka no kēlā me kēia kala, e hāʻawi ana i ʻeiwa kala ʻokoʻa no kēlā me kēia waihoʻoluʻu kumu, e like me nā hoʻololi Sass hou.

  • Ua hoʻomaikaʻi ʻia ka ʻokoʻa kala. ʻO ka lakio hoʻohālikelike kala i hoʻopaʻa ʻia mai 3:1 a i 4.5:1 a hōʻano hou ʻia nā kala uliuli, ʻōmaʻomaʻo, cyan, a me ka ʻulaʻula e hōʻoia i ka ʻokoʻa WCAG 2.1 AA. Ua hoʻololi pū i kā mākou kala ʻokoʻa mai $gray-900ka $black.

  • No ke kākoʻo ʻana i kā mākou ʻōnaehana kala, ua hoʻohui mākou i nā hana maʻamau tint-color()a me shade-color()nā hana hou e hoʻohui pono i kā mākou kala.

Nā hōʻano hou grid

  • ʻO ka wahi haʻihaʻi hou! Hoʻohui ʻia i kahi xxlhaʻihaʻi hou no 1400pxa i luna. ʻAʻohe hoʻololi i nā wahi hoʻomaha ʻē aʻe.

  • Hoʻomaikaʻi ʻia nā ʻauwai. Ua hoʻonoho ʻia nā ʻauwai i nā rem, a ua ʻoi aku ka haiki ma mua o v4 ( 1.5rem, a i ʻole ma kahi o 24px, iho mai 30px). Hoʻolikelike kēia i nā ʻauwai o kā mākou pūnaewele puni honua me kā mākou mau pono hoʻokaʻawale.

    • Hoʻohui ʻia ka papa ʻauwai hou ( .g-*, .gx-*, a me .gy-*) no ka hoʻomalu ʻana i nā ʻauwaʻa paʻa/kū pololei, nā ʻauwai ākea, a me nā ʻauwai kūpaʻa.
    • HaʻihaʻiHoʻololi hou .no-guttersʻia i .g-0ka hoʻohālikelike ʻana i nā pono hana auwai hou.

  • ʻAʻole i position: relativehoʻohana hou ʻia nā kolamu, no laila pono ʻoe e hoʻohui .position-relativei kekahi mau mea e hoʻihoʻi i kēlā ʻano.

  • HaʻihaʻiHoʻokuʻu i kekahi mau .order-*papa i hoʻohana pinepine ʻole ʻia. Hāʻawi wale mākou .order-1i .order-5waho o ka pahu.

  • HaʻihaʻiHoʻokuʻu i ka ʻāpana no ka .mediamea hiki ke maʻalahi me nā pono hana. E ʻike i ka #28265 a me ka ʻaoʻao ʻoihana hoʻololi no kahi laʻana .

  • Haʻihaʻi bootstrap-grid.cssi kēia manawa pili wale box-sizing: border-boxi ke kolamu ma mua o ka hoʻonohonoho hou ʻana i ka pahu-sizing honua. Ma kēia ala, hiki ke hoʻohana ʻia kā mākou kaila grid ma nā wahi ʻē aʻe me ke keakea ʻole.

  • $enable-grid-classesʻaʻole hoʻopau hou i ka hana ʻana o nā papa pahu. E nana #29146.

  • Hoʻohou i ka make-colmixin i paʻamau i nā kolamu like ʻole me ka nui ʻole.

Maʻiʻo, Reboot, etc

  • Ua hoʻohana ʻia ʻo RFS ma ka paʻamau. ʻO nā poʻomanaʻo e hoʻohana ana i kafont-size()mixin e hoʻoponopono ʻokoʻa i ko lākoufont-sizeʻano me ka viewport. Ua koho mua ʻia kēia hiʻohiʻona me v4.

  • HaʻihaʻiHoʻoponopono i kā mākou hōʻike kiʻi kiʻi e hoʻololi i kā mākou mau $display-*loli a me kahi $display-font-sizespalapala Sass. Wehe pū kekahi i nā ʻano $display-*-weighthoʻololi hoʻokahi no hoʻokahi s i $display-font-weighthoʻoponopono font-sizeʻia.

  • Hoʻohui ʻia ʻelua .display-*nui poʻomanaʻo hou, .display-5a me .display-6.

  • Kuhi ʻia nā loulou e ka paʻamau (ʻaʻole ma ka hover wale nō), ke ʻole lākou he ʻāpana o nā ʻāpana kikoʻī.

  • Nā papa ʻaina i hoʻolālā hou ʻia e hōʻoluʻolu i ko lākou mau ʻano a kūkulu hou iā lākou me nā mea hoʻololi CSS no ka hoʻomalu hou ʻana i ke ʻano.

  • HaʻihaʻiʻAʻole hoʻoili ʻia nā ʻano ʻano i nā papa ʻaina.

  • Haʻihaʻi .thead-lighta .thead-darkhoʻokuʻu ʻia no nā .table-*papa ʻokoʻa i hiki ke hoʻohana ʻia no nā mea papa ʻaina āpau ( thead, tbody, tfoot, tr, tha me td).

  • HaʻihaʻiHoʻololi table-row-variant()hou ʻia ka mixin a ʻae i nā ʻāpana ʻelua table-variant()wale nō: $color(inoa kala) a me $value(code kala). Ua helu 'akomi 'ia ke kala palena a me ka leo ma muli o nā mea ho'ololi o ka papa.

  • E hoʻokaʻawale i nā mea hoʻololi padding cell table i loko -ya -x.

  • HaʻihaʻiPapa haʻalele .pre-scrollable. E nana #29135

  • Haʻihaʻi .text-*ʻAʻole hoʻohui hou nā mea hoʻohana i ka hover a me ka nānā ʻana i nā loulou. .link-*Hiki ke hoʻohana ʻia nā papa kōkua. E nana #29267

  • HaʻihaʻiPapa haʻalele .text-justify. E nana #29793

  • Haʻihaʻi <hr>hoʻohana nā mea i kēia manawa heightma mua o borderke kākoʻo maikaʻi ʻana i ke sizeʻano. Hiki i kēia ke hoʻohana i nā mea hoʻohana padding e hana i nā māhele mānoanoa (e laʻa, <hr class="py-1">).

  • padding-leftHoʻihoʻi hou i ka pae paʻamau <ul>a me <ol>nā mea mai ka polokalamu kele pūnaewele 40pxi 2rem.

  • Hoʻohui ʻia $enable-smooth-scroll, e pili ana scroll-behavior: smoothi ka honua holoʻokoʻa—koe wale nō nā mea hoʻohana e noi ana i ka neʻe hōʻemi ma o prefers-reduced-motionka nīnau media. E nana #31877

RTL

  • Ua kapa hou ʻia nā ʻano hoʻololi kikoʻī, nā pono, a me nā mixins no ka hoʻohana ʻana i nā waiwai kūpono e like me nā mea i loaʻa ma nā hoʻonohonoho flexbox—e laʻa, starta endma kahi o lefta right.

Nā palapala

  • Hoʻohui ʻia nā palapala lana hou! Ua paipai mākou i ka laʻana o nā lepili lana i nā ʻāpana puka kākoʻo piha. E ʻike i ka ʻaoʻao lepili lana hou.

  • Haʻihaʻi Hoʻohui ʻia nā ʻano mea ʻōiwi a me nā mea hana maʻamau. Ua hoʻohui ʻia nā pahu pahu, nā lekiō, nā koho, a me nā mea hoʻokomo ʻē aʻe i loaʻa nā papa ʻōiwi a maʻamau ma v4. I kēia manawa, ʻaneʻane maʻamau a pau kā mākou ʻano mea, ʻo ka hapa nui me ka ʻole o ka HTML maʻamau.

    • .custom-control.custom-checkboxi kēia manawa .form-check.
    • .custom-control.custom-custom-radioi kēia manawa .form-check.
    • .custom-control.custom-switchi kēia manawa .form-check.form-switch.
    • .custom-selecti kēia manawa .form-select.
    • .custom-filea .form-fileua pani ʻia e nā ʻano maʻamau ma luna o .form-control.
    • .custom-rangei kēia manawa .form-range.
    • Haʻalele ʻia ka ʻōiwi .form-control-filea me .form-control-range.

  • HaʻihaʻiHāʻule .input-group-appenda .input-group-prepend. Hiki iā ʻoe ke hoʻohui i nā pihi a .input-group-textme nā keiki pololei o nā pūʻulu hoʻokomo.

  • Ua hoʻopaʻa hope ʻia ka radius palena ʻole lōʻihi ma ka pūʻulu hoʻokomo me ka hōʻoia hōʻoia ʻana ma o ka hoʻohui ʻana i kahi .has-validationpapa hou i nā pūʻulu hoʻokomo me ka hōʻoia.

  • Haʻihaʻi Hoʻokuʻu ʻia nā papa hoʻolālā kikoʻī no kā mākou ʻōnaehana mānoanoa. E hoʻohana i kā mākou mānoanoa a me nā pono hana ma kahi o .form-group, .form-row, a i ʻole .form-inline.

  • HaʻihaʻiPono nā lepili palapala i kēia manawa .form-label.

  • Haʻihaʻi .form-textʻaʻole i hoʻonohonoho hou display, e ʻae iā ʻoe e hana i ka laina a i ʻole ka poloka i ke kikokikona kōkua e like me kou makemake ma ka hoʻololi ʻana i ka mea HTML.

  • ʻAʻole hoʻohana paʻa ʻia nā mana palapala i ka heightwā hiki, ma kahi o ka hoʻopaneʻe ʻana min-heighti ka hoʻomaikaʻi ʻana i ka hana maʻamau a me ka launa pū me nā mea ʻē aʻe.

  • ʻAʻole hoʻohana hou ʻia nā kiʻi hōʻoia i <select>s me multiple.

  • Hoʻonohonoho hou ʻia nā faila Sass kumu ma lalo o scss/forms/, me nā ʻano hui hoʻokomo.

Nā ʻāpana

  • ʻO nā waiwai i hui pū ʻia no nā mākaʻikaʻi, nā ʻāpana palaoa, nā kāleka, nā hāʻule iho, nā pūʻulu papa inoa, nā modals padding, nā popovers, a me nā ʻōlelo aʻoaʻo e hoʻokumu ʻia ma kā mākou ʻano $spacer. E nana #30564 .

Accordion

ʻO nā makaʻala

  • Loaʻa i nā mākaʻikaʻi nā hiʻohiʻona me nā ikona .

  • Wehe ʻia nā ʻano maʻamau no nā <hr>s i kēlā me kēia makaʻala no ka mea ua hoʻohana mua lākou currentColor.

Nā hōʻailona

  • HaʻihaʻiHoʻokuʻu i .badge-*nā papa waihoʻoluʻu a pau no nā pono hope (e laʻa, hoʻohana .bg-primaryma kahi o .badge-primary).

  • HaʻihaʻiHāʻule - hoʻohana .badge-pilli ka .rounded-pillpono.

  • HaʻihaʻiWehe ʻia nā ʻano hover a me ka nānā ʻana no nā mea <a>a me <button>nā mea.

  • Hoʻonui ʻia ka padding paʻamau no nā hōʻailona mai .25em/ .5ema .35em/ .65em.

  • Ua maʻalahi ka hiʻohiʻona paʻamau o nā ʻōpala berena ma ka wehe ʻana i ka padding, background-color, a me border-radius.

  • Hoʻohui i ka waiwai maʻamau CSS hou --bs-breadcrumb-dividerno ka hana maʻalahi me ka ʻole e hoʻopili hou i ka CSS.

Nā pihi

  • Haʻihaʻi ʻAʻole koi hou nā pihi hoʻololi , me nā pahu pahu a i ʻole nā ​​lekiō, iā JavaScript a loaʻa iā ia kahi hōʻailona hou. ʻAʻole mākou e koi hou i kahi mea ʻōwili, hoʻohui.btn-checki ka<input>, a hui pū me nā.btnpapa ma ka<label>. E nana #30650 . Ua neʻe nā palapala no kēia mai kā mākou ʻaoʻao ʻaoʻao i ka ʻāpana Forms hou.

  • Haʻihaʻi Hoʻokuʻu .btn-blockʻia no nā pono hana. Ma kahi o ka hoʻohana ʻana .btn-blockma ka .btn, e kāʻei i kāu mau pihi me .d-gridkahi .gap-*pono e hoʻokaʻawale iā lākou inā pono. E hoʻololi i nā papa pane no ka mana hou aku ma luna o lākou. E heluhelu i nā palapala no kekahi mau laʻana.

  • Hoʻohou i kā mākou hui button-variant()a me button-outline-variant()nā mixins e kākoʻo i nā ʻāpana ʻē aʻe.

  • Nā pihi hou e hōʻoia i ka hoʻonui ʻana i ka ʻokoʻa ma ka hover a me nā kūlana hana.

  • Loaʻa nā pihi kīnā ʻole i kēia manawa pointer-events: none;.

Kāleka

  • HaʻihaʻiHoʻokuʻu .card-deckʻia i ka makemake o kā mākou pae. E kāʻei i kāu mau kāleka i nā papa kolamu a hoʻohui i kahi .row-cols-*pahu makua e hana hou i nā papa kāleka (akā me ka mana ʻoi aʻe ma luna o ka alignment pane).

  • HaʻihaʻiHoʻokuʻu .card-columnsʻia i ka makemake o Masonry. E nana #28922 .

  • HaʻihaʻiUa hoʻololi ʻia ka .cardaccordion me kahi ʻāpana Accordion hou .

  • Hoʻohui ʻia nā ʻano hou .carousel-darkno nā kikokikona ʻeleʻele, nā mana, a me nā hōʻailona (maikaʻi no nā kāʻei māmā).

  • Hoʻololi i nā kiʻi chevron no nā mana carousel me nā SVG hou mai Bootstrap Icons .

Pani pani

  • HaʻihaʻiKapa .closehou .btn-closeʻia i ka inoa maʻamau.

  • Ke hoʻohana nei nā pihi pani i kahi background-image(SVG i hoʻokomo ʻia) ma kahi o &times;ka HTML, e ʻae ai i ka hana maʻalahi me ka ʻole e hoʻopā i kāu markup.

  • Hoʻohui ʻia kahi ʻano hou .btn-close-whitee hoʻohana filter: invert(1)ai i hiki ke hoʻokaʻawale i nā kiʻi ʻokoʻa kiʻekiʻe e kūʻē i nā kumu ʻeleʻele.

Hāneʻe

  • Wehe ʻia ka heleuma ʻōwili no nā accordions.

  • Hoʻohui ʻia nā ʻano ʻokoʻa hou .dropdown-menu-darka me nā mea hoʻololi e pili ana no ka hāʻule ʻana o ka pōʻeleʻele.

  • Hoʻohui ʻia nā mea hoʻololi hou no $dropdown-padding-x.

  • Ua pōʻeleʻele ka mea hoʻokaʻawale i lalo no ka hoʻomaikaʻi ʻana i ka ʻokoʻa.

  • HaʻihaʻiHoʻomaka ʻia nā hanana a pau no ka hāʻule iho i lalo ma ke pihi hoʻokuʻu iho i lalo a laila huʻi ʻia i ka mea makua.

  • Loaʻa i nā menus dropdown i kēia manawa kahi data-bs-popper="static"hiʻohiʻona i ka wā e kū ai ke kūlana o ka hāʻule iho, a i ʻole ka hāʻule iho i ka navbar. Hoʻohui ʻia kēia e kā mākou JavaScript a kōkua iā mākou e hoʻohana i nā ʻano kūlana maʻamau me ka ʻole e hoʻopilikia i ke kūlana o Popper.

  • HaʻihaʻiKoho hāʻule no ka plugin dropdown flipi makemake i ka hoʻonohonoho Popper maoli. Hiki iā ʻoe ke hoʻopau i ka hana flipping ma ka hāʻawi ʻana i kahi ʻāpana ʻole no fallbackPlacementske koho i ka hoʻololi hoʻololi.

  • Hiki ke kaomi ʻia nā menus dropdown me kahi autoClosekoho hou e mālama ai i ke ʻano pili kaʻa . Hiki iā ʻoe ke hoʻohana i kēia koho no ka ʻae ʻana i ke kaomi i loko a i waho paha o ka papa kuhikuhi hāʻule i mea e hoʻopili ai.

  • Kākoʻo nā hāʻule iho i kēia manawa i .dropdown-items i kāʻei ʻia i <li>s.

ʻO Jumbotron

Papa papa inoa

  • Hoʻohui ʻia nā mea hou nullno font-size, font-weight, color, a :hover colori ka .nav-linkpapa.
  • HaʻihaʻiPono nā Navbars i kahi pahu i loko (e hoʻomaʻamaʻa maʻalahi i nā koi spacing a koi ʻia CSS).
  • HaʻihaʻiʻAʻole .activehiki ke hoʻohana hou ʻia ka papa i .nav-items, pono e hoʻopili pololei ʻia ma .nav-links.

Offcanvas

Ka helu helu

  • Hiki ke hoʻololi ʻia nā loulou ʻaoʻao i margin-leftnā kihi a pau ke kaʻawale ʻana mai kekahi i kekahi.

  • Hoʻohui transitionʻia nā s i nā loulou pagination.

Popovers

  • HaʻihaʻiKapa .arrowhou ʻia i .popover-arrowloko o kā mākou papa kuhikuhi popover paʻamau.

  • Hoʻololi whiteListi ke koho i allowList.

Nā milo

  • Hoʻohanohano nā Spinners i kēia manawa prefers-reduced-motion: reducema ka hoʻolohi ʻana i nā animations. E nana #31882 .

  • Hoʻomaikaʻi ʻia ka hoʻopololei ʻana i ka spinner.

Toasts

  • Hiki ke hoʻonoho ʻia nā toasts i kēia manawa .toast-containerme ke kōkua o nā pono hoʻonohonoho .

  • Hoʻololi ʻia ka lōʻihi o ka toast paʻamau i 5 kekona.

  • Wehe ʻia overflow: hiddenmai nā toasts a hoʻololi ʻia me nā border-radiuss kūpono me calc()nā hana.

Mea kōkua

  • HaʻihaʻiHoʻololi .arrowhou ʻia i .tooltip-arrowloko o kā mākou mea hoʻohālike paʻamau.

  • HaʻihaʻifallbackPlacementsHoʻololi ʻia ka waiwai paʻamau no ka ['top', 'right', 'bottom', 'left']hoʻokomo maikaʻi ʻana o nā mea popper.

  • HaʻihaʻiHoʻololi whiteListi ke koho i allowList.

Nā pono hana

  • HaʻihaʻiHoʻololi hou i kekahi mau mea pono e hoʻohana i nā inoa waiwai kūpono ma mua o nā inoa kuhikuhi me ka hoʻohui ʻana o ke kākoʻo RTL:

    • Kapa hou ʻia .left-*a .right-*i .start-*a .end-*.
    • Kapa hou ʻia .float-lefta .float-righti .float-starta .float-end.
    • Kapa hou ʻia .border-lefta .border-righti .border-starta .border-end.
    • Kapa hou ʻia .rounded-lefta .rounded-righti .rounded-starta .rounded-end.
    • Kapa hou ʻia .ml-*a .mr-*i .ms-*a .me-*.
    • Kapa hou ʻia .pl-*a .pr-*i .ps-*a .pe-*.
    • Kapa hou ʻia .text-lefta .text-righti .text-starta .text-end.

  • HaʻihaʻiHoʻopaʻa ʻia nā palena ʻino ma ka paʻamau.

  • Hoʻohui ʻia ka .bg-bodypapa hou no ka hoʻonohonoho wikiwiki ʻana i ke <body>kāʻei ʻana i nā mea ʻē aʻe.

  • Hoʻohui ʻia nā pono kūlana hou no top, right, bottom, a me left. Aia nā waiwai i 0, 50%, a 100%no kēlā me kēia waiwai.

  • Hoʻohui ʻia nā mea hou .translate-middle-xa me .translate-middle-ynā pono hana i nā mea i hoʻonohonoho pono ʻia a i ʻole pololei.

  • Hoʻohui ʻia nā border-widthpono hana hou .

  • HaʻihaʻiKapa .text-monospacehou i .font-monospace.

  • HaʻihaʻiWehe .text-hideʻia ʻo ia ke ʻano hana kahiko no ka hūnā ʻana i nā kikokikona ʻaʻole pono e hoʻohana hou ʻia.

  • Hoʻohui .fs-*ʻia nā pono hana no font-sizenā pono hana (me ka RFS i hiki). Hoʻohana kēia mau mea i ka pālākiō like me nā poʻomanaʻo paʻamau o HTML (1-6, nui a liʻiliʻi), a hiki ke hoʻololi ʻia ma o ka palapala ʻāina Sass.

  • HaʻihaʻiHoʻololi hou ʻia .font-weight-*nā pono hana .fw-*no ka pōkole a me ke kūlike.

  • HaʻihaʻiHoʻololi hou ʻia .font-style-*nā pono hana .fst-*no ka pōkole a me ke kūlike.

  • Hoʻohui .d-gridʻia e hōʻike i nā pono hana a me nā gappono hou ( .gap) no ka CSS Grid a me nā hoʻolālā flexbox.

  • HaʻihaʻiWehe ʻia .rounded-sma rounded-lg, a hoʻokomo i kahi pālākiō hou o nā papa, .rounded-0i .rounded-3. E nana #31687 .

  • Hoʻohui ʻia nā line-heightpono hana hou: .lh-1, .lh-sm, .lh-basea .lh-lg. E nana maanei .

  • Ua hoʻoneʻe i ka .d-nonepono ma kā mākou CSS e hāʻawi i ke kaumaha ma mua o nā pono hōʻike ʻē aʻe.

  • Hoʻonui i ke .visually-hidden-focusablekōkua e hana pū i nā ipu, me ka hoʻohana ʻana i :focus-within.

Nā mea kōkua

  • Haʻihaʻi Ua kapa hou ʻia nā mea kōkua hoʻopili pane i ka ratio o nā mea kōkua me nā inoa papa hou a me nā ʻano i hoʻomaikaʻi ʻia, a me kahi hoʻololi CSS kōkua.

    • Ua kapa hou ʻia nā papa e hoʻololi byi xka lākiō hiʻohiʻona. Eia kekahi laʻana, .ratio-16by9i kēia manawa .ratio-16x9.
    • Ua hoʻokuʻu mākou i ka .embed-responsive-itemmea koho pūʻulu a me ka mea koho no ka mea .ratio > *koho maʻalahi. ʻAʻohe papa e pono ai, a ke hana nei ka mea kōkua ratio me kekahi mea HTML.
    • Ua $embed-responsive-aspect-ratioskapa hou ʻia ka palapala ʻāina ʻo Sass $aspect-ratiosa ua maʻalahi kona mau waiwai e hoʻokomo i ka inoa papa a me ka pākēneka e like me ka key: valuepālua.
    • Hoʻokumu ʻia nā mea hoʻololi CSS i kēia manawa a hoʻokomo ʻia no kēlā me kēia waiwai ma ka palapala Sass. Hoʻololi i ka ʻano --bs-aspect-ratiohoʻololi ma ka .rationo ka hana ʻana i kekahi lākiō hiʻohiʻona maʻamau .

  • Haʻihaʻi ʻO nā papa "heluhelu maka" i kēia manawa he mau papa "huna ʻike ʻia" .

    • Ua hoʻololi i ka faila Sass mai scss/helpers/_screenreaders.scsskascss/helpers/_visually-hidden.scss
    • Kapa hou ʻia .sr-onlya .sr-only-focusablei .visually-hiddena.visually-hidden-focusable
    • Hoʻololi ʻia sr-only()a sr-only-focusable()hui pū ʻia i visually-hidden()a me visually-hidden-focusable().

  • bootstrap-utilities.cssi kēia manawa pū kekahi me kā mākou mau kōkua. ʻAʻole pono e hoʻokomo hou ʻia nā mea kōkua i nā hana maʻamau.

JavaScript

  • Hoʻokuʻu i ka hilinaʻi jQuery a kākau hou i nā plugins i loko o ka JavaScript maʻamau.

  • HaʻihaʻiUa kapa ʻia nā ʻikepili ʻikepili no nā plugins JavaScript āpau e kōkua i ka hoʻokaʻawale ʻana i ka hana Bootstrap mai nā ʻaoʻao ʻekolu a me kāu code ponoʻī. No ka laʻana, hoʻohana mākou data-bs-togglema kahi o data-toggle.

  • Hiki i nā plugins āpau ke ʻae i kahi koho CSS ma ke ʻano he hoʻopaʻapaʻa mua. Hiki iā ʻoe ke hāʻawi i kahi mea DOM a i ʻole kekahi mea koho CSS kūpono e hana i kahi hiʻohiʻona hou o ka plugin:

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

  • popperConfighiki ke hoʻoholo ʻia ma ke ʻano he hana e ʻae i ka config Popper paʻamau o Bootstrap ma ke ʻano he hoʻopaʻapaʻa, i hiki iā ʻoe ke hoʻohui i kēia hoʻonohonoho paʻamau i kou ala. Pili i nā hāʻule iho, popovers, a me nā mea hana.

  • Hoʻololi ʻia ka waiwai paʻamau no ka hoʻokomo ʻana fallbackPlacementsi ['top', 'right', 'bottom', 'left']nā mea Popper. Pili i nā hāʻule iho, popovers, a me nā mea hana.

  • Wehe ʻia ka underscore mai nā ʻano static ākea e like me _getInstance()→ getInstance().