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

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

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

v5.2.0

Шинэчлэгдсэн загвар

Bootstrap v5.2.0 нь төслийн хүрээнд цөөн хэдэн бүрэлдэхүүн хэсэг болон шинж чанаруудын дизайны нарийн шинэчлэлтийг агуулдаг бөгөөд ялангуяа border-radiusтовчлуурууд болон маягтын удирдлага дээрх сайжруулсан утгуудаар дамжуулан . Манай баримт бичгийг мөн шинэ нүүр хуудас, хажуугийн самбарын хэсгүүдийг задлахаа больсон илүү хялбар баримт бичгийн бүтэц, Bootstrap Icons -ийн илүү тод жишээнүүдээр шинэчилсэн .

Илүү олон CSS хувьсагч

Бид CSS хувьсагчдыг ашиглахын тулд бүх бүрэлдэхүүн хэсгүүдээ шинэчилсэн. Сасс бүх зүйлийг үндэслэсэн хэвээр байгаа хэдий ч бүрэлдэхүүн хэсэг бүрийг бүрэлдэхүүн хэсгийн үндсэн ангиудад (жишээ нь, ) CSS хувьсагчдыг оруулахаар шинэчлэгдсэн .btnнь Bootstrap-г илүү бодит цагийн тохиргоонд оруулах боломжийг олгосон. Дараагийн хувилбаруудад бид CSS-ийн хувьсагчдыг байршил, маягтууд, туслахууд болон хэрэглүүрүүддээ үргэлжлүүлэн ашиглах болно. Бүрэлдэхүүн хэсэг бүрийн CSS хувьсагчийн талаар тус тусын баримт бичгийн хуудаснаас уншина уу.

Бидний CSS хувьсагчийн хэрэглээ Bootstrap 6 хүртэл зарим талаар бүрэн бус байх болно. Бид эдгээрийг бүхэлд нь хэрэгжүүлэхийг хүсч байгаа ч тэдгээр нь эвдэрсэн өөрчлөлтийг үүсгэх эрсдэлтэй. Жишээлбэл, хэрэв та ямар нэг шалтгаанаар $alert-border-width: var(--bs-border-width)үүнийг хийж байсан бол манай эх кодын тохиргоо нь таны өөрийн код дахь боломжит Sass-ийг эвддэг .$alert-border-width * 2

Тиймээс, боломжтой бол бид илүү олон CSS хувьсагч руу тэмүүлэх болно, гэхдээ бидний хэрэгжилт v5-д бага зэрэг хязгаарлагдмал байж магадгүй гэдгийг анхаарна уу.

Шинэ`_maps.scss`

Bootstrap v5.2.0 нь шинэ Sass файлыг танилцуулсан _maps.scss. _variables.scssЭнэ нь анхны газрын зургийн шинэчлэлтийг өргөтгөсөн хоёрдогч газрын зурагт ашиглаагүй асуудлыг засахын тулд хэд хэдэн Sass газрын зургийг гаргаж авдаг . Жишээлбэл, шинэчлэлтүүд нь үндсэн тохиргооны ажлын урсгалыг зөрчсөн $theme-colorsбусад сэдэвчилсэн газрын зурагт хэрэгжихгүй байсан . $theme-colorsТовчхондоо, Sass-д нэг удаа өгөгдмөл хувьсагч эсвэл газрын зургийг ашигласан бол шинэчлэх боломжгүй гэсэн хязгаарлалт байдаг. Бусад CSS хувьсагчдыг зохиоход ашигладаг CSS хувьсагчдад ижил төстэй дутагдал байдаг.

Ийм учраас Bootstrap дахь хувьсагчийн тохируулга нь -ийн дараа , харин бидний импортын стекийн @import "functions"өмнө болон бусад хэсгүүдийн дараа ирэх ёстой. @import "variables"Үүнтэй адил зүйл Sass газрын зурагт хамаарна - та тэдгээрийг ашиглахаасаа өмнө анхдагч тохиргоог хүчингүй болгох ёстой. Дараах газрын зургийг шинэ рүү шилжүүлэв _maps.scss.

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

Таны захиалгат Bootstrap CSS-үүд одоо тусдаа газрын зураг импортлох үед иймэрхүү харагдах ёстой.

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

Шинэ хэрэгслүүд

Хагас тод үсгийн фонтыг оруулах зорилгоор өргөтгөсөн font-weightхэрэгслүүд ..fw-semibold
Өргөтгөсөн border-radiusхэрэгслүүд нь хоёр шинэ хэмжээ, .rounded-4болон .rounded-5бусад сонголтуудыг багтаасан.

Нэмэлт өөрчлөлтүүд

