Основные отличия Bootstrap 3-ей и 4-ой версий

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

Для того чтобы сэкономить вам немного времени, я составил список действий, которые необходимо выполнить при переходе с Bootstrap 3 на Bootstrap 4.

Мы начнем с обсуждения изменений, внесенных в фреймворк Bootstrap 4, затем мы рассмотрим новый способ установки Bootstrap, узнаем как изменились единицы измерения в сетке и как flexbox может помочь при создании адаптивных макетов. Мы также обсудим изменения некоторых компонентов и посмотрим, что происходит в новых версиях JavaScript.

Наконец, мы рассмотрим некоторые из новых компонентов, включая карты, всплывающие подсказки и flexbox. Если вы готовы перенести свой сайт со старой версии Bootstrap 3 на Bootstrap 4, эта статья именно для вас.

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

Список глобальных изменений в Bootstrap 4:

Смена Less на Sass в CSS файлах.
Смена px на rem в качестве единиц измерения в CSS.
Медиа-запросы теперь ems вместо pxs.
Размер шрифта увеличен с 14px до 16px.

Исходный код Bootstrap

Исходный код Bootstrap 3 содержит перекомпилированный CSS, JavaScript, и шрифты, наряду с исходными Less, JavaScript и документацией.

В Bootstrap v4.0.0-alpha, все файлы Less были заменены на Sass из-за миграции к Sass технологии через libSass. Так как Bootstrap 4 больше не поддерживает glyphicons, папку шрифтов тоже убрали.

Установка Bootstrap 4

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

Вы можете выбрать нужные параметры по своему усмотрению.

Исходные файлы: Используйте Bootstrap, загрузив полный пакет исходного кода, который включает в себя Sass, JavaScript и файлы документации. Для работы вам потребуется компилятор Sass, Autoprefixer и некоторые дополнительные настройки. Если вам нужны только CSS и JS файлы, вы можете просто подключить их при помощи тега <link> внутри раздела <head> перед другими таблицами стилей.
Bootstrap CDN: Используйте Bootstrap CDN. Добавьте ссылку к тегу <link> внутри раздела <head>.
Менеджер пакетов: Используйте менеджер пакетов, например Bower, npm, meteor или composer для установки Bootstrap. Для этого вам понадобится Sass компилятор и Autoprefixer, для установки официальной скомпилированной версии.
Пользовательские сборки: Если вам нужна только часть CSS или JS Bootstrap файлов, вы можете использовать одну из пользовательских сборок:
- Reboot включает в себя переменные/примеси, Normalize и Reset. Без JavaScript.
- Grid only включает в себя переменные/примеси, и систему сетки. Без JavaScript.
- Flexbox включает в себя весь набор Bootstrap с поддержкой Flexbox, но с пониженной совместимостью браузеров.

Обновление Bootstrap сетки

Система сетки в Bootstrap 4 по-прежнему следует тому же HTML-синтаксису, изменения коснулись лишь единиц измерения.

Например, вы можете использовать те же 12 столбцов в разметке.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-7 sm-6">
            <div class="row">
                <div class="col-lg-7 sm-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="col-lg-5 sm-8">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-5 sm-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Здесь ничего нового; Bootstrap 3 использует те же самые классы. Тем не менее, классы Bootstrap 4 используют ems а не px, а также они добавили один новый дополнительный размер для очень больших экранов. Перечислим все доступные классы вместе с их размерами экрана.

col-xl - очень большой экран (от 75em)
col-lg - большой экран (от 62em)
col-md - средний экран (от 48em)
col-sm - маленький экран (от 34em)
col-xs - очень маленький экран (менее 34em)

Также стоит рассмотреть классы container и row. Контейнер имеет максимальную ширину в единицах измерения rem, в то время как строка имеет отрицательные margin слева и справа размером в -.9375rem и левый и правый padding размером в 0.9375rem, в Bootstrap 3 которые составляли 15px.

Если вы используете Sass версию Bootstrap 4, вы сможете управлять размером сетки используя следующие переменные:

