v5 руу шилжиж байна

V4-ээс v5 руу шилжихэд тань туслах Bootstrap-ийн эх файл, баримт бичиг, бүрэлдэхүүн хэсгүүдийн өөрчлөлтийг хянаж, хянана уу.

Энэ хуудсан дээр

Хамаарал

jQuery хаягдсан.
Popper v1.x-ээс Popper v2.x болгон шинэчилсэн.
Libsass өгөгдсөн манай Sass хөрвүүлэгчийг хуучирсан тул Libsass-ыг Dart Sass-ээр сольсон.
Манай бичиг баримтыг бүрдүүлэхийн тулд Жекиллээс Хюго руу нүүсэн

Хөтөчийн дэмжлэг

Internet Explorer 10, 11-ийг хассан
Microsoft Edge-г унасан < 16 (Legacy Edge)
Firefox < 60-г устгасан
Safari-г хаясан <12
iOS Safari-г хассан < 12
Chrome-г унасан < 60

Баримт бичгийн өөрчлөлт

Нүүр хуудас, баримт бичгийн бүтэц, хөл хэсгийг дахин боловсруулсан.
Шинэ илгээмжийн гарын авлага нэмсэн .
Sass-ийн шинэ дэлгэрэнгүй мэдээлэл, глобал тохиргооны сонголтууд, өнгөний схем, CSS хувьсагч болон бусад зүйлс бүхий v4-ийн Theming хуудсыг орлуулсан шинэ Customize хэсгийг нэмсэн .
Бүх маягтын баримт бичгийг шинэ маягтын хэсэг болгон дахин зохион байгуулж , агуулгыг илүү төвлөрсөн хуудас болгон хуваасан.
Үүний нэгэн адил сүлжээний агуулгыг илүү тодорхой болгохын тулд Layout хэсгийг шинэчилсэн .
"Navs" бүрэлдэхүүн хуудасны нэрийг "Navs & Tabs" болгон өөрчилсөн.
"Checks" хуудасны нэрийг "Checks & radios" болгон өөрчилсөн.
Манай сайтууд болон баримт бичгийн хувилбаруудтай танилцахад хялбар болгох үүднээс навигацийн самбарыг дахин зохион бүтээж, шинэ дэд цэс нэмсэн.
Хайлтын талбарт шинэ гарын товчлол нэмсэн: Ctrl + /.

Сасс

