v5 ге көчүрүү

Bootstrap булак файлдарына, документтерине жана компоненттерине көз салып, карап чыгыңыз, сизге v4дөн v5ке өтүүгө жардам берет.

Бул бетте

v5.2.0

Жаңыланган дизайн

Bootstrap v5.2.0 долбоор боюнча бир нече компоненттер жана касиеттер үчүн тымызын дизайнды жаңыртат, өзгөчө border-radiusбаскычтардагы жана форманы башкаруу элементтериндеги такталган маанилер аркылуу . Биздин документация дагы жаңы башкы бет, каптал тилкесинин бөлүмдөрүн жыйыштырбай турган жөнөкөй документтердин макети жана Bootstrap иконкаларынын көрүнүктүү мисалдары менен жаңыртылды .

Көбүрөөк CSS өзгөрмөлөрү

Биз CSS өзгөрмөлөрүн колдонуу үчүн бардык компоненттерибизди жаңырттык. Sass дагы эле бардыгын негиздеп жатканы менен, ар бир компонент .btnBootstrap'тин реалдуу убакытта ыңгайлаштырылышына мүмкүндүк берип, компоненттердин базалык класстарында (мисалы, ) CSS өзгөрмөлөрүн камтышы үчүн жаңыртылган. Кийинки чыгарылыштарда биз 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 ишке ашырууларыңыздын навигацияны бөлүп көрсөтүүдө так жана ырааттуу болушу үчүн издеңиз.
Поповерлер жана кеңештер азыр CSS өзгөрмөлөрүн колдонушат. Кээ бир CSS өзгөрмөлөрү өзгөрмөлөрдүн санын азайтуу үчүн Sass кесиптештеринен жаңыртылган. Натыйжада, бул чыгарылышта үч өзгөрмө эскирди: $popover-arrow-color, $popover-arrow-outer-color, жана $tooltip-arrow-color.
Жаңы .text-bg-{color}жардамчылар кошулду. .text-*Индивидуалдык жана утилиталарды орнотуунун ордуна .bg-*, сиз азыр карама-каршы алдыңкы планды коюу үчүн жардамчыларды .text-bg-*колдоно аласыз .background-colorcolor
.form-check-reverseЭнбелгилердин жана тиешелүү белгилөө кутучаларынын/радиолордун тартибин алмаштыруу үчүн өзгөрткүч кошулду .
Жаңы класс аркылуу таблицаларга чаар тилкелер кошулду ..table-striped-columns

Өзгөртүүлөрдүн толук тизмесин GitHubдагы v5.2.0 долбоорун караңыз .

v5.1.0

CSS Grid жайгашуусу үчүн эксперименталдык колдоо кошулду . — Бул аткарылып жаткан иш жана өндүрүштө колдонууга азырынча даяр эмес, бирок сиз жаңы функцияга Sass аркылуу кошулсаңыз болот. Аны иштетүү үчүн, орнотуу менен демейки торду өчүрүңүз $enable-grid-classes: falseжана CSS торчосун орнотуу менен иштетиңиз $enable-cssgrid: true.
Offcanvas колдоо үчүн жаңыртылган навигация тилкелери. — Каалаган навигация тилкесине жооп берүүчү класстар жана кээ бир сырткы канвас белгилөөлөрү менен canvas суурмаларын кошуңуз ..navbar-expand-*
Жаңы толтургуч компоненти кошулду . — Биздин эң жаңы компонентибиз, сиздин сайтыңызда же колдонмоңузда дагы эле бир нерсе жүктөлүп жатканын көрсөтүү үчүн реалдуу мазмундун ордуна убактылуу блокторду берүү жолу.
Жыйыштыруу плагини азыр горизонталдуу кыйратууну колдойт . — Жыйыштыруу үчүн .collapse-horizontalанын ордуна кошуңуз . же коюу менен браузерди кайра боёодон качыңыз ..collapsewidthheightmin-heightheight
Жаңы стек жана вертикалдуу эрежелердин жардамчылары кошулду. — Стек менен ыңгайлаштырылган макеттерди тез түзүү үчүн бир нече flexbox касиеттерин тез колдонуңуз . .hstackТуурасынан ( ) жана вертикалдуу ( .vstack) стектерден тандаңыз . Жаңы жардамчылар<hr> менен элементтерге окшош тик бөлгүчтөрдү кошуңуз ..vr
Жаңы глобалдык :rootCSS өзгөрмөлөрү кошулду. —:root Стилдерди башкаруу деңгээлине бир нече жаңы CSS өзгөрмөлөрү <body>кошулду. Көбүрөөк иштер аткарылууда, анын ичинде биздин утилиталарыбыз жана компоненттерибиз, бирок азыр 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 Dart Sass менен алмаштырылды, анткени биздин Sass компилятору Libsass эскирген.
Документибизди куруу үчүн Джекилден Гюгого көчүп келдик

