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)
sm
lg
-
ХагарахХэвлэх хэв маяг болон
$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.css
box-sizing: border-box
одоо дэлхийн хайрцгийн хэмжээг дахин тохируулахын оронд зөвхөн баганад хэрэгжинэ . Ингэснээр бидний торны хэв маягийг хөндлөнгийн оролцоогүйгээр илүү олон газарт ашиглах боломжтой. -
$enable-grid-classes
цаашид контейнер анги үүсгэхийг идэвхгүй болгохоо больсон. #29146-г үзнэ үү. -
make-col
Хольцыг өгөгдмөл болгож, заасан хэмжээгүйгээр тэнцүү багана болгон шинэчилсэн .
Агуулга, дахин ачаалах гэх мэт
-
RFS одоо анхдагчаар идэвхжсэн. Холигчийг ашигланхарах цонхны дагуу масштабыг
font-size()
автоматаар тохируулнаЭнэ функц нь өмнө нь v4-тэй холбогдож байсан.font-size
-
Хагарах
$display-*
Хувьсагчаа сольж ,$display-font-sizes
Sass газрын зургаар дэлгэцийн хэв зүйгээ шинэчилсэн. Мөн ганц болон тохируулсан s$display-*-weight
-ийн хувьсагчдыг хассан .$display-font-weight
font-size
-
Хоёр шинэ
.display-*
гарчгийн хэмжээг нэмсэн.display-5
ба.display-6
. -
Холбоосууд нь тодорхой бүрэлдэхүүн хэсгүүдийн нэг хэсэг биш л бол өгөгдмөлөөр доогуур зураастай байдаг (зөвхөн хулганаар биш).
-
Хүснэгтүүдийг шинэчилж, загварчлалыг илүү хянахын тулд CSS хувьсагчаар дахин бүтээв.
-
ХагарахОруулсан хүснэгтүүд нь хэв маягийг өвлөхөө больсон.
-
Хагарах
.thead-light
хүснэгтийн бүх элементүүдэд ( , , , , болон ) ашиглагдах хувилбарын ангиудын давуу тал дээр.thead-dark
хасагдсан болно..table-*
thead
tbody
tfoot
tr
th
td
-
Хагарах
table-row-variant()
Холигчийг нэрлэсэн бөгөөд зөвхөнtable-variant()
2 параметрийг хүлээн авдаг:$color
(өнгөний нэр) болон$value
(өнгөт код). Хүснэгтийн хүчин зүйлийн хувьсагчид үндэслэн хилийн өнгө болон өргөлтийн өнгийг автоматаар тооцдог. -
-y
Хүснэгтийн нүд дүүргэх хувьсагчдыг болон хуваах-x
. -
ХагарахАнгиа хаясан
.pre-scrollable
. #29135-ыг үзнэ үү -
Хагарах
.text-*
Хэрэгслүүд нь холбоосууд руу чиглүүлэх болон фокусын төлөвийг нэмэхээ больсон..link-*
оронд нь туслах анги ашиглаж болно. #29267-г үзнэ үү -
ХагарахАнгиа хаясан
.text-justify
. #29793-ыг үзнэ үү -
Өгөгдмөл хэвтээ горимыг асааж , хөтчийн өгөгдмөлөөс элементүүдийг дахин тохируулна
padding-left
уу .<ul>
<ol>
40px
2rem
-
Нэмэгдсэн
$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
Талхны үйрмэг
-
padding
Breadcrumbs-ийн өгөгдмөл харагдах байдлыг ,background-color
, болон -г устгаснаар хялбаршуулсанborder-radius
. -
--bs-breadcrumb-divider
CSS -ийг дахин эмхэтгэх шаардлагагүйгээр хялбархан өөрчлөх зорилгоор шинэ 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-image
a-ийн оронд (суулгасан 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-item
s-г дэмждэг<li>
.
Жумботрон
- ХагарахЖумботрон бүрэлдэхүүнийг хэрэгслүүдээр хуулбарлах боломжтой тул хассан. Манай шинэ Jumbotron жишээг үз.
Жагсаалтын бүлэг
- Жагсаалтын бүлгүүдэд шинэ
.list-group-numbered
хувиргагч нэмсэн.
Navs болон таб
- , , , болон ангилалд шинэ
null
хувьсагчдыг нэмсэн.font-size
font-weight
color
: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-radius
s- ээр сольсон.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>
-
, , , болон -д зориулсан шинэ байрлалын хэрэгслүүд нэмэгдсэн . Утгад , , болон үл хөдлөх хөрөнгө тус бүрийн хувьд багтана.
top
right
bottom
left
0
50%
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()
- Sass файлыг-аас
-
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()
.