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)
sm
lg
-
БұзылуЖойылған басып шығару мәнерлері мен
$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-sizes
Sass картасымен ауыстыру үшін дисплей типографиясын күрделі жөндеуден өткіздік. Сондай-ақ жалғыз және түзетілген s$display-*-weight
үшін жеке айнымалылар жойылды .$display-font-weight
font-size
-
Екі жаңа
.display-*
тақырып өлшемі қосылды.display-5
және.display-6
. -
Сілтемелер арнайы құрамдастардың бөлігі болмаса, әдепкі бойынша асты сызылады (тек меңзерде емес).
-
Стильдерді жаңарту және стильдеуді көбірек бақылау үшін оларды CSS айнымалыларымен қайта құру үшін кестелер қайта жасақталды.
-
БұзылуКірістірілген кестелер енді стильдерді иеленбейді.
-
Бұзылу
.thead-light
және барлық кесте элементтері ( , , , , және ) үшін пайдалануға болатын нұсқа класстарының.thead-dark
пайдасына алынып тасталады ..table-*
thead
tbody
tfoot
tr
th
td
-
БұзылуМиксин
table-row-variant()
атауын өзгертедіtable-variant()
және тек 2 параметрді қабылдайды:$color
(түс атауы) және$value
(түс коды). Жиек түсі мен екпін түстері кесте факторының айнымалы мәндері негізінде автоматты түрде есептеледі. -
-y
Кесте ұяшығын толтыру айнымалы мәндерін және ішіне бөліңіз-x
. -
БұзылуСабақты тастады
.pre-scrollable
. №29135 қараңыз -
Бұзылу
.text-*
утилиталар сілтемелерге меңзерді және фокус күйлерін енді қоспайды..link-*
орнына көмекші сыныптарды пайдалануға болады. №29267 қараңыз -
БұзылуСабақты тастады
.text-justify
. №29793 қараңыз -
Бұзылу
<hr>
элементтер енді атрибутты жақсырақ қолдау үшінheight
орнына пайдаланады. Бұл сонымен қатар қалың бөлгіштерді (мысалы, ) жасау үшін толтыру утилиталарын пайдалануға мүмкіндік береді.border
size
<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-divider
CSS қайта құрастыруды қажет етпестен оңай теңшеу үшін жаңа 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-item
s ішіне оралған<li>
.
Джумботрон
- БұзылуJumbotron компоненті жойылды, себебі оны утилиталармен қайталауға болады. Демонстрация үшін жаңа Jumbotron мысалын қараңыз.
Тізім тобы
- Тізім топтарына жаңа
.list-group-numbered
модификатор қосылды.
Навигациялар мен қойындылар
- , , , және сыныпқа жаңа
null
айнымалылар қосылды .font-size
font-weight
color
:hover
color
.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-radius
s- мен ауыстырылды.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>
-
, , , және үшін жаңа позиция утилиталары қосылды . Мәндер , және әрбір сипат үшін қамтиды.
top
right
bottom
left
0
50%
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.scss
Sass файлын келесіден өзгертті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()
.