Браузерди колдоо

Internet Explorer 10 жана 11 түшүрүлгөн
Microsoft Edge түшүрүлдү < 16 (Мурдагы Edge)
Firefox <60 түшүрүлдү
Safari түшүрүлдү <12
iOS Safari түшүрүлдү < 12
Chrome < 60 түшүрүлдү

Документтерди өзгөртүү

Кайрадан жасалган башкы бет, документтердин макети жана колонтитул.
Жаңы посылка гид кошулду .
Sass боюнча жаңы деталдар, глобалдык конфигурация опциялары, түс схемалары, CSS өзгөрмөлөрү жана башкалар менен v4 Темалоо барагынын ордуна жаңы Ыңгайлаштыруу бөлүмү кошулду .
Бардык форманын документтери жаңы Формалар бөлүмүнө кайра уюштурулуп , мазмунду көбүрөөк багытталган барактарга бөлдү.
Ошо сыяктуу эле, тордун мазмунун айкыныраак көрсөтүү үчүн "Макетинг" бөлүмү жаңырды.
"Navs" компонент барагынын аталышы "Navs & Tabs" деп өзгөртүлдү.
"Чектер" барагынын аталышы "Чектер жана радиолор" деп өзгөртүлдү.
Сайттарды жана документтердин версияларын айланып өтүүнү жеңилдетүү үчүн навигация тилкесин кайра иштеп чыгып, жаңы subnav кошту.
Издөө талаасы үчүн жаңы баскычтоп кошулду: Ctrl + /.

Sass

