Төп эчтәлеккә күчү Документлар навигациясенә күчү
Check
in English

V5

V4-дән v5-ка күченергә ярдәм итәр өчен Bootstrap чыганак файлларына, документларына, компонентларына булган үзгәрешләрне күзәтегез һәм карагыз.

Бу биттә

v5.2.0

Яңартылган дизайн

Bootstrap v5.2.0 проект буенча берничә компонент һәм характеристика өчен нечкә дизайн яңартуын күрсәтә, аеруча border-radiusтөймәләр һәм форма контроллерындагы чистартылган кыйммәтләр аша . Безнең документлар шулай ук ​​яңа баш бит, гади документлар макеты белән яңартылды, алар кырыйның бүлекләрен җимермиләр, һәм Bootstrap иконаларының күренекле үрнәкләре .

Күбрәк CSS үзгәрүчәннәре

CSS үзгәрүчәннәрен куллану өчен без барлык компонентларны яңарттык. Sass һаман да бар нәрсәгә таянып торса да, һәрбер компонент CSS үзгәрүчәннәрен компонент базасы классларына кертү өчен яңартылды, мәсәлән, .btnBootstrap-ны реаль-вакыт көйләү мөмкинлеген бирә. Киләсе чыгарылышларда без 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

Яңа коммуналь хезмәтләр

Өстәмә үзгәрешләр

  • Яңа $enable-container-classesвариант белән таныштырды. - Хәзер эксперименталь CSS челтәр макетын сайлаганда, .container-*бу вариант куелмаган булса, класслар әле дә тупланыр false. Контейнерлар хәзер дә үзләренең кыйммәтләрен саклыйлар.

  • Офканвас компонентында хәзер җаваплы үзгәрешләр бар . Оригиналь .offcanvasкласс үзгәрешсез кала - ул барлык күренешләр буенча эчтәлекне яшерә. Аны җаваплы итәр өчен, бу .offcanvasклассны теләсә нинди .offcanvas-{sm|md|lg|xl|xxl}класска үзгәртегез.

  • Калын өстәл бүлүчеләре хәзер сайлауда. - Без өстәл төркемнәре арасындагы чикне калынрак һәм катлаулырак бетердек һәм сез куллана алырлык факультатив класска күчердек , .table-group-divider. Мисал өчен таблицаның документларын карагыз.

  • Scrolllspy киселеш күзәтчесе 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

Changesзгәрешләрнең тулы исемлеге өчен GitHub'тагы v5.2.0 проектын карагыз .

v5.1.0

  • CSS челтәр макеты өчен эксперименталь ярдәм өстәлде . - Бу эш дәвам итә, һәм производствоны кулланырга әзер түгел, ләкин сез яңа функцияне Sass аша сайлый аласыз. Аны эшләтеп җибәрү өчен $enable-grid-classes: false, CSS челтәрен көйләп һәм эшләтеп, килешү челтәрен сүндерегез $enable-cssgrid: true.

  • Офканваларга булышу өчен диңгез такталары яңартылды. - Офканвас тартмаларын теләсә нинди диңгез тактасына җаваплы .navbar-expand-*класслар һәм кайбер офканвас билгеләре белән өстәгез.

  • Яңа урын иясе компоненты өстәлде . - Безнең яңа компонент, реаль эчтәлек урынына вакытлыча блоклар белән тәэмин итү ысулы, сезнең сайтта яки кушымтада нәрсәдер йөкләнгәнен күрсәтергә ярдәм итү.

  • Плагинны җимерү хәзер горизонталь җимерелүне хуплый . - урынына җимерелү .collapse-horizontalөчен өстәгез . Браузерны яңадан урнаштырудан сакланыгыз ..collapsewidthheightmin-heightheight

  • Яңа стек һәм вертикаль кагыйдә ярдәмчеләре өстәлде. - Стеклар белән махсус макетларны тиз ясау өчен берничә флексбокс үзлекләрен тиз кулланыгыз . .hstackГоризонталь ( ) һәм вертикаль ( ) сенажлардан сайлагыз .vstack. Яңа ярдәмчеләр<hr> белән элементларга охшаган вертикаль бүлгечләр өстәгез ..vr

  • Яңа глобаль :rootCSS үзгәрүчәннәр өстәлде. - Стильләрне :rootконтрольдә тоту дәрәҗәсенә берничә яңа CSS үзгәрүчесе өстәлде. <body>Күп нәрсә эштә, шул исәптән безнең коммуналь хезмәтләр һәм компонентлар аша, ләкин хәзерге вакытта CSS үзгәрүләрен көйләү бүлегендә укыгыз .

  • CSS үзгәрүчәннәрен куллану өчен төс һәм фон ярдәмендә капиталь ремонт ясалды, һәм яңа текст караңгылыгы һәм фон караңгылыгы өстәлде . - .text-* һәм .bg-*коммуналь хезмәтләр хәзер CSS үзгәрүчәннәре һәм rgba()төс кыйммәтләре белән төзелгән, сезгә яңа караңгылык ярдәмендә теләсә нинди ярдәмне көйләргә мөмкинлек бирә.

  • Безнең компонентларны ничек көйләргә икәнен күрсәтү өчен яңа фрагмент мисаллары өстәлде. - Безнең яңа Сниппет мисаллары белән махсуслаштырылган компонентларны һәм бүтән уртак дизайн үрнәкләрен кулланырга әзер . Аяк асты , тамчылар , исемлек төркемнәре , модальләр керә .

  • Попперлардан һәм корал киңәшләреннән кулланылмаган позицияләү стильләре алынды, чөнки алар Поппер белән генә эшләнә. $tooltip-marginискергән һәм nullпроцесска куелган.

