v5 нұсқасына көшу

v5.2.0

Жаңартылған дизайн

Bootstrap v5.2.0 жобадағы бірнеше құрамдас бөліктер мен сипаттар үшін нәзік дизайн жаңартуын ұсынады, әсіресе border-radiusтүймелер мен пішінді басқару элементтеріндегі нақтыланған мәндер арқылы . Біздің құжаттама сонымен қатар жаңа басты бетпен, бүйірлік тақтаның бөлімдерін жиып тастамайтын қарапайым құжаттар орналасуымен және Bootstrap белгішелерінің көрнекті мысалдарымен жаңартылды .

Қосымша CSS айнымалылары

Біз CSS айнымалы мәндерін пайдалану үшін барлық құрамдастарды жаңарттық. Sass әлі де барлығының негізін қалағанымен, әрбір құрамдас құрамдас базалық сыныптарындағы (мысалы, .btn) CSS айнымалы мәндерін қосу үшін жаңартылды, бұл 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. _variables.scssОл бастапқы картаның жаңартулары оларды кеңейтетін қосымша карталарға қолданылмаған мәселені шешу үшін бірнеше Sass карталарын шығарады. Мысалы, жаңартулар негізгі теңшеу жұмыс үрдістерін бұзатын $theme-colorsбасқа тақырып карталарына қолданылмады . $theme-colorsҚысқаша айтқанда, Sass-тың шектеуі бар, әдепкі айнымалы немесе карта пайдаланылғаннан кейін оны жаңарту мүмкін емес. Басқа CSS айнымалы мәндерін құру үшін пайдаланылған кезде CSS айнымалыларымен ұқсас кемшілік бар.

Сондықтан Bootstrap ішіндегі айнымалы теңшелімдер -дан кейін @import "functions", бірақ @import "variables"импорт стекіміздің алдында және қалған бөлігінен кейін келуі керек. Бұл Sass карталарына да қатысты — әдепкі параметрлерді пайдаланбас бұрын оларды қайта анықтау керек. Келесі карталар жаңаға ауыстырылды _maps.scss:

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

Жеке Bootstrap CSS құрастырулары енді карталарды бөлек импорттаумен ұқсас болуы керек.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Жаңа утилиталар

• Жартылай қалың қаріптерді қосу үшін кеңейтілген font-weightутилиталар ..fw-semibold
• Қосымша опциялар үшін екі жаңа өлшемді және , қосу үшін кеңейтілген border-radiusутилиталар ..rounded-4.rounded-5

Қосымша өзгерістер

• Жаңа $enable-container-classesопция енгізілді. — Енді эксперименттік CSS торының орналасуына қосылған кезде, .container-*бұл опция параметріне орнатылмайынша, сыныптар әлі де құрастырылады false. Контейнерлер де өз ағынының мәндерін сақтайды.

• Offcanvas компонентінде енді жауап беретін нұсқалар бар . Түпнұсқа .offcanvasкласс өзгеріссіз қалады — ол мазмұнды барлық көру порттарында жасырады. Оны жауап беру үшін сол .offcanvasсыныпты кез келген .offcanvas-{sm|md|lg|xl|xxl}сыныпқа өзгертіңіз.

• Қалың үстел бөлгіштері енді қосылды. — Біз кесте топтары арасындағы қалыңырақ және қайта анықтау қиынырақ шекараны алып тастадық және оны сіз қолдануға болатын қосымша сыныпқа жылжыттық .table-group-divider. Мысал үшін кесте құжаттарын қараңыз.

• Scrollspy Intersection Observer API пайдалану үшін қайта жазылды , бұл сізге бұдан былай салыстырмалы негізгі орауыштарды, ескіргенoffsetконфигурацияларды және т.б. қажет емес дегенді білдіреді. Scrollspy қолданбаларын шарлауды бөлектеуде дәлірек және дәйекті болу үшін іздеңіз.

• Поповерлер мен кеңестер енді CSS айнымалыларын пайдаланады. Кейбір CSS айнымалылары айнымалылар санын азайту үшін Sass әріптестерінен жаңартылды. Нәтижесінде бұл шығарылымда үш айнымалы мән ескірген: $popover-arrow-color, $popover-arrow-outer-color, және $tooltip-arrow-color.