Илүүдэл утгыг арилгахад хялбар болгох үүднээс бид анхдагч Sass газрын зургийн нэгтгэлээс татгалзсан. Та одоо шиг Sass газрын зураг дээрх бүх утгыг тодорхойлох ёстой гэдгийг санаарай $theme-colors. Sass газрын зурагтай хэрхэн харьцах талаар шалгана уу .
ХагарахYIQ өнгөний орон зайд хамааралгүй болсон тул color-yiq()функц болон холбогдох хувьсагчдын нэрийг өөрчилсөн . #30168-г үзнэ үү.color-contrast()
- $yiq-contrasted-thresholdгэж өөрчилсөн $min-contrast-ratio.
- $yiq-text-darkба гэж тус тус $yiq-text-lightөөрчилсөн .$color-contrast-dark$color-contrast-light
ХагарахМедиа асуулгын хольцын параметрүүдийг илүү логик байдлаар өөрчилсөн.
- media-breakpoint-down()дараагийн таслах цэгийн оронд таслах цэгийг өөрөө ашигладаг (жишээ нь: -ээс бага зорилтот харах цонхны media-breakpoint-down(lg)оронд ).media-breakpoint-down(md)lg
- Үүний нэгэн адил, доторх хоёр дахь параметр media-breakpoint-between()нь дараагийн таслах цэгийн оронд таслах цэгийг өөрөө ашигладаг (жишээ нь, болон хоорондох зорилтот харах цонхны media-between(sm, lg)оронд ).media-breakpoint-between(sm, md)smlg
ХагарахХэвлэх хэв маяг болон $enable-print-stylesхувьсагчийг устгасан. Хэвлэх дэлгэцийн ангиуд байсаар байна. #28339-г үзнэ үү .
Хагарахcolor(), theme-color(), болон gray()функцуудыг хувьсагчийн талд буулгасан . #29083-ыг үзнэ үү .
Хагарахtheme-color-level()Функцийн нэрийг өөрчилсөн color-level()бөгөөд одоо зөвхөн өнгөний оронд таны хүссэн өнгийг хүлээн авах боломжтой $theme-color. #29083-ыг үзнэ үү . Анхаар : color-level() дараа нь хасагдсан v5.0.0-alpha3.
ХагарахНэрийг нь өөрчилсөн $enable-prefers-reduced-motion-media-queryба товчилсон.$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers
ХагарахХолигчийг bg-gradient-variant()арилгасан. Үүсгэсэн классуудын .bg-gradientоронд элементүүдэд градиент нэмэхийн тулд ангийг ашиглана уу..bg-gradient-*
Хагарах Өмнө нь хуучирсан холимогуудыг устгасан:
- hover, hover-focus, plain-hover-focus, болонhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(мөн холбогдох хэрэгслийн ангиллыг хассан, .text-hide)
- visibility()
- form-control-focus()
ХагарахSass-ийн өөрийн өнгө хуваах функцтэй мөргөлдөхөөс зайлсхийхийн тулд scale-color()функцийг өөрчилсөн .shift-color()
box-shadowхолимогууд одоо nullутгыг зөвшөөрч, noneолон аргументаас хасагдана. #30394-ийг үзнэ үү .
border-radius()Холимог одоо анхдагч утгатай байна .

Өнгөний систем

Шинэ өнгөний системтэй ажиллаж color-level(), $theme-color-intervalхасагдсан өнгөний систем. Манай кодын сан дахь бүх lighten()болон функцууд нь болон darken()-ээр солигддог . Эдгээр функцууд нь өнгөний цайвар байдлыг тодорхой хэмжээгээр өөрчлөхийн оронд цагаан эсвэл хар өнгөтэй холих болно. Энэ нь жингийн параметр нь эерэг эсвэл сөрөг байхаас хамаарч өнгийг будах эсвэл сүүдэрлэх болно. Дэлгэрэнгүй мэдээллийг #30622-оос үзнэ үү.tint-color()shade-color()shift-color()
Өнгө бүрт шинэ өнгө, сүүдрийг нэмж, үндсэн өнгө тус бүрийг есөн өнгөөр ялгаж, шинэ Sass хувьсагч болгон өгсөн.
Өнгөний тодосгогчийг сайжруулсан. WCAG 2.1 AA тодосгогчийг хангах үүднээс 3:1-ээс 4.5:1 өнгөний тодосгогч харьцааг сайжруулж, хөх, ногоон, хөх, ягаан өнгийг шинэчилсэн. Мөн бидний өнгөний тодосгогч өнгийг -ээс $gray-900өөрчилсөн $black.
Өнгөний системээ дэмжихийн тулд бид өөрсдийн өнгийг зөв холих шинэ заншил tint-color(), функцүүдийг нэмсэн.shade-color()

Сүлжээний шинэчлэлтүүд

