Мигрирање на v5
Следете и прегледувајте ги промените во изворните датотеки, документацијата и компонентите на Bootstrap за да ви помогнат да мигрирате од v4 на v5.
Зависности
- Исфрлен jQuery.
- Надградено од Popper v1.x на Popper v2.x.
- Го замени Libsass со Dart Sass бидејќи нашиот компајлер Sass даден Libsas беше застарен.
- Мигриравме од Џекил во Хуго за изградба на нашата документација
Поддршка на прелистувачот
- Исфрлен Internet Explorer 10 и 11
- Исфрлен Microsoft Edge < 16 (наследен раб)
- Испадна Firefox < 60
- Исфрлен Safari < 12
- Исфрлен iOS Safari < 12
- Исфрлен Chrome < 60
Промени во документацијата
- Редизајнирана почетна страница, распоред на документи и подножје.
- Додаден е нов водич за парцела .
- Додаден е нов дел Приспособување , заменувајќи ја страницата Theming на v4 , со нови детали за Sass, опции за глобална конфигурација, шеми на бои, CSS променливи и многу повеќе.
- Ја реорганизираше целата документација за формулари во нов дел Форми , разделувајќи ја содржината на повеќе фокусирани страници.
- Слично на тоа, ажуриран е делот Распоред , за појасно да се обнови содржината на мрежата.
- Преименувана страницата на компонентата „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)
ги таргетира погледите помеѓуsm
иlg
).
-
КршењеОтстранети стилови на печатење и
$enable-print-styles
променлива. Класите за приказ на печатење сè уште се наоколу. Видете #28339 . -
КршењеИспадна
color()
,theme-color()
иgray()
функционира во корист на променливите. Видете #29083 . -
КршењеПреименувана
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()
-
Кршење
scale-color()
Функцијата е преименувана во заshift-color()
да се избегне судир со сопствената функција за скалирање на бои на Sass. -
box-shadow
миксините сега дозволуваатnull
вредности и паѓаатnone
од повеќе аргументи. Видете #30394 . -
Миксинот
border-radius()
сега има стандардна вредност.
Систем за боја
-
Системот на бои кој работеше
color-level()
и$theme-color-interval
беше отстранет во корист на нов систем на бои. Ситеlighten()
иdarken()
функциите во нашата база на кодови се заменети соtint-color()
иshade-color()
. Овие функции ќе ја измешаат бојата со бела или црна наместо да ја менуваат нејзината леснотија за фиксна количина. Воshift-color()
зависност од тоа дали параметарот на неговата тежина е позитивен или негативен. Видете #30622 за повеќе детали. -
Додадени се нови нијанси и нијанси за секоја боја, обезбедувајќи девет посебни бои за секоја основна боја, како нови Sass променливи.
-
Подобрен контраст на бои. Зголемен сооднос на контраст на бои од 3:1 до 4,5:1 и ажурирани сини, зелени, цијан и розови бои за да се обезбеди контраст на WCAG 2,1 AA. Исто така ја сменивме нашата боја на контраст на бои од
$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 и страницата на flex utilities за пример . -
Кршење
bootstrap-grid.css
сега се однесува самоbox-sizing: border-box
на колоната наместо да се ресетира глобалната големина на кутијата. На овој начин, нашите стилови на мрежа може да се користат на повеќе места без пречки. -
$enable-grid-classes
повеќе не го оневозможува генерирањето класи на контејнери. Видете #29146. -
Миксинот го
make-col
ажурираше стандардно на еднакви колони без одредена големина.
Содржина, рестартирање, итн
-
RFS сега е стандардно овозможен. Насловите што користат
font-size()
миксин автоматски ќе ги приспособатfont-size
на скала со приказот. Оваа функција претходно беше вклучена со v4. -
КршењеЈа ремонтиравме нашата типографија на екранот за да ги замени нашите
$display-*
променливи и со$display-font-sizes
карта Sass. Исто така, се отстранети поединечните$display-*-weight
променливи за единечни$display-font-weight
и приспособениfont-size
s. -
Додадени се две нови
.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 -
Ресетирајте го стандардното хоризонтално
padding-left
вклучено<ul>
и<ol>
елементите од стандардниот прелистувач40px
на2rem
. -
Додадено
$enable-smooth-scroll
, што се применуваscroll-behavior: smooth
на глобално ниво - освен за корисници кои бараат намалено движење прекуprefers-reduced-motion
барање за медиуми. Видете #31877
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
. -
Преуредени изворни датотеки Sass под
scss/forms/
, вклучувајќи ги и стиловите на влезните групи.
Компоненти
- Унифицирани
padding
вредности за предупредувања, трошки од леб, картички, паѓачки мени, групи на списоци, модали, поповери и совети за алатки кои треба да се засноваат на нашата$spacer
променлива. Видете #30564 .
Хармоника
- Додадена е нова компонента за хармоника .
Известувања
-
Предупредувањата сега имаат примери со икони .
-
Отстранети сопствени стилови за
<hr>
s во секое предупредување бидејќи тие веќе користатcurrentColor
.
Значки
-
КршењеГи исфрли сите
.badge-*
класи на бои за помошни програми во заднина (на пр., користете.bg-primary
наместо.badge-primary
). -
КршењеИспадна - наместо тоа,
.badge-pill
користете ја алатката..rounded-pill
-
КршењеОтстранети се стиловите на лебдење и фокусирање за
<a>
и<button>
елементи. -
Зголемено стандардно полнење за значки од
.25em
/.5em
до.35em
/.65em
.
Трошки од леб
-
Го поедностави стандардниот изглед на лебните трошки со отстранување на
padding
,background-color
, иborder-radius
. -
Додадено е ново приспособено својство на CSS
--bs-breadcrumb-divider
за лесно прилагодување без потреба од прекомпајлирање на 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
варијанта за темен текст, контроли и индикатори (одлична за посветла позадина). -
Заменети се иконите на шевронот за контролите на рингишпил со нови SVG од Bootstrap Icons .
Копче за затворање
-
КршењеПреименувано
.close
во.btn-close
за помалку генеричко име. -
Копчињата за затворање сега користат
background-image
(вграден SVG) наместо a×
во HTML, што овозможува полесно прилагодување без потреба да се допира вашата ознака. -
Додадена е нова
.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>
s.
Џамботрон
- КршењеЈа исфрли џамботронската компонента бидејќи може да се реплицира со комуналните услуги. Погледнете го нашиот нов пример на Jumbotron за демо.
Листа група
- Додаден нов
.list-group-numbered
модификатор во групите на списоци.
Navs и јазичиња
- Додадени се нови
null
променливи заfont-size
,font-weight
,color
и:hover
color
во.nav-link
класата.
Navbars
- КршењеНа 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
во нашиот стандарден шаблон за совети за алатки. -
КршењеСтандардната вредност за the
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-*
за краткост и доследност. -
Додадено
.d-grid
за приказ на алатки и новиgap
алатки (.gap
) за распореди на CSS Grid и flexbox. -
КршењеОтстранети
.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 елемент. - Картата
$embed-responsive-aspect-ratios
Sass е преименувана во$aspect-ratios
и нејзините вредности се поедноставени за да го вклучат името на класата и процентот какоkey: value
пар. - Променливите CSS сега се генерираат и се вклучени за секоја вредност во картата Sass. Изменете ја
--bs-aspect-ratio
променливата на за.ratio
да креирате каков било прилагоден сооднос .
- Класите се преименувани за да се променат
-
Кршење Класите „Screen Reader“ сега се „визуелно скриени“ класи .
- Ја смени датотеката Sass од
scss/helpers/_screenreaders.scss
во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()
.
- Ја смени датотеката Sass од
-
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
може да се пренесе како функција која ја прифаќа стандардната Popper конфигурација на Bootstrap како аргумент, за да можете да ја споите оваа стандардна конфигурација на ваш начин. Важи за паѓачки мени, поповери и совети за алатки. -
Стандардната вредност за the
fallbackPlacements
се менува во['top', 'right', 'bottom', 'left']
за подобро поставување на Popper елементите. Важи за паѓачки мени, поповери и совети за алатки. -
Отстрането подвлекување од јавни статични методи како
_getInstance()
→getInstance()
.