17 Вересень 2014
Рубрика: уроки

Уроки по Bootstrap. Урок №1: что это и как начать с ним работать

Быстрый способ бросить курить и начать верстать на Bootstrap. Про “курить” я, конечно, не знаю, но вот с бутстрапом помогу. Если вы ещё не знакомы с самым популярным css/html фреймворком, вот вам простая инструкция и описание, зачем вам это нужно.

Серия уроков:
Уроки по Bootstrap. Урок №1: начало работы
Уроки по Bootstrap. Урок №2: состав и настройка
Уроки по Bootstrap. Урок №3: таблицы + Видеоурок
Уроки по Bootstrap. Урок №4: кнопки
Уроки по Bootstrap. Урок №5: верстка шаблонов, мобильная верстка
Уроки по Bootstrap. Урок №6: создание форм
Уроки по Bootstrap. Урок №7: оформление текста
Уроки по Bootstrap. Урок №8: отзывчивые изображения, превью
Уроки по Bootstrap. Урок №9: иконки, иконочный шрифт
Уроки по Bootstrap. Урок №10: текстовые панели
Уроки по Bootstrap. Урок №11: dropdown.js, выпадающие списки
Уроки по Bootstrap. Урок №12: collapse.js, спойлеры, сворачивание блоков
Уроки по Bootstrap. Урок №13: modal.js, всплывающие, модальные окна
Уроки по Bootstrap. Урок №14: tabs.js, создание вкладок, табов
Уроки по Bootstrap. Урок №15: спливні підказки (tooltip.js)

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

В случае, когда над одним проектом работают несколько фронтенд-специалистов, подобные фреймворки должны быть стандартизированы. И предпочтение в таком случае отдаётся общепринятым фреймворкам. Тут мы оказываемся перед выбором: какой фреймворк использовать? Эта статья позволит будущим специалистам лучше понять преимущества и недостатки Bootstrap.

CSS/HTML-фреймворки

Мне приходилось сталкиваться с такими:

Если речь идёт только о вёрстке, то выбор фреймворка — это скорее дело вкуса, ведь в каждом из них есть минимальный набор для блочной вёрстки. Когда требуется иконочный шрифт, js-компоненты или другое, выбрать фреймворк становится проще.

Что такое Bootstrap

Создан в застенках компании Twitter, сначала использовался для собственных продуктов и назывался “Twitter Bootstrap”, а позже был выпущен на волю. За это у него забрали слово Twitter из названия.

Bootstrap — это CSS/HTML фреймворк для создания сайтов. Другими словами, это набор инструментов для вёрстки. В нём есть ряд преимуществ, благодаря которым BS считается самым популярным из себе подобных. Преимущества бутстрапа:

  1. Скорость работы — благодаря множеству готовых элементов вёрстка с бутстрапом занимает значительно меньше времени;
  2. Масштабируемость — добавление новых элементов не нарушает общую структуру;
  3. Лёгкая настраиваемость — редактирование стилей производится путём создания новых css-правил, которые исполняются вместо стандартных. При этом не требуется использовать атрибуты типа “!important”;
  4. Большое количество шаблонов — о шаблонах Bootstrap я напишу далее;
  5. Огромное сообщество разработчиков;
  6. Широкая сфера применения — Bootstrap используется в создании тем для практически любой CMS (OpenCart, Prestashop, Magento, Joomla, Bitrix, WordPress и любые другие), в том числе для одностраничных приложений.

Особой популярностью пользуется Bootstrap для создания одностраничников или “лендингов” (landing page).

Шаблоны Bootstrap

Шаблоны в бутстрапе позволяют менять уже изменённые элементы под свои потребности. Множество разработчиков предлагают свои шаблоны (как платно, так и бесплатно).

Подключить шаблон в Bootstrap очень легко: после подключения бутстрапа нужно только добавить вызов CSS вашего шаблона.

Подробно о шаблонах написано в уроке о вёрстке шаблонов в Bootstrap.

Состав фреймворка

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

Нужно заметить, что бутстрап — это скорее набор из трёх фреймворков: css/html, js-компонентов и иконочного шрифта.

Вёрстка макетов и шаблонов

Блочная система в Bootstrap — основа грамотной вёрстки, мощный инструмент для блочного каркаса блоков контента и любых вложенных элементов. При помощи префиксов мы можем указывать, как нужно менять отображение блоков в зависимости от типа устройства, на котором отображается сайт.

Например, класс .col-xs- будет использован для телефонов с шириной экрана менее 768 пикселей, а .col-lg- — для любых устройств с экраном шире 1170 px. BS разбивает ширину родительского блока на 12 равных частей, которые мы можем использовать как угодно. Части можно объединять, получая, например, три колонки: две по 25% .col-lg-3 и одну на 50% .col-lg-6.

Визуально страница может быть представлена как угодно:

bootstrap grid

Если вы выйдете за пределы 12 частей, блоки будут отображаться друг под другом, поэтому следите за ними. Вот пример блоков, которые будут отображаться одинаково на всех устройствах. Мы разделим экран на три равные части:

<div class="row">
<div class="col-sm-4">Первая колонка</div>
<div class="col-sm-4">Вторая колонка</div>
<div class="col-sm-4">Третья колонка</div>
</div>