Биз ашыкча маанилерди алып салууну жеңилдетүү үчүн демейки Sass картасынын бириктирүүлөрүн жокко чыгардык. Эсиңизде болсун, сиз азыр Sass карталарындагы бардык баалуулуктарды аныкташыңыз керек $theme-colors. Sass карталары менен кантип күрөшүү керектигин карап көрүңүз .
BreakingФункциянын аталышы color-yiq()жана ага байланыштуу өзгөрмөлөр color-contrast()YIQ түс мейкиндигине байланыштуу болбой калды. Караңыз #30168.
- $yiq-contrasted-thresholdдеп өзгөртүлгөн $min-contrast-ratio.
- $yiq-text-darkжана $yiq-text-lightтиешелүүлүгүнө жараша $color-contrast-darkжана деп аталат $color-contrast-light.
BreakingМедиа сурам аралашмасынын параметрлери логикалык мамиле үчүн өзгөрдү.
- 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
BreakingБасып чыгаруу стилдери жана $enable-print-stylesөзгөрмө алынып салынды. Басма дисплей класстары дагы эле бар. Кара #28339 .
Breakingcolor(), theme-color(), жана gray()функциялары өзгөрмөлөрдүн пайдасына түшүрүлдү . Кара #29083 .
Breakingtheme-color-level()Функциянын аталышы өзгөртүлдү color-level()жана азыр түстөрдүн ордуна каалаган түстү кабыл алат $theme-color. Караңыз #29083 Абайлаңыз : color-level() кийинчерээк ташталган v5.0.0-alpha3.
BreakingАты өзгөртүлдү $enable-prefers-reduced-motion-media-queryжана кыскалык $enable-pointer-cursor-for-buttonsүчүн .$enable-reduced-motion$enable-button-pointers
BreakingМиксин алып салды bg-gradient-variant(). Түзүлгөн класстардын .bg-gradientордуна элементтерге градиенттерди кошуу үчүн классты колдонуңуз ..bg-gradient-*
Breaking Мурда колдонуудан чыгарылган миксендер алынып салынды:
- 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()
BreakingSassтын өзүнүн түс масштабдоо функциясы менен кагылышууну болтурбоо үчүн 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. Башка бардык токтотуу чекиттерине эч кандай өзгөртүүлөр жок.
Жакшыртылган арыктар. Арыктар азыр ремс менен орнотулган жана v4 караганда тар ( 1.5rem, же болжол менен 24px, дан ылдый 30px). Бул биздин тор тутумубуздун арыктарын биздин аралыктык утилиталарыбыз менен тегиздейт.
- Туурасынан /вертикалдуу арыктарды, горизонталдуу арыктарды жана вертикалдуу арыктарды башкаруу үчүн жаңы канал классы ( .g-*, .gx-*, жана ) кошулду..gy-*
- BreakingАты жаңы арыктарга шайкеш келтирүү үчүн өзгөртүлдү .no-gutters..g-0
Мамычалар колдонулбай калды , андыктан ал жүрүм-турумду калыбына келтирүү үчүн кээ бир элементтерге position: relativeкошууга туура келиши мүмкүн..position-relative
Breaking.order-*Көбүнчө пайдаланылбай калган бир нече сабактарды таштады. Биз азыр кутудан тышкары гана камсыз .order-1кылат ..order-5
BreakingКомпонент түшүрүлдү, .mediaанткени ал утилиталар менен оңой кайталанса болот. Мисал үчүн #28265 жана ийкемдүү утилиталар барагын караңыз .
Breaking bootstrap-grid.cssазыр box-sizing: border-boxглобалдык кутуча өлчөмүн баштапкы абалга келтирүүнүн ордуна тилкеге гана колдонулат. Бул жол менен, биздин тор стилдер тоскоолдуксуз көбүрөөк жерлерде колдонулушу мүмкүн.
$enable-grid-classesмындан ары контейнер класстарынын жаралышын өчүрбөйт. Кара # 29146.
make-colБелгиленген өлчөмү жок бирдей мамычаларды демейкиге жаңыртты .

Мазмун, кайра жүктөө, ж.б

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

RTL

Горизонталдык багыттын өзгөчө өзгөрмөлөрү, утилиталары жана миксиндери flexbox макеттеринде табылган сыяктуу логикалык касиеттерди колдонуу үчүн өзгөртүлгөн — мис. , startжана endордуна .leftright

Формалар

Жаңы калкып туруучу формалар кошулду! Биз Floating labels мисалын толук колдоого алынган форма компоненттерине жылдырдык. Жаңы Floating labels барагын караңыз.
Breaking Консолидацияланган түпнуска жана ыңгайлаштырылган форма элементтери. 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.
BreakingЖыгылды .input-group-appendжана .input-group-prepend. Сиз азыр жөн гана баскычтарды жана .input-group-textкиргизүү топторунун түз балдары катары кошо аласыз.
Валидациялык пикир мүчүлүштүгү бар киргизүү тобунда көптөн бери жок чек ара радиусу, акыры валидациясы бар киргизүү топторуна кошумча .has-validationклассты кошуу менен оңдолот.
Breaking Биздин тор тутумубуз үчүн формага мүнөздүү макет класстары түшүрүлдү. .form-group, .form-rowже ордуна биздин торду жана коммуналдык кызматтарды колдонуңуз .form-inline.
BreakingФорма энбелгилери азыр талап кылынат .form-label.
Breaking .form-textмындан ары коюлбайт display, HTML элементин өзгөртүү менен сиз каалагандай саптык жардам текстин түзүүгө же блоктоого мүмкүндүк берет.
Форманын башкаруу элементтери мүмкүн болсо, мындан ары туруктуу колдонулбайт , анын ордуна башка компоненттер менен ыңгайлаштыруу жана шайкештикти жакшыртуу үчүн heightкийинкиге калтырылат .min-height
Текшерүү сүрөтчөлөрү мындан ары менен <select>s үчүн колдонулбайт multiple.
астындагы Sass булак файлдары scss/forms/, анын ичинде киргизүү тобунун стилдери кайра иреттелген.