Шинэ $enable-container-classesсонголтыг танилцууллаа. — Одоо туршилтын CSS Grid байршлыг сонгохдоо .container-*энэ сонголтыг тохируулаагүй л бол ангиудыг эмхэтгэсэн хэвээр байх болно false. Савнууд нь одоо усны сувгийн үнэ цэнийг хадгалдаг.
Offcanvas бүрэлдэхүүн одоо хариу үйлдэл үзүүлэх хувилбаруудтай болсон. Анхны .offcanvasанги өөрчлөгдөөгүй хэвээр байна - энэ нь бүх харах хэсэгт агуулгыг нуудаг. Хариуцлагатай болгохын тулд тэр .offcanvasангийг дурын .offcanvas-{sm|md|lg|xl|xxl}анги болгон өөрчил.
Зузаан ширээ хуваагчийг ашиглах боломжтой боллоо. — Бид хүснэгтийн бүлгүүдийн хоорондох бүдүүн, дарахад хэцүү хил хязгаарыг хасч, таны хэрэглэж болох нэмэлт анги руу шилжүүлсэн .table-group-divider. Жишээлбэл, хүснэгтийн баримт бичгүүдийг үзнэ үү.
Scrollspy нь Intersection Observer API-г ашиглахын тулд дахин бичигдсэн бөгөөд энэ нь танд харьцангуй эцэг эхийн багц, хуучирсанoffsetтохиргоо болон бусад зүйл хэрэггүй гэсэн үг юм. Өөрийн Scrollspy хэрэгжүүлэлтүүд нь илүү нарийвчлалтай, тууштай байхын тулд тэдгээрийг онцлон хараарай.
Popovers болон tooltips одоо CSS хувьсагчдыг ашигладаг. Хувьсагчдын тоог багасгахын тулд зарим CSS хувьсагчдыг Sass-нхаас нь шинэчилсэн. Үүний үр дүнд энэ хувилбарт гурван хувьсагчийг хуучирсан: $popover-arrow-color, $popover-arrow-outer-color, болон $tooltip-arrow-color.
Шинэ .text-bg-{color}туслахууд нэмэгдсэн. .text-*Хувь хүний болон хэрэгслүүдийг тохируулахын оронд .bg-*та одоо туслагчийг .text-bg-*ашигланbackground-color тодосгогч нүүрийг тохируулах боломжтой color.
.form-check-reverseШошго болон холбогдох шалгах хайрцаг/радиогийн дарааллыг өөрчлөхийн тулд өөрчлөгч нэмсэн .
Шинэ ангиар дамжуулан хүснэгтүүдэд судалтай баганыг нэмсэн ..table-striped-columns

Өөрчлөлтүүдийн бүрэн жагсаалтыг GitHub дээрх v5.2.0 төслөөс харна уу .

v5.1.0

CSS Grid байршлын туршилтын дэмжлэгийг нэмсэн . — Энэ ажил хийгдэж байгаа бөгөөд үйлдвэрлэлд ашиглахад хараахан бэлэн болоогүй байгаа ч та Sass-ээр дамжуулан шинэ функцийг ашиглах боломжтой. Үүнийг идэвхжүүлэхийн тулд өгөгдмөл сүлжээг идэвхгүй болгож, $enable-grid-classes: falseCSS сүлжээг тохируулж идэвхжүүлнэ үү $enable-cssgrid: true.
Offcanvas-г дэмжихийн тулд шинэчлэгдсэн навигац. — Дурын навигацийн самбарт responsive ангиуд болон зарим гадуурх тэмдэглэгээ бүхий лаазнаас гадуурх шүүгээ нэмнэ үү ..navbar-expand-*
Орлуулагчийн шинэ бүрэлдэхүүн хэсэг нэмэгдсэн . — Бидний хамгийн сүүлийн үеийн бүрэлдэхүүн хэсэг нь таны сайт эсвэл апп-д ямар нэгэн зүйл ачаалагдаж байгааг илтгэх бодит агуулгын оронд түр зуурын блокоор хангах арга юм.
Collapse залгаас одоо хэвтээ уналтыг дэмждэг . —-ийн оронд хумигдахын тулд .collapse-horizontalөөрийнх рүү нэмнэ үү . эсвэл тохиргоог хийснээр хөтчийг дахин будахаас зайлсхий ..collapsewidthheightmin-heightheight
Шинэ стек болон босоо дүрмийн туслахуудыг нэмсэн. — Олон flexbox шинж чанарыг хурдан ашиглан стек бүхий захиалгат байршлыг хурдан үүсгэх боломжтой . .hstackХэвтээ ( ) болон босоо ( .vstack) стекүүдээс сонгоно уу . Шинэ туслагчтай<hr> элементүүдтэй төстэй босоо хуваагчийг нэмнэ үү ..vr
Шинэ глобал :rootCSS хувьсагчийг нэмсэн. -:root Загварыг удирдах түвшинд хэд хэдэн шинэ CSS хувьсагчийг нэмсэн <body>. Манай хэрэгслүүд болон бүрэлдэхүүн хэсгүүдийг оруулаад илүү олон зүйл ажиллаж байгаа боловч одоогоор Customize хэсгээс CSS хувьсагчдыг уншина уу .
CSS хувьсагчдыг ашиглахын тулд өнгө, дэвсгэрийн хэрэгслүүдийг шинэчилж, текстийн тунгалаг байдал болон дэвсгэрийн тунгалаг байдлын шинэ хэрэгслүүдийг нэмсэн. — .text-* мөн .bg-*хэрэгслүүд нь одоо CSS хувьсагч болон rgba()өнгөний утгуудаар бүтээгдсэн бөгөөд ямар ч хэрэгслийг шинэ тунгалаг байдлын хэрэгслүүдээр хялбархан өөрчлөх боломжийг танд олгоно.
Манай бүрэлдэхүүн хэсгүүдийг хэрхэн өөрчлөхийг харуулахын тулд шинэ хэсэгчилсэн жишээг нэмсэн. — Манай шинэ Snippets жишээнүүдийн тусламжтайгаар тохируулсан бүрэлдэхүүн хэсгүүд болон бусад нийтлэг дизайны хэв маягийг ашиглахад бэлэн болгоорой . Хөл хэсэг , унадаг жагсаалт , жагсаалтын бүлгүүд , загварууд орно .
Зөвхөн Поппер зохицуулдаг тул ашиглагдаагүй байршлын хэв маягийг попов болон хэрэгслийн зөвлөмжөөс хассан . $tooltip-marginхуучирсан nullбөгөөд энэ процесст тохируулсан.

