Назар Токар
Опубліковано: 17 Вересня 2014
Оновлено: 5 Травня 2017

Серия уроков:
Уроки по 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)

← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

62 коментаря

спочатку нові
за рейтингом спочатку нові за хронологією

Здравствуйте об'ясните пример

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

Как поставить два класса одному тегу?

Автор
Назар Токар

Через кому.

Как это через запятую? Кто добавляет классы одному тегу через запятую?

Автор
Назар Токар

Тобто через пробіл, помилився.

упс на мой вопрос ответил 2 урок

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

где скачать Bootstrap???

@Gul, все , нашла)

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

Автор
Назар Токар

@Пако, блочная структура в бутстрапе меняет только размер и равнение блока (float: left в данном случае), поэтому вы можете как добавлять классы, так и делать вложенные элементы.

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

Спасибо за статью, хорошо и доступно пишете! Добавьте соц.кнопки "поделиться" на сайт. Хотел себе сохранить в ВК, чтобы потом дочитать... Ладно, закладку сделаю))) Не прекращайте уроки!

Автор
Назар Токар

@Денис, под статьей и снизу есть кнопки "сохранить себе" :). Спасибо.

Если что, я тут. Не прекращайте эти статьи.

И большое спасибо.

Автор
Назар Токар

Привет, спасибо.

Назар, добрый вечер! А что скажете на счет того, что 12-колоночную сетку можно легко изменить на, скажем, 18-колоночную или 10-колоночную на странице загрузки Бутстрапа, изменив параметр в настройках Grid?

Автор
Назар Токар

@Андрей, ага, на странице customize можно поменять параметр @grid-columns на любой нужный. Это интересная функция, спасибо за уточнение.

Огромное спасибо!

Когда дошел до половины текста, заметил, справа объявление про Adblock и сразу же отключив его, нажал на объявление в знак благодарности!

Автор
Назар Токар

@Azat, спасибо :)

Спасибо вам огромное за уроки! Редко оставляю комментарии, но у вас прям кладезь знаний:)

Автор
Назар Токар

@Jules, спасибо, скоро будет следующий.

Бутстрап вообще занимательная штука! и очень очень выгодная!
многие сайты верстаются с его помощью, точнее стили базируются на бутстрапе

Доброго времени суток. Подскажите, если знаете. Есть сайт написанный на BS 3.3.1. Нужно его перенести на Joomla. Как это сделать наименее болезненным способом?

@Andrew, все довольно легко

Вам просто надо заменить div в index.php

на верстку bootstrap

Доброго дня.

На сегодняшний день, много смартфонов с Full HD экранами, в этом случае мы имеем дисплей с разрешением 1920 на 1080, но физически экран то маленький. В итоге сайт отображается согласно разрешению.... а пользователю надо показать сайт удобной читаемый для мобильного устройства, как быть?

Автор
Назар Токар

@Владимир, так видео показать или сайт? Если видео, то только пропорционально тянуть до ширины экрана, что же вы ещё сделаете.

@Назар Токарь,

Вопрос скорее, можно ли обойтись версткой с помощью BS шаблона сайта? Есть ли возможность в BS, определить что клиент мобильный телефон с Full HD экраном? Чтобы на монитор ноутбука или компьютера с разрешением 1920 на 1080 отображался полный размер шаблона, а на тоже разрешения 1920 на 1080 только на экране мобилки, сайт сжимался в одну колонку и появлялось мобильное меню?

Или это задача решаемая только на стороне бекенда?

@Владимир, я не пробовал, но вероятно можно поиграться с media query "resolution" и в зависимости от него подправить стандартные пороги разрешений

Автор
Назар Токар

@Владимир, это можно сделать при помощи js, опредив размер экрана. В самом BS таких функций нет.

window.screen.availHeight
window.screen.availWidth

За это у него забрали слово Twitter из названия

Ахаха)) С чувством юмора у автора все в полном поряде!

Автор
Назар Токар

@Дмитрий, без этого кто ж меня читал бы :)

Давно к "дзядку" на сайт не ходил... а тут прям все офигенчиком поросло ... спасибо! =)

Автор
Назар Токар

@Романыч, так вы заходзіце яшчэ :)

Добрый день. Подскажите, смогу ли я сверстать сайт в бутскрапе, а потом внедрить его в share point?

Добрый день, хотел узнать, как у профессионала)

На сколько bootstrap актуален на рынке сейчас?

Какие есть - и + у данного фреймворка?

