< Заур Магомедов />

профессиональный верстальщик и блоггер

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

Заур Магомедов
Главная » Приятные полезности для сайта » Фреймворк Twitter Bootstrap — что это такое?

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

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

Пост был обновлен: Дек 22, 2016

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

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

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

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

Читайте также:  CSS анимация на сайте посредством библиотеки Animate.css

Я думаю, вы уже примерно представляете себе что такое 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) по умолчанию, мы задаем свое значение. В созданном архиве данное правило будет применено к данному заголовку. Теперь скачанный архив будет весить намного меньше, чем полная версия всего фреймворка.

Читайте также:  Вертикально-выпадающее меню аккордеон для Joomla 2.5.x - 3.x.x

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

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

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

Пост был обновлен: Дек 22, 2016

Заур Магомедов
Заур Магомедов

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

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (4 оценок, среднее: 4,75 из 5)
Загрузка...

Проверка орфографии

Система Orphus

12 комментариев к статье "Фреймворк Twitter Bootstrap — что это такое?"

  • divadii Дек 21, 2016 в 19:11

    Объясните, пожалуйста.
    Я всё равно НИЧЕГО не понимаю.

    Чем поможет Bootstrap?
    Фактически надо html-код ВСЕХ СТРАНИЦ писать вручную.
    Я, конечно, понимаю, что много стилей и классов «внедрены» в Bootstrap.

    Вот, допустим, небольшой сайтик на 10-20 страниц.
    Сделала html-странички, с помощью копирования.

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

    Мне это надо на ВСЕХ страницах вручную забивать?
    Правильно?

    То есть в Bootstrap нет такого понятия, как отдельный сайдбар или футер, чтобы в нем прописать некий код?

    Для этого уже нужна какая-нибудь cms? — правильно?

    А соответственно — надо подключать этот самый Bootstrap к теме (шаблону) cms?

    Когда пишут «админ-тема Bootstrap» — там же что-то совершенно иное, нежели в админке Джумлы, Вордпресса, Друпала? — правильно?
    Из-под этой так называемой «админки Bootstrap» новую страницу создать нельзя?

    • Заур Магомедов
      Заур Магомедов Дек 22, 2016 в 10:47

      Чем поможет Bootstrap?

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

      Фактически надо html-код ВСЕХ СТРАНИЦ писать вручную.

      Сегодня сайты не делают на чистом HTML и CSS. Для этого есть движки, такие как WordPress, Joomla, Drupal.

      Мне это надо на ВСЕХ страницах вручную забивать?

      Да, если делаете на HTML. Если движке, то достаточно добавить код в главный файл шаблона.

      То есть в Bootstrap нет такого понятия, как отдельный сайдбар или футер, чтобы в нем прописать некий код?

      Сайдбар или Footer можете подключать отдельными блоками через код в php — include. Помню когда-то я так и делал, как раз, чтобы не ходить не вставлять код в каждую страницу. Это я говорю про сайтик на HTML. На движке с этим вообще проблем нет.

      Для этого уже нужна какая-нибудь cms? — правильно?
      А соответственно — надо подключать этот самый Bootstrap к теме (шаблону) cms?

      Да, лучше все же сделать на cms, например, на WordPress. Можете подключить Bootstrap к теме WordPress, а можете обойтись и без него. Здесь все зависит от ваших знаний HTML, CSS, JQuery. Как уже говорил, я использую в Бустрап только сетку, которая позволяет экономить время при разработке адаптивных шаблонов.

      Когда пишут «админ-тема Bootstrap» — там же что-то совершенно иное, нежели в админке Джумлы, Вордпресса, Друпала? — правильно?

      Ну, здесь имеется ввиду, что тема админки сверстана с применением фреймворка Бутстрап. Какой то своей админки у бутстрап нет.

      • divadii Дек 22, 2016 в 11:42

        Спасибо огромное за подробный ответ.
        У меня больше 20 сайтов.
        На Вордпрессе, Друпале (его очень сильно люблю!), на простых цмсках, без использования баз данных…

        Добралась до Бутстрапа, — приглядываюсь, принюхиваюсь… 🙂

        Особенно полезный совет — про инклюд на пхп. Поищу информацию.

        Ещё раз спасибо!

        • Заур Магомедов
          Заур Магомедов Дек 22, 2016 в 12:11

          Не за что! Удачи вам…

  • Евгения Июн 07, 2016 в 12:32

    Добрый день, Заур!
    Спасибо за статью, а вы могли бы сказать какой шаблон вы использовали для интернет-магазина, на который ссылка в конце статьи?
    Просто не могу сообразить, как искать шаблон с фреймворком Twitter Bootstrap…
    Может есть какой-то подход?

    • Заур Магомедов
      Заур Магомедов Июн 07, 2016 в 14:14

      Шаблон, что я использовал — самописный, т.е. я сам его верстал.
      Найти шаблон на бутстрап сейчас вообще не проблема. Сегодня большинство шаблонов можно сказать сделаны на твиттер бутстрап. Можете в крайнем случае в поиске вбить — Шаблоны для joomla 3 bootstrap

  • Евгений мая 19, 2015 в 14:59

    А дизайнеры делают макеты конкретно под бутстрап? И в каких случаях целесообразно использовать этот фреймворк?

    • Заур Магомедов
      Заур Магомедов мая 20, 2015 в 0:05

      Да, дизайнеры могут нарисовать макет по сетке бутстрап. Бутстрап можно использовать по своему усмотрению. Например, здесь на блоге я сверстал по сетке бутстрап и испольвал некоторые скрипты. Его не обязательно целиком использовать.

  • Sergey Фев 14, 2014 в 17:04

    Вопрос по интернет-магазину.
    На Bootstrap Вы верстали только шаблон сайта или все шаблоны Joomshopping?
    Модуль поиска — посмотрите на него с разрешением экрана 1080*768
    При заказе — зачем первое поле «пол» ( юзабилити )
    Хотелось бы статью по применению Bootstrap при создании шаблона Joomla.

    • Заур Магомедов
      Заур Магомедов Фев 14, 2014 в 18:55

      Верстал и сам шаблон, и шаблон joomshopping. Про поиск я в курсе, убирать его буду, лучше родного нет ничего. При заказе поле пол не обязательное, так что если ненужно можно пропустить.

  • Шамиль Янв 29, 2014 в 19:02

    «это наша вертка шаблона» , букву С пропустил, советую проверять статью через Вебмастер Яндекс, раздел орфография, сам иногда пропускаю, этот сервис выручает)))

    • Заур Магомедов
      Заур Магомедов Янв 29, 2014 в 19:20

      Исправил. Спасибо за подсказку!

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]