Twitter Bootstrap что это?

Самым лаконичным ответом на вопрос что такое Twitter Bootstrap будет «это самый популярный на сегодняшний день CSS/HTML фреймворк»

Ну а теперь разберем данный ответ подробнее:

Фреймворк - это подборка готовых решений наиболее часто встречающиеся в практике веб-разработки задач.

Говоря о CSS/HTML примером таких решений могут быть типичные оформления кнопок на сайте, схожие стили заголовков, одинаковая первичная HTML структура страницы и т.д. Чтобы не набирать код для подобных вещей каждый раз в ручную, мы можем подключить фреймворк и использовать готовые решения.

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

Преимущества Twitter Bootstrap

В наше распоряжение поступает огромное количество качественных готовых решений типичных задач при верстке макета. Это позволяет значительно сэкономить наше время и сконцентрироваться на решении более сложных задач.
Разработчики Twitter знатно над ним поработали- предлагаемые макеты отлично совместимы со всеми популярными браузерами.
Благодаря своей простоте и гибкости у мы можем применять его практически на любой платформе для создания сайтов (Drupal, Wordpress и тд) и даже на самописных сайтах.
Продуманная структура позволяет не переживать нам за то, что добавление новых элементов в дизайн нарушит общую структуру страницы.
Большое и дружное сообщество веб-разработчиков собравшееся вокруг данного фреймворка уже само по себе является большим подспорьем в его выборе. Ведь ничто так не упрощает освоение новых горизонтов, как возможность получения своевременного совета от своих коллег.
Для применения CSS заготовок нам достаточно просто подключить классы и стили Bootstrap к документу.
Мы можем спокойно изменять готовые шаблоны под свои нужды внося необходимые нам правки.
Не требуется каких-то специфических знаний для освоения данного инструмента. Тем, кто хочет воспользоваться всеми вышеперечисленными преимуществами на практике, достаточно простого знания основ HTML и CSS.
Ну и последнее, что во многом послужило залогом такого быстрого распространения Bootstrap во всем мире, это открытость кода (мы можем его бесплатно скачать и спокойно поколупаться в исходниках). Как говорится мелочь, а приятно.

Из чего состоит Bootstrap?

Bootstrap включает в себя html и css заготовки, js-компоненты и иконочные шрифты, которые совместно предоставляют нам следующие инструменты для работы:

Шаблоны для блочной верстки страниц

Позволяют быстро создавать резиновые макеты сайтов, мобильные версии и многое другое.

Исходно BS разделяет страницу (или родительский блок, в зависимости от того, на каком уровне вложенности мы используем данный шаблон) на 12 равных блоков. Для обозначения каждого блока мы используем класс .col-md-1.

Для того, чтобы создавать более широкие блоки мы просто меняем цифру в конце данного класса, зная что в конечном итоге у нас в ряду должно быть 12 условных ячеек. К примеру, чтобы разбить родителя на две равные части нам необходимо 2 элемента с классами .col-md-6:

В коде этот пример будет выглядеть следующим образом:

<div class="row">
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
   <div class="col-md-1">1/12 часть экрана</div>
</div>
 
<div class="row">
   <div class="col-md-6">1/2 часть экрана</div>
   <div class="col-md-6">1/2 часть экрана</div>
</div>

В целом это очень похоже на табличную верстку с ее colspan атрибутом тега td.

Для наиболее качественного отображения нашего макета на различных разрешениях экранов мы можем применять разные классы у ячеек.

В примере у нас использован класс md (пара символов идущая перед цифрой). Он применяется для экранов с разрешением 992—1199 px. Есть еще 3 категории классов ячеек:

xs — 766 px и менее;
sm — 768-991 px;
lg — 1200+ px;

Подробнее о этом инструменте будет рассказано в уроке по блочной верстке макетов на Bootstrap.

Типографика

Используется для красивого оформления текстов ( абзацные отступы, заголовки, цитаты, списки и тд).

К примеру, чтобы задать обычному div такое-же оформление как у h1 и при этом не испортить семантику документа мы можем использовать класс h1:

<div class=”h1”>Наш заголовок</div>

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

Урок по оформлению текстов с Bootstrap

Алерты

Используется для стилизации различных диалоговых окон. Активируется как обычно классами:

<div class="alert alert-success" role="alert">Пример оформления подсказки</div>

Есть четыре типичных оформления:

success
info
warning
danger

Формы

Нам предоставляются классы для оформления любых элементов, которые может содержать тег form. Будь то вездесущие <input type=”text” …> или же значительно более редкие случаи с полями для загрузки файлов и радио кнопками.

Подробнее о создании формы обратной связи на PHP

Мы можем их группировать и располагать как нам в голову взбредет. Вплоть до различного оформления полей содержащих ошибки и нормально заполненных.

Подробнее о этом инструменте рассказывается в уроке по оформлению форм на Bootstrap.

Кнопки

Берем нашу кнопку, выбираем подходящее нам оформление, вешаем на нее класс. Все, дело сделано.

Подробный разбор работы с кнопками на Bootstrap

Таблицы

Выбираем подходящее нам оформление, добавляем соответствующий класс тегу table, все, таблица оформлена…

К примеру:

<table class="table table-striped">

Получим:

Урок по работе с таблицами Bootstrap

JS-компоненты

Мы можем задавать красивое выплывание всплывающих окон, создавать не совсем стандартные слайдеры и прочие динамичные части оформления.

Только чтобы все работало проверьте, что библиотека jquery подключена раньше bootstrap.js, иначе ничего не выйдет.

Иконочный шрифт

Мы можем использовать наборы бесплатных иконок для оформления сайтов.

Найти их можно как на сайте самого Бутстрапа, так и на сторонних сервисах предлагающих нам скачать или кастомизировать иконочные шрифты.

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

Как подключить Bootstrap?

Для начала работы нам необходимо просто зайти на официальный сайт Bootstrap, галочками отметить компоненты необходимые для работы над текущим проектом.

Урок по настройке Bootstrap перед скачиванием

После пролистать вниз страницы и скачать архив кликнув на:

После распаковываем полученные файлы в папку с нашим сайтом

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

<link rel='stylesheet' href='/css/bootstrap.min.css' type='text/css' media='all'>

Чтобы все работало важно соблюдать 2 вещи:

Обязательно должен быть подключен файл bootstrap.min.css. Это минимальное требование для работоспособности фреймворка.
Сохраняйте структуру папок из архива, если хотите, чтобы у Вас все работало корректно.

Подводя итоги

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

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

Блог Vaden Pro