Что нового bootstrap 4 – Bootstrap 4 на русском · самый популярный в мире mobile-first и aдаптивный интерфейсных фреймворк.

Bootstrap 4 что нового — Как создать сайт

В конце лета на официальном сайте Bootstrap, появилась запись о выходе альфа версия Botstrap 4. Рассмотрим какие нововведения подарит нам данный релиз.

• Вместо Less, в Bootstrap 4 теперь поддерживается Sass
• Улучшена система сеток
• Появилась поддержка FlexBox
• Новый компонент в Bootstrap 4 — карточки (cards)
• Появился сброс стилей Reboot
• Больше возможностей для кастомизации тем Bootstrap
• Прекращена поддержка IE8
• Вместо пикселей EM и REM
• Все плагины  переписаны с помощью новой версии JavaScript
• Улучшены подсказки и popover элементы
• Обновлена структура документации в Bootstrap 4

Less Sass Bootstrap

Разработка и компиляция модулей Bootstrap 4 теперь осуществляется на Sass, раньше Bootstrap создавался на Less. Компиляция происходит с помощью библиотеки Libsass, которая работает в несколько раз быстрее своих аналогов.

Система сеток Bootstrap

Bootstrap 4 стал еще более дружелюбен к мобильным пользователям (смартфоны, планшеты). Миксины в Bootstrap 4 стали более мобильно-ориентированными. Появилась возможность настраивать и управлять миксинами.

Поддержка FlexBox

В Bootstrap 4 есть возможность включать поддержку FlexBox, благодаря которму можно управлять элементами на странице более гибко. Чтобы включить поддержку FlexBox в Bootstrap, нужно выставить определённые параметры, и скомпилировать фреймворк заново, это делается на официальном сайте.

Компонент карточки (cards)

В Bootstrap 4 были удалены компоненты (wells, thumbnails и panels) вместо них создали компонент cards (карточки), который делает все тоже самое только лучше и удобней.

Сброс HTML Reboot

Появился новый модуль, который сбрасывает стандартные стили HTML-тегов (у каждого браузера свои стили по-умолчанию), предназначенный для кроссбраузерности. Данный модуль теперь хранится в Sass файле и имеет название Reboot

. Все эти стили сброса, собираются в файл normalize.css

Больше возможностей для кастомизации тем

В Bootstrap 4, праметры различных элементов страницы сайта (цвета, градиенты, скругления и т.д.) собраны в отдельные файлы, что облегчает перенастройку темы под свой дизайн.

IE8 не поддерживается

Браузер Internet Explorer восьмой версии, в Bootstrap 4 больше не поддерживается. Это необходимо было сделать для того чтобы иметь возможность использовать все новые технологии из CSS3, без использования дополнительного кода, что несомненно благотворно скажется на быстродействии фреймворка.

Размеры в em и rem

В Bootstrap 4 вместо пикселей теперь используются размеры в em и rem, благодаря этому элементы страницы, шрифты и модули стали более гибкими и адаптивными.

JavaScript ES6

Все существующие плагины Botstrap 4, были переписаны с ES5 (JavaScript 5) на более новую версию JavaScript ES6. Код написанный на ES6 (JavaScript 6)

более структурирован надёжен и быстр.

Подсказки и popover элементы

Подсказки и popover (всплывающие) элементы, в Bootstrap 4 теперь работают более слаженно и ожидаемо.

Документация Bootstrap 4

Документация Bootstrap 4 стала более полной и переписана с помощью Markdown (облегчённый язык разметки), также улучшен поиск по документации.

Поддержка Bootstrap 3

Когда Bootstrap обновлялся со второй (2) версии на третью (3), то поддержка Bootstrap 2 прекратилась. Это вызвало много нареканий со стороны сообщества. На этот раз с выходом Bootstrap 4, третья версия фреймворка будет также поддерживаться и исправляться при обнаружении багов.

Ну и напоследок, код сайтов которые были созданы с помощью Bootstrap 3, будет также хорошо работать при обновлениий до Bootstrap 4, реализуется обратная совместимость.

Остальное

Изменений в Bootstrap 4 произошло много и не мало изменений еще впереди, следите за обновлениями.

Дата публикации поста: 29 января 2016

Дата обновления поста: 29 января 2016

Навигация по записям

Новые возможности в Bootstrap 4 Alpha

От автора: 19 августа на свет божий вышла альфа версия Bootstrap 4, ровно спустя четыре года после первого официального релиза Bootstrap v1 (Совпадение, не правда ли?). Вечно популярный front-end фреймворк обрел законченные черты, и я, как большой поклонник Bootstrap, очень взволнован и жду не дождусь приложить руки к новым возможностям!

