Доброго времени суток, дорогой читатель! Сегодня я расскажу вам об изменениях, которые претерпел Bootstrap, став 4 версией. НО 3 версия никуда не делась, она все также живет своей жизнью и если вы решили обновить версию Bootstrap с3 на 4, то спешу вас огорчить при этом придется многое исправить - самое главное grid систему, глобальный размер шрифта, новые и удаленные компоненты и другое.

А теперь о главных изменениях по порядку.

Grid System

Grid система Bootstrap 3 построена только на float, а Bootstap 4 предлагает нам использовать Flexbox. И это большой плюс, т.к. в новой версии нам больше не нужно выравниванивать колонку по вертикали, теперь все колонки в grid системе будут одиноковой высоты! Помниться сам мучался с "подгоном" колонок по высоте, изучая и используя flex. Это лишь один плюс, который может нам предложить разметка, построенная на Flexbox. С помощью align-item-center, align-items-md-center, align-items-lg-start мы сможете изменить вертикальное и горизонтальное выравнивание. Используя flex-unordered, flex-last, flex-first, измениться порядок ваших колонок; mr-auto, ml-auto, помогут "прижать" ваш элемент вправо или влево, соответственно.

Помимо FlexBox Grid System теперь использует .col-xl- Extra large (≥1200px), а .col-xs- теперь не использует постфикс XS, просто .col- Extra small (<576px)

Bootstrap 4 Grid System

Отныне можно не писать (при случае можно и писать) количество занимаемого пространства для каждой колонки, система сама расположит их в соответствие с количеством;

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Размер шрифта

Гглобальный размер шрифта увеличили с 14 до 16px. Вместо px используется rem.

Sass

Bootstrap 4 теперь использует Sass, а не Less.

Card

Новый компонент Card заменил удаленные: wells, thumbnails, panels. Это отличный компонент, включающий в себя возможности всех трех удаленных компонентов. Также карточки можно группировать и даже реализовать сетку.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Reboot

Для кроссбраузерности был разработан модуль Reboot, основой которого является Normalize.css из Bootstrap3. Все настройки для сброса стандартных стилей HTML-тегов у браузеров находятся в одном Sass файле.

Glyphicons

Bootstrap4 полностью перешел на использование SVG изображений, в связи с этим был удален иконочный шрифт Glypicons, который присутствует в Bootstrap3. Разработчики фреймворка рекомендуют использовать сторонние библиотеки иконок поддерживающие формат SVG:

На этом рассказ об основных изменениях FrameWork Bootstrap 4 закончен. Пользуйтесь и совершенствуйтесь, до новых встреч!

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.