Муҳоҷират ба v5

Тағиротро дар файлҳои манбаи Bootstrap, ҳуҷҷатҳо ва ҷузъҳо пайгирӣ ва аз назар гузаронед, то ба шумо дар муҳоҷират аз v4 ба v5 кӯмак расонанд.

Дар ин саҳифа

v5.2.0

Тарҳрезии навшуда

Bootstrap v5.2.0 навсозии нозуки тарроҳиро барои як қатор ҷузъҳо ва хосиятҳо дар саросари лоиҳа, махсусан тавассути border-radiusарзишҳои тозашуда дар тугмаҳо ва идоракунии форма пешниҳод мекунад . Ҳуҷҷатҳои мо инчунин бо саҳифаи нави хонагӣ, тарҳбандии оддии ҳуҷҷатҳо, ки дигар қисмҳои панели паҳлӯро вайрон намекунанд ва намунаҳои барҷастаи Icons Bootstrap навсозӣ шудаанд.

Тағйирёбандаҳои бештари CSS

Мо ҳама ҷузъҳои худро барои истифодаи тағирёбандаҳои CSS навсозӣ кардем. Дар ҳоле ки Sass то ҳол ҳама чизро пуштибонӣ мекунад, ҳар як ҷузъ барои дохил кардани тағирёбандаҳои 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. Он якчанд харитаҳои Sass-ро аз он мебарорад, _variables.scssто мушкилотеро ҳал кунад, ки навсозиҳои харитаи аслӣ ба харитаҳои дуюмдараҷа, ки онҳоро васеъ мекунанд, татбиқ намешуданд. Масалан, навсозиҳои ба $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 барои истифодаи API Intersection Observer аз нав навишта шудааст , ки ин маънои онро дорад, ки шумо дигар ба парпечкунии волидайни нисбӣ ниёз надоред, конфигуратсияро бекорoffsetмекунад ва ғайра. Ҷустуҷӯи Scrollspy-и худро ҷустуҷӯ кунед, то дар инъикоси нави онҳо дақиқтар ва мувофиқ бошанд.
Поповерҳо ва маслиҳатҳо ҳоло тағирёбандаҳои 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синфи нав дастгирӣ мекунанд.

Барои рӯйхати пурраи тағйирот, ба лоиҳаи v5.2.0 дар GitHub нигаред .

v5.1.0

Дастгирии таҷрибавӣ барои тарҳбандии CSS Grid илова карда шуд. — Ин кор дар ҷараён аст ва ҳоло барои истифодаи истеҳсолӣ омода нест, аммо шумо метавонед тавассути Sass хусусияти навро интихоб кунед. Барои фаъол кардани он, шабакаи пешфарзро бо гузоштан ғайрифаъол кунед $enable-grid-classes: falseва Grid CSS-ро тавассути танзимот фаъол созед $enable-cssgrid: true.
Навбарҳои навсозӣ барои дастгирии offcanvas. - Дар ҳама гуна наворҳо бо .navbar-expand-*синфҳои ҷавобгӯ ва баъзе аломатҳои берун аз канвас илова кунед .
Компоненти нави ҷойнишин илова карда шуд. - Ҷузъи навтарини мо, як роҳи таъмини блокҳои муваққатӣ ба ҷои мундариҷаи воқеӣ, то нишон диҳад, ки чизе дар сайт ё барномаи шумо ҳоло ҳам бор карда мешавад.
Васлкунаки Collapse ҳоло фурӯпошии уфуқиро дастгирӣ мекунад . — Барои фурӯпошии .collapse-horizontalхуд ба ҷои . Нагузоред, ки аз нав ранг кардани браузер бо гузоштани a ё ..collapsewidthheightmin-heightheight
Ёрдамчиёни нави стек ва қоидаҳои амудӣ илова карда шуданд. — Барои зуд сохтани тарҳҳои фармоишӣ бо стекҳо хосиятҳои сершумори flexbox-ро зуд татбиқ кунед . Аз стекҳои уфуқӣ ( .hstack) ва амудӣ ( .vstack) интихоб кунед. Бо ёрдамчиёни нав тақсимкунакҳои амудиро ба <hr>унсурҳо илова кунед ..vr
Тағирёбандаҳои нави глобалии :rootCSS илова карда шуданд. -:root Ба сатҳ барои идоракунии <body>услубҳо якчанд тағирёбандаҳои нави CSS илова карда шуданд. Бештар дар корҳо ҳастанд, аз ҷумла дар саросари коммуналӣ ва ҷузъҳои мо, аммо ҳоло тағирёбандаҳои 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 (Legacy Edge)
Firefox <60-ро партофтааст
Сафари партофташуда <12
Қатъи iOS Safari <12
Chrome-ро партофтанд <60