Спустя целый год разработки, 1100 коммитов и 12000 строк-правок кода; появилось так много функций, с которыми не терпится поработать. Дабы сэкономить ваше время от прочтения лога изменений, я составил список новых возможностей, которые показались мне интересными.

Новый модуль сброса «Reboot»

Начнем оттуда, откуда начинают все фреймворки, с модуля сброса. Новый модуль reboot построен на традиционном normalize.css, но все общие селекторы и стили сброса переехали в отдельный scss файл. Также вы можете заметить новую фишку, установив стандартный box-sizing: border-box для тега html – это позволит наследовать данное свойство всем дочерним элементам.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

html {   box-sizing: border-box; } *, *:before, *:after {   box-sizing: inherit; }

Такой подход позволяет лучше переопределять параметры, если это потребуется, а не использовать !important.
За трюк спасибо сказать можно Jon Neal, а за подробный разбор данного метода сайту CSS-Tricks.

Rem и Em рулят!

В угоду оптимизации Bootstrap v4 лишился поддержки IE8 и массы CSS3 полифиллов. Начиная с IE9+, теперь он поддерживает другие, более любимые всеми CSS модули. Одним из них стали rem единицы (root em), они вычисляют размер шрифта относительно корневого элемента (html).

Rem единицы помогут нам по-настоящему вникнуть в адаптивную типографику. Так как все размеры шрифта напрямую зависят от нашего корневого элемента, мы можем создавать медиа запросы для изменения размера шрифта под разные размеры экрана. Скомбинируем это с новым миксином сетки для разных размеров экрана и вуаля! Ниже пример изменения размера шрифта на нашем сайте при просмотре на очень маленьких экранах:

html{ font-size:16px; } // создаем медиа запрос для крайне малых размеров экрана (0 — 34em) @include media-breakpoint-up(xs) { html{ font-size:18px; } }

html{     font-size:16px; } // создаем медиа запрос для крайне малых размеров экрана (0 — 34em) @include media-breakpoint-up(xs) {     html{         font-size:18px;     } }

Подробнее можете прочитать в статье Kezz Bracey Подробное руководство: Когда использовать Em, а когда Rem.

Я выбираю Flexbox

Прямо из коробки Bootstrap v4 не поддерживает Flexbox, вместо него использует стандартные обтекания или табличный метод отображения. Это сделано для поддержки IE9+, но если вы можете отказаться и поддерживать только IE10+, то можно подключить Flexbox к вашему проекту. Сделать это можно, изменив булево значение переменной в файле _variables.scss; после чего ваш скомпилированный css будет содержать Flexbox стили. Flexbox применяется не только из-за сетки, а также из-за других элементов, в том числе нового компонента карточек, групп ввода и медиа компонентов.

Пример

Перейдем к примеру, где нам может пригодиться Flexbox. Крайне часто у меня имеется набор линейных колонок (как на картинке), где контент одной колонки увеличивает высоту и остальных колонок тоже. Классическая CSS дилемма. Одно из преимуществ Flexbox в том, что мы можем заставить все колонки иметь одинаковую высоту. Не нужно писать дополнительный CSS код!

Без Flexbox

С Flexbox

SCSS «узурпировал» LESS, так же, как и препроцессор CSS был выбран в Bootstrap v4. Весь код CSS был переработан в SCSS, причем без официального LESS порта на момент написания статьи. Некоторые причины этого Марк объясняет в твиттере.

Если вы большой поклонник оригинального LESS, то Марк просил о некоторой помощи в создании и обслуживании LESS порта.

Карточки, унифицированный элемент интерфейса

Из Bootstrap v4 были удалены классические компоненты well, panel и thumbnail. На их место пришел новый компонент: карточки!

Новый элемент карточка имеет схожие части от панелей, такие как заголовки, хедеры и футеры, и все это обернуто в гибкий контейнер.

И еще больше:

Наложения поверх изображений и фон

Можно установить в качестве фона картинку и наложить ее поверх текста или другого контента. Все это делается без единой лишней строки CSS, нужно только добавить в карточку:

<img data-src=»image.jpg» alt=»Card image»>

<img data-src=»image.jpg» alt=»Card image»>

Класс card-inverse делает текст белым, позволяя задать более темный фон, если это требуется. Насчет фонов, также можно использовать и стандартные фоновые цвета. К примеру, card-primary установит первичный цвет для карточки и т.д. и т.п.

Группированные карточки

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Также помимо стандартной сетки с отступами, вы найдете опцию группирования карточек без внутренних отступов между ними и как установить блокам одну высоту. По умолчанию это можно сделать с помощью display: table и table-layout: fixed, но если у вас есть Flexbox, то можно и с помощью display: flex.

