Bootstrap 4: что нового, описание нововведений и преимуществ 4 версии

Мир веб-программистов уже увидел Bootstrap 5, но многих до сих пор интересует,что нового принесла в себе Bootstrap 4. Потому что именно эта версия привнесла новый виток технологий в этот фреймворк и зарекомендовала себя как стабильный и эффективный инструмент для веб-разработки.

Bootstrap — это инструмент для веб-разработки, который работает на основе HTML и CSS. Те, кто его пробовал, знают, что Bootstrap — это простой и очень быстрый способ создать макет сайта. Если вы до сих пор верстаете сайт «по-старинке» при помощи чистого HTML и CSS, то самое время попробовать этот инструмент и, как говорится, почувствовать разницу.

 

Bootstrap 4 — что принес нового

Можно сразу сказать, что Bootstrap 4 принес очень много нового, по сравнению с третьей версией, поэтому все перечислять мы не будем, а отметим только самое основное и значимое:

1. Less поменялся на Sass. Это ускорило компиляцию CSS. Для тех, кто не знает Less и Sass, — это препроцессорные языки, которые компилируются в чистый CSS. Sass использует библиотеку Libsass, а она компилируется намного быстрее.

2. Сеточная верстка улучшилась. По большей части это коснулось верстки под мобильные телефоны. Теперь адаптация под разные размеры экранов улучшилась, хотя и раньше была неплохой.

3. Появилась поддержка Flexbox. Верстальщики знают, что на сегодняшний день flexbox — это очень популярное свойство, которое необходимо для верстки адаптивных сайтов,а потому очень часто применяется. Но до Bootstrap 4 свойство flexbox этим фреймворком не поддерживалось.

4. Внедрение «карт». «Карта» — это новый компонент в Bootstrap 4, который заменил другие компоненты фреймворка, такие как «well», «thumbnail», «panel», и стал делать их работу намного быстрее.

5. Внедрение Reboot. Это специальный модуль для сброса стилей в HTML при кроссбраузерной верстке в отдельном Sass-файле. В прежней версии Bootstrap сброс делался в нескольких файлах, а это было неудобно.

6. Удобная настройка стилей через переменные Sass. Теперь не нужно искать необходимую переменную или создавать отдельный файл темы, чтобы изменить стиль. Все делается в одном Sass-файле.

7. Из поддержки исключен IE8. Если вам необходима поддержка именно этого браузера, тогда проект нужно создавать на Bootstrap 3. Bootstrap 4 и 5 уже не поддерживают данный браузер. Для отзывчивой верстки для других браузеров был осуществлен переход из «пикселей» в «em» и «rem».

8. Обновленный JavaScript. Все дополнительные плагины на Bootstrap 4 были переписаны на обновленной версии языка программирования JavaScript. Поэтому плагины стали быстрее и функциональнее.

9. Система подсказок в разы улучшилась.

10. Улучшили обучающую документацию и добавили к ней удобный поиск.

11. Другие обновления. Bootstrap 4 содержит сотни более мелких изменений, если сравнивать с Bootstrap 3.

В общем, Bootstrap 4 принес массу полезных изменений и вывел верстку сайтов на совершенно новый уровень. Эта версия фреймворка до сих пор успешно работает, но время не стоит на месте, и в 2020-м году вышла пятая версия Bootstrap.

 

Что нового в Bootstrap 5

Bootstrap 5, опять же, принес много небольших изменений, но есть несколько важных, которые обязательно нужно отметить:

1. Не поддерживается jQuery. jQuery — это очень популярная библиотека, многие до сих пор ее используют, однако она потихоньку отживает свой век. Из веб-рынка ее начали вытеснять популярные фреймворки Angular, Vue и React, так как они просто работали быстрее, чем библиотека jQuery. Bootstrap 5 было принято решение полностью от нее отказаться в пользу ванильного JavaScript. Такое решение означает одно — сайты, разработанные при помощи Bootstrap 5, будут загружаться быстрее.

2. Полный отказ от Internet Explorer. Если в Bootstrap 4 отказались от поддержки 8-й версии этого браузера и ниже, то в Bootstrap 5 решили отказаться от поддержки всех версий. Как ни крути, а IE — это уже уходящая эпоха. Сама компания Windows отказалась от его поддержки, а они, на секундочку, его разработчики.

3. Добавили еще переменных CSS. Bootstrap 4 добавили переменные от Sass, но их оказалось недостаточно, поэтому в Bootstrap 5 добавили еще больше корневых переменных CSS.

4. Добавлена система собственных SVG-иконок. В Bootstrap 4 не было иконок, и поэтому веб-программистам приходилось подключать их «со стороны». В Bootstrap 5 реализовали собственную систему SVG-иконок, так что больше «искать на стороне» не нужно.

5. Много мелких изменений. Например: изменился логотип, улучшился вид домашней страницы, добавили больше объяснений в документацию, расширили цветовую палитру, добавили новые классы и др.

 

Заключение

Теперь вы знаете, что нового принесли Bootstrap 4 и 5 в веб-разработку. По примерным подсчетам, в мире около 19 миллионов сайтов разработаны при помощи этого фреймворка. Такая цифра говорит о том, что у данного инструмента есть своя масса поклонников, которая формирует сообщества, где помогают новичкам, изучающим верстку на Bootstrap.