Bootstrap
B
Bootstrap (от англ. сущ. "шнуровка" (ботинок) или гл. "добиваться самостоятельно") — бесплатный фреймворк (набор инструментов) для быстрой вёрстки сайтов и прототипирования интерфейсов веб-приложений. Создан изначально для нужд популярного микроблогингового сервиса Twitter, однако в 2011 году открыт для свободного скачивания всем желающим.
Bootstrap включает в себя готовые шаблоны блоков различной конфигурации, кнопок, таблиц, форм, которые добавляются в Ваш проект простым прописыванием специальных классов. Кроме готовых CSS и HTML-сниппетов, имеется и ряд JavaScript-дополнений, которые реализуют тот или иной специфический функционал.
Всё это в совокупности позволяет довольно быстро создавать прототипы различных пользовательских интерфейсов. Поэтому, если Вам нужно быстро сверстать современный адаптивный сайт, можете воспользоваться средствами Bootstrap, о которых мы Вам расскажем в статье ниже.
Быстрая вёрстка сайта
 | |
| Язык: | Русский |
| Формат: | |
| Обновлено: | 2017-08-19 |
| Автор: | |
Используя возможности фреймворка Bootstrap, Вы сможете самостоятельно и быстро верстать современный сайт.
Вёрстка сайта – дело не сказать чтобы очень сложное, но довольно муторное. Помимо того, что нужно оснастить сайт требуемым функционалом, нужно ещё чтобы он был красивым! Такую красоту, обычно, делает дизайнер в Фотошопе. А задача верстальщика при этом сделать так же как на картинке. И вот для этого уже приходится попотеть...
Где-то с год назад я работал в команде с одним дизайнером над созданием сайта. И он после просмотра готового макета задал мне вопрос: "А ты что, не используешь сетку?". В Фотошопе он, оказывается, всё рисовал по направляющим, чтобы было ровно, однако в обычном HTML подобных средств выравнивания нет.
И вот тогда я и решился познакомиться с технологией, которая уже не первый год была у многих на устах – Bootstrap.
Зачем нужен Bootstrap
Чтобы понять, нужен ли Вам Bootstrap, необходимо сначала понять, что это такое и для чего. Кратко отвечая на вопрос, скажу, что Bootstrap – это набор стилей, скриптов (а в 3-й версии ещё и готовых символьных шрифтов), которые можно применять для быстрой вёрстки различных блоков сайта. При этом большинство этих блоков изначально поддерживают адаптивность и прилично выглядят на экранах мобильных устройств без каких-либо дополнительных действий с Вашей стороны.
Чтобы лучше понять, что же может Bootstrap и для чего конкретно его можно применить, предлагаю Вам взглянуть на следующую схему:
Сразу стоит сказать, что, несмотря на довольно хороший функционал, в Bootstrap часто не хватает некоторых популярных средств. Например, в нём нет:
- сетки для вертикального выравнивания блоков (но есть свойства для выравнивания текстовых элементов);
- свойств для адаптивного масштабирования текста (нужно использовать сторонние библиотеки или собственные механизмы);
- средств для вёрстки полноэкранных лэндингов;
- некоторых популярных плагинов (нормального слайдера, вертикальных табов, поэкранной прокрутки и т.п.);
- ряда свойств для позиционирования.
Справедливости ради следует сказать, что недавно вышел Bootstrap 4, который довольно сильно отличается по реализации и функционалу от более распространённой версии Bootstrap 3. Однако, в рамках данной статьи мы рассмотрим именно проверенную временем и стабильную 3-ю версию (последняя на данный момент – 3.3.7).
Установка Bootstrap
Чтобы начать работу с Bootstrap его нужно правильно подключить в Ваш HTML-документ. Сделать это можно несколькими способами.
Внешнее подключение через Bootstrap CDN
Как в своё время было с популярной библиотекой jQuery (кстати, её наличие тоже обязательно), Bootstrap на сегодняшний день тоже обзавёлся собственной системой доставки контента (CDN). Это означает, что Вам можно ничего не качать для его установки – достаточно просто прописать ссылки на нужные Вам компоненты в Вашем HTML-документе.
Минимально необходимым набором компонентов для работы Bootstrap является его таблица стилей и файл скриптов (bootstrap.css и bootstrap.js, соответственно). Стили Бутстрапа нужно подключить в секции <HEAD> перед объявлением своих стилей (style.css), а скрипты можно отправить в "подвал" сайта для ускорения загрузки страницы. Кстати, для этой же цели лучше использовать минифицированные версии файлов, ссылки на которые выглядят так:
<!-- Ссылка на минифицированные стили CSS Bootstrap 3.3.7 -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Ссылка на минифицированные скрипты JS Bootstrap 3.3.7 -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Рекомендуется также подключать CSS-файл темы, в котором содержатся уникальные стили оформления Вашей версии Bootstrap (о том, как её сделать речь пойдёт немного ниже). Его следует также поместить перед объявлением Вашей основной таблицы стилей, но после общих стилей Бутстрапа. Ссылка на подключение темы выглядит так:
<!-- Ссылка на необязательный минифицированный CSS-файл стандартной темы Bootstrap 3.3.7 -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
В итоге Ваш файл index.html с подключённым Bootstrap 3 может выглядеть примерно следующим образом (можете скопировать его и сразу начать работать):
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Три вышеупомянутые МЕТА-тега ОБЯЗАТЕЛЬНО ДОЛЖНЫ идти в самом начале страницы. Остальные МЕТА-теги можно добавлять уже после них (например, как тег в следующей строке) -->
<meta name="description" content="Мой первый Bootstrap-шаблон">
<title>Bootstrap-шаблон</title>
<!-- Подключаем Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Теперь можно подключить стили темы Bootstrap (раскомментируйте строку ниже, если нужно) -->
<!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"> -->
<!-- И свои собственные стили для сайта (раскомментируйте строку ниже, если нужно) -->
<!--<link href="style.css" rel="stylesheet"> -->
<!-- Библиотеки HTML5 shim и Respond.js для поддержки элементов HTML5 и медиа-запросов в IE8 -->
<!-- ВНИМАНИЕ: Respond.js не работает, если Вы тестируете свой сайт на локальном ПК через стандартный протокол file:// -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Привет, Мир! Я – заголовок на Bootstrap!</h1>
<!-- Подключение jQuery (обязательно для работы JavaScript-плагинов Bootstrap) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Подключаем скомпилированный файл скриптов Bootstrap (ниже), а после него вставляем остальные скрипты (если они у Вас есть) -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Установка при помощи менеджеров пакетов
Если Вы дружите с такой полезной вещью как консоль, то, наверняка, Вы хотя бы слышали о том, что существуют специальные менеджеры пакетов, которые позволяют автоматически устанавливать на Ваш сайт различные скрипты и даже целые CMS. Bootstrap сегодня добавлен в большинство репозиториев пакетных менеджеров, поэтому для его установки будет достаточно выполнить всего одну команду:
| Менеджер пакетов | Команда |
|---|---|
| Bower | $ bower install bootstrap |
| npm | $ npm install bootstrap@3 |
| Composer | $ composer require twbs/bootstrap |
Установка классическим скачиванием файлов
Для экспериментов с Bootstrap вполне подойдёт первый вариант с внешним подключением. Однако, для реализации практических задач на реальных сайтах лучше, на мой взгляд, свести к минимуму количество внешних библиотек. Поэтому лучше скачать Бутстрап и подключить его локально. А сделать это можно двумя способами.
Способ первый – самый очевидный. Заходим на официальную страницу загрузки и жмём кнопку "Download Bootstrap":
У Вас скачается архив, который будет содержать три папки (css, fonts и js) с файлами. Распакуйте их в отдельную директорию и создайте в ней же свой index.html, к которому можно будет подключить все стили, скрипты и шрифты. В качестве основы для содержимого HTML-документа можете взять вышеприведённый код с заменой ссылок на компоненты Bootstrap с внешних на локальные:
<!-- Подключаем Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Подключаем стили темы Bootstrap (если нужно) -->
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Подключаем скрипты Bootstrap -->
<script src="js/bootstrap.min.js"></script>
Кстати, в папках Bootstrap по умолчанию имеется несколько лишних файлов, которые можно убрать для экономии места. Например, в папке css можно удалить все файлы с расширением .map, а также неминифицированные (без приписки .min) файлы темы и стилей (останется только два файла: bootstrap.min.css и bootstrap-theme.min.css). Из папки js удаляем всё, кроме файла bootstrap.min.js. Шрифты (если они нужны) не трогаем. В итоге у Вас должна получиться такая структура файлов:
Данный способ хорош всем кроме того, что в стандартной поставке Bootstrap могут быть включены не все плагины и используется только стандартное оформление в плане стилей. Если же Вы делаете не просто тестовую страничку, а реальный сайт, то Вам, наверняка, потребуется многое изменить в стандартном шаблоне оформления.
Так вот, чтобы потом не копаться в файлах, Вы можете заранее подогнать тему Bootstrap под свои требования. Для этого от Вас потребуется знание английского и понимание хотя бы базовых принципов вёрстки на CSS. Чтобы создать собственную сборку Bootstrap идём на специальную страницу и заполняем многочисленные поля в форме, которая позволяет задать свои стили буквально для любого элемента на Вашем будущем сайте:
Занятие это довольно небыстрое, но значительно быстрее, нежели ручная правка готового кода стилей и скриптов. На мой взгляд, стоит потратить лишние минут 20–40, чтобы впоследствии сэкономить себе пару часов поисков параметров, которые нужно будет изменить.
Когда все правки внесены, жмите кнопку "Compile and Download" в самом низу и Ваша кастомная сборка Бутстрапа скачается в виде архива. Кстати, помимо уже знакомых нам папок, данная версия архива будет содержать ещё и файл config.json. Он содержит в себе список всех переменных, которые мы правим на странице настроек. Поэтому в будущем Вы можете загрузить этот файл и сразу скачать настроенный Bootstrap без необходимости вводить все параметры вручную!
Как работать с документацией
Итак, на данный момент мы уже имеем готовый HTML-документ с подключённым к нему Bootstrap. Но мы пока не знаем, как с этим Бутстрапом работать... Чтобы это узнать, нужно ознакомиться с весьма обширной документацией на официальном сайте или его русскоязычной версии (есть и ещё один неплохой русскоязычный перевод).
На мой взгляд, лучше всё же пользоваться оригинальной документацией, поскольку она новее и не содержит никаких двусмысленностей в отличие от переводов. К тому же структура основного меню на официальном сайте более логична – основные разделы документации вынесены в левую часть, а различные дополнительные в правую.
Основными разделами справки по Bootstrap являются:
- Getting started (Основы) – содержит информацию о способах подключения Bootstrap к Вашему проекту и несколько шаблонов, которые можно использовать для начала работы;
- CSS – описывает все существующие классы CSS для Bootstrap и даёт примеры их применения в готовом коде;
- Components (Компоненты) – данный раздел даёт рекомендации по принципам использования специфических для Bootstrap компонентов;
- JavaScript – знакомит нас с примерами использования скриптов Bootstrap и его плагинов.
Дополнительно имеются также разделы с готовыми темами оформления, выставкой работ на Bootstrap, вакансиями, блогом (а на русскоязычной версии ещё и полноценным форумом), но это уже разделы вторичные. Для освоения Bootstrap нам нужно будет сосредоточить своё внимание на вышеупомянутых.
Документация весьма обширна и в ней по началу можно очень легко запутаться. Чтобы этого не произошло – главное понять структуру и принцип описания материала в ней. Классической инструкции здесь, по-сути, нет – всё изложено в конкретных примерах. При этом для каждого примера может иметься несколько вариантов с описанием различий и условий применения.
Структурно описание происходит в том же порядке, в котором обычно происходит вёрстка. То есть, в начале описываются общие сущности, затем конкретизируются элементы по принципу сверху вниз. Например, в разделе CSS всё начинается с описания доктайпа, МЕТА-тегов и заканчивается частными случаями использования препроцессоров Less и Sass.
Для упрощения поиска нужной сущности можно использовать боковое меню в правом сайдбаре. Увы, поиск по документации здесь не предусмотрен...
Сетка Bootstrap
Одним из самых важных моментов пр освоении Bootstrap является понимание его сетки. Сетка Bootstrap являет собой нечто вроде готовых ячеек, в которые можно вкладывать любой контент. При этом содержимое этих "ячеек" выравнивается нужным нам образом и при изменении размеров экрана корректно адаптируется под новую его ширину.
Информацию о сетке мы можем найти в разделе справки CSS – Grid system:
Здесь всё расписано довольно обстоятельно, однако, если кратко и более понятно, то сетку Bootstrap можно сравнить с использовавшимся когда-то принципом табличной вёрстки. Здесь так же нужно создать контейнер (аналог таблицы – <table>), который будет разделяться на строки (аналогично строке таблицы – <tr>), содержащие до 12 колонок (аналог ячеек таблицы – <td>).
Общий алгоритм работы с сеткой Bootstrap можно свести к следующим шагам:
- Создаём блок (<div>) с классами .container (фиксированная ширина) или .container-fluid (на всю ширину экрана).
- Внутри блока-контейнера создаём блок-строку, который будет содержать нужную структуру колонок. Для этого применим к нему класс .row.
- Внутри блока-строки создаём ещё один или несколько блоков, которым задаём классы, соответствующие нужному нам количеству колонок. Общее количество колонок в одном ряде не должно превышать 12 штук. Однако, внутри колонки мы можем вставить ещё один дополнительный ряд, получив возможность разбить его ещё на 12 частей при необходимости.
Всего в Bootstrap существует 4 базовых класса колонок, которые можно комбинировать между собой для лучшего управления адаптивностью на разных экранах:
- .col-xs- (extra small) – разметка для мобильных телефонов с шириной экрана менее 768px;
- .col-sm- (small) – разметка для мобильных устройств с шириной экрана от 768px до 992px;
- .col-md- (medium) – базовый класс разметки колонок для устройств с шириной экрана от 992px до 1200px;
- .col-lg- (large) – класс разметки колонок для устройств с большим экраном шириной от 1200px и выше.
На практике чаще всего применяют класс .col-md- с цифрой, указывающей на 1/12 часть от общей ширины экрана. Например, чтобы сверстать одну колонку на весь экран, мы применим класс .col-md-12. Для двух колонок по пол-экрана – два блока с классами .col-md-6. Для трёх колонок, соответственно, три с .col-md-4 и т.д.
Кстати, необязательно чтобы колонки были равными между собой по размерам. Вполне можно комбинировать (в пределах 12 штук, конечно) ширину, например, .col-md-4 и .col-md-8 или .col-md-2, .col-md-3 и .col-md-7. Можно даже не использовать всю ширину, сделав, к примеру, в ряде лишь одну колонку, допустим, .col-md-5:
Колонки можно сдвигать по отношению к начальной сетке координат по горизонтали или отображать не по порядку. Например, чтобы разместить две колонки .col-md-4 по центру страницы мы можем применить сдвиг, добавив к нашей первой блоку-колонке ещё один класс .col-md-offset-2 ((12-(4+4))/2=2). А, чтобы изменить порядок, добавляют классы .col-md-push- (для сдвига колонки на нужный интервал) и .col-md-pull- (для перетаскивания колонки к началу строки):
Наконец, колонки можно вкладывать внутрь других колонок в строке. Причём делать это можно двумя способами: с вложением в новый контейнер и с вложением только в новую строку. Если Вы вложите в колонку новый контейнер с набором собственных строк и колонок, то к нему будут применены все стили, характерные для контейнера. При добавлении же только строки, стили сохраняются как для колонки (не будет лишних отступов и т.п.):
Как видим, позиционировать блоки-колонки в Bootstrap не так уж и сложно. Сетка – весьма удобное изобретение, которое "убивает" сразу двух "зайцев": делает Вашу вёрстку аккуратнее с точки зрения дизайнеров и автоматически добавляет адаптивности Вашей веб-страничке. Единственное, что следует помнить, нельзя нарушать структуру вложений, например, напрямую добавлять колонку в контейнер или внутрь другой колонки без объявления новой строки.
Дополнительно прочесть о работе со стилями в Bootstrap Вы сможете в разделе документации CSS. А по сетке, по сути и всё. Движемся дальше.
Компоненты Bootstrap
Помимо сетки, очень полезной фишкой Bootstrap является целый набор стандартных компонентов, которые используются в большинстве современных сайтов. Фактически пользуясь лишь этими компонентами, Вы можете быстро сверстать полноценный сайт с адаптивной панелью меню, активными "хлебными крошками", различными баннерами и информерами, кнопками и выпадающими менюшками, пагинацией и даже готовыми иконочными шрифтами!
И, что характерно, всё это добро создаётся, как и сетка, простым добавлением к нужному DIV-у требуемых классов! Правда, кое-где, нужно также соблюдать структуру вложенности блоков (например, для создания меню), но особой сложности, я думаю, это не составит. Тем более, что на странице с описанием компонентов имеется достаточно примеров. Здесь же мы рассмотрим только некоторые частные случаи.
Работа с иконочным шрифтом
Bootstrap 3 имеет в своей базовой поставке неплохой иконочный шрифт – Glyphicons. Смысл подобных шрифтов в том, что вместо буквенных символов они содержат в себе различную векторную графику. В отличие от обычных растровых картинок, изображения иконочных шрифтов прекрасно масштабируются без потери качества, поэтому они и получили такое распространение с популяризацией адаптивной вёрстки.
В новом Bootstrap 4 иконочного шрифта пока нет (возможно его заменят более популярным FontAwesome), но в нашей 3-ей версии шрифт есть и его можно использовать. Главным же требованием к такому использованию является вставка нужного символа посредством отдельно выделенного под него HTML-элемента <span>.
К примеру, нам нужно вставить рядом с некой цифрой символ русского рубля. В таблице со списком иконок шрифта Glyphicons под его изображением копируем название класса (а точнее сразу двух) "glyphicon glyphicon-ruble" и применяем его к тегу <span>, который вставляем после нашей цифры:
<p>Стоимость – 999<span class="glyphicon glyphicon-ruble"></span></p>
Однако, часто требуется не просто вставить ту или иную иконку, но и изменить, например, её размер и цвет. Для этого в Bootstrap рекомендуется не переназначать стандартные стили для нужного класса с символом, а дописать к списку классов SPAN, который его вставляет, ещё один дополнительный класс с нужными параметрами оформления или дописать стили через атрибут style. Например, так:
<STYLE>
.myrub{font-size:10px; color:green;}
</STYLE>
<p>Стоимость – 999<span class="glyphicon glyphicon-ruble myrub"></span></p>
Или так:
<p>Стоимость – 999<span class="glyphicon glyphicon-ruble" style="font-size:10px; color:green;"></span></p>
Различные типы блоков
Как уже говорилось выше, Bootstrap имеет довольно много различных реализаций всяческих блоков текста. Практически все они реализуются простым добавлением к нужному DIV-у соответствующего класса, но имеют визуальные различия. Для сравнения предлагаю одну и ту же фразу с заголовком, текстом и кнопкой оформить в виде различных типов блоков:
<h1>Заголовок</h1>
<p>Текст</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Кнопка</a></p>
Практически все типы блоков, кроме, разве что, джамботрона и замечаний, никак не влияют на стилизацию содержимого самого блока. Изменяется лишь фон, обрамление и немного смещается позиция контента.
Внутри джамботрона (класс – jumbotron) весь текст выглядит немного больше от стандартного размера. Данный тип блока иногда называют баннером и часто используют в качестве заголовочного экрана-слайда в лэндингах (популярные одностраничные сайты). Он позволяет выделить основную информацию, сфокусировав на ней внимание пользователя как раз за счёт небольшого увеличения шрифтов. Наилучшего же эффекта можно достичь, если дополнить класс джамботрона классом .text-center, который выровняет содержимое баннера по центру страницы!
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="jumbotron text-center">
<h1>Заголовок</h1>
<p>Текст</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Кнопка</a></p>
</div>
</div>
</div>
</div>
Кстати, особенностью джамботрона является то, что его можно растянуть во весь экран без отступов и рамки. Для этого нужно немного нарушить правила вёрстки Bootstrap и вынести блок с классом .jumbotron за пределы всех строк и контейнеров. Вместо этого контейнер со строками и ячейками нужно будет разместить внутри полученного полноэкранного баннера!
<div class="jumbotron text-center">
<div class="container-fluid">;
<div class="row">
<div class="col-md-6">
<h1>Заголовок</h1>
<p>Текст</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Кнопка</a></p>
</div>
</div>
</div>
</div>
Жалко только, что в Bootstrap нету классов для вертикального выравнивания содержимого того же джамботрона и увеличения блока на весь экран по высоте. Цены бы ему не было тогда :) Но, всё это можно доделать своими руками при необходимости.
Своим не совсем стандартным оформлением интерес также представляют замечания (alerts) и панели (panels). Замечания добавляются стандартно классом .alert, однако, для уточнения типа уведомления добавляется ещё один из четырёх возможных классов:
<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>
Что касается панелей, то здесь разнообразие ещё больше! Стандартно панель добавляется классом .panel, однако, как и замечание, требует после себя класса, который уточнит тип панели (как правило, .panel-default). Но и это ещё не всё! Как минимум, наша панель должна иметь вложенный блок с классом .panel-body для размещения основного контента, а, как максимум, может иметь собственный заголовок (.panel-heading с опциональным классом .panel-title внутри) и футер (.panel-footer):
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">Заголовок со специальным классом .panel-title</h3></div>
<div class="panel-body">Основной контент панели</div>
<div class="panel-footer">Футер панели</div>
</div>
Кроме того, панели в Bootstrap могут быть нестандартными и различаться визуальным оформлением в соответствии с контекстом их использования. Контексты, в основном, совпадают с контекстами алертов, но имеют ещё и пятый вариант в ярко-синих тонах– .panel-primary. Кроме того, аналогично замечаниям, существуют классы .panel-success, .panel-info, .panel-warning и .panel-danger:
Карусель
До сих пор мы рассматривали только относительно простые шаблоны кода Bootstrap. Однако, в нём есть готовые решения для создания довольно сложных элементов интерфейса. Они, как правило, требуют использования JavaScript-плагинов, которые можно получить, собрав собственную сборку Bootstrap.
И сейчас мы рассмотрим довольно популярный элемент, который принято называть каруселью или слайдером. Он позволяет циклично прокручивать внутри себя различный контент в виде изображений с поясняющими подписями или блоков текста. В плане размещения в коде карусель Bootstrap напоминает джамботрон – она занимает всю ширину контейнера, в который вложена или страницы, если используется вне контейнеров. Взглянём на немного модифицированный и переведённый код карусели с официального сайта:
<!-- Объявление блока карусели с уникальным идентификатором, обязательным набором классов и опциями (data-ride, data-interval, ) -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Список индикаторов-точек слайдов – первый обязательно должен иметь класс .active -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Список слайдов типа картинка с подписью -->
<div class="carousel-inner" role="listbox">
<!-- 1 блок с картинкой и подписью (первый слайд тоже должен иметь класс .active) -->
<div class="item active">
<img alt="640x480" style="width: 640px; height: 480px;" src="">
<div class="carousel-caption">СЛАЙД 1</div>
</div>
<!-- Конец 1 блока -->
<!-- 2 блок с картинкой и подписью -->
<div class="item">
<img alt="640x480" style="width: 640px; height: 480px;" src="">
<div class="carousel-caption">СЛАЙД 2</div>
</div>
<!-- Конец 2 блока -->
<!-- 3 блок с картинкой и подписью -->
<div class="item">
<img alt="640x480" style="width: 640px; height: 480px;" src="">
<div class="carousel-caption">СЛАЙД 3</div>
</div>
<!-- Конец 3 блока -->
</div>
<!-- Конец блока слайдов -->
<!-- Кнопки управления ручным листанием. Реализуется ссылками с набором нужных классов и идентификатором карусели в качестве адреса -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Назад</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Вперёд</span>
</a>
</div>
Думаю, из комментариев Вам понятно, что, где и как объявляется (единственный нюанс – адреса картинок Вам нужно поменять на свои, поскольку у меня они пустые). Если Вы скопируете себе вышеприведённый код, то у Вас получится вот такая неплохая карусель, которую можно потом довести до нужного вида дополнительными классами оформления:
Управлять поведением карусели можно при помощи jQuery (если Вы знакомы с его синтаксисом) или посредством data-атрибутов, которые применяются к блоку, где инициируется наша карусель. В примере выше у нас есть атрибут, задающий скорость смены слайдов в 5000 миллисекунд (5 сек.) – data-interval. Кроме него Вы можете менять и другие опции:
| Атрибут | Тип | По умолчанию | Описание |
|---|---|---|---|
| data-pause | string | null | "hover" | По умолчанию активна опция "hover", которая останавливает прокрутку слайдов при наведении курсора мыши на карусель и восстанавливает листание после его убирания. Если задать значение null, наведение не будет останавливать карусель. |
| data-wrap | boolean | true | Определяет, будет ли карусель вращаться постоянно или остановится при достижении последнего слайда. |
| data-keyboard | boolean | true | Определяет, будет ли карусель реагировать на нажатие стрелок на клавиатуре. |
| data-slide | string | - | Позволяет задать перемещение между соседними слайдами. Может использоваться со значениями "prev" или "next" для перехода к предыдущему/следующему слайду. Применяется в основном для стрелок листания. |
| data-slide-to | number | - | Позволяет переключиться на любой из слайдов карусели. В качестве значения принимает число-номер нужного слайда. Применяется в основном для кнопок-индикаторов слайдов. |
Модальные окна
Частой задачей в разработке также является создание модальных окон. В веб-исполнении – это блоки, которые отображаются поверх основного контента страницы с затемнением фона. Bootstrap позволяет создавать такие псевдоокна довольно быстро и просто. Вот пример простейшего полностью функционального модального окна:
<!-- Кнопка вызова модального окна. В качестве значения атрибута data-target задаём идентификатор нашего модального окна -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Показать окно</button>
<!-- Код модального окна -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Заголовок модального окна</h4>
</div>
<div class="modal-body">Какой-то текст :)</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Сохранить</button>
</div>
</div>
</div>
</div>
Для вызова модального окна нужна кнопка, ссылка или другой кликабельный элемент, который должен иметь два обязательных data-атрибута: data-toggle со значением "modal" (обозначает поведение кнопки вызова модали) и data-target, значением которого должен быть идентификатор блока, содержащего разметку модального окна (для ссылки можно использовать в этой роли стандартный href).
Сам блок модального окна должен обязательно иметь:
- уникальный идентификатор;
- класс .modal;
- атрибут role="dialog" со вложенным блоком с классом .modal-dialog и атрибутом role="document";
- атрибут aria-labelledby="..." со значением, которое соответствует идентификатору вложенного заголовка модального окна;
- вложенный блок .modal-content, содержащий блоки .modal-header (с обязательным заголовком .modal-title, имеющим уникальный идентификатор), .modal-body (содержит тело модального окна с произвольной разметкой и контентом) и .modal-footer (содержит опциональные кнопки закрытия и сохранения результатов работы модального окна).
В общем, структура – довольно логичная и простая. Главное – соблюдать её не забывать об обязательных атрибутах.
Выводы
В рамках одной статьи, увы, нельзя коснуться всех аспектов работы с Bootstrap. Данный фреймворк постоянно развивается и совершенствуется, обрастая всё новыми возможностями. Именно поэтому за последние годы он стал одним из самых популярных в сайтостроении.
Когда я писал эту статью, в первую очередь я хотел показать основные принципы работы с Бутстрапом и более понятным языком объяснить наиболее часто используемые в нём сущности. Однако, если Вы что-то не поняли, рекомендую Вам попробовать воспользоваться одним из визуальных редакторов Bootstrap. Они наглядно продемонстрируют Вам все возможные элементы и позволят быстро получить собственную настроенную его сборку.
Конечно, в Bootstrap есть далеко не всё, что нужно веб-разработчику в повседневной работе. Однако, фреймворк можно настраивать и дорабатывать под свои нужды, а также дополнять сторонними плагинами, которые обычно интегрируются в проект без особых проблем. Поэтому желаю Вам успешного освоения Бутстрапа для экономии своего драгоценного времени!
P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.