Компоненттер

Биздин өзгөрмөнүн paddingнегизинде эскертүүлөр, нан күкүмдөрү, карталар, ачылуучу тизмелер, тизме топтору, модалдар, поповерлер жана кеңештер үчүн бирдиктүү маанилер. Кара #30564 .$spacer

Аккордеон

Жаңы аккордеон компоненти кошулду .

Alerts

Эскертүүлөрдүн азыр сүрөтчөлөрү бар мисалдары бар .
<hr>Ар бир эскертүүдө s үчүн ыңгайлаштырылган стилдер алынып салынды, анткени алар мурунтан эле колдонгон currentColor.

Белгилер

Breaking.badge-*Фондук программалар үчүн бардык түс класстары алынып салынды (мисалы, .bg-primaryордуна колдонуу .badge-primary).
BreakingЖыгылган .badge-pill— анын .rounded-pillордуна утилитаны колдонуңуз.
Breaking<a>жана <button>элементтер үчүн чиркегич жана фокус стилдери алынып салынды .
.25em/ .5emчейин .35em/ чейин бейджиктер үчүн демейки толтуруу көбөйтүлдү .65em.

Нан күкүмдөрү

padding, background-colorжана алып салуу менен нан күкүмдөрүнүн демейки көрүнүшүн жөнөкөйлөштүрдү border-radius.
--bs-breadcrumb-dividerCSSти кайра компиляциялоону талап кылбастан, оңой ыңгайлаштыруу үчүн жаңы CSS өзгөчө касиети кошулду.

Buttons

Breaking Которуу баскычтары , белги кутучалары же радиолору бар, мындан ары JavaScript талап кылынбайт жана жаңы белгилерге ээ. Биз мындан ары орогуч элементти талап кылбайбыз, агакошуп.btn-check,<input>аны. Кара #30650 . Бул үчүн документтер баскычтар барагыбыздан жаңы Формалар бөлүмүнө жылдырылды..btn<label>
Breaking Коммуналдык .btn-blockкызматтар үчүн түшүрүлгөн. Колдонуунун ордуна баскычтарыңызды жана аларды керектүү учурда боштоо үчүн .btn-blockутилита менен .btnороп алыңыз . Аларды көбүрөөк көзөмөлдөө үчүн жооп берүүчү класстарга өтүңүз. Кээ бир мисалдар үчүн документтерди окуңуз..d-grid.gap-*
Кошумча параметрлерди колдоо үчүн биздин button-variant()жана аралашмалар жаңыртылды .button-outline-variant()
Чычкандагы жана активдүү абалдагы контрастты жогорулатуу үчүн жаңыртылган баскычтар.
Өчүрүлгөн баскычтар азыр бар pointer-events: none;.

Карта

BreakingБиздин тордун .card-deckпайдасына түшүп калды. Карталарыңызды мамыча класстарына .row-cols-*ороп, карта палубаларын кайра түзүү үчүн ата-энелик контейнерди кошуңуз (бирок жооп берүүчү тегиздөө боюнча көбүрөөк көзөмөл менен).
BreakingМасондуктун .card-columnsпайдасына түшүп калган. Кара #28922 .
Breaking.cardНегизги аккордеон жаңы Аккордеон компоненти менен алмаштырылды .

Карусель