Шинэ таслах цэг! Дээрээс нь шинэ xxlтаслах цэг нэмсэн 1400px. Бусад бүх таслах цэгүүдэд өөрчлөлт ороогүй болно.
Сайжруулсан суваг. Сувагуудыг одоо rems-д тохируулсан бөгөөд v4-ээс нарийссан ( 1.5rem, эсвэл ойролцоогоор 24px-аас доош 30px). Энэ нь манай сүлжээний системийн сувгийг бидний зайны хэрэгслүүдтэй уялдуулдаг.
- Хэвтээ/босоо суваг, хэвтээ суваг, босоо суваг шуудууг удирдах шинэ сувгийн анги ( .g-*, .gx-*, болон ) нэмсэн..gy-*
- ХагарахШинэ ус зайлуулах хэрэгслүүдтэй тааруулахын .no-guttersтулд нэрийг нь өөрчилсөн ..g-0
Багана хэрэглэхээ больсон position: relativeтул та .position-relativeэнэ зан үйлийг сэргээхийн тулд зарим элементүүдэд нэмэх шаардлагатай болж магадгүй юм.
Хагарах.order-*Ашиглагдаагүй хэд хэдэн ангиа орхисон. Бид одоо зөвхөн хайрцагнаас нь гаргаж .order-1өгдөг ..order-5
ХагарахХэрэгслийн .mediaтусламжтайгаар амархан хуулбарлаж болох тул бүрэлдэхүүн хэсгийг хассан. Жишээг №28265 болон flex utilities хуудаснаас үзнэ үү .
Хагарах bootstrap-grid.cssbox-sizing: border-boxодоо дэлхийн хайрцгийн хэмжээг дахин тохируулахын оронд зөвхөн баганад хэрэгжинэ . Ингэснээр бидний торны хэв маягийг хөндлөнгийн оролцоогүйгээр илүү олон газарт ашиглах боломжтой.
$enable-grid-classesцаашид контейнер анги үүсгэхийг идэвхгүй болгохоо больсон. #29146-г үзнэ үү.
make-colХольцыг өгөгдмөл болгож, заасан хэмжээгүйгээр тэнцүү багана болгон шинэчилсэн .

Агуулга, дахин ачаалах гэх мэт

RFS одоо анхдагчаар идэвхжсэн. Холигчийг ашигланхарах цонхны дагуу масштабыгfont-size()автоматаар тохируулнаЭнэ функц нь өмнө нь v4-тэй холбогдож байсан.font-size
Хагарах$display-*Хувьсагчаа сольж , $display-font-sizesSass газрын зургаар дэлгэцийн хэв зүйгээ шинэчилсэн. Мөн ганц болон тохируулсан s $display-*-weight-ийн хувьсагчдыг хассан .$display-font-weightfont-size
Хоёр шинэ .display-*гарчгийн хэмжээг нэмсэн .display-5ба .display-6.
Холбоосууд нь тодорхой бүрэлдэхүүн хэсгүүдийн нэг хэсэг биш л бол өгөгдмөлөөр доогуур зураастай байдаг (зөвхөн хулганаар биш).
Хүснэгтүүдийг шинэчилж, загварчлалыг илүү хянахын тулд CSS хувьсагчаар дахин бүтээв.
ХагарахОруулсан хүснэгтүүд нь хэв маягийг өвлөхөө больсон.
Хагарах .thead-lightхүснэгтийн бүх элементүүдэд ( , , , , болон ) ашиглагдаж болох хувилбарын ангиудын талд .thead-darkхасагдсан ..table-*theadtbodytfoottrthtd
Хагарахtable-row-variant()Холигчийг нэрлэсэн бөгөөд зөвхөн table-variant()2 параметрийг хүлээн авдаг: $color(өнгөний нэр) болон $value(өнгөт код). Хүснэгтийн хүчин зүйлийн хувьсагчид үндэслэн хилийн өнгө болон өргөлтийн өнгийг автоматаар тооцдог.
-yХүснэгтийн нүд дүүргэх хувьсагчдыг болон хуваах -x.
ХагарахАнгиа хаясан .pre-scrollable. #29135-ыг үзнэ үү
Хагарах .text-*Хэрэгслүүд нь холбоосууд руу чиглүүлэх болон фокусын төлөвийг нэмэхээ больсон. .link-*оронд нь туслах анги ашиглаж болно. #29267-г үзнэ үү
ХагарахАнгиа хаясан .text-justify. #29793-ыг үзнэ үү
Хагарах <hr>элементүүдийг атрибутыг илүү сайн дэмжихийн тулд heightашиглаж байна. Энэ нь зузаан хуваагч (жишээ нь, ) үүсгэхийн тулд дүүргэх хэрэгслийг ашиглах боломжийг олгодог .bordersize<hr class="py-1">
Өгөгдмөл хэвтээ горимыг асааж , хөтчийн өгөгдмөлөөс элементүүдийг дахин тохируулна padding-leftуу .<ul><ol>40px2rem
Нэмэгдсэн $enable-smooth-scroll, энэ нь дэлхий даяар хэрэгждэг —хөдөлгөөнийг зөөвөрлөх хүсэлтийг scroll-behavior: smoothбагасгахыг хүссэн хэрэглэгчээс бусад тохиолдолд . #31877-г үзнэ үүprefers-reduced-motion