Күбрәк мәгълүмат телисезме? V5.1.0 блог постын укыгыз.

Сәлам! Bootstrap 5, v5.0.0 беренче чыгарылышына үзгәрешләр түбәндә документлаштырылган. Алар югарыда күрсәтелгән өстәмә үзгәрешләрне чагылдырмыйлар.

Бәйләнешләр

  • JQuery ташланды.
  • Popper v1.x -тан Popper v2.x-ка яңартылды.
  • Libsass-ны Дарт Сасс белән алыштырдык, чөнки безнең Libass-ны бирелгән Sass компиляциясе искерде.
  • Документацияләр төзү өчен Джекиллдан Угога күчендек

Браузер ярдәме

  • Internet Explorer 10 һәм 11 ташланды
  • Microsoft Edge ташланды <16 (Мирас кыры)
  • Firefox <60
  • Сафари ташланды <12
  • IOS Safari ташланды <12
  • Chrome <60

Документация үзгәрә

  • Баш бит, документлар макеты, аста.
  • Яңа Посылка кулланмасы өстәлде .
  • V4-ның Тема битен алыштырып , Sass-ның яңа детальләре, глобаль конфигурация вариантлары, төс схемалары, CSS үзгәрүчәннәре һәм башкалар белән яңа Customize бүлеге өстәлде .
  • Барлык форма документларын яңа формалар бүлегенә үзгәртеп , эчтәлекне күбрәк игътибарлы битләргә бүлеп.
  • Шулай ук, челтәр эчтәлеген тагын да яхшырак белү өчен , Layout бүлеген яңартты .
  • "Navs" компонент битенең исемен "Navs & Tabs" итеп үзгәртәләр.
  • "Чеклар" битенең исемен "Чеклар һәм радио" дип үзгәртәләр.
  • Диңгез тактасын яңадан эшләделәр һәм безнең сайтлар һәм документлар версияләрен җиңеләйтү өчен яңа субнав өстәделәр.
  • Эзләү кыры өчен яңа клавиатура кыска юллары өстәлде : Ctrl + /.

Сасс

  • Кирәк булмаган кыйммәтләрне бетерү җиңелрәк булсын өчен, без Sass картасының кушылуы турында уйладык. Онытмагыз, сез хәзер Сасс карталарындагы барлык кыйммәтләрне билгеләргә тиеш $theme-colors. Сасс карталары белән эш итүне карагыз .

  • БозуФункциянең исеме 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)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-focushover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(шулай ук ​​бәйләнгән коммуналь классны ташлады, .text-hide)
    • visibility()
    • form-control-focus()

  • БозуСассның төс масштабы функциясе белән бәрелешүдән саклану өчен scale-color()функциянең исеме үзгәртелде.shift-color()

  • box-shadowмиксиннар хәзер nullкыйммәтләрне рөхсәт итәләр һәм noneберничә аргументтан төшәләр. Карагыз # 30394 .

  • Миксинның border-radius()хәзерге вакытта кыйммәте бар.

