Недавно в свет вышла новая, 4-я версия Bootstrap. Я хочу рассказать, что нового есть в этой версии, чем она отличается от третьей и как она повлияет на процесс разработки сайтов.
Если вы не знали…
Bootstrap — это фреймворк на основе HTML и CSS. Он содержит стили для основных элементов, которые применяются в верстке. Использование такого фреймворка значительно ускоряет процесс создания страниц. Стандартные стили легко менять, что обеспечивает гибкий и простой процесс создания макетов сайтов.
У меня есть серия уроков о Bootstrap, которая постоянно пополняется. Благодаря этим урокам вы сможете легко научиться создавать макеты сайтов, даже не обладая большими знаниями в верстке.
Для начала немного истории. Замечательно, что четвертая версия фреймворка вышла ровно через 4 года после запуска первой бета-версии. Тот памятный момент запечатлен этим твитом разработчиков:
Woohoo! Twitter Bootstrap, an open-sourced CSS/HTML framework from myself and @fat, just went live: http://t.co/3OOsQ5T #kaboom
— Mark Otto (@mdo) August 19, 2011
Тогда автору нужно было объяснять, что такое Bootstrap. Сегодня это имя говорит само за себя :)
Версия 4.0 до стабильного релиза находится в стадии тестирования, тем не менее, это уже готовый к работе продукт. В новой версии очень много изменений, я расскажу о них подробно.
Что нового?
Согласно отчету разработчиков, в этой версии множество нововведений, поэтому все описывать нет смысла, остановимся на самых интересных и важных:
- Переезд с Less на Sass. Меня, как любителя этого языка, особенно радует такой переезд, хотя большинство разработчиков это изменение даже не заметит.
Причина проста: после компиляции препроцессорного языка все равно получается обычный CSS, а в исходниках 99% людей никогда не заглядывали и правильно делали. Компиляция CSS теперь проводится при помощи библиотеки Libsass, который работает в разы быстрее своих аналогов. - Улучшен процесс верстки макетов, в частности это коснулось блочной структуры страницы. Разработчики переработали структуру этой части фреймворка, что повлияло в первую очередь на мобильные экраны. И до этого дела с мобильными и планшетами у бутстрапа шли очень неплохо, теперь же миксины стали больше ориентированными на разные мобильные устройства.
- Встроенная поддержка flexbox. Я еще не писал о верстке при помощи flexbox, но будущее уже рядом. Это мощный компонент html5, благодаря которому верстка будет вести себя в точности как таблица или как набор блоков — как мы захотим. В 4-й версии Bootstrap достаточно будет рекомпилировать CSS, чтобы блочная верстка работала не при помощи
float: left
, а на основеflexbox
.
Теперь сверстать такой макет займет две минуты:
- Превью и панели заменены на карты. Карты — это новый компонент Bootstrap, который фактически будет объединять в себе небольшие по формату элементы с превью изображений и текстовых блоков с обводкой. Думаю, такое нововведение сделано для того, чтобы собрать компоненты, которые не должны выделяться в отдельные из-за небольшого размера.
- HTML резеты собраны в одном модуле под названием “Reboot”.
HTML Reset — это набор стилей, который заменяет собой стандартные CSS-стили, встроенные в браузер по умолчанию. Такие можно увидеть, если страница работает без подключенного CSS. Принято отключать их, чтобы они не портили процесс верстки.
В новой версии Bootstrap обнуляющие стили собраны в файл Normalize.css, чтобы при необходимости они были под рукой. Мое мнение: они должны были быть там с самого начала :)
- Новые возможности кастомизации шаблонов. Теперь, чтобы поменять стиль элемента, не нужно создавать отдельный файл темы. Достаточно будет обновить переменные в Sass-файле на свой вкус, и в скомпилированном файле вы получите обновленный вид любых элементов. Для примера можно вспомнить тени, градиенты, скругленные углы, анимации. Раньше, чтобы убрать скругление углов у кнопок, нужно было создавать свой резет и иногда использовать
!important
, а теперь достаточно поменять переменные в Sass.
На заметку: и раньше стандартное оформление можно было менять прямо в исходниках и компилировать CSS заново, но теперь такие переменные специально собраны в отдельных файлах, так что копаться в исходном коде станет намного проще.
- Отмена поддержки IE8. То, что IE8 давно пора забыть, все и так знают. Теперь разработчикам не нужно думать о том, как сделать так, чтобы крутой градиент выглядел так же круто и в IE8.
- Переход с пикселей на размеры в rem и em. Пиксели уступили место rem и em, а это еще один шаг к лучшему отображению сайта на мобильных устройствах, когда размер букв и отступы зависят от размера экрана.
- Обновление кода всех плагинов JavaScript. Каждый js-плагин в новом бутстрапе был переписан в соответствии с требованиями ES6, что делает код более структурированным, быстрым и надежным.
ES или ECMAScript — это официальный стандарт языка JavaScript версии 6
- Обновлена работа всплывающих подсказок и блоков.
- Улучшенная документация и поиск. Практически весь мануал был переписан с примерами и исходным кодом. Поиск по документации тоже работает быстро, хотя толку от него с такой структурой документов немного.
- Много другого. Новые классы для отступов, кастомизированные элементы управления формами.
Все эти и множество других улучшений вы найдете в новой версии 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$, а толку от них я наблюдаю мало.
Темы содержат основные элементы, которые используются в блогах, интернет-магазинах и на новостных сайтах. Оформлены в едином стиле, поэтому можно купить такую тему, заверстать сайт и поставить CSS от купленной темы.
Отказавшись от отдельных тем, разработчики предлагают нам эти темы купить :).
Темы, кстати, основаны на Bootstrap 3: сейчас это панель управления, приложение и продажный сайт. Возможно, в будущем темы станут выгодной покупкой, а пока это хороший способ поддержать разработчиков.
Мое мнение
Очень радуют дополнения в блочной верстке, Sass-переменные и более структурированная система фреймворка. Основной повод для радости — фреймворк живет и развивается, ошибки исправляются и с завидной регулярностью добавляются новые.
Я рад, что у нас есть такой мощный инструмент, который с каждым обновлением становится все более удобным и продуманным. Надеюсь, он нравится и вам.
Поделитесь и вы мнением — как вам впечатления от верстки на Bootstrap.
нормал
дуже гарно, дякую!!!
Прошу! :)
Они в 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, так и написано.
Изучаю… доступно для новичка, интересно для меня. Спасибо!
@Ильнар, успехов!
Спасибо Назар, буду изучать.
С/у Владимир.
Здравствуйте Назар.
Спасибо за ваше творчество.
У меня вопрос возник – а лендинг возможно сделать на bootstrap? Я сейчас как бы перед дилеммой – то ли Adobe Muse изучать, то ли bootstrap. Клиент просит лендинг, а я не умею их создавать.
Что посоветуете?
Спасибо, с/у Владимир.
@Владимир, с Muse a не работал, но Bootstrap для лендинга — идеальный выбор. Он не требует особых знаний для начала работы, в то же время даже мегапрофи может продолжать его использовать для создания значительно более сложных приложений.
Так что однозначный ответ — да, учите Bootstrap.