RTL

startХэвтээ чиглэлийн тодорхой хувьсагч, хэрэгслүүд болон холимгуудын нэрийг flexbox-ын байршилд байдаг шиг логик шинж чанаруудыг ашиглахын endтулд leftөөрчилсөн right.

Маягтууд

Шинэ хөвөгч маягтуудыг нэмсэн! Бид хөвөгч шошгоны жишээг бүрэн дэмжигдсэн маягтын бүрэлдэхүүн хэсгүүдэд сурталчилсан. Шинэ хөвөгч шошго хуудсыг үзнэ үү.
Хагарах Нэгтгэсэн эх болон захиалгат маягтын элементүүд. V4-д төрөлх болон захиалгат ангитай байсан шалгах хайрцаг, радио, сонголт болон бусад оролтыг нэгтгэсэн. Одоо манай бараг бүх маягтын элементүүд бүхэлдээ захиалгат, ихэнх нь тусгай HTML шаардлагагүй.
- .custom-checkодоо .form-checkбайна.
- .custom-check.custom-switchодоо .form-check.form-switchбайна.
- .custom-selectодоо .form-selectбайна.
- .custom-fileдээр .form-fileнь захиалгат хэв маягаар солигдсон .form-control.
- .custom-rangeодоо .form-rangeбайна.
- Унасан уугуул .form-control-fileболон .form-control-range.
ХагарахУнасан .input-group-appendба .input-group-prepend. Та одоо зүгээр л товчлуур болон .input-group-textоролтын бүлгүүдийн шууд хүүхэд болгон нэмэх боломжтой.
Баталгаажуулалтын санал хүсэлтийн алдаатай оролтын бүлэг дээр удаан хугацаанд алга болсон хилийн радиусыг баталгаажуулалттай .has-validationоролтын бүлгүүдэд нэмэлт анги нэмснээр эцэст нь зассан .
Хагарах Манай сүлжээний системд зориулсан маягтын тусгай байршлын ангиудыг хассан. .form-group, .form-row, эсвэл -ийн оронд манай сүлжээ болон хэрэгслүүдийг ашигла .form-inline.
ХагарахМаягтын шошго одоо шаардлагатай .form-label.
Хагарах .form-text-г тохируулахаа больсон displayбөгөөд энэ нь танд зөвхөн HTML элементийг өөрчилснөөр өөрийн хүссэнээр шугаман тусламжийн текст үүсгэх эсвэл блоклох боломжийг олгоно.
<select>Баталгаажуулалтын дүрс тэмдгийг s-д хэрэглэхээ больсон multiple.
scss/forms/Оролтын бүлгийн хэв маягийг оруулаад доор байгаа эх сурвалжийн Sass файлуудыг өөрчилсөн.

Бүрэлдэхүүн хэсгүүд

Манай хувьсагч paddingдээр тулгуурлан анхааруулга, товхимол, карт, унадаг жагсаалт, жагсаалтын бүлгүүд, загварууд, поповерууд, зөвлөмжүүдийн нэгдсэн утгууд. #30564-ийг үзнэ үү .$spacer

