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

    Поширити у Фейсбуці
    Надіслати у Messenger
    Зберегти в Pocket
    Надіслати в Telegram
    Надіслати у WhatsApp

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    21 коментар

    спочатку нові
    за рейтингом спочатку нові за хронологією

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

    Автор
    Назар Токар

    Прошу! :)

    Они в 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.