• Жаңа .text-bg-{color}көмекшілер қосылды. .text-*Жеке және қызметтік бағдарламаларды орнатудың орнына .bg-*, енді қарама-қарсы алдыңғы жоспарды орнату үшін көмекшілерді .text-bg-*пайдалануға болады .background-colorcolor

• .form-check-reverseБелгілердің және байланысты құсбелгілердің/радиолардың ретін өзгерту үшін қосылды .

• Қосылған жолақты бағандар.table-striped-columns жаңа сынып арқылы кестелерге қолдау көрсетеді .

Өзгерістердің толық тізімін GitHub сайтындағы v5.2.0 жобасын қараңыз .

v5.1.0

• CSS Grid орналасуына эксперименттік қолдау қосылды . — Бұл орындалып жатқан жұмыс және өндірісте пайдалануға әлі дайын емес, бірақ Sass арқылы жаңа мүмкіндікті қосуға болады. Оны қосу $enable-grid-classes: falseүшін CSS торын орнату арқылы әдепкі торды өшіріңіз және параметрі арқылы CSS торын қосыңыз $enable-cssgrid: true.

• Offcanva қолданбасын қолдау үшін жаңартылған шарлау жолақтары. — Кез келген шарлау тақтасына жауап беретін .navbar-expand-*сыныптары және кейбір сыртқы кескінді белгілеулері бар ашық кескін жәшіктерін қосыңыз .

• Жаңа толтырғыш компоненті қосылды . — Біздің ең жаңа құрамдасымыз, бұл сіздің сайтыңызда немесе қолданбаңызда бірдеңе әлі жүктеліп жатқанын көрсетуге көмектесетін нақты мазмұнның орнына уақытша блоктарды беру тәсілі.

• Collapse плагині енді көлденең тарылтуды қолдайды . — 'нің орнына жию .collapse-horizontalүшін өзіңізді қосыңыз . немесе параметрін орнату арқылы шолғышты қайта бояудан аулақ болыңыз ..collapsewidthheightmin-heightheight

• Жаңа стек және тік ереже көмекшілері қосылды. — Стектермен реттелетін макеттерді жылдам жасау үшін бірнеше flexbox сипаттарын жылдам қолданыңыз . Көлденең ( .hstack) және тік ( .vstack) дестелерден таңдаңыз. Жаңа көмекшілері<hr> бар элементтерге ұқсас тік бөлгіштерді қосыңыз ..vr

• Жаңа жаһандық :rootCSS айнымалылары қосылды. — Стильдерді :rootбасқару деңгейіне бірнеше жаңа CSS айнымалылары қосылды . <body>Көбірек жұмыс істейді, соның ішінде біздің утилиталарымыз бен компоненттеріміз, бірақ қазір CSS айнымалы мәндерін Теңшеу бөлімінде оқыңыз .

• CSS айнымалы мәндерін пайдалану үшін түс және фондық утилиталар күрделі жөндеуден өтті және жаңа мәтін мөлдірлігі мен фондық мөлдірлік утилиталары қосылды. — .text-* және .bg-*утилиталар енді CSS айнымалыларымен және rgba()түс мәндерімен құрастырылған, бұл кез келген утилитаны жаңа мөлдірлік утилиталарымен оңай теңшеуге мүмкіндік береді.

• Құрамдастарды теңшеу жолын көрсетуге негізделген жаңа үзінді мысалдары қосылды. — Жаңа үзінділер мысалдарымен теңшелген құрамдастарды және басқа жалпы дизайн үлгілерін пайдалануға дайын болыңыз . Төменгі деректемелерді , ашылмалы тізімдерді , тізім топтарын және модальдарды қамтиды .

• Қалқымалы терезелер мен құралдар кеңестерінен пайдаланылмаған орналастыру мәнерлері жойылды, себебі оларды тек Поппер өңдейді. $tooltip-marginескірген және nullпроцесте орнатылған.