Дэлгэрэнгүй мэдээлэл авахыг хүсч байна уу? v5.1.0 блог нийтлэлийг уншина уу.

Хөөе! Бидний анхны томоохон хувилбар болох Bootstrap 5, v5.0.0-д гарсан өөрчлөлтүүдийг доор баримтжуулсан болно. Эдгээр нь дээр үзүүлсэн нэмэлт өөрчлөлтүүдийг тусгаагүй болно.

Хамаарал

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-control.custom-checkboxодоо .form-checkбайна.
- .custom-control.custom-custom-radioодоо .form-checkбайна.
- .custom-control.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 элементийг өөрчилснөөр доторлогоо үүсгэх эсвэл тусламжийн текстийг хүссэнээр блоклох боломжийг танд олгоно.
heightМаягтын хяналтыг боломжтой бол тогтмол ашиглахаа больж min-height, бусад бүрэлдэхүүн хэсгүүдийн тохиргоо болон нийцлийг сайжруулахын тулд хойшлогдож байна.
<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"нь унадаг цэсийн байрлал нь хөдөлгөөнгүй эсвэл унадаг цэс нь навигацийн талбарт байгаа үед тохируулагдсан шинж чанартай болсон. Үүнийг манай JavaScript нэмсэн бөгөөд Попперын байрлалд саад учруулахгүйгээр байрлалын хэв маягийг ашиглахад бидэнд тусалдаг.
ХагарахТөрөлхийн Попперын flipтохиргоонд нийцүүлэн унадаг залгаасын сонголтыг хассан. Та одоо flip хувиргагч fallbackPlacementsдахь сонголтын хоосон массивыг дамжуулж эргүүлэх үйлдлийг идэвхгүй болгож болно.
Унждаг цэсийг автоматаар хаах үйлдлийгautoClose зохицуулах шинэ сонголтоор товших боломжтой болсон . Та энэ сонголтыг ашиглан унадаг цэсний дотор болон гадна талд товшилтыг хүлээн авч интерактив болгох боломжтой.
Унтраах цэсүүд одоо .dropdown-items-г дэмждэг <li>.

Жумботрон

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

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

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

Navs болон таб

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

Navbars

ХагарахNavbar-ууд одоо дотор нь контейнер шаарддаг (зайны шаардлага болон CSS-ийг эрс хялбаршуулахын тулд).
ХагарахАнги нь s дээр .activeхэрэглэгдэхээ больсон .nav-item, s дээр шууд хэрэглэгдэх ёстой .nav-link.

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 сонгогчийг дамжуулж болно:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigнь Bootstrap-ийн өгөгдмөл Popper тохиргоог аргумент болгон хүлээн авах функц болгон дамжуулж болох бөгөөд ингэснээр та энэ үндсэн тохиргоог өөрийн замаар нэгтгэж болно. Унтраах цэс, поповер болон хэрэгслийн зөвлөмжүүдэд хамаарна.
Попперын элементүүдийг илүү сайн байрлуулахын тулд өгөгдмөл утгыг fallbackPlacementsөөрчилсөн . Унтраах цэс, поповер болон хэрэгслийн зөвлөмжүүдэд хамаарна.['top', 'right', 'bottom', 'left']
_getInstance()→ гэх мэт нийтийн статик аргуудаас доогуур зураасыг хассан getInstance().