Фреймворк Twitter Bootstrap — что это такое?

Фреймворк Twitter Bootstrap — что это такое?

11 740 в Html5, Css3 12

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

Twitter Bootstrap – это фреймворк, созданный разработчиками twitter’a. Вы можете спросить – а что такое фреймворк? Фреймворк (от англ. слова framework) – это каркас, структура программной среды. В данном случае программная среда это наша верстка шаблона — html + css + javaScript. Т.е. говоря простым языком, фреймворк это набор, каких то готовых решений, которые мы можем взять и применить в нашей разработке. В чем же прелесть фреймворка?

Представьте вы верстаете сайт и вам необходимо оформить какую то кнопочку, она имеет фоновый цвет в виде градиента, тени и т.д. Чтобы реализовать задуманное по современной технологии css3 вам нужно будет написать много строк кода. А теперь представьте, что вы задаете этой же кнопочке просто какой либо класс и она у вас меняет вид – становится стильной и красивой, причем достигается это без применения картинок. Или еще, вам необходимо установить на сайте слайд шоу. Вы начнете искать в интернете подходящий скрипт, далее прикручивать его к сайту и т.д. Зачем? Все уже включено, с помощью Twitter Bootstrap вы можете создать отличное слайд шоу. То же самое – модальные окна, подсказки, выпадающие списки и еще многое другое.

Больше всего, что мне нравится в Twitter Bootstrap это то, что с его помощью можно сверстать адаптивный дизайн. Адаптивный дизайн (это когда сайт подстраивается под различные устройства – ноутбук, планшет, моб. телефон и т.д.) – это современный подход к верстке сайта. Я вообще считаю, что сегодня все дизайны нужно верстать адаптивными, т.к. число пользователей мобильных устройств уже практически догнало число пользователей стационарных компьютеров и ноутбуков. Да и вообще, нужно идти в ногу со временем, т.е. как можно меньше применять картинки и заменять их кодом на css3.

Я думаю, вы уже примерно представляете себе что такое Twitter Bootstrap.

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

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

Twitter Bootstrap является на сегодняшний день один из наиболее популярных html+css+javaScript-фреймворков. Но, не смотря на его популярность, не каждый верстальщик может с ним справиться. Многие вообще его не применяют. Связано это с тем, что единственная стоящая документация – это официальный сайт Twitter Bootstrap. Чтобы разобраться в данной документации нужно потратить уйму времени. Единственное облегчение это то, что существует полный перевод документации на русский язык.

На момент написания данной статьи последняя версия Twitter Bootstrap – версия 3.0.3. Также существует и вторая версия – 2.3.2. Но если перейти на сайт второй версии мы можем увидеть сообщение о том, что вторая версия уже не поддерживается и разработчики советуют перейти к третьей. Перевод на русский: версия 2.3.2; версия 3.0.3.

Twitter Bootstrap немного тяжеловесное решение для разработки сайта и поэтому подключать его ради оформления кнопок, к примеру, нет смысла. Но разработчики это учли и дали возможность кастомизации (выбора) именно нужных решений. Например, мы хотим на сайте оформить кнопки и создать модальные окна. Нет смысла качать весь bootstrap, достаточно зайти в раздел Customize и отметить галочками нужные пункты и в самом низу страницы нажать «Customize and Download». Прежде, чем качать архив мы можем также изменить значения LESS для того, чтобы подстроить некоторые параметры такие, как цвет, размер и другое на свое усмотрение. Например, нас не устраивает размер шрифта заголовка первого уровня (H1) по умолчанию, мы задаем свое значение. В созданном архиве данное правило будет применено к данному заголовку. Теперь скачанный архив будет весить намного меньше, чем полная версия всего фреймворка.

Что касается меня, то у меня уже есть опыт создания сайтов с использованием Twitter Bootstrap. Вот, например, можете посмотреть на данный интернет магазин, разработанный с применением фреймворка Twitter Bootstrap 2. До сих пор я использовал версию второй ветки, т.к. 3-я версия была в статусе realize candidate. Теперь выпущена стабильная версия Twitter Bootstrap 3. Как говорят разработчики, в новой версии улучшены многие моменты. Я сразу это ощутил, когда решил попробовать bootstrap 3. Например, иконки  Glyphicons теперь выводятся не как картинки, а создаются с помощью шрифтов. Таким образом, мы можем менять размер и цвет нашей иконки как хотим.

Ну вот, теперь вы уже знаете что такое Twitter Bootstrap, для чего он нужен и где используется. Ждите еще статей, посвященные Twitter Bootstrap и не забудьте подписаться на обновления блога.

На этом все. Всем удачи! Всем пока!

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (5 оценок, среднее: 4,80 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, jQuery, JavaScript, Git, БЭМ, Gulp.
Другие материалы той же категории