Bootstrap – действительно незаменимый инструмент в арсенале многих веб-разработчиков. До недавнего времени я наивно полагал, что вряд ли найдется хоть один разработчик, который бы не слышал про этот фреймворк. Но оказалось, что я был далеко не прав. Это и натолкнуло меня на мысль о том, что пора написать статью. Итак, сегодня мы говорим о Bootstrap.
Что же такое bootstrap?
Раньше процесс создания веб-интерфейсов состоял не только из отрисовки прототипов, дизайна, а также верстки страницы. Особняком стояло создание адаптированной под мобильные устройства версии. Дело в том, что с верстальщика могло сойти семь потов, пока не будет достигнута адекватная кроссплатформенная разработка. Но раньше и мобильной версии уделялось меньше времени.
Сейчас практически у каждого в кармане есть смартфон. А цифры по популярности использования настольных ПК и мобильных устройств разнятся незначительно. Поэтому создание адаптивной кроссплатформенной версии сайта или приложения является приоритетной задачей любого разработчика. Неудивительно, что CSS-фреймворки, пользуются все большей популярностью. Сейчас в мире наиболее активно используются 2 библиотеки – Bootstrap и Foundation. Вторая в основном используется в западных странах. О ней мы поговорим позже. Официальный сайт getbootstrap.com
Bootstrap – представляет собой CSS фреймворк с открытым исходным кодом для легкого и быстрого создания отзывчивых компонентов веб-сайтов и веб-приложений. В основе лежит двенадцатиколоночная система сеток. Она снискала огромную популярность сразу после появления в 2012 году.
У истоков разработки фреймворка стоит знаменитая компания Twitter, которая начала развивать проект для внутренних нужд. А 19 августа 2011 года именно под тем названием, которое нам известно сейчас, и появился первый Bootstrap. Сейчас последней является версия с номером 4, которая появилась на свет 18 января 2018 года.
Что же особенного в Bootstrap?
Он предоставляет веб-разработчикам большое множество компонентов, которые можно стилизовать под собственные нужды. Кроме уже упомянутой сетки в фреймворке используются компоненты шаблонов, шрифтов, медиа-элементов, таблиц, форм, навигации и другие. Хотите быстро создать отзывчивую кнопку – пожалуйста, необходимы карточки одинаковой высоты – нет проблем.
Bootstrap серьезно упрощает жизнь разработчикам и предоставляет свободу действий. Любой компонент вы можете переопределить самостоятельно. Если есть желание, можно даже собрать собственную библиотеку, поскольку исходный код открыт.
Сетка
Это как раз тот компонент, за который фреймворк получил всеобщее признание. Суть сетки заключается в том, что экран делится на 12 равных колонок. Любой компонент выравнивается относительно них, что и создает определенное удобство.
Вы просто при помощи специальных классов задаете необходимое количество колонок под компонент на различных устройствах и наслаждаетесь результатом. Bootstrap основан на так называемых flexbox’ах и полностью адаптивен. Самое прекрасное, что он поддерживается практически всеми браузерами.
В дальнейшем мы покажем использование фреймворка на практике.