Баян хуур

Шинэ баян хуурын бүрэлдэхүүн хэсэг нэмэгдсэн .

Анхааруулга

Анхааруулга нь одоо дүрс бүхий жишээнүүдтэй болсон .
<hr>Сэрэмжлүүлэг тус бүрийн s-ийн захиалгат хэв маягийг аль хэдийн ашигласан тул хассан currentColor.

Тэмдгүүд

ХагарахАрын дэвсгэр хэрэгслүүдийн бүх .badge-*өнгөний ангиллыг хассан (жишээ нь, .bg-primaryоронд нь ашиглах .badge-primary).
ХагарахУнасан - оронд .badge-pillнь .rounded-pillхэрэгслийг ашиглана уу.
Хагарах<a>болон <button>элементүүдийн хулганыг чиглүүлэх болон фокусын хэв маягийг устгасан .
/ -ээс .25em/ .5emхүртэл тэмдэгтүүдийн үндсэн дэвсгэрийг нэмэгдүүлсэн ..35em.65em

Талхны үйрмэг

paddingBreadcrumbs-ийн өгөгдмөл харагдах байдлыг , background-color, болон -г устгаснаар хялбаршуулсан border-radius.
--bs-breadcrumb-dividerCSS -ийг дахин эмхэтгэх шаардлагагүйгээр хялбархан өөрчлөх зорилгоор шинэ CSS хувийн өмчийг нэмсэн .

Товчлуурууд

Хагарах Шалгах хайрцаг эсвэл радиотой сэлгэх товчлуурууд нь JavaScript шаардлагагүй бөгөөд шинэ тэмдэглэгээтэй болно. Бид боох элемент шаардахаа больж, дээрнэмж.btn-check,<input>үүнийг. #30650-г үзнэ үү . Үүний баримт бичгүүдийг манай Товчлуурын хуудаснаас шинэ маягтын хэсэг рүү шилжүүлсэн..btn<label>
Хагарах Хэрэглээний зориулалтаар хасагдсан .btn-block. .btn-blockТовчлуур дээр ашиглахын оронд шаардлагатай бол зай гаргах хэрэгсэл болон .btnтовчлууруудаа боож өг. Тэдэнд илүү их хяналт тавихын тулд хариу үйлдэл үзүүлэх анги руу шилжинэ үү. Зарим жишээг авахын тулд баримт бичгийг уншина уу..d-grid.gap-*
Нэмэлт параметрүүдийг дэмжихийн тулд бидний button-variant()болон холимогуудыг шинэчилсэн .button-outline-variant()
Товчлуурыг зөөвөрлөх болон идэвхтэй төлөвт тодосгогчийг нэмэгдүүлэхийн тулд шинэчилсэн.
Идэвхгүй болсон товчлуурууд одоо байна pointer-events: none;.

Карт

ХагарахМанай сүлжээг .card-deckдэмжсэн. Картуудаа баганын ангиудад боож, .row-cols-*картын тавцанг дахин үүсгэхийн тулд эцэг эхийн савыг нэмээрэй (гэхдээ хариу үйлдэл үзүүлэх тохиргоог илүү хянах боломжтой).
ХагарахӨрлөгийг .card-columnsдэмжсэн. #28922-ыг үзнэ үү .
Хагарах.cardҮндсэн баян хуурыг шинэ баян хуурын бүрэлдэхүүнээр сольсон .

Карусель

Харанхуй текст, удирдлага, үзүүлэлтүүдийн шинэ .carousel-darkхувилбарыг нэмсэн (цайвар дэвсгэрт тохиромжтой).
Тойрог тойргийн удирдлагын шеврон дүрсүүдийг Bootstrap Icons -ийн шинэ SVG-ээр сольсон .

Хаах товч

