В этом посте мы поговорим о Bootstrap, который является CSS-фреймворком.

Это один из наиболее популярных CSS-фреймворков, его разработали инженеры из Twitter.

Что такое Bootstrap

Bootstrap это самый популярный HTML/CSS/JavaScript фреймворк для разработки отзывчивых, “mobile first” проектов в вебе.

Давайте разберем эти утверждения.

Прежде всего, самый популярный фреймворк. На Github’е у них больше 110 тысяч звезд и больше 50 тысяч форков. Так что, это самый популярный проект на всем сайте.

Bootstrap состоит по большей части из CSS. Он предопределяет множество CSS-классов для вас.

Часто Bootstrap требует иметь определенную HTML-структуру на вашей странице.

На практике это не так страшно, как звучит. Он просто просит вас добавить пару тегов тут и там, чтобы определенный класс применялся правильно.

Он также имеет крутой JavaScript-фреймворк, основанный на jQuery API, который помогает добавлять плагины реально улучшающие ваш сайт.

Кроме того, Bootstrap называют “mobile first” фреймворком.

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

В реальности, такой подход может иметь два варианта.

Первый из них, это когда вы действительно пишите код в первую очередь для мобильного. Как утверждают сторонники этого метода, он очень помогает контент-стратегии, заставляя вас задуматься о том какой контент важнее всего и что вы хотите показать в первую очередь.

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

Я бы сказал, что оба эти варианта полностью валидны.

Но в любом случае вы планируете мобильную версию с самого начала, вы не игнорируете ее и не откладываете в конец или середину разработки.

Также этот подход означает, что CSS-фреймворк должен подходить для мобильных.

Кстати, довольно интересно, что Bootstrap не всегда был “mobile-first”. До версии 2.0 или около того, Bootstrap имел отдельный CSS-файл и отдельный набор классов для них.

Но сегодня он mobile-first.

Недостатки Bootstrap

Какие недостатки у этого фреймворка по сравнению, к примеру, с написанием собственного?

В первую очередь, он большой и нагруженный. То есть, многие функции вы скорее всего не будете использовать.

Это можно компенсировать скачиванием с их сайта только нужных модулей и функций, которые, по вашему мнению, вы будете использовать.

Так что, хотя Bootstrap и слегка раздут, это не очень плохо.

Далее, вы можете написать свой собственный фреймворк, который будет более направлен на ваш сайт и значительно меньше. Но это также займет у вас значительно больше времени.

Официальный сайт и документация

Официальный сайт — getbootstrap.com.

На официальном сайте можно найти документацию, примеры, темы и прочее.