Тағироти ҳуҷҷатҳо

Саҳифаи асосӣ аз нав тарҳрезӣшуда, тарҳбандии ҳуҷҷатҳо ва поёни поён.
Роҳнамои нави Parcel илова карда шуд.
Бахши нави Customize илова карда шуд, ки саҳифаи Theming-и v4-ро иваз мекунад , бо тафсилоти нав дар бораи Sass, имконоти конфигуратсияи глобалӣ, схемаҳои рангӣ, тағирёбандаҳои CSS ва ғайра.
Ҳама ҳуҷҷатҳои формаро ба бахши нави Формалар аз нав ташкил карда, мундариҷаро ба саҳифаҳои бештар нигаронидашуда тақсим кард.
Ба ҳамин монанд, қисмати Тарҳро навсозӣ кард , то мундариҷаи шабакаро равшантар нишон диҳад.
Номи саҳифаи ҷузъи "Navs" ба "Navs & Tabs" иваз карда шуд.
Номи саҳифаи "Чекҳо" ба "Чекҳо ва радиоҳо" иваз карда шуд.
Навбарро аз нав тарҳрезӣ кард ва зернавъи нав илова кард, то дар атрофи сайтҳо ва версияҳои ҳуҷҷатҳои мо осонтар гарданд.
Барои майдони ҷустуҷӯ миёнабури нави клавиатура илова карда шуд: Ctrl + /.

Сасс

Мо якҷояшавии пешфарзии харитаи Sass-ро аз даст додем, то нест кардани арзишҳои зиёдатӣ осонтар шавад. Дар хотир доред, ки шумо ҳоло бояд ҳамаи арзишҳоро дар харитаҳои Sass муайян кунед, ба монанди $theme-colors. Бифаҳмед, ки чӣ тавр бо харитаҳои Sass кор кардан мумкин аст .
ШикастанНоми color-yiq()функсия ва тағирёбандаҳои марбут ба он иваз карда шуд, color-contrast()зеро он дигар ба фазои ранги YIQ алоқаманд нест. Нигаред № 30168.
- $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()
Шикастанscale-color()Функсияи номгузорӣ shift-color()барои пешгирӣ кардани бархӯрд бо функсияи миқёси рангҳои худи Sass.
box-shadowмиксинҳо ҳоло ба nullарзишҳо иҷозат медиҳанд ва noneаз далелҳои сершумор хориҷ мешаванд. Нигаред № 30394 .
Миксин border-radius()ҳоло арзиши пешфарз дорад.

Системаи ранг

Системаи ранг, ки бо кор мекард color-level()ва $theme-color-intervalба манфиати системаи нави ранг хориҷ карда шуд. Ҳама lighten()ва darken()функсияҳо дар пойгоҳи коди мо бо ва иваз карда tint-color()мешаванд shade-color(). Ин функсияҳо рангро бо сафед ё сиёҳ омехта мекунанд, ба ҷои тағир додани равшании он ба миқдори муайян. Вобаста shift-color()аз он, ки параметри вазни он мусбат ё манфӣ аст, рангро ё соя мекунад ё соя мекунад. Барои тафсилоти бештар нигаред # 30622 .
Барои ҳар як ранг рангҳо ва сояҳои нав илова карда шуданд, ки барои ҳар як ранги асосӣ нӯҳ ранги алоҳидаро ҳамчун тағирёбандаҳои нави Sass таъмин мекунанд.
Контрасти беҳтаршудаи ранг. Таносуби контрасти рангҳо аз 3:1 то 4,5:1 ва рангҳои кабуд, сабз, кабуд ва гулобӣ нав карда шуд, то контрасти WCAG 2.1 AA таъмин карда шавад. Инчунин ранги контрасти ранги моро аз $gray-900ба $black.
Барои дастгирии системаи рангҳои мо, мо одат tint-color()ва shade-color()функсияҳои нав илова кардем, то рангҳои моро мувофиқ омехта кунанд.

Навсозии шабака