Қосымша ақпарат алғыңыз келе ме? v5.1.0 блог жазбасын оқыңыз.

Тәуелділіктер

• jQuery жойылды.
• Popper v1.x нұсқасынан Popper v2.x нұсқасына дейін жаңартылды.
• Libsass-ты Dart Sass-пен ауыстырды, өйткені Libsass ескірген Sass компиляторы.
• Құжаттамамызды жасау үшін Джекиллден Гюгоға көшті

Браузерді қолдау

• Internet Explorer 10 және 11 жойылды
• Microsoft Edge түсірілді < 16 (Бұрынғы Edge)
• Firefox < 60 жойылды
• Safari < 12 жойылды
• iOS Safari < 12 жойылды
• Chrome < 60 жойылды

Құжаттамадағы өзгерістер

• Негізгі бет, құжаттар орналасуы және төменгі деректеме қайта жасалды.
• Жаңа сәлемдеме нұсқаулығы қосылды .
• Sass туралы жаңа мәліметтермен, жаһандық конфигурация опцияларымен, түс схемаларымен, CSS айнымалыларымен және т.б. бар v4 нұсқасының Тақырыптық бетін ауыстыратын жаңа теңшеу бөлімі қосылды .
• Барлық пішін құжаттамасын жаңа пішіндер бөліміне қайта ұйымдастырып , мазмұнды көбірек бағытталған беттерге бөлді.
• Сол сияқты, тор мазмұнын нақтырақ көрсету үшін Орналасу бөлімі жаңартылды .
• «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)smlg

• БұзылуЖойылған басып шығару мәнерлері мен $enable-print-stylesайнымалы. Басып шығару дисплейі сыныптары әлі де бар. №28339 қараңыз .

• БұзылуАйнымалылардың пайдасына color(), theme-color(), және функциялары түсірілді. №29083 қараңыз .gray()

• БұзылуАтауы өзгертілген 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()

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

• box-shadowмиксиндер енді nullмәндерге рұқсат береді және noneбірнеше аргументтерден бас тартады. №30394 қараңыз .

• border-radius()Микстің енді әдепкі мәні бар .

Түс жүйесі

• Жаңа түс жүйесінің пайдасына жұмыс істеген color-level()және $theme-color-intervalжойылған түс жүйесі. Біздің кодтық базадағы барлық lighten()және darken()функциялар және арқылы tint-color()ауыстырылады shade-color(). Бұл функциялар түстің ашықтығын белгіленген мөлшерге өзгертудің орнына ақ немесе қара түспен араластырады. shift-color()Салмақ параметрінің оң немесе теріс болуына байланысты түсті реңктендіреді немесе көлеңкелейді . Қосымша мәліметтер алу үшін №30622 қараңыз .

• Әрбір түс үшін жаңа реңктер мен реңктер қосылды, әр негізгі түс үшін жаңа 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енді контейнер сыныптарын құруды өшірмейді. №29146 қараңыз.

• make-colБелгіленген өлшемі жоқ тең бағандарға арналған араластырғыш әдепкіге жаңартылды .

Мазмұн, қайта жүктеу және т.б

• RFS енді әдепкі бойынша қосылған. Араластырғышты пайдаланатын тақырыптарfont-size()автоматты түрдеfont-sizeқарау терезесімен масштабтауға реттеледі. Бұл мүмкіндік бұрын v4 нұсқасына қосылған.

• Бұзылу$display-*Айнымалы мәндерді және $display-font-sizesSass картасымен ауыстыру үшін дисплей типографиясын күрделі жөндеуден өткіздік. Сондай-ақ жалғыз және түзетілген s $display-*-weightүшін жеке айнымалылар жойылды .$display-font-weightfont-size

• Екі жаңа .display-*тақырып өлшемі қосылды .display-5және .display-6.

• Сілтемелер арнайы құрамдастардың бөлігі болмаса, әдепкі бойынша асты сызылады (тек меңзерде емес).

• Стильдерді жаңарту және стильдеуді көбірек бақылау үшін оларды CSS айнымалыларымен қайта құру үшін кестелер қайта жасақталды.