Сетка – кирпичная кладка

Карточки идут в виде колонок кирпичиков, что позволяет пододвинуть блоки ближе друг к другу. Эта опция не поддерживается в IE9 – необходим IE10 и выше!

Еще больше служебных классов?!

В предыдущих версиях Bootstrap было много классов с названием «служебный класс», они использовались для быстрого и легкого изменения контента, не трогая его специфические стили. Изменения, как правило, ограничивались обтеканиями (pull-left, pull-right), цветом (text-primary и т.д.), клиарфиксами (.clearfix) и другими.

В альфе Bootstrap v4 мы получили доступ к целой массе новых служебных классов, связанных с паддингами и маргинами. Возможно, это и спорный шаг, он позволит пользователям Bootstrap v4 быстро нажать на одну кнопку и выровнять контент внутри с одинаковым шагом. Некоторые подумают, что это отход от встроенных стилей, но эти классы позволяют быстро и равномерно стилизовать компоненты, не создавая для этого отдельного селектора.

Служебные классы padding и margin задаются с множественным значением переменной spacer. Например:

// $spacer — sass переменная, равная 1rem или 16px .m-a-0 { margin: 0 !important; } .m-a { margin: $spacer !important; } .m-a-md { margin: ($spacer * 1.5) !important; } .m-a-lg { margin: ($spacer * 3) !important; }

// $spacer — sass переменная, равная 1rem или 16px .m-a-0 { margin: 0 !important; } .m-a { margin: $spacer !important; } .m-a-md { margin:  ($spacer * 1.5) !important; } .m-a-lg { margin:   ($spacer * 3) !important; }

В коде .m-a значит внешний отступ по всем сторонам. Для внутренних отступов также существуют классы для отдельных сторон, осей, размеров (с помощью -0, -md и -lg). Ниже пример парочки других классов:

// стандартный паддинг на все стороны .p-a { padding: $spacer !important; } // стандартный паддинг сверху .p-t { padding-top: $spacer-y !important; } // стандартный паддинг справа .p-r { padding-right: $spacer-x !important; } // стандартный паддинг снизу .p-b { padding-bottom: $spacer-y !important; } // стандартный паддинг слева .p-l { padding-left: $spacer-x !important; } // стандартный паддинг для оси Х (лево и право) .p-x { padding-right: $spacer-x !important; padding-left: $spacer-x !important; } // стандартный паддинг для оси У (верх и низ) .p-y { padding-top: $spacer-y !important; padding-bottom: $spacer-y !important; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// стандартный паддинг на все стороны .p-a { padding:        $spacer !important; } // стандартный паддинг сверху .p-t { padding-top:    $spacer-y !important; } // стандартный паддинг справа .p-r { padding-right:  $spacer-x !important; } // стандартный паддинг снизу .p-b { padding-bottom: $spacer-y !important; } // стандартный паддинг слева .p-l { padding-left:   $spacer-x !important; } // стандартный паддинг для оси Х (лево и право) .p-x { padding-right:  $spacer-x !important; padding-left:   $spacer-x !important; } // стандартный паддинг для оси У (верх и низ) .p-y { padding-top:    $spacer-y !important; padding-bottom: $spacer-y !important; }

Основная идея заключается в снижении количества узкоспециализированных пользовательских классов, которые создаются для того, чтобы подвинуть контент, а не добавлять их в качестве методов по выравниванию содержимого.

Я перекинулся парой слов с Марком Отто по поводу использования этих классов (@mdo сооснователь Bootstrap) на их сайте public Slack channel, и вот что он сказал:

«Мы поняли, что нам без них не обойтись, слишком часто переопределяются значения по умолчанию для многих компонентов. Margin и padding кажется наиболее часто меняют свое значение (вместе с цветом и шрифтов)»

Также достойно упоминания

Существуют буквально еще сотни новых возможностей и обновлений существующего кода, слишком много для одного поста. Расскажу про еще парочку, которые не вошли в основной список, но о них стоит упомянуть.

Новая документация

Документация Bootstrap v4 обновилась. Немного изменилась структура, по которой функции разбивались на макеты, контент и компоненты. Что действительно круто в новой документации, так это то, что каждый компонент теперь на отдельной странице. Это облегчает их поиск, а также можно сразу проверить адаптивность, поигравшись с размером окна браузера.

Новый уровень сетки

В Bootstrap 4 добавлен новый уровень сетки для маленьких экранов (480px в ширину), этот размер экрана получил имя класса предыдущего самого маленького экрана (.col-xs-XX). При этом все уровни сетки сдвинулись на один вверх, тем самым создавая новый самый большой уровень .col-xl-XX.

Как обсуждалось выше в статье про rem и em, команда Bootstrap добавила новые миксины для быстрого создания новых размеров экрана среди существующих. Для создания используется следующий синтаксис:

// Creates a media query: @media (min-width) @include media-breakpoint-up(xs) { … } @include media-breakpoint-up(sm) { … } @include media-breakpoint-up(md) { … } @include media-breakpoint-up(lg) { … } @include media-breakpoint-up(xl) { … } // Creates a media query: @media (max-width) @include media-breakpoint-down(xs) { … } @include media-breakpoint-down(sm) { … } @include media-breakpoint-down(md) { … } @include media-breakpoint-down(lg) { … } @include media-breakpoint-down(xl) { … }

// Creates a media query: @media (min-width) @include media-breakpoint-up(xs) { … } @include media-breakpoint-up(sm) { … } @include media-breakpoint-up(md) { … } @include media-breakpoint-up(lg) { … } @include media-breakpoint-up(xl) { … } // Creates a media query: @media (max-width) @include media-breakpoint-down(xs) { … } @include media-breakpoint-down(sm) { … } @include media-breakpoint-down(md) { … } @include media-breakpoint-down(lg) { … } @include media-breakpoint-down(xl) { … }

Больше никаких иконок

Иконки были удалены из билда; в документацию Bootstrap добавили инструкции, как подключить сторонние пакеты иконок, как Font Awesome и Octicons.

JavaScript переписан

Все плагины JavaScript были переписаны в ES6 под последнюю спецификацию. Вы могли заметить, что некоторые плагины удалены (как affix плагин), они все еще переписываются, к ним добавляются новые библиотеки.

И что дальше?

Вот такой у меня получился список новых крутых функций в Bootstrap альфе. Если захотите полностью изучить лог изменений, взгляните на ГитХаб @mdo pull request.

Уверен, еще будет куча изменений, они до сих пор делаются, команда работает на износ. Планы развития включают следующие этапы:

Еще парочка альфа релизов для решения вопросов, поднятых сообществом

Два бета релиза по завершении всех функций

Два релиз-кандидата, чтобы убедиться, что все отточено.

Не сказано, когда все это будет выпущено. Так же как и с предыдущими билдами, все выйдет, когда будет готова библиотека. А сейчас можете поизучать Bootstrap и помочь отследить проблемы, о багах можно писать на bug tracker!

Автор: Aaron Vanston

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Переход на v4 · Bootstrap на русском

Bootstrap 4 является основным переписать почти весь проект. Наиболее заметные изменения суммируются непосредственно ниже, затем более конкретных классов и поведенческие изменения соответствующих компонентов.

Внимание! это будет в поток, работа на v4 Альфа прогрессирует. До тех пор считать ее неполной, и мы бы с удовольствием запросы, чтобы помочь держать его в курсе.

Резюме

Вот несколько больших билет пунктов вы хотите быть в курсе при переходе от v3 на v4.

Поддержка браузеров

• Прекращена поддержка IE8 и iOS 6. 4-ой версией, сейчас только в IE9+ и iOS 7+. Для сайтов, использующие не поддерживаемые, используйте v3.
• Добавлена официальная поддержка Android версии V5.0 «Lollipop» браузера и WebView. Предыдущие версии браузера для Android и WebView остаются только в неофициальной поддержке.

Глобальные изменения

• Перешли от Less для Sass для нашего источника CSS файлов.
• Перешли с px для rem в качестве основной CSS блока, хотя и пикселей используются до сих пор для медиа запросы и грид поведение как видовых экранов не влияет на размер типа.
• Глобальный размер шрифта увеличен с 14px для 16px.
• Добавлен новый грид за ~480px и ниже уровня.
• Заменил отдельная Дополнительная тема с настраиваемыми опциями через SCSS переменных (например, $enable-gradients: true).

Блочная система

• Добавлена поддержка flexbox (набор $enable-flex: true и перекомпилировать) в грид примесей и предопределенных классов.
• Как часть flexbox, включена поддержка вертикального и горизонтального выравнивания классы.
• Капитальный ремонт грид примеси сливать make-col-span в make-col Для сингулярных mixin.
• Добавлен новый sm грид уровень ниже 768px Для более детального контроля. Сейчас у нас xs, sm, md, lg, и xl. Это также означает, что каждый ярус был увеличен на один уровень вверх (так .col-md-6 в v3 сейчас .col-lg-6 в v4).
• Изменения блочная система медиа точки останова запросов и ширину контейнера с учетом новых грид уровень и обеспечить столбцы кратно 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 иконка. Если вам нужны значки, некоторые варианты:
• За Аффикс плагин jQuery. Мы рекомендуем использовать position: sticky полифилл вместо. Смотрите на HTML5, пожалуйста, запись для подробной информации и конкретных рекомендаций полифилл.
  • Если вы были с помощью Аффикса применять дополнительные, не-position стили, на полифиллы может не поддерживать ваш случай использования. Одним из вариантов такого использования является сторонним ScrollPos-Стайлер библиотеки.