ХагарахИлүү бага ерөнхий нэрээр нэрийг нь .closeөөрчилсөн ..btn-close
Хаах товчлуурууд нь HTML-д background-imagea-ийн оронд (суулгасан SVG)-г ашиглаж байгаа ×бөгөөд энэ нь таны тэмдэглэгээнд хүрэх шаардлагагүйгээр илүү хялбар өөрчлөх боломжийг олгоно.
Харанхуй дэвсгэр дээр дүрсийг хаах өндөр тодосгогчийг идэвхжүүлдэг шинэ .btn-close-whiteхувилбар нэмсэн.filter: invert(1)

Нурах

Баян хуурын гүйлгэх бэхэлгээг арилгасан.

Унтраах цэсүүд

.dropdown-menu-darkХүсэлтийн дагуу бараан цэсэнд зориулсан шинэ хувилбар болон холбогдох хувьсагчдыг нэмсэн .
-д зориулж шинэ хувьсагч нэмсэн $dropdown-padding-x.
Тодруулагчийг сайжруулахын тулд унадаг хуваагчийг харанхуй болгосон.
ХагарахУнждаг цэсний бүх үйл явдлуудыг одоо унждаг унтраах товчлуур дээр идэвхжүүлж, дараа нь үндсэн элемент рүү хөөсөрдөг.
Унтраах цэснүүд нь одоо унждаг цэсийн байрлал data-bs-popper="static"хөдөлгөөнгүй байх үед болон унадаг цэс нь навигацийн талбарт байх үед тохируулсан шинж чанартай болсон data-bs-popper="none". Үүнийг манай JavaScript нэмсэн бөгөөд Попперын байрлалд саад учруулахгүйгээр байрлалын хэв маягийг ашиглахад бидэнд тусалдаг.
ХагарахТөрөлхийн Попперын flipтохиргоонд нийцүүлэн унадаг залгаасын сонголтыг хассан. Та одоо flip хувиргагч fallbackPlacementsдахь сонголтын хоосон массивыг дамжуулж эргүүлэх үйлдлийг идэвхгүй болгож болно.
Унждаг цэсийг автоматаар хаах үйлдлийгautoClose зохицуулах шинэ сонголтоор товших боломжтой болсон . Та энэ сонголтыг ашиглан унадаг цэсний дотор болон гадна талд товшилтыг хүлээн авч интерактив болгох боломжтой.
Унтраах цэсүүд одоо .dropdown-items-г дэмждэг <li>.

Жумботрон

ХагарахЖумботрон бүрэлдэхүүнийг хэрэгслүүдээр хуулбарлах боломжтой тул хассан. Манай шинэ Jumbotron жишээг үз.

Жагсаалтын бүлэг

Жагсаалтын бүлгүүдэд шинэ .list-group-numberedхувиргагч нэмсэн.

Navs болон таб

, , , болон ангилалд шинэ nullхувьсагчдыг нэмсэн.font-sizefont-weightcolor:hover color.nav-link

Navbars

ХагарахNavbar-ууд одоо дотор нь контейнер шаарддаг (зайны шаардлага болон CSS-ийг эрс хялбаршуулахын тулд).

Offcanvas

Шинэ offcanvas бүрэлдэхүүнийг нэмсэн .

Хуудсууд

Хуудасны холбоосууд margin-leftнь бие биенээсээ тусгаарлагдсан үед бүх булангуудыг динамикаар дугуйруулж өөрчлөх боломжтой болсон.
transitionХуудасны холбоос дээр s нэмсэн .

Поповерууд

ХагарахМанай өгөгдмөл popover загварт .arrowнэрээ өөрчилсөн ..popover-arrow
whiteListСонголтыг гэж өөрчилсөн allowList.

Спиннерүүд

Спиннерүүд одоо prefers-reduced-motion: reduceхөдөлгөөнт дүрсийг удаашруулж хүндэлдэг. #31882-ыг үзнэ үү .
Спиннерийн босоо байрлалыг сайжруулсан.

