Негизги мазмунга өтүү Документтер багыттоосуна өтүү
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 карталары менен кантип күрөшүү керектигин карап көрүңүз .

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

    • 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 .

  • Breaking Dropped color(), theme-color(), жана gray()функциялары өзгөрмөлөрдүн пайдасына. Кара #29083 .

  • Renamed theme-color-level()функциясын бузууcolor-level() жана азыр түстөрдүн ордуна каалаган түстү кабыл алат $theme-color. Караңыз #29083 Абайлаңыз : color-level() кийинчерээк ташталган v5.0.0-alpha3.

  • Breaking Renamered $enable-prefers-reduced-motion-media-queryand $enable-pointer-cursor-for-buttonsto $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()

  • Sassтын өзүнүн түс масштабдоо функциясы менен кагылышуудан качуу үчүн Breaking Renamed 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 жана ийкемдүү утилиталар барагын караңыз .

  • Бүтүрүү азыр глобалдык кутуча өлчөмүн баштапкы абалга келтирүүнүн ордуна тилкеге 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 Nested таблицалары мындан ары стилдерди мурастабайт.

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

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

  • Жадыбалдын клетка толтуруучу өзгөрмөлөрүн жанага бөлүңүз -y.-x

  • Breaking Dropped .pre-scrollableкласс. Караңыз #29135

  • Үзүлүүчү .text-* утилиталар мындан ары шилтемелерге ачуучу жана фокустук абалдарды кошпойт. .link-*ордуна жардамчы класстарды колдонсо болот. Караңыз №29267

  • Breaking Dropped .text-justifyкласс. Караңыз # 29793

  • Атрибутту жакшыраак колдоо үчүн азыр сынган<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 барагын караңыз.

  • Консолидацияланган түпнуска жана ыңгайлаштырылган форма элементтерин бузуу . 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 Dropped .input-group-appendand .input-group-prepend. Сиз азыр жөн гана баскычтарды жана .input-group-textкиргизүү топторунун түз балдары катары кошо аласыз.

  • Валидациялык пикир мүчүлүштүгү бар киргизүү тобунда көптөн бери жок чек ара радиусу, акыры валидациясы бар киргизүү топторуна кошумча .has-validationклассты кошуу менен оңдолот.

  • Биздин тор тутумубуз үчүн Dropped формага мүнөздүү макет класстары. .form-group, .form-rowже ордуна биздин торду жана коммуналдык кызматтарды колдонуңуз .form-inline.

  • Форманы бузуу энбелгилери азыр талап кылынат .form-label.

  • Breaking .form-text мындан ары топтомдорду жок displayкылат, HTML элементин өзгөртүү менен каалагандай саптык жардам текстин түзүүгө же блоктоого мүмкүндүк берет.

  • Текшерүү сүрөтчөлөрү мындан ары менен <select>s үчүн колдонулбайт multiple.

  • астындагы Sass булак файлдары scss/forms/, анын ичинде киргизүү тобунун стилдери кайра иреттелген.

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

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

Аккордеон

Alerts

  • Эскертүүлөрдүн азыр сүрөтчөлөрү бар мисалдары бар .

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

Белгилер

  • Breaking Фондук программалар үчүн бардык .badge-*түс класстары түшүрүлдү (мисалы, .bg-primaryордуна колдонуу .badge-primary).

  • Breaking Dropped .badge-pill— анын .rounded-pillордуна утилитаны колдонуңуз.

  • Breaking<a> жана <button>элементтер үчүн чиркегич жана фокус стилдери алынып салынды .

  • .25em/ .5emчейин .35em/ чейин бейджиктер үчүн демейки толтуруу көбөйтүлдү .65em.

  • padding, background-colorжана алып салуу менен нан күкүмдөрүнүн демейки көрүнүшүн жөнөкөйлөштүрдү border-radius.

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

Buttons

  • Белгилөө кутучалары же радиолор менен өчүрүү баскычтары мындан ары JavaScriptти талап кылбайт жана жаңы белгилерге ээ. Биз мындан ары орогуч элементти талап кылбайбыз, ага кошуп .btn-check, <input>аны . Кара #30650 . Бул үчүн документтер баскычтар барагыбыздан жаңы Формалар бөлүмүнө жылдырылды..btn<label>

  • Коммуналдык кызматтар үчүн Breaking Dropped . .btn-blockКолдонуунун ордуна баскычтарыңызды жана аларды керектүү учурда боштоо үчүн .btn-blockутилита менен .btnороп алыңыз . Аларды көбүрөөк көзөмөлдөө үчүн жооп берүүчү класстарга өтүңүз. Кээ бир мисалдар үчүн документтерди окуңуз..d-grid.gap-*

  • Кошумча параметрлерди колдоо үчүн биздин button-variant()жана аралашмалар жаңыртылды .button-outline-variant()

  • Чычкандагы жана активдүү абалдагы контрастты жогорулатуу үчүн жаңыртылган баскычтар.

  • Өчүрүлгөн баскычтар азыр бар pointer-events: none;.

Карта

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

  • Breaking Dropped .card-columnsMasonry пайдасына. Кара #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.

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

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

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

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

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

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

Jumbotron

Тизме тобу

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

Offcanvas

Барактоо

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

  • transitionБарактоо шилтемелерине s кошулду .

Popovers

  • Биздин демейки popover үлгүсүндөгү Breaking аты .arrowөзгөртүлдү ..popover-arrow

  • Параметр деп whiteListөзгөртүлдү allowList.

Spinners

  • Спиннерлер эми prefers-reduced-motion: reduceанимацияларды жайлатып сыйлашат. Кара #31882 .

  • Жакшыртылган спиннер вертикалдуу тегиздөө.

Тосттор

  • Эми тостторду жайгаштыруу утилиталарынын жардамы менен жайгаштырса болот ..toast-container

  • Демейки тосттун узактыгы 5 секундага өзгөртүлдү.

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

Кеңештер

  • Биздин демейки инструмент үлгүсүндөгү .arrowBreaking аты өзгөртүлдү ..tooltip-arrow

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

  • Breaking Renameed whiteListoption to allowList.

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

  • Breaking 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

  • 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 картасы аркылуу өзгөртүүгө болот.

  • Кыска жана ырааттуулугу үчүн Renamed .font-weight-*утилиталарын бузуу ..fw-*

  • Кыска жана ырааттуулугу үчүн Renamed .font-style-*утилиталарын бузуу ..fst-*

  • CSS Grid жана flexbox макеттери үчүн .d-gridутилиталарды жана жаңы gapутилиталарды ( ) көрсөтүүгө кошулду ..gap

  • Breaking алынып салынды .rounded-smжана класстардын жаңы rounded-lgшкаласын киргизди . Кара #31687 ..rounded-0.rounded-3

  • Жаңы line-heightутилиталар кошулду: .lh-1, .lh-sm, .lh-baseжана .lh-lg. Бул жерден көрүңүз .

  • .d-noneБашка дисплей утилиталарына караганда көбүрөөк салмак берүү үчүн биздин CSS кызматыбызга жылдырылды .

  • .visually-hidden-focusableЖардамчынын жардамы менен контейнерлерде иштөө үчүн кеңейтилген :focus-within.

Жардамчылар

  • Breaking Responsive кыстаруу жардамчылары жаңы класс аттары жана жакшыртылган жүрүм-туруму, ошондой эле пайдалуу 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

  • "Экранды окугуч " класстары эми "визуалдык түрдө жашыруун" класстар болуп калды .

    • 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'те болуу үчүн кайра жазылды.

  • Бардык JavaScript плагиндеринин Breaking Data атрибуттары эми 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().