Полный урок на эту тему: вёрстка макетов в Bootstrap.

Типографика

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

Немало внимания уделено и семантике: основной заголовок можно оформить тегом <h1>Заголовок</h1>, а можно и <div class="h1">Заголовок</div> — выглядеть оба варианта будут одинаково, зато второй можно использовать сколько угодно раз на странице.

Стандартное оформление для заголовков в бутстрапе выглядит так:

bootstrap заголовки headings

Если вы хотите попробовать верстать на бутстрапе, но не хотите копаться в чём-то сложном, начните с малого: оформите текстовую страницу с какой-нибудь новостью. Разграничьте заголовок, второстепенные заголовки, вставьте изображения, несколько цитат, списков и оцените, как легко этот фреймворк справится с такими задачами.

Об изображениях читайте в уроке о создании превью и отзывчивых изображений.

Уведомления

Любое сообщение можно оформить в 4-х стандартных форматах: успех (success), подсказка (info), предупреждение (warning), ошибка (danger). Так они выглядят в жизни:

bootstrap alerts

Для оформления такого сообщения достаточно добавить два атрибута класса к нужному объекту:

<div class="alert alert-success" role="alert">Вы успешно дочитали до этого места</div>
<div class="alert alert-info" role="alert">Это ещё не конец статьи</div>
<div class="alert alert-warning" role="alert">Читать мало, нужно всё применять на практике</div>
<div class="alert alert-danger" role="alert">Да, это не смешно</div>

Также бутстрап позволяет оформлять диалоговые окна, поп-апы и подсказки.

Навигация

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

Главное меню легко оформляется в такой вид:

bootstrap navbar

Чтобы зафиксировать главное меню, достаточно будет добавить класс navbar-fixed.

Постраничная навигация выглядит так:

bootstrap pager

Код для неё потребуется такой:

<ul class="pagination">
 <li><a href="#">&laquo;</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">&raquo;</a></li>
</ul>

Как видите, ничего сложного.

Кстати, подписывайтесь на мой твиттер, чтобы первыми читать свежие уроки по Bootstrap.

Формы

Текстовые поля и блоки (textarea), кнопки, лейблы, радиокнопки, чекбоксы, выпадающие списки — для всех элементов форм у бутстрапа есть стили оформления. Можно оформить вертикальное и горизонтальное разделение элементов и названий, а также подсвечивать части формы при возникновении ошибок или предупреждений.

bootstrap form

Можно оформить горизонтальное расположение блоков, все поля в одну строку и…

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

Кнопки

Здесь все просто, чтобы оформить кнопку, ей добавляется нужный набор классов. Кнопки могут быть разными:

bootstrap buttons

Код для них такой:

<button type="button" class="btn btn-default">Кнопка</button>
<button type="button" class="btn btn-primary">Основная</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-info">Информация</button>
<button type="button" class="btn btn-warning">Внимание</button>
<button type="button" class="btn btn-danger">Ошибка</button>
<button type="button" class="btn btn-link">Ссылка</button>

Отдельно о создании кнопок в Bootstrap читайте в уроке о кнопках.

Таблицы

Старые добрые таблицы оформляются путём добавления класса class="table". Получим красиво оформленную таблицу:

bootstrap table

Подробное описание таблиц есть в отдельном уроке “создание таблиц в Bootstrap” и также смотрите видеоверсию урока.

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

Кроме стилей оформления у бутстрапа есть сценарии поведения для модальных окон, слайдера, всплывающих подсказок, табов и других интерактивных элементов страницы.

Для работы этих компонентов требуется jquery, не забудьте убедиться, что она подключена до bootstrap.js.

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

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

bootstrap icons

Подробнее читайте в уроке об иконках в Bootstrap

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

Заходите на офсайт и отмечаете те элементы, которые вам потребуются в работе. Лишнее можно убрать и добавлять по мере необходимости. После выбора жмём “Compile and Download”, получаем архив, который распаковываем.

bootstrap files

Для базовой работы потребуется только один файл, он отмечен красным. Переносите его в папку с вашими css и подключаете в <head> страниц.

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

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

В итоге

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

Успехов вам в этом. Переходите к следующему уроку.

Серия уроков:
Уроки по Bootstrap. Урок №1: начало работы
Уроки по Bootstrap. Урок №2: состав и настройка
Уроки по Bootstrap. Урок №3: таблицы + Видеоурок
Уроки по Bootstrap. Урок №4: кнопки
Уроки по Bootstrap. Урок №5: верстка шаблонов, мобильная верстка
Уроки по Bootstrap. Урок №6: создание форм
Уроки по Bootstrap. Урок №7: оформление текста
Уроки по Bootstrap. Урок №8: отзывчивые изображения, превью
Уроки по Bootstrap. Урок №9: иконки, иконочный шрифт
Уроки по Bootstrap. Урок №10: текстовые панели
Уроки по Bootstrap. Урок №11: выпадающие списки
Уроки по Bootstrap. Урок №12: collapse.js, спойлеры, сворачивание блоков
Уроки по Bootstrap. Урок №13: modal.js, всплывающие, модальные окна
Уроки по Bootstrap. Урок №14: tabs.js, создание вкладок, табов
Уроки по Bootstrap. Урок №15: спливні підказки (tooltip.js)

Тепер я хочу бачити коментарі 58