28 Серпень 2015
Рубрика: код

Обзор 4-й версии Bootstrap: описание, преимущества и недостатки

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

Если вы не знали…

Bootstrap — это фреймворк на основе HTML и CSS. Он содержит стили для основных элементов, которые применяются в верстке. Использование такого фреймворка значительно ускоряет процесс создания страниц. Стандартные стили легко менять, что обеспечивает гибкий и простой процесс создания макетов сайтов.

У меня есть серия уроков о Bootstrap, которая постоянно пополняется. Благодаря этим урокам вы сможете легко научиться создавать макеты сайтов, даже не обладая большими знаниями в верстке.

Для начала немного истории. Замечательно, что четвертая версия фреймворка вышла ровно через 4 года после запуска первой бета-версии. Тот памятный момент запечатлен этим твитом разработчиков:

Тогда автору нужно было объяснять, что такое Bootstrap. Сегодня это имя говорит само за себя :)

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

Что нового?

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

  1. Переезд с Less на Sass. Меня, как любителя этого языка, особенно радует такой переезд, хотя большинство разработчиков это изменение даже не заметит.
    Причина проста: после компиляции препроцессорного языка все равно получается обычный CSS, а в исходниках 99% людей никогда не заглядывали и правильно делали. Компиляция CSS теперь проводится при помощи библиотеки Libsass, который работает в разы быстрее своих аналогов.
  2. Улучшен процесс верстки макетов, в частности это коснулось блочной структуры страницы. Разработчики переработали структуру этой части фреймворка, что повлияло в первую очередь на мобильные экраны. И до этого дела с мобильными и планшетами у бутстрапа шли очень неплохо, теперь же миксины стали больше ориентированными на разные мобильные устройства.
  3. Встроенная поддержка flexbox. Я еще не писал о верстке при помощи flexbox, но будущее уже рядом. Это мощный компонент html5, благодаря которому верстка будет вести себя в точности как таблица или как набор блоков — как мы захотим. В 4-й версии Bootstrap достаточно будет рекомпилировать CSS, чтобы блочная верстка работала не при помощи float: left , а на основе flexbox.
    Теперь сверстать такой макет займет две минуты:
    верстка макета bootstrap 4
  4. Превью и панели заменены на карты. Карты — это новый компонент Bootstrap, который фактически будет объединять в себе небольшие по формату элементы с превью изображений и текстовых блоков с обводкой. Думаю, такое нововведение сделано для того, чтобы собрать компоненты, которые не должны выделяться в отдельные из-за небольшого размера.
  5. HTML резеты собраны в одном модуле под названием “Reboot”.

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

    В новой версии Bootstrap обнуляющие стили собраны в файл Normalize.css, чтобы при необходимости они были под рукой. Мое мнение: они должны были быть там с самого начала :)

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

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

  7. Отмена поддержки IE8. То, что IE8 давно пора забыть, все и так знают. Теперь разработчикам не нужно думать о том, как сделать так, чтобы крутой градиент выглядел так же круто и в IE8.
  8. Переход с пикселей на размеры в rem и em. Пиксели уступили место rem и em, а это еще один шаг к лучшему отображению сайта на мобильных устройствах, когда размер букв и отступы зависят от размера экрана.
  9. Обновление кода всех плагинов JavaScript. Каждый js-плагин в новом бутстрапе был переписан в соответствии с требованиями ES6, что делает код более структурированным, быстрым и надежным.

    ES или ECMAScript — это официальный стандарт языка JavaScript версии 6

  10. Обновлена работа всплывающих подсказок и блоков.
  11. Улучшенная документация и поиск. Практически весь мануал был переписан с примерами и исходным кодом. Поиск по документации тоже работает быстро, хотя толку от него с такой структурой документов немного.
  12. Много другого. Новые классы для отступов, кастомизированные элементы управления формами.

Все эти и множество других улучшений вы найдете в новой версии Bootstrap.

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

Развитие проекта

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

Поэтому в репозитории проекта с нетерпением ждут ваших коммитов :).

Поддержка Bootstrap v3

Самый важный вопрос, за которым сюда пришли большинство читателей: будет ли сайт, сверстанный при помощи Bootstrap 3, работать хорошо, если обновить версию фреймворка?

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

Код, написанный на BS3, будет поддерживаться в новой версии, и ваши элементы продолжат работать как надо. К ним добавятся новые классы и возможности, например:

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

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

Темы

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

bootstrap 4 темы

Темы содержат основные элементы, которые используются в блогах, интернет-магазинах и на новостных сайтах. Оформлены в едином стиле, поэтому можно купить такую тему, заверстать сайт и поставить CSS от купленной темы.

Отказавшись от отдельных тем, разработчики предлагают нам эти темы купить :).

Темы, кстати, основаны на Bootstrap 3: сейчас это панель управления, приложение и продажный сайт. Возможно, в будущем темы станут выгодной покупкой, а пока это хороший способ поддержать разработчиков.

Мое мнение

Очень радуют дополнения в блочной верстке, Sass-переменные и более структурированная система фреймворка. Основной повод для радости — фреймворк живет и развивается, ошибки исправляются и с завидной регулярностью добавляются новые.

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

Поделитесь и вы мнением — как вам впечатления от верстки на Bootstrap.

Тепер я хочу бачити коментарі 21