ООО «ПРкениг»
236006 Калининград Московский проспект 40
8 (4012) 39 09 55
info@pr-kenig.ru,

Bootstrap 4 - идем в ногу со временем! Почему важно знать о CSS фреймворке при выборе подхода к созданию сайтов.

Bootstrap 4 - идем в ногу со временем! Почему важно знать о CSS фреймворке при выборе подхода к созданию сайтов.
Bootstrap 4 - идем в ногу со временем! Почему важно знать о CSS фреймворке при выборе подхода к созданию сайтов.
Автор Дмитрий Грозный Дмитрий Грозный 21/06/2018

Здравствуйте, дорогие читатели блога «PR». В данной статье разберем, что такое Bootstrap 4, и чем он отличается от Bootstrap 3.

Вы в курсе, что сейчас очень много сайтов работает на bootstrap 3, версия которой была выпущена 19 августа 2013 года? Прошло уже более 5 лет! Популярность третьей версии была прежде всего из-за оптимизации под мобильные устройства. 

Настало время идти в ногу со временем и переходить на bootstrap 4! В настоящее время количество устройств с различными разрешениями экранов растет. Требования к отображению сайтов на телефонах, телевизорах с выходом в интернет и т.д. увеличиваются! К тому же, тратить много времени и средств на создание шаблонов и макетов в дизайн студиях в столь динамичном мире не всегда правильное решение. Надеюсь, прочитав эту статью, Вы поймете плюсы международных стандартов в web программировании в области Front-end разработки (Визуальной части сайта).

Я пишу Вам о Bootstrap 3 и Bootstrap 4. Возможно Вы не знаете что это такое вообще «Bootstrap»? Если говорить простым языком, Bootstrap это файл с готовым написанным кодом, который подключается к сайту для того, чтобы были доступны различные шаблоны, иконки и прочие компоненты. Пример компонентов Bootstrap 3.

Bootstrap – это CSS фреймворк, который изначально создавался для внутреннего использования компанией «Twitter» с рабочим названием «Twitter Blueprint»

Вот основные инструменты Twitter Bootstrap:

  • Модульная сетка шаблона – это предустановленные значения ширины столбцов (колонок). Чтобы задать нужную ширину необходимо задать определенный класс: от .col-6 до .col-sm-12. Ширина колонок может динамически меняться в зависимости от разрешения окна браузера.
  • Тип макета – фиксированный или резиновый.
  • Типографика – оформление заголовков, параграфов, списков, цитат и т.д.
  • Медиа – управление медиа-контентом. Например, картинка может динамически изменять свои размеры в зависимости от разрешения окна браузера.
  • Таблицы – различное оформление таблиц
  • Формы – оформление форм: вариации и варианты расположения.
  • Навигация – оформление вкладок, хлебных крошек, постраничной навигации, меню, панель инструментов
  • Набор javaScript’ов – создание модальных окон, подсказок (tooltip), всплывающих окон, фиксация блока при прокрутке (affix) и др.

Преимущества фреймворка Bootstrap:

  • Высокая скорость разработки макетов страниц сайта. Bootstrap содержит огромный набор готовых решений и элементов.
  • Кроссбраузерность и адаптивность сайта. Все элементы фреймворка адаптивны под все устройства и корректно отображаются во всех современных браузерах.
  • Легкость в использовании. Даже человек, имеющий базовые знания о HTML и CSS, может свободно создавать web-страницы с использованием фреймворка.
  • Простота в обучении. У Bootstrap очень хорошая документация с большим количеством примеров готового кода.

Рис. 1. Пример простого шаблона созданного на bootstrap 4, без применения индивидуальных стилей.

На рис. 1 изображен макет страницы созданный нами за 10 минут. Время затраченное на разработку впечатляет! 

О качестве фреймворка говорит то, что множество тем оформления для подавляющего большинства популярных CMS, таких как WordPress, Joomla и т.д., разработаны с применением Bootstrap 3.

Сетка Bootstrap

При верстке адаптивного классического макета: шапка сайта (header), основная часть (content), боковая колонка (sidebar) и подвал сайта (footer), для корректного отображения нам нужно рассчитать ширину в процентах каждого элемента и присвоить обтекание. Если с шапкой и футером все понятно, в большинстве случаев ширина будет 100%, то для основной части контента и боковой колонки может быть 70/30 или 85/25, но при уменьшении экрана нас это не устроит, нужно будет делать по 100% и сбрасывать обтекание.