• Уронил пейджер компонент, как это было по сути немного подгонять кнопки.
• Переработаны почти все компоненты, чтобы использовать более ООН-вложенные классы вместо детей селекторов.

Разное

• Неaдаптивный использования Bootstrap больше не поддерживается.
• За онлайн настройщик в пользу более подробную документацию по установке и заказной сборки.

По компонентам

Этот список основных изменений по компонентам между v3.х.х и v4.0.0.

Перезагрузка

Новичок в Bootstrap 4 это перезагрузки, новую таблицу стилей, которая основывается на нормализации с нашей собственной несколько самоуверенных типов сброса. Селекторы появляться в этом файле, использовать только элементы—здесь нет классов. Это изолирует наши стили сбросить с наших компонентов стили для более модульный подход. Некоторые из наиболее важных сбрасывает это включает в себя такие box-sizing: border-box переход от em до rem единицы на многие элементы, стили ссылок, и многие формы элемента сбрасывает.

Типографика

• Перенесли все .text- утилиты к _utilities.scss файл.
• За .page-header как, в сторону от границы, все стили могут быть применены через утилиты.
• .dl-horizontal уронили. Вместо этого, используйте .row на <dl> и использовать грид классов столбца (или примеси) на <dt> и <dd> дети.
• Пользовательские <blockquote> стиль переместился в классы—.blockquote и .blockquote-reverse модификатор.
• .list-inline теперь требует, чтобы ее в список детей предметы имеют новые .list-inline-item класс применяется к ним.

Изображения

• Переименован .img-responsive для .img-fluid.

Таблицы

• Почти Все экземпляры > селектора были удалены, означая, вложенной таблицы теперь автоматически наследуют стили от родителей. Это значительно упрощает наши селекторы и возможных настроек.
• Адаптивный таблицы больше не требуется оборачивать элемент. Вместо этого, просто положить .table-responsive на <table>.
• Переименован .table-condensed для .table-sm Для последовательности.
• Добавлен новый .table-inverse опция.
• Добавлен новый .table-reflow опция.
• Добавлено таблица Заголовок модификаторы: .thead-default и .thead-inverse.
• Переименован контекстная классы для .table--префикс. Отсюда .active, .success, .warning, .danger и .table-info для .table-active, .table-success, .table-warning, .table-danger и .table-info.

Формы

• Переехал сбрасывает элемент _reboot.scss файла.
• Переименован .control-label для .form-control-label.
• Переименован .input-lg и .input-sm для .form-control-lg и .form-control-sm, соответственно.
• За .form-group-* занятия для простоты. Использовать вместо .form-control-* классы теперь.
• За .help-block и заменил его .form-text на уровне блоков текста справки. Для встроенной справке и другие гибкие возможности, использовать служебные классы как .text-muted.
• Капитальный ремонт горизонтальных форм:
  • Уронил .form-horizontal класс требование.
  • .form-group не применяет стили из .row через mixin, Так что .row теперь требуется для горизонтального грид разметки (например, <div>).
  • Добавлен новый .form-control-label класс вертикально по центру этикетки с .form-control.

Кнопки

• Переименован .btn-default для .btn-secondary.
• Уронил .btn-xs только как .btn-sm пропорционально гораздо меньше, чем v3.
• На кнопка состояния функция из button.js jQuery плагин был удален. Это включает в себя $().button(string) и 3 методы. Мы рекомендуем использовать немного нестандартная JavaScript вместо, которые будут вести себя именно так, как вы хотите.
  • Обратите внимание, что другие возможности плагина (кнопка чекбоксы, кнопки радио, один-переключение кнопок) были сохранены в v4.

Кнопка группы

• Удалены классы .btn-group-xs и .btn-xs.

Раскрывающиеся списки

• Перешли от родительских селекторов для особых классов для всех компонентов, модификаторов и т. д.
• Упрощенный выпадающий список стилей, чтобы больше ни один корабль вверх или вниз перед стрелками добавленные в выпадающем меню.
• Раскрывающиеся списки могут быть построены с <div> или <ul> теперь.
• Перестроен в выпадающем списке стили и разметку, чтобы обеспечить простой, встроенная поддержка <a> и <button> на основе выпадающих пунктов.
• Переименован .divider для .dropdown-divider.
• Выпадающих предметов теперь требуют .dropdown-item.
• Выпадающий переключает не требуют явного <span></span>; это теперь автоматически через CSS’ы ::after на .dropdown-toggle.

Блочная система

• Добавлен новый ~480px грид точки останова, то есть сейчас всего пять ярусов.
• Переименована в aдаптивный грид классов модификатор от .col-{breakpoint}-{modifier}-{size} для .{modifier}-{breakpoint}-{size} Для проще грид классов. Например, вместо .col-md-3.col-md-push-9 это col-md-3.push-md-9.
• Капитальный ремонт грид примеси сливать make-col и make-col-span В одного make-col mixin, тем самым обеспечивая миксины и предопределенных классов использовать один и тот же поплавок/гибкий поведения.
• Добавлено flexbox вспомогательные классы для блочная система и компонентов.

Список групп

• Заменить a.list-group-item с явной класс, .list-group-item-action, для укладки ссылку и кнопку версии список элементов группы.

Модальное окно

• remote вариант (которое может быть использовано для автоматической загрузки и ввести внешнее содержание в модальное окно) и соответствующий loaded.bs.modal мероприятия были удалены. Вместо этого мы рекомендуем использовать шаблоны на стороне клиента или привязки данных фреймворк, или вызов на jQuery.загрузить себя.

Навигация (navs)

• За почти все > селекторы для упрощения укладки через классы невложенным.
• Вместо HTML-конкретные селекторами .nav > li > a, то использовать отдельные классы для .nav .nav-item и .nav-link. Это делает HTML-код более гибким и вместе с повышенной растяжимости.

Навигации

• Отказались от использования класса .navbar-form. В этом больше нет необходимости.

• Явные классы (.page-item, .page-link) требуются потомки .pagination
• Удален .pager компонент целиком, как это было чуть более настроенный контур кнопки.

Хлебные крошки

• Явный класс, .breadcrumb-item, требуется теперь на потомков .breadcrumb

Этикетки, эмблемы, и теги

• Переименован .label для .tag для разрешения неоднозначности из <label> элемент.
• Уронил .badge — компонентом, так как он был почти идентичен метки/теги. Используйте .tag-pill модификатор вместе с компонентом Label, а не для того закругленными углами.
• Теги больше не всплывала автоматически в список групп и других компонентов. Служебные классы являются теперь требуется для этого.

Панели, эскизы и скважин

Полностью за новый компонент карты.

Панели

• .panel для .card
• .panel-default сняли, а замены нет
• .panel-group сняли, а замены нет. .card-group не замена, это другое.
• .panel-heading для .card-header
• .panel-title для .card-header. В зависимости от желаемого вида, Вы также можете использовать Заголовок элементы или классы (например, <h4>, .h4) или ярких элементов или классов (например,<strong>, <b>, .font-weight-bold). Обратите внимание, что .card-title, в то время как аналогичным названием, производит другой вид, чем .panel-title.
• .panel-body для .card-block
• .panel-footer для .card-footer
• .panel-primary для .card-primary и .card-inverse (или .bg-primary на .card-header)
• .panel-success для .card-success и .card-inverse (или .bg-success на .card-header)
• .panel-info для .card-info и .card-inverse (или .bg-info на .card-header)
• .panel-warning для .card-warning и .card-inverse (или .bg-warning на .card-header)
• .panel-danger для .card-danger и .card-inverse (или .bg-danger на .card-header)

Карусель

• Переименован .item для .carousel-item.

Утилиты

• Добавлено .pull-{xs,sm,md,lg,xl}-{left,right,none} классы для aдаптивный поплавки и удален .pull-left и .pull-right, поскольку они избыточны для .pull-xs-left и .pull-xs-right.
• Добавлено aдаптивный изменения к нашей теме занятия выравнивание .text-{xs,sm,md,lg,xl}-{left,center,right} и удалены избыточные .text-{left,center,right} утилиты как же xs вариант.
• За .center-block нового .m-x-auto класс.

Префикс поставщика миксины

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, но у нас есть пользовательские плагины в смеси:
  • example.rb вилка по умолчанию highlight.rb плагин, что облегчает пример кода обработки.
  • callout.rb аналогичная вилка, но предназначен для наши специальные документы выноски.
• Все содержание документов была переписана в markdown (вместо HTML) для удобного редактирования.
• Страницы были реорганизованы по проще и более доступным иерархии.
• Мы переехали из регулярной CSS до SCSS чтобы воспользоваться всеми преимуществами Bootstrap переменные, миксины, и даже больше.

Что нового

Мы добавили новые компоненты и изменены некоторые существующие. Здесь представлены новые и обновленные стили.