Легко ли его интегрировать в СMS?

Или лучше по старинке верстать?)))

Автор
Назар Токар

@Роман, самый популярный из html/css фреймворков сегодня. Использовать или нет — вопрос удобства. Попробуйте и, если понравится, то пользуйтесь. Я лично пользуюсь :)

@Назар Токарь, а у меня вопрос такого характера, имеется дизайн шириной в 1000 пикселей, возможно ли в container создать блок 1000 px но при этом не фиксируя его (не прописывая ширину в пикселях) и не теряя адаптивности?

Автор
Назар Токар

@Евгений, вы можете поменять значение ширины для контейнера на больших экранах или создать новых блок, указать ему ширину 1000px и margin: 0 auto;.

Добрый день

А можно для дива использовать все 4 класса?

Чтобы сайт выглядел одинаково на всех устройствах

Автор
Назар Токар

Достаточно использовать класс для мобильных телефонов, тогда всё остальное будет выглядеть одинаково.

Сайт в подписи. Верстал на бутстрапе. До этого все писал руками. Получалась какаааааааа....

Подскажите где взять готовый 30-колоночный шаблон? Или 24 или сколько там бывает....

Автор
Назар Токар

@Евгений, 30-колоночный? Максимум страница делится на 12 блоков, но и это более чем достаточно почти всегда. Суть вопроса как бы не совсем ясна.

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

@Евгений, класс я могу добавить только в цикл, но один для всех. К примеру в блоке предприятия Кировограда я спокойно могу поставить код, вставленный выше - строку row я ставлю вокруг скрипта, а сам скрипт выводит мне классы колонок.

Вы не против, что я Вас напрягаю дурными вопросами? ))))

Автор
Назар Токар

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

Автор
Назар Токар

@Евгений, так с этого нужно было начинать. Бутстрап требует для работы добавление определенных классов к элементам. Если вы не можете этого сделать, то как вы предполагаете объяснить браузеру, как отображать блоки?

@Назар Токарь, значит я туплю. Помогите тогда разобраться в задаче. Мне нужно чтобы первый столбик был 240 пикселей, второй 728 и третий 300. Меньше нельзя, адвордс вылезает за рамки.

Как сделать? Идеально 2.5, 7.3, 3. А можно только 3,8 и 3, что в сумме 14. Если меньше, то нарушаем первое условие....

@Евгений, попробуйте в variables изменить

@grid-columns: 9;

и использовать col-md-_ так, чтобы в сумме в строке было 9

@Евгений, Назар, я не тупой, честно ))) Но я не понимаю сути. Давайте конкретный пример посмотрим?

...

Если делать по бутстрапу в максимальное количество блоков (12) - я получаю приблизительно 97-100 пикселей каждый блок (ширина контейнера деленная на 12). Я хочу поставить 9 блоков в ряд на самом широком мониторе - если я использую оффсет, то у меня будет просто пустое место - как мне решить задачу? Можно как-то убрать 3 блока, чтобы пустое пространство заполнили существующие 9? Или это невозможно?

Я уже сам себя запутал кажется...

Автор
Назар Токар

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

Или ещё такая комбинация. В футере хочу 9 иконок,а могу сделать только 6 или 12. Ну как тут быть?

Автор
Назар Токар

@Евгений, 9+3

А русского сообщества у них нет? Информации бы побольше. Я уже не раз думал попробовать поработать с этими фреймворками. Не могу понять, как он взаимосвязан с Joomla? ну вот сделал ты шаблон, потом ведь его нужно "натянуть" на CMS ещё...правильно? Короче темный лес. Точнее темный лес начинается с момента, что потом делать с этим шаблоном, если не умеешь интегрировать его на CMS

Автор
Назар Токар

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

Первый раз у Вас на сайте, и знаете, приятно здесь находиться!

Чувствуется, что от души пишут материалы.

Теперь вопрос: Назар, зачем второй раз подключать Бутстрап на CMS Joomla 3, если на нем есть Шаблон Протостар на Бутстрапе. Нельзя ли его уже под свои нужды подстраивать?

Как нельзя кстати. Спасибо, Назар!

Автор
Назар Токар

Скоро будет второй урок, готовьтесь :)

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

Автор
Назар Токар

@Павел, спасибо, приятно, что полезно

Ждем Урок 2-й

Автор
Назар Токар

@Max, спасибо

Полезное начало, жду продолжения.

Автор
Назар Токар

@Юрий, спасибо, будет