Вот для таких целей и нужна сетка Bootstrap. Просто задаются классы для блоков, которые указывают, какую ширину должен занимать элемент и как он будет отображаться на разных устройствах. Сетка функционирует как таблица, в которой есть свои ряды и столбцы, максимальное количество столбцов 12.

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

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

Так чем же Bootstrap 4 отличается от Bootstrap 3?

Безусловно, в новой версии обновлены стили компонентов. Вот небольшой пример карточек собранный инструментами Bootstrap 4:

Пример кнопок без анимации:

В общем Bootstrap 4 отличается от Bootstrap 3, согласно отчету разработчиков, в новой версии множество нововведений как в дизайне, так и в удобстве применения:

  • Переезд с Less на Sass. Bootstrap теперь компилируется быстрее, чем когда-либо благодаря Libsass.
  • Улучшена сетка. Добавлен новый уровень сетки для более лучшей адаптивности мобильных устройств. Полностью переработаны сетки миксин.
  • Встроенная поддержка flexbox. Это мощный компонент html5, благодаря которому верстка будет вести себя в точности как таблица или как набор блоков — как мы захотим.
  • Превью и панели заменены на карты. Карты — это новый компонент Bootstrap, который фактически будет объединять в себе небольшие по формату элементы с превью изображений и текстовых блоков с обводкой. Думаю, такое нововведение сделано для того, чтобы собрать компоненты, которые не должны выделяться в отдельные из-за небольшого размера.
  • HTML резеты собраны в одном модуле под названием “Reboot”. HTML Reset — это набор стилей, который заменяет собой стандартные CSS-стили, встроенные в браузер по умолчанию. Такие можно увидеть, если страница работает без подключенного CSS. Принято отключать их, чтобы они не портили процесс верстки.
  • Новые возможности кастомизации шаблонов. Теперь, чтобы поменять стиль элемента, не нужно создавать отдельный файл темы. Достаточно будет обновить переменные в Sass-файле на свой вкус, и в скомпилированном файле вы получите обновленный вид любых элементов. Для примера можно вспомнить тени, градиенты, скругленные углы, анимации. Раньше, чтобы убрать скругление углов у кнопок, нужно было создавать свой резет и иногда использовать !important, а теперь достаточно поменять переменные в Sass.
  • Отмена поддержки IE8. То, что IE8 давно пора забыть, все и так знают. Теперь разработчикам не нужно думать о том, как сделать так, чтобы крутой градиент выглядел так же круто и в IE8.
  • Переход с пикселей на размеры в rem и em. Пиксели уступили место rem и em, а это еще один шаг к лучшему отображению сайта на мобильных устройствах, когда размер букв и отступы зависят от размера экрана.
  • Обновление кода всех плагинов JavaScript. Каждый js-плагин в новом бутстрапе был переписан в соответствии с требованиями ES6, что делает код более структурированным, быстрым и надежным.
  • Обновлена работа всплывающих подсказок и блоков.
  • Улучшенная документация и поиск. Практически весь мануал был переписан с примерами и исходным кодом. Поиск по документации тоже работает быстро, хотя толку от него с такой структурой документов немного.
  • Много другого. Новые классы для отступов, кастомизированные элементы управления формами.

Как видим, были затрачены огромные труды мировым сообществом, чтобы мы с Вами смогли воспользоваться высокой скоростью разработки макетов страниц сайта, учитывая при этом кроссбраузерность и адаптивность под мобильные устройства. 

К тому же понимать и разбираться в этом не так сложно, но все же, лучше довериться профессионалам. Мы без труда сможем Вас проконсультировать и разработать дизайн макет под ваш проект используя Bootstrap! Думаю теперь Вы понимаете как можно сэкономить бюджет даже на стадии разработки ТЗ (технического задания).


К Вашему вниманию предлагаем ознакомиться с некоторыми статьями по теме:

Просмотров: 1477

Заказать проект

Наша команда профессионалов готова реализовать ваши проекты, заполните форму: