Source

Перехід на v4

Bootstrap 4 — це серйозна переробка всього проекту. Найпомітніші зміни підсумовано нижче, а потім ідуть більш конкретні зміни до відповідних компонентів.

Стабільні зміни

Під час переходу від бета-версії 3 до нашої стабільної версії v4.0 немає критичних змін, але є деякі помітні зміни.

Друк

  • Виправлено несправні утиліти друку. Раніше використання .d-print-*класу несподівано переважало будь-який інший .d-*клас. Тепер вони збігаються з іншими нашими утилітами відображення та застосовуються лише до цього носія ( @media print).

  • Розширені доступні утиліти для відображення друку відповідно до інших утиліт. Бета 3 і старіші версії мали лише block, inline-block, inlineі none. Додано Stable v4 flex, 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-readya make-colдля налаштування розміру окремого стовпця.flexmax-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було відкинуто. Замість цього використовуйте .rowon <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більше не застосовує стилі з .rowvia mixin, тому .rowтепер необхідний для макетів горизонтальної сітки (наприклад, <div class="form-group row">).
    • Додано новий .col-form-labelклас для вертикально центрованих міток із .form-controls.
    • Додано нове .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-4and .col-4.pull-8ви б використали .col-8.order-2and .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, ми використовуємо окремі класи для .navs, .nav-items і .nav-links. Це робить ваш HTML більш гнучким, водночас покращуючи його розширюваність.

Панель навігації була повністю переписана у flexbox із покращеною підтримкою вирівнювання, швидкості реагування та налаштування.

  • Поведінка адаптивної навігаційної панелі тепер застосовується до .navbarкласу через необхідне .navbar-expand-{breakpoint} місце, де ви вибираєте місце згортання навігаційної панелі. Раніше це була модифікація з меншими змінними і вимагала перекомпіляції.
  • .navbar-defaultє зараз .navbar-light, хоча .navbar-darkзалишається тим самим. Один із них обов’язковий для кожної навігаційної панелі. Однак ці класи більше не встановлюють background-colors; натомість вони по суті лише впливають color.
  • Панелі навігації тепер вимагають певного фонового оголошення. Виберіть одну з наших фонових утиліт ( .bg-*) або встановіть власну за допомогою світлих/інверсних класів вище для шаленого налаштування .
  • Враховуючи стилі flexbox, панелі навігації тепер можуть використовувати утиліти flexbox для простих параметрів вирівнювання.
  • .navbar-toggleтепер .navbar-togglerі має різні стилі та внутрішню розмітку (не більше трьох <span>s).
  • Зовсім кинув .navbar-formурок. Це більше не потрібно; замість цього просто використовуйте .form-inlineта застосовуйте утиліти маржі за потреби.
  • Навігаційні панелі більше не включають margin-bottomабо border-radiusза замовчуванням. За потреби використовуйте утиліти.
  • Усі приклади з навігаційними панелями оновлено, щоб включити нову розмітку.

Пагінація

  • Переписав компонент за допомогою flexbox.
  • Явні класи ( .page-item, .page-link) тепер потрібні для нащадків .paginations
  • Компонент .pagerповністю вилучено, оскільки він був не більш ніж налаштованим контуром кнопок.
  • Явний клас, .breadcrumb-item, тепер потрібен для нащадків .breadcrumbs

Ярлики та значки

  • Консолідований .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}.
  • Вирівнювання та інтервал:
  • 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та .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
  • Утиліти друку більше не починаються з .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.