Негизги мазмунга өтүү Документтердин навигациясына өтүү
in English

v5 ге көчүрүү

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

Бул бетте

Көз карандылыктар

  • 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

  • Демейки горизонталдуу 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-checkазыр .form-check.
    • .custom-check.custom-switchазыр .form-check.form-switch.
    • .custom-selectазыр .form-select.
    • .custom-fileжана .form-fileүстүндө ыңгайлаштырылган стилдер менен алмаштырылган .form-control.
    • .custom-rangeазыр .form-range.
    • Тыгып кеткен жергиликтүү .form-control-fileжана .form-control-range.

  • 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мындан ары displayHTML элементин өзгөртүү менен сиз каалагандай сап түзүүгө же жардам текстин блоктоого мүмкүндүк берет.

  • Текшерүү сүрөтчөлөрү мындан ары <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Негизги аккордеон жаңы Аккордеон компоненти менен алмаштырылды .

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

  • BreakingАты азыраак жалпы ат үчүн .closeөзгөртүлдү ..btn-close

  • Жабуу баскычтары эми HTMLдеги a background-imageордуна (киргизилген SVG) колдонушат, бул &times;сиздин белгилериңизге тийбестен оңой ыңгайлаштырууга мүмкүндүк берет.

  • Кошумча жаңы .btn-close-whiteвариант кошулду, ал filter: invert(1)кара түстөгү фонго каршы жогорку контрастты жокко чыгаруучу иконаларды иштетүү үчүн колдонулат.

Жыйыштыруу

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

  • Кошулган жаңы .dropdown-menu-darkвариант жана ага байланыштуу өзгөрмөлөр талап боюнча караңгы ачылуучу тизмелер үчүн.

  • үчүн жаңы өзгөрмө кошулду $dropdown-padding-x.

  • Жакшыртылган контраст үчүн ылдый түшүүчү бөлгүч караңгылатылган.

  • BreakingЭми ачылуучу тизмедеги бардык окуялар ачылуучу баскыч баскычында иштетилет жана андан кийин негизги элементке чейин көтөрүлөт.

  • Ашылма менюларда эми ылдый түшүүчү тизменин data-bs-popper="static"жайгашуусу статикалык data-bs-popper="none"болгондо жана ачылуучу тизме чабыттоо тилкесинде болгондо коюлган атрибутка ээ. Бул биздин JavaScript тарабынан кошулган жана Поппердин жайгашуусуна тоскоолдук кылбастан, ыңгайлаштырылган позиция стилдерин колдонууга жардам берет.

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

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

  • Ачылыш ылдыйкылар азыр .dropdown-items менен оролгон <li>.

Jumbotron

Тизме тобу

  • , , , жана класска жаңы nullөзгөрмөлөр кошулду.font-sizefont-weightcolor:hover color.nav-link
  • BreakingNavbars азыр ичинде контейнерди талап кылат (аралык талаптарын жана CSS талап кылынат кескин жөнөкөйлөтүү үчүн).

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 селекторун өткөрө аласыз:

    var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfigBootstrap демейки Popper конфигурациясын аргумент катары кабыл алган функция катары берилиши мүмкүн, андыктан сиз бул демейки конфигурацияны өзүңүздүн жолуңузда бириктире аласыз. Ашылма тизмелерге, калкып чыкмаларга жана кеңештерге колдонулат.

  • Поппер элементтерин жакшыраак жайгаштыруу үчүн демейки мааниге fallbackPlacementsөзгөртүлгөн . Ашылма тизмелерге, калкып чыкмаларга жана кеңештерге колдонулат.['top', 'right', 'bottom', 'left']

  • _getInstance()→ сыяктуу коомдук статикалык ыкмалардан астыңкы сызык алынып салынды getInstance().