Төсләр системасы

  • Яңа төс системасы белән эшләгән color-level()һәм $theme-color-intervalбетерелгән төс системасы. Безнең код базасындагы барлык функцияләр lighten()һәм . Бу функцияләр төсне ак яки кара белән кушачак, аның җиңеллеген билгеле күләмдә үзгәртү урынына. Васыять яисә аның параметры уңай яки тискәре булуына карап төсне төсле итәчәк. Төгәлрәк мәгълүмат өчен 30 30622 карагыз .darken()tint-color()shade-color()shift-color()

  • 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-*
    • БозуЯңа челтәр коммуналь хезмәтләренә туры .no-guttersкилер өчен үзгәртелде ..g-0

  • Колонналар инде position: relativeкулланылмады, шуңа күрә .position-relativeбу тәртипне торгызу өчен кайбер элементларга өстәргә туры килергә мөмкин.

  • Бозу.order-*Еш кулланылмаган берничә классны ташладылар. Хәзер без сандыктан гына тәэмин .order-1итәбез ..order-5

  • БозуКомпонентны ташлады, .mediaчөнки аны коммуналь хезмәтләр белән җиңел кабатларга мөмкин. Мисал өчен # 28265 һәм флекс коммуналь битләрен карагыз .

  • Бозу bootstrap-grid.cssхәзер box-sizing: border-boxглобаль бокс-размерны урнаштыру урынына баганага гына кагыла. Шул рәвешле, безнең челтәр стильләре комачауламыйча күбрәк урыннарда кулланылырга мөмкин.

  • $enable-grid-classesинде контейнер классларын булдыруны туктатмый. 2929146 кара.

  • Миксинны make-colбилгеле зурлыктагы тигез баганаларга килешү буенча яңартты.

Эчтәлек, яңадан башлау һ.б.

  • RFS хәзер килешү буенча кушылган. Миксин кулланган рубрикаларfont-size()автоматик рәвештә аларныңfont-sizeкүренеше белән масштабка көйләнәчәк. Бу үзенчәлек моңа кадәр v4 белән оптималь булган.

  • Бозу$display-*Variзгәрешлеләребезне һәм $display-font-sizesSass картасы белән алыштыру өчен безнең дисплей типографиясен капиталь ремонтладылар . $display-*-weightШулай ук ​​бер $display-font-weightһәм көйләнгән font-sizes өчен аерым үзгәрешләрне бетерделәр .

  • Ике яңа .display-*баш размер өстәлде, .display-5һәм .display-6.

  • Ссылкалар , билгеле компонентларның өлеше булмаса, килешү буенча сызылган .

  • Стильләрен яңарту һәм стилизацияне контрольдә тоту өчен CSS үзгәрүчәннәре белән яңадан торгызу өчен таблицалар .

  • БозуОяланган таблицалар стильләрне мирас итмиләр.

  • Бозу .thead-lightһәм барлык өстәл элементлары өчен кулланыла ала торган вариант класслары файдасына .thead-darkташланалар ( ,,,, һәм ) ..table-*theadtbodytfoottrthtd

  • БозуМиксин table-row-variant()үзгәртелә table-variant()һәм 2 параметрны гына кабул итә: $color(төс исеме) һәм $value(төс коды). Чик төсе һәм акцент төсләре таблицаның фактор үзгәрүләренә нигезләнеп автоматик рәвештә исәпләнә.

  • -yӨстәл шакмаклары паддер үзгәрешләрен бүлегез -x.

  • БозуКласс .pre-scrollable. 2929135 кара

  • Бозу .text-*Коммуналь хезмәтләр өстәмә сылтамаларга өстәмә фокус өстәмиләр. .link-*аның урынына ярдәмче класслар кулланырга мөмкин. 2929267 кара

  • БозуКласс .text-justify. Кара # 29793

  • Бозу <hr>элементлар хәзер атрибутны яхшырак яклау heightурынына кулланалар. Бу шулай ук ​​калын бүлүчеләр булдыру өчен паддинг программаларын кулланырга мөмкинлек бирә (мәсәлән, ).bordersize<hr class="py-1">

  • Килешү буенча горизонталь padding-leftһәм <ul>элементларны <ol>браузердан 40pxбашлап 2rem.

  • Өстәлде $enable-smooth-scroll, бу глобаль кулланыла - медиа соравы scroll-behavior: smoothаша хәрәкәтне киметүне сораган кулланучылардан кала . 31 31877 караprefers-reduced-motion

РТЛ

  • Горизонталь юнәлешнең махсус үзгәрүчәннәре, коммуналь хезмәтләр, миксиннар барысы да флексбокс макетларында булган логик үзлекләрне куллану өчен үзгәртелде, мәсәлән , startһәм endурынына .leftright