Шарсан талх

Шарсан талхыг одоо байрлал тогтоох хэрэгслийн.toast-container тусламжтайгаар a-д байрлуулж болно.
Үндсэн шарсан талхны үргэлжлэх хугацааг 5 секунд болгон өөрчилсөн.
Шарсан талхнаас overflow: hiddenхасч, функцтэй тохирох border-radiuss- ээр сольсон.calc()

Зөвлөмж

ХагарахМанай өгөгдмөл зөвлөмжийн загварт .arrowнэрийг нь өөрчилсөн ..tooltip-arrow
ХагарахПоппер элементүүдийг илүү сайн байрлуулахын тулд өгөгдмөл утгыг fallbackPlacementsөөрчилсөн .['top', 'right', 'bottom', 'left']
ХагарахwhiteListСонголтыг гэж өөрчилсөн allowList.

Хэрэглээ

ХагарахRTL дэмжлэгийг нэмснээр чиглэлийн нэрийн оронд логик шинж чанарын нэрийг ашиглахын тулд хэд хэдэн хэрэгслүүдийн нэрийг өөрчилсөн:
- Нэрийг нь өөрчилсөн .left-*ба ..right-*.start-*.end-*
- Нэрийг нь өөрчилсөн .float-leftба ..float-right.float-start.float-end
- Нэрийг нь өөрчилсөн .border-leftба ..border-right.border-start.border-end
- Нэрийг нь өөрчилсөн .rounded-leftба ..rounded-right.rounded-start.rounded-end
- Нэрийг нь өөрчилсөн .ml-*ба ..mr-*.ms-*.me-*
- Нэрийг нь өөрчилсөн .pl-*ба ..pr-*.ps-*.pe-*
- Нэрийг нь өөрчилсөн .text-leftба ..text-right.text-start.text-end
ХагарахӨгөгдмөлөөр сөрөг зайг идэвхгүй болгосон.
Нэмэлт элементүүдэд арын дэвсгэрийг .bg-bodyхурдан тохируулах шинэ анги нэмсэн.<body>
, , , болон -д зориулсан шинэ байрлалын хэрэгслүүд нэмэгдсэн . Утгад үл хөдлөх хөрөнгө тус бүрийн хувьд , , болон орно .toprightbottomleft050%100%
Үнэмлэхүй/тогтмол байрлалтай элементүүдийг хэвтээ эсвэл босоо байдлаар төвлөрүүлэх шинэ .translate-middle-xболон хэрэгслүүдийг нэмсэн..translate-middle-y
Шинэ border-widthхэрэгслүүд нэмэгдсэн .
Хагарах.text-monospaceгэж өөрчилсөн .font-monospace.
ХагарахЭнэ нь дахиж .text-hideашиглах ёсгүй текстийг нуух хуучирсан арга тул хассан.
.fs-*Хэрэглээний хэрэгслүүдийг нэмсэн font-size(RFS идэвхжүүлсэн). Эдгээр нь HTML-ийн өгөгдмөл гарчигтай ижил масштабыг ашигладаг (1-6, томоос жижиг) бөгөөд Sass газрын зургаар өөрчлөх боломжтой.
ХагарахХэрэглээний нэрийг товч бөгөөд тогтвортой байдлын үүднээс .font-weight-*өөрчилсөн ..fw-*
ХагарахХэрэглээний нэрийг товч бөгөөд тогтвортой байдлын үүднээс .font-style-*өөрчилсөн ..fst-*
CSS Grid болон flexbox зохион байгуулалтад зориулсан .d-gridхэрэгслүүд болон шинэ gapхэрэгслүүдийг ( ) харуулахад нэмсэн ..gap
Хагарах-ийг хасч .rounded-sm, rounded-lgшинэ ангиллын хуваарийг .rounded-0нэвтрүүлсэн .rounded-3. #31687-г үзнэ үү .
Шинэ line-heightхэрэгслүүд нэмэгдсэн: .lh-1, .lh-sm, .lh-baseболон .lh-lg. Эндээс үзнэ үү .
.d-noneБусад дэлгэцийн хэрэгслүүдээс илүү ач холбогдол өгөхийн тулд энэ хэрэгслийг манай CSS-д шилжүүлсэн .
.visually-hidden-focusableТуслагчийг контейнер дээр ажиллахаар сунгаж , :focus-within.