Компонент	Описание
Cards	Новый, более гибкий компонент для замены панелей v3, эскизы и скважин.
New navbar	Заменяет предыдущую navbar с новой, проще компонента.
New progress bars	Заменяет старый .progress <div> Настоящий <progress> элемент.
New table variants	Добавляет .table-inverse, таблица вариантов головы, заменяет .table-condensed с .table-sm и .table-reflow.
New utility classes

ТОДО: новые классы ревизии, которых не было в v3

Что удалено

Следующие компоненты были удалены в v4.0.0.

Компонент	Удалены от 3.х.х	4.0.0 эквивалент
Panels		Cards
Thumbnails		Cards
Wells		Cards
Justified navs

ТОДО: курсы аудита в V3, что нет в v4

Адаптивные утилиты

Все @screen- переменные были убраны в v4.0.0. Используйте media-breakpoint-up(), media-breakpoint-down() или media-breakpoint-only() Sass примесей или $grid-breakpoints Sass карты вместо.

В aдаптивный служебные классы также были капитально отремонтированы.

• .hidden и .show классы были удалены, потому что они противоречат в jQuery $(...).hide() и $(...).show() — методам. Вместо этого, попробуйте изменить атрибут [hidden], использование встроенных стилей как style="display: none;" и style="display: block;" или переключать .invisible класс.
• Старые классы (.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) ушли.
• Они были заменены .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-*-up классы скрыть элемент, когда область просмотра на данном останова или больше (например, .hidden-md-up скрывает элемент на средних, больших и очень больших устройств).
• .hidden-*-down классы скрыть элемент, когда область просмотра на данном останова или меньше (например, .hidden-md-down скрывает элемент на очень малых, малых и средних устройств).

А не с помощью явных .visible-* классы, сделать элемент видимым, просто не скрываю на этом размер экрана. Вы можете объединить один .hidden-*-up класс один .hidden-*-down класс, чтобы показать элемент только на заданном интервале размеров экрана (например, .hidden-sm-down.hidden-xl-up показан элемент только на средних и больших устройств).

Обратите внимание, что изменения в грид точки останова в v4 означает, что вам потребуется перейти одну точку останова больше, чтобы достичь тех же результатов (например, .hidden-md больше похож на .hidden-lg-down чем .hidden-md-down). Новый aдаптивный служебные классы не пытайтесь вместить в менее распространенных случаях, когда видимость элемента не может быть выражено как один непрерывный диапазон размеров области просмотра; вместо этого, вы должны использовать пользовательские CSS в таких случаях.

Разные заметки приоритеты

• Сняли min--moz-device-pixel-ratio опечатка Hack для сетчатки медиа запросы
• Изменение кнопки’ [disabled] для :disabled как в IE9+ поддержка :disabled. Однако fieldset[disabled] еще необходимо потому, что родной fieldsets отключенным багги в ie11.

ТОДО: перечень вещей в V3, который был помечен как устаревший

Дополнительные примечания

• Удалена поддержка в стиле вложенной таблицы (На данный момент)

Обзор. Разметка · Bootstrap. Версия v4.2.1

Компоненты и опции для создания вашего проекта Bootstrap, включая контейнеры для упаковки, мощную сетчатую систему, гибкий медиа-объект и отзывчивые служебные классы.

Контейнеры

Это базовый элемент в Bootstrap и они необходимы при использовании нашей стандартной сеточной системы. Выбирайте отзывчивый, с фиксированной шириной (что значит, что его max-width изменяется на каждом брейкпойнте) или контейнер с плавающей шириной (width ==100% всегда).

Контейнеры могут иметь вложенные элементы, но в большинстве случаев можно обойтись без них.

<div>
  <!-- Content here -->
</div>

Используйте .container-fluid для создания контейнера полной ширины, занимающий 100% зоны просмотра.

<div>
  ...
</div>

Отзывчивые брейкпойнты

Поскольку Bootstrap разработан как mobile-first, тут используются медиа-запросы @media для создания брейкпойнтов контента и интерфейсов. Эти брейкпойнты в основном сделаны на минимальных широтах зоны просмотра и позволяют масштабировать элементы по мере изменения размера зоны просмотра.

В исходниках Sass Bootstrap главным образом записаны следующие ранги @media (брейкпойнты) для разметки, сеточной системы и компонентов.

// Экстрамалые девайсы («телефоны», 
// Малые девайсы («ландшафтные телефоны», >= 576px)
@media (min-width: 576px) { ... }

// Средние девайсы («таблетки», >= 768px)
@media (min-width: 768px) { ... }

// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) { ... }

// Экстрабольшие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Так как все эти параметры записаны в исходниках как Sass, все @media доступны через миксины:

// Не сущетвет медиа-запрос для брекпоинта xs, поскольку это фактически `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// 
Пример: Скрыто начало с `min-width: 0`, а затем отображается на брекпоинте `sm`
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