Формалар

  • Яңа йөзү формалары өстәлде! Без йөзүче этикеткалар үрнәген тулысынча хупланган форма компонентларына күтәрдек. Яңа йөзү ярлыклары битен карагыз.

  • Бозу Консолидацияләнгән туган һәм гадәти форма элементлары. 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инде displayHTML элементын үзгәртеп, теләгәнчә ярдәм текстын ясарга яки блок текстын булдырырга мөмкинлек бирми.

  • Форма контроле heightмөмкин булганда тотрыклы кулланылмый, киресенчә, min-heightүзләштерүне һәм бүтән компонентлар белән ярашуны яхшырту өчен кичектерелә.

  • Тикшерү иконалары инде <select>s белән кулланылмый multiple.

  • scss/forms/Керү төркеме стильләрен кертеп, үзгәртелгән чыганак Sass файллары .

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

  • paddingСигнализация, икмәк кисәкләре, карточкалар, тамчылар, исемлек төркемнәре, модальләр, поповерлар, кораллар өчен безнең бердәм кыйммәтләр $spacer. Карагыз # 30564 .

Аккордеон

Сигнализация

  • Сигнализацияләрдә хәзер иконалар белән мисаллар бар .

  • <hr>Sәрбер хәбәрдә s өчен махсус стильләр бетерелде , чөнки алар инде кулланалар currentColor.

Бейджлар

  • БозуФональ .badge-*ярдәм өчен барлык төсле классларны ташладылар (мәсәлән, .bg-primaryурынына кулланыгыз .badge-primary).

  • БозуТөште .badge-pill- .rounded-pillаның урынына ярдәмне кулланыгыз.

  • БозуЭлементлар <a>өчен фокус стильләре алынды .<button>

  • Билгеләргә .25em/ .5emдән .35em/ .65em.

  • Икмәк кисәкләренең демократик күренешен гадиләштереп padding, background-colorһәм border-radius.

  • --bs-breadcrumb-dividerCSS -ны компиляцияләмичә, җиңел көйләү өчен яңа 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аккордеонны яңа Аккордеон компоненты белән алыштырды .

Ябу төймәсе

  • БозуАзрак гомуми исем белән .closeүзгәртелде ..btn-close

  • Ябу төймәләре хәзер HTML'та background-image(урнаштырылган SVG) кулланалар &times;, сезнең билгеләргә кагылмыйча, җиңелрәк көйләү мөмкинлеген бирә.

  • Караңгы фонда югары контрастлы иконаларны эшләтеп җибәрү өчен кулланыла торган яңа .btn-close-whiteвариант өстәлде.filter: invert(1)

Apseимерелү

  • Аккордеон өчен әйләндергеч люкны бетерделәр.

  • Таләп ителгән караң��ы төшү өчен яңа .dropdown-menu-darkвариант һәм бәйләнешле үзгәрешләр өстәлде.

  • Өчен яңа үзгәрүчән өстәлде $dropdown-padding-x.

  • Яхшыртылган контраст өчен тамчы бүлүчене караңгыландырды.

  • БозуАчылу өчен барлык вакыйгалар хәзер тамчы күчү төймәсенә этәрелә, аннары төп элементка күмелә.

  • Ачылу менюлары хәзерге вакытта data-bs-popper="static"атрибутлар җыелмасына ия, тамчы позициясе статик булганда, яисә төшү диңгез тактасында булганда. Бу безнең JavaScript белән өстәлде һәм Popper позициясенә комачауламыйча, махсус позиция стильләрен кулланырга булыша.

  • БозуflipТуган Поппер конфигурациясе файдасына тамчы плагин өчен ташланган вариант. Сез хәзер флип модификаторында fallbackPlacementsвариант өчен буш массивны узып, әйләнеш тәртибен сүндерә аласыз.

  • Тамчы менюлары хәзер автоматик якын тәртипautoClose белән идарә итүнең яңа варианты белән чирттерелергә мөмкин . Сез бу вариантны интерактив итәр өчен тамчы меню эчендә яки тышында кабул итүне кабул итә аласыз.

  • Тамчы тамчылары хәзер .dropdown-items белән төрелгән <li>.

Джамботрон