• БұзылуКірістірілген кестелер енді стильдерді иеленбейді.

• Бұзылу .thead-lightжәне барлық кесте элементтері ( , , , , және ) үшін пайдалануға болатын нұсқа класстарының .thead-darkпайдасына алынып тасталады ..table-*theadtbodytfoottrthtd

• БұзылуМиксин table-row-variant()атауын өзгертеді table-variant()және тек 2 параметрді қабылдайды: $color(түс атауы) және $value(түс коды). Жиек түсі мен екпін түстері кесте факторының айнымалы мәндері негізінде автоматты түрде есептеледі.

• -yКесте ұяшығын толтыру айнымалы мәндерін және ішіне бөліңіз -x.

• БұзылуСабақты тастады .pre-scrollable. №29135 қараңыз

• Бұзылу .text-*утилиталар сілтемелерге меңзерді және фокус күйлерін енді қоспайды. .link-*орнына көмекші сыныптарды пайдалануға болады. №29267 қараңыз

• БұзылуСабақты тастады .text-justify. №29793 қараңыз

• Бұзылу <hr>элементтер енді атрибутты жақсырақ қолдау үшін heightорнына пайдаланады. Бұл сонымен қатар қалың бөлгіштерді (мысалы, ) жасау үшін толтыру утилиталарын пайдалануға мүмкіндік береді.bordersize<hr class="py-1">

• Әдепкі көлденең padding-leftқосулы <ul>және <ol>элементтерді браузер әдепкіден 40pxқалпына келтіріңіз 2rem.

• Қосылды $enable-smooth-scroll, ол ғаламдық деңгейде қолданылады — медиа сұрауы scroll-behavior: smoothарқылы қозғалысты азайтуды сұрайтын пайдаланушыларды қоспағанда . №31877 қараңызprefers-reduced-motion

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.

• scss/forms/Кіріс тобының мәнерлерін қоса, астындағы бастапқы Sass файлдары қайта реттелді .

Құрамдас бөліктер

• paddingЕскертулер, үзінділер, карталар, ашылмалы тізімдер, тізім топтары, модальдар, қалқымалы мәндер және $spacerайнымалы мәнге негізделетін құралдар кеңестері үшін бірыңғай мәндер. №30564 қараңыз .

Аккордеон

• Жаңа аккордеон компоненті қосылды .

Ескертулер

• Енді ескертулерде белгішелер бар мысалдар бар .

• Әрбір ескертуде s үшін теңшелетін мәнерлер жойылды <hr>, өйткені олар бұрыннан қолданылған 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Негізгі аккордеон жаңа Аккордеон компонентімен ауыстырылды .

Карусель

• Қараңғы мәтінге, басқару элементтеріне және индикаторларға арналған жаңа .carousel-darkнұсқа қосылды (ашық фон үшін тамаша).

• Карусель басқару элементтеріне арналған шеврон белгішелері Bootstrap Icons жаңа SVG файлдарымен ауыстырылды .

Жабу түймесі

• БұзылуАты азырақ жалпы атау үшін .closeөзгертілді ..btn-close

• Жабу түймелері енді HTML background-imageтіліндегі a орнына (ендірілген SVG) пайдаланады ×, бұл түзетуді түртудің қажетінсіз оңай теңшеуге мүмкіндік береді.

• Қараңғы фонға қарсы белгішелердің жоғары контрастты өшіруін қосу үшін .btn-close-whiteпайдаланылатын жаңа нұсқа қосылды .filter: invert(1)

Жыйрату

• Аккордеондарға арналған айналдыру анкері жойылды.

Ашылмалы тізімдер

• .dropdown-menu-darkСұраныс бойынша қараңғы ашылмалы тізімдер үшін жаңа нұсқа және байланысты айнымалылар қосылды .

• үшін жаңа айнымалы қосылды $dropdown-padding-x.

• Контрастты жақсарту үшін ашылмалы бөлгіш қараңғыланды.