Нуқтаи нав! xxlБарои ва боло нуқтаи қатъи нав илова 1400pxкарда шуд. Тағйирот ба ҳамаи дигар нуқтаҳои қатъкунӣ вуҷуд надорад.
Ҷойҳои такмилёфта. Ҷойгоҳҳо ҳоло дар ремс гузошта шудаанд ва аз v4 тангтаранд ( 1.5rem, ё тақрибан 24px, аз 30px). Ин ҷӯйборҳои системаи шабакаи моро бо утилитаҳои фосилавии мо мувофиқ мекунад.
- Синфи нави ҷӯйборҳо ( .g-*, .gx-*, ва .gy-*) барои идоракунии ҷӯйборҳои уфуқӣ/вертикалӣ, ҷӯйборҳои уфуқӣ ва амудӣ илова карда шуд.
- ШикастанНоми .no-guttersон .g-0барои мувофиқат бо утилитаҳои нави ҷӯйбор иваз карда шуд.
Сутунҳо дигар position: relativeтатбиқ нашудаанд, аз ин рӯ ба шумо лозим меояд, ки .position-relativeбарои барқарор кардани ин рафтор ба баъзе элементҳо илова кунед.
ШикастанЯкчанд .order-*дарсҳоро тарк кард, ки аксар вақт истифода намешаванд. Мо ҳоло танҳо аз қуттӣ таъмин .order-1мекунем ..order-5
ШикастанКомпонентро партофтанд .media, зеро онро бо утилитаҳо ба осонӣ такрор кардан мумкин аст. Барои мисол ба #28265 ва саҳифаи утилитаҳои flex нигаред .
Шикастан bootstrap-grid.cssакнун танҳо box-sizing: border-boxба сутун ба ҷои аз нав танзим кардани андозаи глобалии қуттиҳо дахл дорад. Ҳамин тариқ, сабкҳои шабакаи мо метавонанд дар ҷойҳои бештар бидуни дахолат истифода шаванд.
$enable-grid-classesдигар тавлиди синфҳои контейнериро ғайрифаъол намекунад. Нигаред № 29146.
Миксинро make-colба сутунҳои баробар бе андозаи муайян навсозӣ кард.

Content, Reboot ва ғайра

RFS ҳоло бо нобаёнӣ фаъол аст. Сарлавҳаҳое, ки миксинро истифода мебаранд,font-size()ба таври худкорfont-sizeмиқёси онҳоро бо майдони намоиш танзим мекунанд. Ин хусусият қаблан бо v4 пайваст шуда буд.
ШикастанТипографияи намоишии моро барои иваз кардани $display-*тағирёбандаҳо ва $display-font-sizesхаритаи Sass аз нав таъмир кард. Инчунин $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-*Утилитаҳо дигар ба истинодҳо ҳолати hover ва фокусро илова намекунанд. .link-*ба ҷои синфҳои ёрирасон истифода бурдан мумкин аст. Нигаред № 29267
ШикастанСинфро партофта .text-justify. Нигаред № 29793
Шикастан <hr>элементҳо ҳоло heightба ҷои borderбарои беҳтар дастгирӣ кардани sizeатрибут истифода мешаванд. Ин инчунин имкон медиҳад, ки утилитаҳои пуркунӣ барои эҷоди тақсимкунакҳои ғафс (масалан, <hr class="py-1">).
Аз нав танзимкунии уфуқии пешфарз фаъол padding-leftва <ul>унсурҳоро <ol>аз пешфарз браузер 40pxба 2rem.
Иловашуда $enable-smooth-scroll, ки дар саросари ҷаҳон татбиқ мешавад scroll-behavior: smooth, ба истиснои корбароне, ки тавассути prefers-reduced-motionдархости медиа ҳаракати камро талаб мекунанд. Нигаред № 31877

RTL

Тағйирёбандаҳои мушаххаси самти уфуқӣ, утилитаҳо ва миксинҳо ҳама барои истифодаи хосиятҳои мантиқӣ ба монанди онҳое, ки дар тарҳбандиҳои flexbox пайдо шудаанд, номгузорӣ шудаанд, масалан, startва 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.
Файлҳои сарчашмаи Sass дар зери scss/forms/, аз ҷумла сабкҳои гурӯҳи воридотӣ аз нав ташкил карда шудаанд.

Компонентхо

Қиматҳои ягона paddingбарои огоҳиҳо, нонрезаҳо, кортҳо, афтандаҳо, гурӯҳҳои рӯйхат, модалҳо, поповерҳо ва маслиҳатҳои асбобҳо, ки ба $spacerтағирёбандаи мо асос ёфтаанд. Нигаред № 30564 .

Аккордеон

Компоненти нави аккордеон илова карда шуд.

Огоҳӣ

Ҳоло огоҳиҳо намунаҳо бо нишонаҳо доранд.
Сабкҳои фармоишии <hr>s дар ҳар як огоҳӣ хориҷ карда шуданд, зеро онҳо аллакай currentColor.

Нишонҳо

ШикастанҲама .badge-*синфҳои рангҳоро барои утилитаҳои замина партофтанд (масалан, .bg-primaryба ҷои .badge-primary).
Шикастан.badge-pillПартофта шуд — ба ҷои он утилитаро истифода .rounded-pillбаред.
ШикастанХовер ва услубҳои фокус барои <a>ва <button>унсурҳо хориҷ карда шуданд.
Афзоиши пуркунии пешфарз барои нишонаҳо аз .25em/ .5emто .35em/ .65em.

Нонпораҳо

Намуди пешфарзии нонрезаҳо тавассути нест кардани padding, background-color, ва border-radius.
Амволи нави фармоишии CSS --bs-breadcrumb-dividerбарои мутобиқсозии осон бидуни зарурати дубора тартиб додани CSS илова карда шуд.

Тугмаҳо

Шикастан Тугмаҳои ивазкунанда бо қуттиҳои қайд ё радио дигар JavaScript-ро талаб намекунанд ва аломати нав доранд. Мо дигар ба унсури печонидашуда ниёз надорем, ба . илова кунед.btn-checkва<input>онро бо ягон.btnсинф дар<label>. Нигаред № 30650 . Ҳуҷҷатҳо барои ин аз саҳифаи Тугмаҳои мо ба бахши нави шаклҳо кӯчонида шуданд.
Шикастан Барои .btn-blockхизматрасониҳои коммуналӣ партофта шудааст. Ба ҷои он ки .btn-blockдар . Барои назорати боз ҳам бештар аз болои онҳо ба синфҳои ҷавобгӯ гузаред. Барои баъзе мисолҳо ҳуҷҷатҳоро хонед..btn.d-grid.gap-*
Барои дастгирии параметрҳои иловагӣ навсозӣ button-variant()ва миксинҳои мо .button-outline-variant()
Тугмаҳои таҷдидшуда барои таъмини контрасти зиёд дар боло ва ҳолати фаъол.
Тугмаҳои ғайрифаъол ҳоло доранд pointer-events: none;.

Корт

ШикастанБа .card-deckманфиати шабакаи мо афтод. Кортҳои худро дар синфҳои сутун печонед ва як .row-cols-*контейнери волидайнро барои аз нав сохтани саҳни кортҳо илова кунед (вале бо назорати бештар аз ҳамоҳангсозии ҷавобгӯ).
Шикастан.card-columnsБа тарафдории масонӣ афтод . Нигаред № 28922 .
ШикастанАккордеони .cardасосиро бо ҷузъи нави Accordion иваз кард.

Карусель

.carousel-darkВарианти нав барои матни торик, идоракунӣ ва нишондиҳандаҳо илова карда шуд (барои заминаҳои сабуктар).
Нишонаҳои шеврон барои идоракунии карусел бо SVG-ҳои нав аз Bootstrap Icons иваз карда шуданд.

Тугмаи пӯшида

ШикастанБарои номи камтар умумӣ номгузорӣ шуд .close..btn-close
Тугмаҳои пӯшида ҳоло background-imageба ҷои a ×дар HTML -ро (SVG-и дарунсохташуда) истифода мебаранд, ки имкон медиҳад, ки бидуни ламс кардани аломати шумо мутобиқсозӣ осонтар шавад.
.btn-close-whiteВарианти нав илова карда шуд, ки filter: invert(1)барои фаъол кардани контрасти баландтар истифода бурдани нишонаҳо дар заминаи ториктар.

Фурӯпошӣ

Лангари паймоиш барои аккордеонҳо хориҷ карда шуд.

Равзанаҳои афтанда

Варианти нав .dropdown-menu-darkва тағирёбандаҳои алоқаманд барои афтандаҳои торикии дархостшуда илова карда шуд.
Тағирёбандаи нав барои $dropdown-padding-x.
Тақсимкунандаи афтанда барои контрасти беҳтар торик карда шуд.
ШикастанҲама рӯйдодҳои афтанда ҳоло дар тугмаи афтанда фаъол карда мешаванд ва сипас ба унсури волидайн футур карда мешаванд.
Менюҳои афтанда ҳоло як атрибут доранд data-bs-popper="static", вақте ки ҷойгиршавии афтанда статикӣ аст ё афтанда дар навор аст. Ин аз ҷониби JavaScript-и мо илова карда шудааст ва ба мо кӯмак мекунад, ки услубҳои ҷойгиршавии фармоиширо бидуни дахолат ба мавқеъгирии Поппер истифода барем.
ШикастанОпсияи партофташуда flipбарои плагини афтанда ба манфиати конфигуратсияи аслии Popper. Шумо ҳоло метавонед рафтори лоғарро тавассути гузаронидани массиви холӣ барои fallbackPlacementsопсия дар тағирдиҳандаи флип хомӯш кунед.
Менюҳои афтанда ҳоло метавонанд бо autoCloseимконоти нав барои идора кардани рафтори худкор пӯшидан клик карда шаванд. Шумо метавонед ин хосиятро барои қабул кардани клик дар дохил ё берун аз менюи афтанда истифода баред, то онро интерактивӣ гардонед.
Ҳоло афтандаҳо .dropdown-itemбо s печонида шудаанд, дастгирӣ <li>мекунанд.

Ҷумботрон

ШикастанКомпоненти jumbotron партофта шуд, зеро он метавонад бо утилитҳо такрор карда шавад. Намунаи нави Jumbotron-и моро барои намоиш нигаред.

Рӯйхати гурӯҳ

Ба рӯйхат гурӯҳҳо .list-group-numberedтағирдиҳандаи нав илова карда шуд.

Навъҳо ва ҷадвалҳо

Барои , , , ва ба синф nullтағирёбандаҳои нав илова карда шуданд.font-sizefont-weightcolor:hover color.nav-link

Навбарҳо

ШикастанНавбарҳо ҳоло контейнерро дар дохили он талаб мекунанд (барои ба таври назаррас содда кардани талаботҳои фосила ва CSS талаб карда мешавад).
ШикастанСинфро .activeдигар ба s татбиқ кардан мумкин нест .nav-item, он бояд бевосита дар .nav-links татбиқ карда шавад.

Offcanvas

Ҷузъи нави offcanvas илова карда шуд.

Саҳифабандӣ

Истинодҳои саҳифасозӣ ҳоло танзимшаванда доранд margin-left, ки ҳангоми аз ҳамдигар ҷудошуда дар ҳама кунҷҳо ба таври динамикӣ мудаввар карда мешаванд.
transitionБа истинодҳои саҳифасозӣ илова карда шуд.

Поповерҳо

ШикастанНоми .arrowонро .popover-arrowдар қолаби пешфарзии мо иваз кард.
Номи whiteListвариант ба allowList.

Спиннерҳо

Спиннерҳо ҳоло prefers-reduced-motion: reduceбо суст кардани аниматсияҳо эҳтиром мекунанд. Нигаред № 31882 .
Ҳамоҳангсозии амудии чархзананда беҳтар карда шуд.

Тостҳо

Тостҳоро акнун бо ёрии утилитаҳои ҷойгиркунӣ ҷойгир кардан мумкин аст ..toast-container
Давомнокии вудкои пешфарз ба 5 сония иваз карда шуд.
Аз тостҳо хориҷ карда шуда , бо функсияҳои overflow: hiddenмувофиқ иваз карда шуданд .border-radiuscalc()

Маслиҳатҳо

ШикастанНоми .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-*рӯи кӯтоҳӣ ва мувофиқат.
Илова .d-gridба намоиши утилитҳо ва утилитаҳои нав gap( .gap) барои CSS Grid ва тарҳҳои flexbox.
ШикастанБаровард .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.

Ёрдамчиён

Шикастан Ёрдамчиёни ҳассос ба ёрирасони таносуб бо номҳои нави синф ва рафтори беҳтаршуда, инчунин як тағирёбандаи муфиди CSS иваз карда шуданд.
- byСинфҳо барои тағир додани xтаносуби тарафҳо номгузорӣ шуданд . Масалан, .ratio-16by9хозир аст .ratio-16x9.
- Мо .embed-responsive-itemинтихобкунандаи гурӯҳи ва элементро ба фоидаи .ratio > *селектори соддатар партофтем. Дигар синф лозим нест ва ёвари таносуб ҳоло бо ҳама гуна элементи HTML кор мекунад.
- Харитаи $embed-responsive-aspect-ratiosSass ба ном иваз карда шуд $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метавонад ҳамчун функсияе интиқол дода шавад, ки конфигуратсияи пешфарзии Popper Bootstrap-ро ҳамчун далел қабул кунад, то шумо метавонед ин конфигуратсияи пешфарзро дар роҳи худ якҷоя кунед. Ба афтандаҳо, popovers ва маслиҳатҳои асбобҳо дахл дорад.
Қимати пешфарз барои ҷойгиркунии беҳтари унсурҳои Поппер fallbackPlacementsба тағйир дода мешавад . Ба афтандаҳо, popovers ва маслиҳатҳои асбобҳо дахл дорад.['top', 'right', 'bottom', 'left']
Зерхат аз усулҳои статикии оммавӣ ба монанди _getInstance()→ хориҷ getInstance()карда шуд.