$grid-columns: количество решеток по горизонтали (по умолчанию 12)
$grid-gutter-width: общий отступ вокруг каждой сетки (по умолчанию 30px)
$grid-float-breakpoint: минимальный размер развернутого navbar (по умолчанию $screen-sm-min)
$grid-float-breakpoint-max: максимальный размер при котором navbar начинает уменьшаться (размер по умолчанию $grid-float-breakpoint – 1)

Обновление компонентов сброса / Bootstrap 4 reboot.css

В Bootstrap 3 мы использовали normalize.css для сброса стандартных стилей CSS, в Bootstrap 4 добавили улучшенную версию под названием reboot.css.

Изменение и обновление классов в Bootstrap 4

В новой версии Bootstrap убрали несколько классов и немного изменили некоторые из старых.

Типография

В Bootstrap типографике используется rem. В отличие от px и em, они не являются фиксированными или относительными единицами измерения. Единицы измерения rem являются динамическими по отношению к корневому тегу HTML. Тем не менее, вы все еще можете использовать px, em и pt в своих Bootstrap проектах.

html{
font-size: 16px; 
}
p{
font-size: 1rem; /* 1rem = 16px */
}
h1 {
    font-size: 1.875rem; /* 30px / 16px = 1.875rem */
}

В приведенном выше примере, для параграфа мы задали значение размера текста в 1rem, что эквивалентно корневому html размером в 16px.

Bootstrap 4 использует единицы измерения rem, для того, чтобы иметь 100% масштабирование всего приложения. Также стоит отметить, что размер HTML тега может быть установлен по вашему усмотрению.

Таблицы

Bootstrap 3 использовал контекстные классы для добавления цвета фона в строках таблицы или отдельных ячеек. В Bootstrap 4, добавили специальный префикс .table-* для каждого контекстного класса.

Смена класса table-condensed

В Bootstrap 3 мы использовали класс .table-condensed для создания более компактной таблицы, без отступов. В Bootstrap 4 переименовали данный класс в .table-sm.

Пример ниже.

<table class="table table-striped">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>

Формы

Формы имеют некоторые изменения в классах. Два основных изменения это переименование классов .input-lg и .input-sm в .form-control-lg и .form-control-sm без использования .form-group-*.

Также добавили новый класс .form-control-label для центрирования названий по вертикали с классом .form-control.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="inputEmail3" placeholder="Email">
    </div>
  </div>
 
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control form-control-sm" id="inputPassword3" placeholder="Password">
    </div>
  </div>
 
  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Изменения в JavaScript

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

Вот несколько изменений:

Убрали поддержку IE8: Теперь когда отбросили поддержку IE8, мы можем с легкостью использовать более быструю версию jQuery 2.0
Поддержка ES6: Все плагины были переписаны в ES6 и скомпилированы при помощи Babel, компилятора JavaScript.

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

В этой части рассмотрим некоторых из основных новых функций.

Карточки

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

Для подключения добавьте классы .card и .card-block к выбранному элементу. Есть также еще несколько классов, которые можно использовать внутри класса .card.

.card-title название
.card-text текст
.card-header заголовок
.card-footer футер

<div class="card">
        <!-- Card Header -->
 
        <div class="card-header">
            Card Header
        </div>
 
        <div class="card-block">
            <!-- Card Title -->
 
            <h4 class="card-title">This is the Card Title</h4><!-- Image -->
            <img alt="" src="http://goo.gl/oxHSMr" width="280"> 
            <!-- Card Text -->
 
            <p class="card-text">These are card text. See? They are
            awesome!</p>
        </div><!-- Card Footer -->
 
        <div class="card-footer">
            Card Footer
        </div>
</div>

Flexbox

Еще одно нововведение в Bootstrap 4 это - технология flexbox. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Для того, чтобы использовать Flexbox в своем проекте Bootstrap 4, установите переменную $enable-flex со значением true в файле _variables.scss и после компиляции, ваша сетка сразу же переключится на использование Flexbox модели.

Обратите внимание что Flexbox не имеет поддержку IE9

Заключение

В этой статье мы рассказали вам о всех моментах перехода с Bootstrap 3 на Bootstrap 4. Рекомендуем всегда проверять официальную документацию для будущих обновлений.

Вам требуются услуги или консультация специалиста по веб-разработке?

Свяжитесь со мной