Караңгы текст, башкаруу элементтери жана индикаторлор үчүн жаңы .carousel-darkвариант кошулду (ачык фон үчүн сонун).
Карусель башкаруу элементтери үчүн шеврон сүрөтчөлөрү Bootstrap Icons жаңы SVG менен алмаштырылды .

Жабуу баскычы

BreakingАты азыраак жалпы ат үчүн .closeөзгөртүлдү ..btn-close
Жабуу баскычтары эми HTMLдеги a background-imageордуна (киргизилген SVG) колдонушат, бул ×сиздин белгилериңизге тийбестен оңой ыңгайлаштырууга мүмкүндүк берет.
Кошумча жаңы .btn-close-whiteвариант кошулду, ал filter: invert(1)кара түстөгү фонго каршы жогорку контрастты жокко чыгаруучу иконаларды иштетүү үчүн колдонулат.

Жыйыштыруу

Аккордеондор үчүн жылдыргыч анкер алынып салынды.

Ашылма тизмелер

Кошулган жаңы .dropdown-menu-darkвариант жана ага байланыштуу өзгөрмөлөр талап боюнча караңгы ачылуучу тизмелер үчүн.
үчүн жаңы өзгөрмө кошулду $dropdown-padding-x.
Жакшыртылган контраст үчүн ылдый түшүүчү бөлгүч караңгылатылган.
BreakingЭми ачылуучу тизмедеги бардык окуялар ачылуучу баскыч баскычында иштетилет жана андан кийин негизги элементке чейин көтөрүлөт.
Ашылма менюларда эми ылдый түшүүчү ылдыйдын data-bs-popper="static"жайгашуусу статикалык болгондо же ылдый ылдыйча навигация тилкесинде болгондо коюлган атрибут бар. Бул биздин JavaScript тарабынан кошулган жана Поппердин жайгашуусуна тоскоолдук кылбастан, ыңгайлаштырылган позиция стилдерин колдонууга жардам берет.
BreakingflipТүпкү Поппер конфигурациясынын пайдасына ылдый түшүүчү плагиндин опциясы түшүрүлдү . Сиз азыр флип fallbackPlacements модфикаторундагы опция үчүн бош массивди өткөрүү менен бурмалоо жүрүм-турумун өчүрө аласыз .
Ашылма менюларды эми автоматтык түрдө жабууну башкаруу үчүн жаңы autoCloseопция менен чыкылдатса болот . Сиз бул опцияны интерактивдүү кылуу үчүн ачылуучу менюнун ичинде же сыртында чыкылдатууну кабыл алуу үчүн колдоно аласыз.
Ачылыш ылдыйкылар азыр .dropdown-items менен оролгон <li>.

Jumbotron

BreakingJumbotron компоненти түшүрүлдү, анткени аны коммуналдык кызматтар менен репликациялоого болот. Демо үчүн биздин жаңы Jumbotron мисалыбызды караңыз.

Тизме тобу

Тизме топторуна жаңы .list-group-numberedөзгөрткүч кошулду .

Navs жана өтмөктөр

, , , жана класска жаңы nullөзгөрмөлөр кошулду.font-sizefont-weightcolor:hover color.nav-link

Navbars

BreakingNavbars азыр ичинде контейнерди талап кылат (аралык талаптарын жана CSS талап кылынат кескин жөнөкөйлөтүү үчүн).
BreakingКласс .activeмындан ары .nav-items үчүн колдонулушу мүмкүн эмес, ал түздөн-түз s боюнча колдонулушу керек .nav-link.

Offcanvas

Жаңы offcanvas компоненти кошулду .

Барактоо

Пагинация шилтемелери азыр margin-leftбири-биринен бөлүнгөндө бардык бурчтарда динамикалык тегеректелген өзгөчөлөштүрүлүүчү болот.
transitionБарактоо шилтемелерине s кошулду .

Popovers

BreakingБиздин демейки popover үлгүсүндөгү деп өзгөртүлдү .arrow..popover-arrow
Параметр деп whiteListөзгөртүлдү allowList.

Spinners

