v5 нұсқасына көшу
v4 нұсқасынан v5 нұсқасына көшуге көмектесу үшін Bootstrap бастапқы файлдарына, құжаттамасына және құрамдастарына жасалған өзгерістерді қадағалаңыз және қарап шығыңыз.
Тәуелділіктер
- 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()Функция және қатысты айнымалылар атауы YIQcolor-contrast()түс кеңістігіне қатысты емес болғандықтан өзгертілді. №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-activefloat()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-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.
-
БұзылуТүсірілді
.input-group-appendжәне.input-group-prepend. Енді түймелерді және.input-group-textенгізу топтарының тікелей еншілестері ретінде қосуға болады. -
Валидациялық кері байланыс қатесі бар кіріс тобындағы бұрыннан бері жоқ шекара радиусы валидациясы бар кіріс топтарына қосымша
.has-validationсыныпты қосу арқылы ақырында түзетіледі. -
Бұзылу Тор жүйеміз үшін пішінге тән орналасу сыныптары жойылды.
.form-group,.form-row, немесе орнына біздің торды және утилиталарды пайдаланыңыз.form-inline. -
БұзылуПішін белгілері енді қажет
.form-label. -
Бұзылу
.form-textенді орнатылмайдыdisplay, бұл сізге HTML элементін өзгерту арқылы кірістірілген немесе анықтама мәтінін қалауыңыз бойынша блоктауға мүмкіндік береді. -
Тексеру белгішелері енді
<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"ашылмалы тізімнің орналасуы статикалық болғанда және ашылмалы тізім шарлау тақтасында болғанда орнатылған төлсипатқа иеdata-bs-popper="none". Бұл біздің JavaScript арқылы қосылған және Поппердің орналасуына кедергі келтірместен реттелетін орын мәнерлерін пайдалануға көмектеседі. -
Бұзылу
flipТүпнұсқа Popper конфигурациясының пайдасына ашылмалы плагинге арналған опция жойылды . Енді айналдыру әрекетін флип модификаторындағыfallbackPlacementsопция үшін бос массив өткізу арқылы өшіруге болады. -
Ашылмалы мәзірлерді енді автоматты жабу әрекетін
autoCloseөңдеуге арналған жаңа опциямен басуға болады . Бұл опцияны интерактивті ету үшін ашылмалы мәзірдің ішінде немесе сыртында шертуді қабылдау үшін пайдалануға болады. -
Ашылмалы тізімдер енді
.dropdown-items ішіне оралған<li>.
Джумботрон
- БұзылуJumbotron компоненті жойылды, себебі оны утилиталармен қайталауға болады. Демонстрация үшін жаңа Jumbotron мысалын қараңыз.
Тізім тобы
- Тізім топтарына жаңа
.list-group-numberedмодификатор қосылды.
Навигациялар мен қойындылар
- , , , және сыныпқа жаңа
nullайнымалылар қосылды .font-sizefont-weightcolor:hovercolor.nav-link
Navbars
- БұзылуШарлау жолақтары енді ішінде контейнерді қажет етеді (аралық талаптарды және қажет CSS-ті айтарлықтай жеңілдету үшін).
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 селекторын өткізуге болады:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]') -
popperConfigБұл әдепкі конфигурацияны өз жолыңызда біріктіру үшін Bootstrap әдепкі Popper конфигурациясын аргумент ретінде қабылдайтын функция ретінде беруге болады. Ашылмалы тізімдерге, қалқымалы терезелерге және құралдар кеңестеріне қолданылады. -
Поппер элементтерін жақсырақ орналастыру үшін әдепкі мәні
fallbackPlacementsболып өзгереді . Ашылмалы тізімдерге, қалқымалы терезелерге және құралдар кеңестеріне қолданылады.['top', 'right', 'bottom', 'left'] -
_getInstance()→ сияқты жалпыға ортақ статикалық әдістерден астын сызу жойылдыgetInstance().