Мигриране към v4
Bootstrap 4 е основно пренаписване на целия проект. Най-забележителните промени са обобщени по-долу, последвани от по-конкретни промени в съответните компоненти.
Стабилни промени
Преминавайки от Beta 3 към нашата стабилна версия v4.x, няма революционни промени, но има някои забележителни промени.
Печат
-
Коригирани повредени помощни програми за печат. Преди това използването на
.d-print-*
клас неочаквано отменяше всеки друг.d-*
клас. Сега те съответстват на другите ни помощни програми за показване и се прилагат само за тази медия (@media print
). -
Разширени налични помощни програми за дисплей за печат, за да съответстват на други помощни програми. Бета 3 и по-стари версии имаха само
block
,inline-block
,inline
иnone
. Добавена е стабилна v4flex
,inline-flex
,table
,table-row
иtable-cell
. -
Коригирано изобразяване на предварителен преглед на печат в различни браузъри с нови стилове на печат, които указват
@page
size
.
Бета 3 промени
Въпреки че Бета 2 видя по-голямата част от нашите критични промени по време на бета фазата, но все още имаме няколко, които трябва да бъдат разгледани в Бета 3 изданието. Тези промени се прилагат, ако актуализирате до Beta 3 от Beta 2 или която и да е по-стара версия на Bootstrap.
Разни
- Премахна неизползваната
$thumbnail-transition
променлива. Не прехвърляхме нищо, така че беше просто допълнителен код. - Пакетът npm вече не включва никакви файлове, различни от нашите сорс и dist файлове; ако сте разчитали на тях и сте изпълнявали нашите скриптове през
node_modules
папката, трябва да адаптирате своя работен процес.
Форми
-
Пренаписа както персонализираните, така и стандартните квадратчета за отметка и радиостанции. Сега и двата имат съвпадаща HTML структура (външна
<div>
със сродник<input>
и<label>
) и едни и същи стилове на оформление (подредени по подразбиране, вградени с клас модификатор). Това ни позволява да стилизираме етикета въз основа на състоянието на входа, опростявайки поддръжката наdisabled
атрибута (преди това изискваше родителски клас) и поддържайки по-добре нашето валидиране на формуляр.Като част от това сме променили CSS за управление на множество
background-image
квадратчета за отметка и радиостанции в потребителски формуляри. Преди това премахнатият.custom-control-indicator
елемент имаше фонов цвят, градиент и SVG икона. Персонализирането на градиента на фона означаваше да заменяте всички тези всеки път, когато трябваше да промените само един. Сега имаме.custom-control-label::before
запълване и градиент и.custom-control-label::after
манипулации на иконата.За да направите персонализирана вградена проверка, добавете
.custom-control-inline
. -
Актуализиран селектор за групи бутони, базирани на въвеждане. Вместо
[data-toggle="buttons"] { }
за стил и поведение, ние използвамеdata
атрибута само за JS поведение и разчитаме на нов.btn-group-toggle
клас за стилизиране. -
Премахнато
.col-form-legend
в полза на леко подобрено.col-form-label
. По този начин.col-form-label-sm
и.col-form-label-lg
може да се използва върху<legend>
елементи с лекота. -
Персонализираните въведени файлове получиха промяна в тяхната
$custom-file-text
Sass променлива. Това вече не е вложена Sass карта и сега захранва само един низ –Browse
бутонът, тъй като сега е единственият псевдоелемент, генериран от нашия Sass. СегаChoose file
текстът идва от.custom-file-label
.
Входни групи
-
Добавките за входни групи вече са специфични за тяхното разположение спрямо вход. Отпаднахме
.input-group-addon
и.input-group-btn
за два нови класа.input-group-prepend
и.input-group-append
. Трябва изрично да използвате добавяне или добавяне сега, опростявайки голяма част от нашия CSS. В рамките на добавяне или добавяне поставете бутоните си така, както биха съществували навсякъде другаде, но обвийте текста в.input-group-text
. -
Вече се поддържат стилове за валидиране, както и множество входове (въпреки че можете да валидирате само един вход на група).
-
Класовете за оразмеряване трябва да са на родителя
.input-group
, а не на отделните елементи на формата.
Бета 2 промени
Докато сме в бета версия, ние се стремим да нямаме критични промени. Нещата обаче не винаги вървят по план. По-долу са важните промени, които трябва да имате предвид, когато преминавате от Бета 1 към Бета 2.
Разбиване
- Премахната
$badge-color
променлива и нейното използване на.badge
. Използваме функция за цветови контраст, за да изберемcolor
въз основа наbackground-color
, така че променливата е ненужна. - Преименувана
grayscale()
функция, заgray()
да се избегне прекъсване на конфликт с основния CSSgrayscale
филтър. - Преименуван
.table-inverse
на ,.thead-inverse
, и.thead-default
на.*-dark
и.*-light
, съответстващ на нашите цветови схеми, използвани другаде. - Отзивчивите таблици вече генерират класове за всяка точка на прекъсване на мрежата. Това се различава от Beta 1 по това, че използваният от
.table-responsive
вас е по-скоро като.table-responsive-md
. Сега можете да използвате.table-responsive
или.table-responsive-{sm,md,lg,xl}
според нуждите. - Премахната поддръжка на Bower като мениджър на пакети е отхвърлена за алтернативи (напр. Yarn или npm). Вижте bower/bower#2298 за подробности.
- Bootstrap все още изисква jQuery 1.9.1 или по-нова версия, но ви съветваме да използвате версия 3.x, тъй като поддържаните от v3.x браузъри са тези, които Bootstrap поддържа, плюс v3.x има някои поправки за сигурност.
- Премахна неизползвания
.form-control-label
клас. Ако сте използвали този клас, той е дубликат на.col-form-label
класа, който е центрирал вертикално a<label>
със свързания с него вход в хоризонтални оформления на формуляри. - Променен е
color-yiq
от mixin, който включваcolor
свойството, на функция, която връща стойност, което ви позволява да го използвате за всяко CSS свойство. Например, вместоcolor-yiq(#000)
, бихте написалиcolor: color-yiq(#000);
.
Акценти
- Въведена е нова
pointer-events
употреба на модалните. Външният.modal-dialog
преминава през събития сpointer-events: none
за персонализирано обработване на щраквания (което прави възможно просто да слушате.modal-backdrop
за всякакви щраквания) и след това го противодейства за действителното.modal-content
сpointer-events: auto
.
Резюме
Ето големите билети, за които трябва да знаете, когато преминавате от v3 към v4.
Поддръжка на браузър
- Отпадна поддръжката на IE8, IE9 и iOS 6. v4 вече е само IE10+ и iOS 7+. За сайтове, които се нуждаят от едно от тези, използвайте v3.
- Добавена е официална поддръжка за браузъра и WebView на Android v5.0 Lollipop. По-ранните версии на Android Browser и WebView остават само неофициално поддържани.
Глобални промени
- Flexbox е активиран по подразбиране. Като цяло това означава отдалечаване от плаващите и повече в нашите компоненти.
- Превключихме от Less към Sass за нашите изходни CSS файлове.
- Превключихме от
px
къмrem
като наша основна CSS единица, въпреки че пикселите все още се използват за медийни заявки и поведение на мрежата, тъй като екраните на устройството не се влияят от размера на шрифта. - Общият размер на шрифта се увеличи от
14px
на16px
. - Преработени нива на мрежата за добавяне на пета опция (адресиране на по-малки устройства на
576px
и по-долу) и премахнати-xs
инфиксите от тези класове. Пример:.col-6.col-sm-4.col-md-3
. - Отделната незадължителна тема е заменена с конфигурируеми опции чрез SCSS променливи (напр.
$enable-gradients: true
). - Системата за изграждане е преработена, за да използва поредица от npm скриптове вместо Grunt. Вижте
package.json
всички скриптове или readme на нашия проект за нуждите на местното развитие. - Вече не се поддържа използване на Bootstrap без реагиране.
- Изхвърлихме онлайн персонализатора в полза на по-обширна документация за настройка и персонализирани компилации.
- Добавени са десетки нови полезни класове за обичайни двойки свойства-стойност на CSS и преки пътища за интервал между маржове/подложки.
Мрежова система
- Преместен във flexbox.
- До��авена е поддръжка за flexbox в grid mixins и предварително дефинирани класове.
- Като част от flexbox, включена поддръжка за класове за вертикално и хоризонтално подравняване.
- Актуализирани имена на класове на мрежата и ново ниво на мрежата.
- Добавено е ново
sm
ниво на мрежата по-долу768px
за по-подробен контрол. Сега имамеxs
,sm
,md
,lg
иxl
. Това също означава, че всяко ниво е издигнато с едно ниво нагоре (така че.col-md-6
във v3 вече е.col-lg-6
във v4). xs
класовете на мрежата са променени, за да не изискват инфикса за по-точно представяне, че започват да прилагат стилове приmin-width: 0
, а не при зададена стойност на пиксела. Вместо.col-xs-6
, сега е.col-6
. Всички други нива на мрежата изискват инфикса (напр.sm
).
- Добавено е ново
- Актуализирани размери на мрежата, миксини и променливи.
- Улуците на мрежата вече имат карта на Sass, така че можете да укажете конкретни ширини на улуците при всяка точка на прекъсване.
- Актуализирани мрежови миксини за използване на
make-col-ready
подготвителен миксин иmake-col
за задаване наflex
иmax-width
за индивидуално оразмеряване на колони. - Променени точки на прекъсване на медийни заявки за мрежова система и ширини на контейнери, за да се отчете новото ниво на мрежата и да се гарантира, че колоните се делят равномерно на
12
при максималната им ширина. - Точките на прекъсване на мрежата и ширините на контейнера вече се обработват чрез Sass карти (
$grid-breakpoints
и$container-max-widths
) вместо няколко отделни променливи. Те заместват@screen-*
изцяло променливите и ви позволяват напълно да персонализирате нивата на мрежата. - Медийните заявки също са променени. Вместо да повтаряме нашите декларации за медийни заявки с една и съща стойност всеки път, сега имаме
@include media-breakpoint-up/down/only
. Сега, вместо да пишете@media (min-width: @screen-sm-min) { ... }
, можете да пишете@include media-breakpoint-up(sm) { ... }
.
Компоненти
- Изпуснати панели, миниатюри и кладенци за нов всеобхватен компонент, карти .
- Премахна шрифта на иконата Glyphicons. Ако имате нужда от икони, някои опции са:
- версията нагоре по веригата на Glyphicons
- Октикони
- Шрифт Awesome
- Вижте страницата Разширяване за списък с алтернативи. Имате допълнителни предложения? Моля, отворете тема или PR.
- Премахна приставката Affix jQuery.
- Препоръчваме да използвате
position: sticky
вместо това. Вижте записа HTML5 Моля за подробности и конкретни препоръки за полифил. Едно предложение е да се използва@supports
правило за прилагането му (напр.,@supports (position: sticky) { ... }
) - Ако сте използвали Affix за прилагане на допълнителни, не
position
-стилове, полифилите може да не поддържат вашия случай на употреба. Една опция за такива употреби е библиотеката ScrollPos-Styler на трета страна .
- Препоръчваме да използвате
- Отпадна компонентът на пейджъра, тъй като по същество беше леко персонализирани бутони.
- Преработени са почти всички компоненти, за да се използват повече невложени селектори на клас вместо прекалено специфични селектори за деца.
По компонент
Този списък подчертава ключови промени по компоненти между v3.xx и v4.0.0.
Рестартирайте
Новото в Bootstrap 4 е Reboot , нов стилов лист, който се основава на Normalize с нашите собствени донякъде упорити стилове за нулиране. Селекторите, които се появяват в този файл, използват само елементи - тук няма класове. Това изолира нашите стилове за нулиране от нашите стилове на компоненти за по-модулен подход. Някои от най-важните нулирания, които това включва, са box-sizing: border-box
промяната, преминаване от em
към rem
единици на много елементи, стилове на връзки и много нулиране на елемент на формуляр.
Типография
- Преместих всички
.text-
помощни програми във_utilities.scss
файла. - Изпуснато
.page-header
, тъй като стиловете му могат да се прилагат чрез помощни програми. .dl-horizontal
е отпаднал. Вместо това, използвайте.row
on<dl>
и използвайте класове колони на мрежата (или миксини) върху неговите<dt>
и<dd>
децата.- Преработени блокови цитати, преместване на техните стилове от
<blockquote>
елемента към един клас,.blockquote
. Премахна.blockquote-reverse
модификатора за текстови помощни програми. .list-inline
сега изисква елементите от списъка на децата му да имат.list-inline-item
приложен към тях новия клас.
Изображения
- Преименувана
.img-responsive
на.img-fluid
. - Преименуван
.img-rounded
на.rounded
- Преименуван
.img-circle
на.rounded-circle
Маси
- Почти всички екземпляри на
>
селектора са премахнати, което означава, че вложените таблици вече автоматично ще наследяват стилове от своите родители. Това значително опростява нашите селектори и потенциални персонализации. - Преименувано
.table-condensed
на.table-sm
за последователност. - Добавена е нова
.table-inverse
опция. - Добавени модификатори на заглавката на таблицата:
.thead-default
и.thead-inverse
. - Преименувани контекстуални класове, за да имат
.table-
-префикс. Следователно.active
,.success
,.warning
,.danger
и.info
до.table-active
,.table-success
,.table-warning
,.table-danger
и.table-info
.
Форми
- Преместеният елемент се нулира във
_reboot.scss
файла. - Преименувана
.control-label
на.col-form-label
. - Преименувани
.input-lg
и съответно.input-sm
на.form-control-lg
и.form-control-sm
. - Прекъснати
.form-group-*
часове заради простотата. Вместо това сега използвайте.form-control-*
класове. - Премахнато
.help-block
и заменено с.form-text
помощен текст на ниво блок. За вграден помощен текст и други гъвкави опции използвайте помощни класове като.text-muted
. - Изпуснат
.radio-inline
и.checkbox-inline
. - Консолидирани
.checkbox
и.radio
в.form-check
и различните.form-check-*
класове. - Преработени хоризонтални форми:
- Отпадна
.form-horizontal
изискването за клас. .form-group
вече не прилага стилове от.row
via mixin, така че.row
сега се изисква за хоризонтални мрежови оформления (напр.<div class="form-group row">
).- Добавен е нов
.col-form-label
клас към вертикално центрирани етикети с.form-control
s. - Добавено е ново
.form-row
за оформления на компактни формуляри с класовете на решетката (разменете своя.row
за.form-row
и тръгвайте).
- Отпадна
- Добавена е поддръжка на персонализирани формуляри (за квадратчета за отметка, радиостанции, селекции и въвеждане на файлове).
- Заменени класове
.has-error
,.has-warning
и.has-success
с валидиране на HTML5 формуляр чрез CSS:invalid
и:valid
псевдокласове. - Преименувана
.form-control-static
на.form-control-plaintext
.
Бутони
- Преименувана
.btn-default
на.btn-secondary
. - Изцяло премахна
.btn-xs
класа, тъй като.btn-sm
е пропорционално много по-малък от v3. - Функцията за бутон за проследяване на състоянието на
button.js
плъгина jQuery е премахната. Това включва$().button(string)
и$().button('reset')
методите. Препоръчваме вместо това да използвате малко персонализиран JavaScript, което ще има предимството да се държи точно както искате.- Обърнете внимание, че другите функции на приставката (квадратчета за отметка на бутони, радиостанции на бутони, бутони с едно превключване) са запазени във v4.
- Променете бутоните
[disabled]
на:disabled
както IE9+ поддържа:disabled
. Въпреки товаfieldset[disabled]
все още е необходимо, тъй като родните забранени полета все още са с грешки в IE11 .
Група бутони
- Пренаписан компонент с flexbox.
- Премахнато
.btn-group-justified
. Като заместител можете да използвате<div class="btn-group d-flex" role="group"></div>
като обвивка около елементи с.w-100
. - Изцяло
.btn-group-xs
премахна класа поради премахването на.btn-xs
. - Премахнато изрично разстояние между групите бутони в лентите с инструменти на бутоните; използвайте помощните програми за марж сега.
- Подобрена документация за използване с други компоненти.
падащи менюта
- Превключени от родителски селектори към отделни класове за всички компоненти, модификатори и т.н.
- Опростени падащи стилове, които вече не се доставят със стрелки, обърнати нагоре или надолу, прикрепени към падащото меню.
- Падащите менюта могат да бъдат изградени с
<div>
s или<ul>
s сега. - Преустроени падащи стилове и маркиране, за да осигурят лесна, вградена поддръжка за
<a>
и<button>
базирани падащи елементи. - Преименувана
.divider
на.dropdown-divider
. - Елементите от падащото меню вече изискват
.dropdown-item
. - Превключвателите на падащото меню вече не изискват изричен
<span class="caret"></span>
; това вече се предоставя автоматично чрез CSS::after
на.dropdown-toggle
.
Мрежова система
- Добавена е нова
576px
точка на прекъсване на мрежата катоsm
, което означава, че вече има общо пет нива (xs
,sm
,md
,lg
иxl
). - Преименува класовете модификатори на адаптивната мрежа от
.col-{breakpoint}-{modifier}-{size}
на.{modifier}-{breakpoint}-{size}
за по-прости класове на мрежата. - Изпуснати модификаторни класове за натискане и изтегляне за новите класове, захранвани от flexbox
order
. Например, вместо.col-8.push-4
и.col-4.pull-8
бихте използвали.col-8.order-2
и.col-4.order-1
. - Добавени са помощни класове на flexbox за мрежова система и компоненти.
Избройте групи
- Пренаписан компонент с flexbox.
- Заменен
a.list-group-item
с явен клас,.list-group-item-action
, за стилизиране на връзки и версии на бутони на елементи от списъчна група. - Добавен
.list-group-flush
клас за използване с карти.
Модален
- Пренаписан компонент с flexbox.
- Като се има предвид преминаването към flexbox, подравняването на иконите за отхвърляне в заглавката вероятно е нарушено, тъй като вече не използваме плаващи елементи. Плаващото съдържание е на първо място, но с flexbox това вече не е така. Актуализирайте иконите си за отхвърляне, за да идват след модалните заглавия, за да коригирате.
- Опцията
remote
(която може да се използва за автоматично зареждане и инжектиране на външно съдържание в модал) и съответнотоloaded.bs.modal
събитие бяха премахнати. Препоръчваме вместо това да използвате шаблони от страна на клиента или рамка за обвързване на данни или да извикате сами jQuery.load .
навигация
- Пренаписан компонент с flexbox.
- Изпуснати са почти всички
>
селектори за по-опростен стил чрез невложени класове. - Вместо специфични за HTML селектори като
.nav > li > a
, ние използваме отделни класове за.nav
s,.nav-item
s и.nav-link
s. Това прави вашия HTML по-гъвкав, като същевременно носи увеличена разширяемост.
Навигационна лента
Навигационната лента е изцяло пренаписана във flexbox с подобрена поддръжка за подравняване, отзивчивост и персонализиране.
- Отзивчивите поведения на навигационната лента вече се прилагат към
.navbar
класа чрез необходимото.navbar-expand-{breakpoint}
място, където избирате къде да свиете навигационната лента. Преди това беше по-малко променлива модификация и изискваше повторно компилиране. .navbar-default
е сега.navbar-light
, но.navbar-dark
остава същият. Едно от тях се изисква на всяка навигационна лента. Тези класове обаче вече не задаватbackground-color
s; вместо това те по същество засягат самоcolor
.- Навигационните ленти вече изискват някаква фонова декларация. Изберете от нашите помощни програми за фон (
.bg-*
) или задайте свои собствени със светлинните/инверсните класове по-горе за безумно персонализиране . - Предвид стиловете на flexbox, навигационните ленти вече могат да използват помощни програми flexbox за лесни опции за подравняване.
.navbar-toggle
е сега.navbar-toggler
и има различни стилове и вътрешно маркиране (не повече от три<span>
s).- Заряза
.navbar-form
напълно класа. Вече не е необходимо; вместо това просто използвайте.form-inline
и приложете маржин помощни програми, ако е необходимо. - Навигационните ленти вече не включват
margin-bottom
илиborder-radius
по подразбиране. Използвайте помощни програми, ако е необходимо. - Всички примери, включващи навигационни ленти, са актуализирани, за да включват ново маркиране.
Пагинация
- Пренаписан компонент с flexbox.
- Вече се изискват явни класове (
.page-item
,.page-link
) за наследниците на.pagination
s - Изцяло премахна
.pager
компонента, тъй като беше малко повече от персонализирани контурни бутони.
галета
- Вече се изисква явен клас,
.breadcrumb-item
, за потомците на.breadcrumb
s
Етикети и значки
- Консолидиран
.label
и.badge
за разграничаване от<label>
елемента и опростяване на свързаните компоненти. - Добавен
.badge-pill
като модификатор за закръглен вид на „хапче“. - Значките вече не се пускат автоматично в списъчни групи и други компоненти. Сега за това се изискват полезни класове.
.badge-default
е премахнат и.badge-secondary
добавен, за да съответства на класовете модификатори на компоненти, използвани другаде.
Панели, миниатюри и кладенци
Отпадна изцяло за новия компонент на картата.
Панели
.panel
до.card
, вече изграден с flexbox..panel-default
премахнати и без смяна..panel-group
премахнати и без смяна..card-group
не е заместител, различен е..panel-heading
да се.card-header
.panel-title
към.card-title
. В зависимост от желания външен вид може също да искате да използвате заглавни елементи или класове (напр<h3>
. ,.h3
) или удебелени елементи или класове (напр<strong>
. ,<b>
,.font-weight-bold
). Обърнете внимание, че.card-title
макар и с подобно име, създава различен вид от.panel-title
..panel-body
да се.card-body
.panel-footer
да се.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
и.panel-danger
бяха премахнати за.bg-
,.text-
и.border
помощни програми, генерирани от нашата$theme-colors
Sass карта.
Напредък
- Заменени контекстуални
.progress-bar-*
класове с.bg-*
помощни програми. Например,class="progress-bar progress-bar-danger"
ставаclass="progress-bar bg-danger"
. - Заменен
.active
за анимирани ленти за напредък с.progress-bar-animated
.
Въртележка
- Ревизиран е целият компонент, за да се опрости дизайна и стила. Имаме по-малко стилове, които да замените, нови индикатори и нови икони.
- Целият CSS е де-вложен и преименуван, като се гарантира, че всеки клас има префикс с
.carousel-
.- За елементи от въртележка,
.next
,.prev
,.left
и.right
сега са.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
и.carousel-item-right
. .item
е и сега.carousel-item
.- За предишни/следващи контроли
.carousel-control.right
и.carousel-control.left
са сега.carousel-control-next
и.carousel-control-prev
, което означава, че вече не изискват специфичен базов клас.
- За елементи от въртележка,
- Премахнати са всички адаптивни стилове, отлагайки се на помощни програми (напр. показване на надписи в определени екрани) и персонализирани стилове, ако е необходимо.
- Премахнати замени на изображения за изображения в елементи от въртележка, отлагайки помощните програми.
- Променен е примерът на Carousel, за да включи новото маркиране и стилове.
Маси
- Премахната поддръжка за стилизирани вложени таблици. Всички стилове на таблици вече са наследени във v4 за по-прости селектори.
- Добавен вариант на обратна таблица.
Помощни програми
- Показване, скрито и още:
- Помощните програми за показване са отзивчиви (напр.
.d-none
иd-{sm,md,lg,xl}-none
). - Премахна по-голямата част от
.hidden-*
помощните програми за нови помощни програми за дисплей . Например, вместо.hidden-sm-up
, използвайте.d-sm-none
. Преименува.hidden-print
помощните програми, за да използва схемата за именуване на помощната програма за показване. Повече информация в секцията Responsive utilities на тази страница. - Добавени
.float-{sm,md,lg,xl}-{left,right,none}
класове за отзивчиви плаващи елементи и премахнати.pull-left
и.pull-right
тъй като те са излишни за.float-left
и.float-right
.
- Помощните програми за показване са отзивчиви (напр.
- Тип:
- Добавени са адаптивни варианти към нашите класове за подравняване на текст
.text-{sm,md,lg,xl}-{left,center,right}
.
- Добавени са адаптивни варианти към нашите класове за подравняване на текст
- Подравняване и разстояние:
- Добавени са нови помощни програми за полета и подложки за всички страни, плюс вертикални и хоризонтални стенограми.
- Добавено натоварване на помощни програми за flexbox .
- Отпадна
.center-block
за новия.mx-auto
клас.
- Clearfix е актуализиран, за да прекрати поддръжката за по-стари версии на браузъра.
Миксини за префикс на доставчик
Миксините на префикса на доставчика на Bootstrap 3 , които бяха отхвърлени във v3.2.0, бяха премахнати в Bootstrap 4. Тъй като използваме Autoprefixer , те вече не са необходими.
Премахнати са следните миксини: animation
, animation-delay
, animation-direction
, animation-duration
, animation-fill-mode
, animation-iteration-count
, animation-name
, animation-timing-function
, backface-visibility
, box-sizing
, content-columns
, hyphens
, opacity
, perspective
, perspective-origin
, rotate
, , rotateX
, rotateY
, scale
, scaleX
, scaleY
, skew
, transform-origin
, transition-delay
, transition-duration
, transition-property
, transition-timing-function
, transition-transform
, translate
, translate3d
,user-select
Документация
Нашата документация също получи надграждане навсякъде. Ето най-ниското:
- Все още използваме Jekyll, но имаме плъгини в микса:
bugify.rb
се използва за ефективно изброяване на записите на нашата страница с грешки в браузъра .example.rb
е персонализирано разклонение наhighlight.rb
плъгина по подразбиране, което позволява по-лесно боравене с примерен код.callout.rb
е подобно персонализирано разклонение на това, но предназначено за нашите специални допълнителни документи.- jekyll-toc се използва за генериране на нашето съдържание.
- Цялото съдържание на документи е пренаписано в Markdown (вместо в HTML) за по-лесно редактиране.
- Страниците са реорганизирани за по-просто съдържание и по-достъпна йерархия.
- Преминахме от обикновен CSS към SCSS, за да се възползваме напълно от променливите на Bootstrap, миксините и др.
Отзивчиви помощни програми
Всички @screen-
променливи са премахнати във v4.0.0. Вместо това използвайте миксините media-breakpoint-up()
, media-breakpoint-down()
, или media-breakpoint-only()
Sass или $grid-breakpoints
картата на Sass.
Нашите адаптивни помощни класове до голяма степен са премахнати в полза на изрични display
помощни програми.
- Класовете
.hidden
и.show
бяха премахнати, защото бяха в конфликт с методите$(...).hide()
и на jQuery.$(...).show()
Вместо това опитайте да превключите[hidden]
атрибута или използвайте вградени стилове катоstyle="display: none;"
иstyle="display: block;"
. - Всички
.hidden-
класове са премахнати, с изключение на помощните програми за печат, които са преименувани.- Премахнато от v3:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
- Премахнато от v4 alpha:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- Премахнато от v3:
- Помощните програми за печат вече не започват с
.hidden-
или.visible-
, а с.d-print-
.- Стари имена:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
,.hidden-print
- Нови класове:
.d-print-block
,.d-print-inline
,.d-print-inline-block
,.d-print-none
- Стари имена:
Вместо да използвате изрични .visible-*
класове, вие правите елемент видим, като просто не го скривате при този размер на екрана. Можете да комбинирате един .d-*-none
клас с един .d-*-block
клас, за да покажете елемент само на даден интервал от размери на екрана (напр. .d-none.d-md-block.d-xl-none
показва елемента само на средни и големи устройства).
Имайте предвид, че промените в точките на прекъсване на мрежата във v4 означават, че ще трябва да отидете с една точка на прекъсване, за да постигнете същите резултати. Новите отзивчиви помощни класове не се опитват да приспособят по-рядко срещаните случаи, при които видимостта на даден елемент не може да бъде изразена като единичен непрекъснат диапазон от размери на прозореца за изглед; вместо това ще трябва да използвате персонализиран CSS в такива случаи.