Недавно в свет вышла новая, 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.

↑ Тисни «Лайк», щоб читати нас у Фейсбуці

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Коменти
вгву

нормал

Nikol

дуже гарно, дякую!!!

Назар Токар

Прошу! :)

blitz_v

Они в 4 уменьшили ширину .container на 30px, lg, md, sm тоже уменьшили, поэтому при переходе могут быть проблемы в старых проектах.

Андрей

А известно ли, когда появится удобная страничка Customize для четвертой версии, как та, что есть в третьей?

Назар Токар

Ні, самі чекаємо :)

Дмитрий

как бы я не любил bootstrap, уже больше года верстаю на uikit. просто он лучше.

Дамир

“FlexBox: Теперь сверстать такой макет займет две минуты:”
Тут хотелось бы отметить, что FlexBox не предназначен для верстки макетов, он предназначен для верстки элементов внутри контейнеров, например: список товаров которые выстроены в ряд, список иконок и т.д. Там где списки товаров раньше делались с помощью float, теперь рекомендуют делать на FlexBox. А сами макеты (шапка, сайдбар, футер, контент) пока еще нужно делать с помощью float.
Для верстки макетов разрабатывается другой модуль в CSS, забыл как называется, но он в конце этого года должен начать поддерживаться браузерами.

Назар Токарь

Интересное замечание. Я как раз читал, что flexbox именно для макетов. В общем, ничего не мешает верстать макет флексбоксом, он вполне для этого подойдёт. Или вы знаете какие-то подводные камни?

Егор

Здравствуйте, Bootstrap-3 освоил буквально за вечер. Потом просто заглядывал в справочник по классам, а сейчс почти наизусть знаю :) Не жалею ни капли. Страницы получаются оч. классные. Какие там Muse? А лендинги верстать на Bootstrap вообще классно, если еще фотошопер с сеткой знаком.

Назар Токарь

@Егор, да, бутстрап помогает в бытовых вопросах и экономит много, очень много времени!

Анатолий

Добрый день!
А уроки будете создавать по Bootstrap 4?
Было бы очень неплохо!

Назар Токарь

@Анатолий, отличия для верстальщика, как видите, небольшие, поэтому уроки универсальны. А что добавится нового — для этого будут уроки.

Пако

Дааа, бутстрап рулит, порадовала отмена поддержки IE-8 и flex :) Будущее близко!

Назар Токарь

@Пако, дело осталось за IE9 и за компанию IE10 :)

man

Дружище, ты бы написал что это обзор альфа версии бутстрапа, релиза еще не было!

Назар Токарь

@man, так и написано.

Ильнар

Изучаю… доступно для новичка, интересно для меня. Спасибо!

Назар Токарь

@Ильнар, успехов!

Владимир

Спасибо Назар, буду изучать.
С/у Владимир.

Владимир

Здравствуйте Назар.
Спасибо за ваше творчество.
У меня вопрос возник – а лендинг возможно сделать на bootstrap? Я сейчас как бы перед дилеммой – то ли Adobe Muse изучать, то ли bootstrap. Клиент просит лендинг, а я не умею их создавать.
Что посоветуете?
Спасибо, с/у Владимир.

Назар Токарь

@Владимир, с Muse a не работал, но Bootstrap для лендинга — идеальный выбор. Он не требует особых знаний для начала работы, в то же время даже мегапрофи может продолжать его использовать для создания значительно более сложных приложений.

Так что однозначный ответ — да, учите Bootstrap.