Перехід на v4
Bootstrap 4 — це серйозна переробка всього проекту. Найпомітніші зміни підсумовано нижче, а потім ідуть більш конкретні зміни до відповідних компонентів.
Стабільні зміни
Переходячи від бета-версії 3 до нашої стабільної версії v4.x, немає критичних змін, але є деякі помітні зміни.
Друк
-
Виправлено несправні утиліти друку. Раніше використання
.d-print-*
класу несподівано переважало будь-який інший.d-*
клас. Тепер вони збігаються з іншими нашими утилітами відображення та застосовуються лише до цього носія (@media print
). -
Розширені доступні утиліти для відображення друку відповідно до інших утиліт. Бета 3 і старіші версії мали лише
block
,inline-block
,inline
іnone
. Додано Stable v4flex
,inline-flex
,table
,table-row
іtable-cell
. -
Виправлено візуалізацію попереднього перегляду друку в браузерах із новими стилями друку, які вказують
@page
size
.
Зміни Beta 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()
щоб уникнути конфлікту з внутрішнімgrayscale
фільтром CSS.- Перейменовано
.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, оскільки Bootstrap підтримує ті браузери, що підтримуються v3.x, а також у версії 3.x є деякі виправлення безпеки.
- Видалено невикористаний
.form-control-label
клас. Якщо ви використовували цей клас, він був дублікатом.col-form-label
класу, який вертикально центрував a<label>
з пов’язаним із ним введенням у горизонтальних макетах форм. color-yiq
Міксин, який включав властивість, змінено на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.
- Додано офіційну підтримку для браузера Android v5.0 Lollipop і WebView. Попередні версії браузера Android і 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
з усіма сценаріями або файлами читання проекту для потреб місцевого розвитку. - Використання Bootstrap без відповіді більше не підтримується.
- Відкинуто онлайн-настроювач на користь більш розширеної документації з налаштування та налаштованих збірок.
- Додано десятки нових корисних класів для поширених пар властивість-значення CSS і ярликів інтервалів між полями та відступами.
Сітка системи
- Перенесено у flexbox.
- Додано підтримку flexbox у міксинах сітки та попередньо визначених класах.
- У складі 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
amake-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
- Перегляньте сторінку Розширення, щоб переглянути список альтернатив. Маєте додаткові пропозиції? Будь ласка, відкрийте тему або піар.
- Вилучено плагін 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
на a.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}
для простіших класів сітки. - Вилучено класи модифікаторів push і pull для нових класів на основі flexbox
order
. Наприклад, замість.col-8.push-4
and.col-4.pull-8
ви б використали.col-8.order-2
and.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 .
Navs
- Переписав компонент за допомогою 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
.- Для елементів керування prev/next
.carousel-control.right
і.carousel-control.left
є now.carousel-control-next
і.carousel-control-prev
, тобто їм більше не потрібен певний базовий клас.
- Для елементів каруселі ,
- Вилучено всі адаптивні стилі, віддавши перевагу утилітам (наприклад, відображення підписів у певних вікнах перегляду) і призначеним для користувача стилям за потреби.
- Видалено заміну зображень для зображень в елементах каруселі, відкладаючи утиліти.
- Змінено приклад каруселі, щоб включити нову розмітку та стилі.
Таблиці
- Вилучено підтримку стилізованих вкладених таблиць. Усі стилі таблиць тепер успадковуються у v4 для простіших селекторів.
- Додано варіант зворотної таблиці.
Комунальні послуги
- Показати, приховати та інше:
- Зроблено адаптивними утиліти відображення (наприклад,
.d-none
іd-{sm,md,lg,xl}-none
). - Вилучено більшість
.hidden-*
утиліт для нових утиліт для відображення . Наприклад, замість.hidden-sm-up
, використовуйте.d-sm-none
. Перейменовано.hidden-print
утиліти, щоб використовувати схему іменування утиліт відображення. Більше інформації в розділі адаптивних утиліт цієї сторінки. - Додано
.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 , які були визнані застарілими у версії 3.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, міксинів тощо.
Чуйні утиліти
У версії 4.0.0 усі @screen-
змінні видалено. Замість цього використовуйте міксини media-breakpoint-up()
, media-breakpoint-down()
, або media-breakpoint-only()
Sass або $grid-breakpoints
карту Sass.
Наші адаптивні класи утиліт здебільшого видалено на користь явних display
утиліт.
- Класи
.hidden
and.show
було видалено, оскільки вони конфліктували з методами jQuery$(...).hide()
та .$(...).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:
.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.