Туслагчид

Хагарах Responsive embed туслахуудыг ангиллын шинэ нэр, сайжруулсан зан чанар, мөн тустай CSS хувьсагчтай харьцаа туслагч болгон өөрчилсөн .
- byАнгиудын нэрийг xхарьцааны харьцаа болгон өөрчилсөн . Жишээлбэл, .ratio-16by9одоо .ratio-16x9байна.
- Бид .embed-responsive-itemболон элементийн бүлгийн сонгогчийг орхиж, илүү энгийн .ratio > *сонгогчийг сонгосон. Дахиад анги шаардлагагүй бөгөөд харьцааны туслагч одоо ямар ч HTML элементтэй ажилладаг.
- Sass газрын $embed-responsive-aspect-ratiosзургийн нэрийг өөрчилсөн бөгөөд $aspect-ratiosтүүний утгыг хялбаршуулж, ангийн нэр болон хувийг key: valueхос болгон оруулсан.
- CSS хувьсагчдыг одоо үүсгэж, Sass газрын зураг дээрх утга тус бүрд оруулсан болно. Дурын хувийн харьцаа үүсгэхийн тулд дээрх --bs-aspect-ratioхувьсагчийг өөрчил ..ratio
Хагарах “Дэлгэц уншигч” ангиуд одоо “харааны далд” анги болжээ.
- Sass файлыг-аас scss/helpers/_screenreaders.scssөөрчилсөнscss/helpers/_visually-hidden.scss
- Нэрийг нь өөрчилсөн .sr-onlyба болон.sr-only-focusable.visually-hidden.visually-hidden-focusable
- Нэрийг нь өөрчилсөн sr-only()ба .sr-only-focusable()visually-hidden()visually-hidden-focusable()
bootstrap-utilities.cssодоо манай туслахууд ч бас багтана. Туслагчдыг захиалгат бүтээцэд импортлох шаардлагагүй болсон.

JavaScript

JQuery-ийн хамаарлыг хасч, нэмэлт өргөтгөлүүдийг ердийн JavaScript дээр дахин бичсэн.
ХагарахБүх JavaScript залгаасуудын өгөгдлийн атрибутууд нь Bootstrap функцийг гуравдагч этгээдээс болон өөрийн кодоос ялгахад туслах нэрийн зайтай болсон. Жишээлбэл, бид data-bs-toggleоронд нь ашигладаг data-toggle.
Одоо бүх залгаасууд CSS сонгогчийг эхний аргумент болгон хүлээн авах боломжтой. Та залгаасын шинэ жишээ үүсгэхийн тулд DOM элемент эсвэл ямар нэгэн хүчинтэй CSS сонгогчийг дамжуулж болно:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigнь Bootstrap-ийн өгөгдмөл Popper тохиргоог аргумент болгон хүлээн авах функц болгон дамжуулж болох бөгөөд ингэснээр та энэ үндсэн тохиргоог өөрийн замаар нэгтгэж болно. Унтраах цэс, поповер болон хэрэгслийн зөвлөмжүүдэд хамаарна.
Попперын элементүүдийг илүү сайн байрлуулахын тулд өгөгдмөл утгыг fallbackPlacementsөөрчилсөн . Унтраах цэс, поповер болон хэрэгслийн зөвлөмжүүдэд хамаарна.['top', 'right', 'bottom', 'left']
_getInstance()→ гэх мэт нийтийн статик аргуудаас доогуур зураасыг хассан getInstance().