По случаю можно использовать и другие размеры (max-width: 575px == «данный размер или меньше»):

// Экстрамалые девайсы («телефоны», @media (max-width: 575.98px) { ... }

// Малые девайсы («ландшафтные», @media (max-width: 767.98px) { ... }

// Средние девайсы («таблетки», @media (max-width: 991.98px) { ... }

// Большие девайсы (большие десктопы, @media (max-width: 1199.98px) { ... }

// Экстрабольшие девайсы (большие десктопы)
// Тут нет @media, т.к. такие брейпкойнты не имеют верхней границы по ширине width

Обратите внимание, что поскольку браузеры в настоящее время не поддерживают запросы диапазона, мы используем ограничения min- и max- prefixes префиксов и видовых экранов с дробной шириной (что может произойти при определенных условиях на устройствах с высоким разрешением на дюйм, например), используя значения с более высоким точность для этих сравнений.

Опять же, эти @media доступны через Sass миксины:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// Нет медиа-запроса, необходимого для брекпоинта xl, поскольку он не имеет верхней границы по ширине

// Пример: стиль из среднего брекпоинта и вниз
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Также в наличии @media и миксины размеров экрана, использующие минимальные и максимальные ширины брейкпойнтов.

// Экстрамалые девайсы («портретные телефоны», @media (max-width: 575.98px) { ... }

// Малые девайсы («ландшафтные», >= 575px)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Средние девайсы («таблетки», >= 768px) 
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Большие девайсы (большие десктопы, >= 992px)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Большие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Эти @media также доступны из миксинов Sass:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Также, @media могут занимать несколько значений ширин брейкпойнта:

// Пример
// Здесь стили применятся от средних девайсов до XL-девайсов
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Миксины Sass для захвата таких же параметров (выше) выглядели бы так:

@include media-breakpoint-between(md, xl) { ... }

Z-индекс

Несколько компонентов Bootstrap используют данный индекс z-index, т.е. свойство CSS, которое помогает контролировать расположение контента с помощью третьей оси. В Bootstrap используется «стандартный» Z-индекс, спроектированный для правильного расположения навигации, всплывающих подсказок, всплывающих окон и т.н. “modals” (pop-up окно наверху страницы).

Эти высшие значения могут начинаться с любого числа, в идеале достаточно большого и специфичного, чтобы избежать конфликтов. Нам нужен стандартный набор этих чисел для использования с нашими компонентами: всплывающими подсказками, окнами, навбарами, выпадающими элементами, модальными элементами — так, чтобы мы могли бы разумно стандардартизировать их поведение. Не существует ограничений — используйте хоть 100, хоть 500 и более.

Мы не советуем настраивать эти значения самому, т.к. если потребуется изменить одно, придется менять все.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Для того, чтобы эффективно обращаться с перекрывающимися границами внутри компонентов (например, кнопки и формы ввода в группах форм ввода), мы используем по умолчанию значения z-index 1,2,3, а также hover и «активные состояния». В hover/focus/active мы подводим частный элемент к «переднему краю» использованием более высокого z-индекса, для показа его границы над вложенными элементами.

Изображения. Содержание · Bootstrap. Версия v4.0.0

Документация и примеры приведения изображений к отзывчивому поведению (так, чтобы их размер не выходил за рамки родительского элемента) и добавления к ним «легковесных» стилей – всё посредством классов.

Отзывчивые изображения

Изображения в Bootstrap делаются «отзывчивыми» с помощью .img-fluid. max-width: 100%; и height: auto; применяемых к изображению, которое т.о. масштабируется по родительскому элементу.

<img src="..." alt="Responsive image">

Изображения SVG и IE10

В IE10 SVG-изображения с классом .img-fluid выглядят диспропорционально. Для решения этой проблемы добавьте width: 100% \9; где необходимо. Это решение затрагивает и размеры изображений других форматов, поэтому Bootstrap не применяет его автоматически.

Мини-версии изображения

В дополнение к нашим утилитам бордер-радиуса вы можете использовать класс .img-thumbnail для придания изображению границы 1px.

<img src="..." alt="...">

Выравнивание изображений

Выравнивайте изображения вспомогательными классами выравнивания по стороне или классами выравнивания текста. Блочные изображения block можно центрировать использованием класса утилиты «марджина» the .mx-auto.

<img src="..." alt="...">
<img src="..." alt="...">

<img src="..." alt="...">

<div>
  <img src="..." alt="...">
</div>

Картинка

Если вы используете элемент <picture> для привязки множественных элементов <source> к определенному <img>, добавьте классы .img-* в <img>, а не в <picture>.

​<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." alt="...">
</picture>