Төркем исемлеге

  • , Һәм класс өчен яңа nullүзгәрешләр өстәлде .font-sizefont-weightcolor:hover color.nav-link
  • БозуNavbars хәзер контейнер таләп итә (аралар таләпләрен һәм CSS таләпләрен гадиләштерергә).
  • БозуКласс .activeинде .nav-items өчен кулланыла алмый, ул турыдан-туры s'ларда кулланылырга тиеш .nav-link.

Офканвас

Пагинация

  • Пагинация сылтамалары хәзер көйләнә margin-leftала, алар бер-берсеннән аерылганда барлык почмакларда динамик түгәрәкләнәләр.

  • transitionПагинация сылтамаларына s өстәлде .

Поповерлар

  • БозуКилешү поповер шаблонында үзгәртелде .arrow..popover-arrow

  • whiteListВариантның исеме үзгәртелде allowList.

Спиннерлар

  • Спиннар хәзер prefers-reduced-motion: reduceанимацияләрне әкренләп хөрмәт итәләр. 31 31882 кара .

  • Яхшыртылган әйләндергеч вертикаль тигезләү.

Тостлар

  • Тостларны хәзер урнаштыру коммуналь хезмәтләре.toast-container ярдәмендә урнаштырырга мөмкин .

  • Килешү тостның озынлыгы 5 секундка үзгәртелде.

  • Тостлардан алынды overflow: hiddenһәм функцияләр белән тиешле border-radiuss белән алыштырылды calc().

Кораллар

  • БозуКилешү кораллары шаблонында үзгәртелде .arrow..tooltip-arrow

  • БозуКилешү кыйммәте поппер элементларын яхшырак урнаштыру өчен fallbackPlacementsүзгәртелә .['top', 'right', 'bottom', 'left']

  • БозуwhiteListВариантның исеме үзгәртелде allowList.

Коммуналь хезмәтләр

  • БозуРТЛ ярдәме белән юнәлешле исемнәр урынына логик милек исемнәрен куллану өчен берничә коммуналь хезмәтнең исемен үзгәрттеләр:

    • Исеме үзгәртелде .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 челтәре һәм флексбокс макетлары өчен коммуналь .d-gridхезмәтләр һәм яңа gapинженерлар ( ) күрсәтү өчен өстәлде ..gap

  • БозуЧыгарылды .rounded-smһәм rounded-lgяңа класс масштабын .rounded-0кертте .rounded-3. 31 31687 кара .

  • Яңа line-heightкоммуналь хезмәтләр өстәлде : .lh-1,, һәм . Монда карагыз ..lh-sm.lh-base.lh-lg

  • .d-noneБашка күрсәтү коммуналь хезмәтләренә караганда күбрәк авырлык бирү өчен, безнең CSS программасын күчерде .

  • Кулланучыны .visually-hidden-focusableконтейнерларда эшләргә киңәйтте :focus-within.

Ярдәмчеләр

  • Бозу Respаваплы урнаштырылган ярдәмчеләр яңа класс исемнәре һәм яхшыртылган тәртип, шулай ук ​​файдалы CSS үзгәрүчесе булган ярдәмчеләргә үзгәртелде.

    • Класслар аспект нисбәтенә үзгәрү byөчен үзгәртелде . xМәсәлән, .ratio-16by9хәзер .ratio-16x9.
    • Без .embed-responsive-itemһәм элемент төркеме селекторын гадирәк селектор файдасына ташладык .ratio > *. Бүтән класс кирәк түгел, һәм катнашу ярдәмчесе хәзер теләсә нинди HTML элементы белән эшли.
    • $embed-responsive-aspect-ratiosСасс картасы үзгәртелде һәм аның кыйммәтләре класс исемен һәм процентны пар $aspect-ratiosитеп кертү өчен гадиләштерелде .key: value
    • CSS үзгәрүчәннәре хәзер ясала һәм Sass картасында һәр кыйммәт өчен кертелә. Customзгәртүченең теләсә нинди үзенчәлекле өлешен булдыру --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"]')

  • popperConfigBootstrap'ның default Popper конфигурациясен аргумент итеп кабул итүче функция буларак кабул ителергә мөмкин, шулай итеп сез бу килешү конфигурациясен берләштерә аласыз. Тамчыларга, поповерларга, корал күрсәтмәләренә кагыла.

  • Поппер элементларын яхшырак урнаштыру өчен, килешү бәясе fallbackPlacementsүзгәртелә . Тамчыларга, поповерларга, корал күрсәтмәләренә кагыла.['top', 'right', 'bottom', 'left']

  • _getInstance()Public кебек статик ысуллардан аскы сызык алынды getInstance().