• БұзылуАшылмалы тізімге арналған барлық оқиғалар енді ашылмалы тізімнің ауыстырып-қосқыш түймешігінде іске қосылады, содан кейін негізгі элементке дейін көпіршіктеледі.

• Ашылмалы мәзірлер енді data-bs-popper="static"ашылмалы тізімнің орналасуы статикалық болғанда немесе ашылмалы тізім шарлау тақтасында болғанда орнатылған төлсипатқа ие. Бұл біздің JavaScript арқылы қосылған және Поппердің орналасуына кедергі келтірместен реттелетін орын мәнерлерін пайдалануға көмектеседі.

• БұзылуflipТүпнұсқа Popper конфигурациясының пайдасына ашылмалы плагинге арналған опция жойылды . Енді айналдыру әрекетін флип модификаторындағы fallbackPlacementsопция үшін бос массив өткізу арқылы өшіруге болады.

• Ашылмалы мәзірлерді енді автоматты жабу әрекетінautoClose өңдеуге арналған жаңа опциямен басуға болады . Бұл опцияны интерактивті ету үшін ашылмалы мәзірдің ішінде немесе сыртында шертуді қабылдау үшін пайдалануға болады.

• Ашылмалы тізімдер енді .dropdown-items ішіне оралған <li>.

Джумботрон

• БұзылуJumbotron компоненті жойылды, себебі оны утилиталармен қайталауға болады. Демонстрация үшін жаңа Jumbotron мысалын қараңыз.

Тізім тобы

• Тізім топтарына жаңа .list-group-numberedмодификатор қосылды.

Навигациялар мен қойындылар

• , , , және сыныпқа жаңа nullайнымалылар қосылды .font-sizefont-weightcolor:hover color.nav-link

Navbars

• БұзылуШарлау жолақтары енді ішінде контейнерді қажет етеді (аралық талаптарды және қажет CSS-ті айтарлықтай жеңілдету үшін).
• БұзылуКласс .activeенді s-ге қолданыла алмайды .nav-item, ол тікелей s-де қолданылуы керек .nav-link.

Offcanvas

• Жаңа offcanvas компоненті қосылды .

Беттеу

• Беттеу сілтемелері енді margin-leftбір-бірінен бөлінген кезде барлық бұрыштарда динамикалық түрде дөңгелектенетін теңшелетін болады.

• transitionБеттеу сілтемелеріне s қосылды .

Поповерлер

• БұзылуӘдепкі қалқымалы үлгіде атауы өзгертілді .arrow..popover-arrow

• Опция деп whiteListөзгертілді allowList.

Спиннерлер

• Спиннерлер енді prefers-reduced-motion: reduceанимацияларды баяулату арқылы құрметке ие. №31882 қараңыз .

• Жақсартылған спиннерді тік туралау.

Тосттар

• Тосттарды енді позициялау утилиталарының.toast-container көмегімен орналастыруға болады .

• Әдепкі тост ұзақтығы 5 секундқа өзгертілді.

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

Кеңестер

• БұзылуӘдепкі .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>

• , , , және үшін жаңа позиция утилиталары қосылды . Мәндер , және әрбір сипат үшін қамтиды.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 Grid және flexbox орналасуларына арналған қызметтік .d-gridбағдарламалар мен жаңа gapутилиталарды ( ) көрсетуге қосылды ..gap

• БұзылуАлып тасталды .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 элементімен жұмыс істейді.
  • 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 плагиндері үшін деректер атрибуттары енді 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Бұл әдепкі конфигурацияны өз жолыңызда біріктіру үшін Bootstrap әдепкі Popper конфигурациясын аргумент ретінде қабылдайтын функция ретінде беруге болады. Ашылмалы тізімдерге, қалқымалы терезелерге және құралдар кеңестеріне қолданылады.

• Поппер элементтерін жақсырақ орналастыру үшін әдепкі мәні fallbackPlacementsболып өзгереді . Ашылмалы тізімдерге, қалқымалы терезелерге және құралдар кеңестеріне қолданылады.['top', 'right', 'bottom', 'left']

• _getInstance()→ сияқты жалпыға ортақ статикалық әдістерден астын сызу жойылды getInstance().