Спиннерлер эми prefers-reduced-motion: reduceанимацияларды жайлатып сыйлашат. Кара #31882 .
Жакшыртылган спиннер вертикалдуу тегиздөө.

Тосттор

Эми тостторду жайгаштыруу утилиталарынын жардамы менен жайгаштырса болот ..toast-container
Демейки тосттун узактыгы 5 секундга өзгөртүлдү.
Тосттордон алынып , функциялары overflow: hiddenменен туура border-radiusс менен алмаштырылды.calc()

Кеңештер

BreakingБиздин демейки инструмент үлгүсүндөгү аталышы .arrowөзгөртүлдү ..tooltip-arrow
BreakingПоппер элементтерин жакшыраак жайгаштыруу үчүн демейки мааниге fallbackPlacementsөзгөртүлгөн .['top', 'right', 'bottom', 'left']
BreakingПараметр деп whiteListөзгөртүлдү allowList.

Коммуналдык кызматтар

BreakingRTL колдоосун кошуу менен багыт аттарынын ордуна логикалык касиет аттарын колдонуу үчүн бир нече утилиталардын атын өзгөрттү:
- Аты өзгөртүлдү .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
BreakingДемейки боюнча терс чектер өчүрүлгөн.
Кошумча элементтерге фонду .bg-bodyтез орнотуу үчүн жаңы класс кошулду.<body>
, , , жана үчүн жаңы кызматтык кызматтар кошулду . Маанилерге , , жана ар бир мүлк үчүн кирет.toprightbottomleft050%100%
Абсолюттук/туруктуу жайгаштырылган элементтерди горизонталдуу же вертикалдуу борборлош үчүн жаңы .translate-middle-xжана утилиталар кошулду..translate-middle-y
Жаңы border-widthкоммуналдык кызматтар кошулду .
Breaking.text-monospaceдеп өзгөртүлдү .font-monospace.
Breaking.text-hideБул мындан ары колдонулбашы керек болгон текстти жашыруунун эски ыкмасы болгондуктан алынып салынды .
.fs-*Коммуналдык кызматтар үчүн кошумча кызматтар font-size(RFS иштетилген). Булар HTMLдин демейки аталыштары менен бирдей масштабды колдонушат (1-6, чоңдон кичинеге чейин) жана аларды Sass картасы аркылуу өзгөртүүгө болот.
BreakingКыскалыгы жана ырааттуулугу үчүн .font-weight-*утилиталардын аталышы өзгөртүлдү..fw-*
BreakingКыскалыгы жана ырааттуулугу үчүн .font-style-*утилиталардын аталышы өзгөртүлдү..fst-*
CSS Grid жана flexbox макеттери үчүн .d-gridутилиталарды жана жаңы gapутилиталарды ( ) көрсөтүүгө кошулду ..gap
Breakingалынып салынды .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.

Жардамчылар

Breaking Жооптуу кыстаруу жардамчылары жаңы класс аттары жана жакшыртылган жүрүм-туруму, ошондой эле пайдалуу 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
Breaking "Экранды окугуч" класстары эми "визуалдык жашыруун" класстар .
- scss/helpers/_screenreaders.scssSass файлын төмөнкүдөн өзгөрттү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'те болуу үчүн кайра жазылды.
BreakingБардык 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"]')
```
popperConfigBootstrap демейки Popper конфигурациясын аргумент катары кабыл алган функция катары берилиши мүмкүн, андыктан сиз бул демейки конфигурацияны өзүңүздүн жолуңузда бириктире аласыз. Ашылма тизмелерге, калкып чыкмаларга жана кеңештерге колдонулат.
Поппер элементтерин жакшыраак жайгаштыруу үчүн демейки мааниге fallbackPlacementsөзгөртүлгөн . Ашылма тизмелерге, калкып чыкмаларга жана кеңештерге колдонулат.['top', 'right', 'bottom', 'left']
_getInstance()→ сыяктуу коомдук статикалык ыкмалардан астыңкы сызык алынып салынды getInstance().