Bootstrap (часть 1)
Ivan AdamchukВступление
Практически любая веб-страница содержит множество похожих компонентов, которые встречаются и на других сайтах. Это меню, навигация, элементы форм, заголовки и др. Не говоря уже про многоколоночную вёрстку, без которой вообще сложно превратить картинку макета в готовую веб-страницу. Чтобы меньше писать кода и по максимуму задействовать уже готовые решения применяются специализированные библиотеки, их часто называют фреймворками. Одним из таких фреймворков для вёрстки является Bootstrap.
Bootstrap разработали Марк Отто и Якоб Торнтон, сотрудники Twitter, именно поэтому в названии фигурирует имя компании. Их цель понятна любому разработчику — создать единый стандартный набор инструментов для сотрудников компании, ускоряющий их работу.
На сегодняшний день Bootstrap давно перерос рамки одной компании, это открытый продукт применяемый веб-разработчиками для вёрстки сайтов во всём мире.
Какие плюсы несёт в себе использование библиотеки.
Высокая скорость разработки
Фактически Bootstrap представляет собой конструктор, фрагменты которого вы включаете в свой проект при необходимости. Это уменьшает время разработки, потому что не требуется придумывать и писать их самостоятельно.
Адаптивный дизайн
Bootstrap направлен на создание макета под разные устройства — ноутбуки, планшеты, смартфоны. При этом код пишется один, а масштабирование в зависимости от ширины устройства берёт на себя фреймворк.
Открытая программа
Вы можете свободно изучать исходные коды библиотеки, изменять и расширять её под собственные нужды.
Совместимость с браузерами
Компоненты библиотеки написаны и протестированы с учётом работы разных браузеров. Это гарантирует, что макет будет выглядеть одинаково независимо от выбранного браузера.
Низкий порог вхождения
Чтобы использовать библиотеку в своей работе, требуется обладать минимальными знаниями по HTML, CSS и JavaScript. Это позволяет создавать эффектные сайты даже начинающим разработчикам.
Единая работа компонент
Bootstrap не просто вставляет какие-то элементы на страницу, но сразу же устанавливает их оформление и взаимодействие с пользователем через JavaScript. Вы получаете полностью работающий набор компонент, который достаточно добавить и настроить под себя.
Недостатки, конечно же, тоже имеются и они вытекают в основном из универсальности системы.
Во-первых, файлы библиотеки, даже сжатые, занимают довольно много места и увеличивают нагрузку на сервер. С повышением опыта нужно загружать и устанавливать только требуемые компоненты Bootstrap, сокращая тем самым объём файлов.
Во-вторых, предлагаемые в библиотеке стили могут не подходить под дизайн разрабатываемого сайта и придётся много переделывать. В таких случаях, как известно, проще написать всё самому с нуля.
В общем, Bootstrap годится для типовых сайтов, дизайн которых ориентирован на библиотеку. А сайтов, которые предлагают темы и шаблоны, в том числе бесплатные, в последнее время родилось довольно много. Достаточно поискать по ключевым словам «Bootstrap Theme».
Установка Bootstrap
Для начала необходимо скачать Bootstrap с сайта разработчика по следующему адресу:
http://getbootstrap.com/getting-started/#download
Это полная версия, содержащая все необходимые скрипты и стили. Внутри находится три папки: css, fonts и js.
В папках со стилями и скриптами приложено две версии файлов — исходная и компактная (в имени содержится min). Компактная отличается лишь размером файла и снижением читаемости кода. Лучше всего на рабочий сайт добавлять именно эту версию, так мы чуть ускорим загрузку веб-страниц.
Копируем все папки в наш проект и в корне создаём index.html. В итоге структура нашего проекта будет выглядеть следующим образом.
Содержимое index.html включает в себя ссылку на стилевой файл bootstrap.css и внизу страницы мы вызываем bootstrap.js. Больше пока ничего не нужно.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Bootstrap</title> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>Привет, мир!</h1> <script src="js/bootstrap.js"></script> </body> </html>
Если в процессе работы потребуется переопределить стили каких-то элементов, то вы можете подключить ещё один собственный стилевой файл и в нём задать необходимые свойства. Bootstrap также предлагает сразу настроить желаемые параметры прямо у них на сайте, отметить требуемые компоненты и скачать персонифицированную версию рабочих файлов. Это делается по следующей ссылке:
http://getbootstrap.com/customize/
Также в дальнейшем нам понадобится библиотека jQuery, её надо скачать и добавить вызов перед bootstrap.js.
Модульные сетки
Bootstrap характерен своей продуманной и гибкой системой модульных сеток, в основе которой лежит 12-колоночный макет.
Сами колонки не обязательно должны иметь одинаковую ширину, можно комбинировать любое число колонок, главное, чтобы они в сумме давали 12.
Создание колонок
Так, чтобы создать макет из трёх колонок используем <div> с классом container, внутри которого будут располагаться наши колонки. Сами колонки находятся внутри <div> с классом row и содержат имена вида col-xs-N, где N — число колонок от 1 до 12 (пример 1).
Пример 1. Макет с тремя колонками
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Трёхколоночный макет</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
[class*="col-"] {
background-color: #eee;
border-right: 2px solid #fff;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">3 колонки</div>
<div class="col-xs-7">7 колонок</div>
<div class="col-xs-2">2 колонки</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Стиль добавлен лишь для наглядного выделения колонок.
Класс container создаёт макет фиксированной ширины, значение которой зависит от размера устройства. Для мониторов максимальная ширина составляет 1170 пикселей, для смартфонов макет будет занимать всю доступную ширину. Если вам не требуется ограничивать ширину макета, то вместо класса container следует использовать container-fluid (пример 2).
Пример 2. Резиновый макет
<div class="container-fluid"> <div class="row"> <div class="col-xs-4">4 колонки</div> <div class="col-xs-6">6 колонок</div> <div class="col-xs-2">2 колонки</div> </div> </div>
Отступы между колонок
Колонки изначально плотно прилегают друг к другу, что не всегда полезно для макета. Для добавления пустого пространства между колонками предназначен класс col-xs-offset-N, где N изменяется от 0 до 12. Отступ добавляется слева от текущей колонки (пример 3).
Пример 3. Добавление отступов
<div class="container"> <div class="row"> <div class="col-xs-3">3 колонки</div> <div class="col-xs-5 col-xs-offset-1">5 колонок</div> <div class="col-xs-2 col-xs-offset-1">2 колонки</div> </div> </div>
Результат данного примера в браузере показан на рис. 3.
Помните, что отступы добавляются к общему числу колонок, сумма которых не должна превышать 12, в противном случае колонки начнут перемещаться на другую строку.
Сдвиг колонок
Каждую колонку можно сдвигать влево или вправо на указанное число колонок. Опять же это делается с помощью классов. col-xs-pull-N — сдвигает колонку влево на заданное число, а col-xs-push-N сдвигает вправо (пример 4). Здесь N может меняться от 0 до 12.
Пример 4. Сдвиг колонок вправо
<div class="container"> <div class="row"> <div class="col-xs-3">3 колонки</div> <div class="col-xs-5 col-xs-push-1">5 колонок</div> <div class="col-xs-2 col-xs-push-2">2 колонки</div> </div> </div>
Заметьте, что сдвиг это не дополнительная колонка как при использовании offset, так что суммировать все значения не нужно. Ещё надо следить за тем, чтобы колонки не накладывались друг на друга.
Вложенные колонки
При вёрстке сложных макетов двенадцати колонок может не хватить, к тому же в одной колонке могут встречаться ещё дополнительные. Так что нам потребуются вложения одних колонок в другие. Делается это похожим образом (пример 5).
Пример 5. Вложенные колонки
<div class="container">
<div class="row">
<div class="col-xs-12">Заголовок</div>
<div class="col-xs-5">
<div class="row">
<div class="col-xs-12">Колонка 1</div>
<div class="col-xs-6">Колонка 1-1</div>
<div class="col-xs-6">Колонка 1-2</div>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2">Колонка 2</div>
</div>
</div>
Чтобы создать вложенные колонки опять добавляем <div> с классом row, который содержит желаемую структуру вложенных колонок. Таким образом можно сверстать какие угодно сложные макеты.
Заметьте, что заголовок заполняет всю ширину макета, потому что он занимает все 12 колонок. Дополнительный контейнер row для подобных вещей вводить не обязательно, перенос остальных колонок на другую строку произойдет автоматически (рис. 4).
Адаптивный дизайн
Адаптивным дизайном называется способ вёрстки, когда ширина макета веб-страницы подстраивается под ширину устройства. Самый простой вариант — это пропорциональное изменение масштаба, но на деле лучше менять и расположение элементов и их размеры. Так мы получим наиболее оптимальный вид для смартфонов, планшетов и мониторов.
В Bootstrap уже заложены возможности адаптивного дизайна. Если вы сделаете простой многоколоночный макет, а затем начнёте уменьшать ширину окна браузера, то заметите, что изменяется и сам макет. Но этим всё не ограничивается, гораздо интереснее немного менять сам макет чтобы он наилучшим образом соответствовал устройству. Для этого введены ключевые слова, которые встречаются в именах классов, они представлены в табл. 1.
Чтобы задать ширину колонок для смартфонов достаточно в код включить класс col-xs-N, для мониторов он уже будет именоваться col-md-N. Любые классы можно комбинировать между собой, если класс для выбранного устройства не указан, то он наследуется снизу вверх. Это значит, что макет для смартфона будет выглядеть так же, как и макет для монитора. Но не наоборот. Именно поэтому вёрстка всегда начинается с макета для смартфона, затем уже идёт планшет и монитор.
Поскольку мы теперь ориентируемся на мобильные устройства, то внутрь <head> надо добавить следующую строку.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Теперь наш дизайн будет масштабироваться по ширине устройства и выглядеть оптимально, особенно на устройствах с маленьким экраном.
С учётом этой строки и новых классов сделаем простой макет с двумя колонками (пример 1).
Пример 1. Адаптивный макет
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Адаптивный макет</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
[class*="col-"] {
background-color: #eee;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">Заголовок</div>
<div class="col-xs-12 col-sm-8 col-md-8">Колонка 1</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-md-offset-1">Колонка 2</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Для тестирования макета не обязательно смотреть его на каком-то заданном устройстве, достаточно уменьшить ширину окна браузера и мы сразу же увидим изменения. На рис. 1-3 показан результат данного примера при разной ширине окна.
Мы рассмотрели самый простой случай, когда расположение элементов практически не меняется относительно друг друга. Как быть, если потребуется переставить элементы местами или кое-что убрать для маленьких экранов? Напрямую это сделать не получится, поэтому пойдём на небольшую хитрость — добавим два одинаковых элемента в разных местах и будем один прятать, а другой отображать. Bootstrap предлагает два набора классов для сокрытия и показа элементов в зависимости от ширины окна — hidden-xs и visible-xs-block. Принцип тот же, что и при работе с колонками, вместо xs подставляем нужное ключевое слово. В примере 2 показано как «перемещать» таким образом заголовок.
Пример 2. Изменение положения заголовка
<div class="container"> <div class="row"> <div class="col-xs-12 hidden-xs">Заголовок</div> <div class="col-xs-12 col-sm-8 col-md-8">Колонка 1</div> <div class="col-xs-12 col-sm-4 col-md-3 col-md-offset-1">Колонка 2</div> <div class="col-xs-12 visible-xs-block">Заголовок</div> </div> </div>
Результат данного примера показан на рис. 4.
В данном примере класс hidden-xs означает, что колонку для смартфонов следует прятать, а visible-xs-block — наоборот, показывать. При просмотре на широком экране заголовок будет всегда вверху, а на узком внизу.
Стили
Boostrap содержит множество готовых стилей для оформления элементов. Применять их достаточно просто, всего то надо добавить к элементу определённый в стилях класс. Это сокращает время на разработку проекта, поскольку не приходится задумываться о дизайне отдельных элементов. Стиль некоторых элементов, вроде заголовков <h1> также отличается от исходного, это надо учитывать.
Цвет и фон
Для веб-страницы устанавливается белый цвет фона, набор шрифтов Helvetica Neue, Helvetica, Arial и цвет текста #333. Вы также можете использовать заданный набор цветов для привлечения внимания к тексту и создания информационных сообщений (пример 1).
Пример 1. Цвета текста
<p class="text-muted">Серый цвет</p> <p class="text-primary">Основной текст</p> <p class="text-success">Цвет для сообщения об успехе</p> <p class="text-info">Цвет для информации</p> <p class="text-warning">Цвет для предупреждений</p> <p class="text-danger">Цвет для сообщений об ошибках</p>
Результат применения этих классов показан на рис. 1.
Подобным же образом можно менять цвет фона у текста или другого элемента, например, кнопок. Немного поменяются имена классов, но принцип сохранится (пример 2).
Пример 2. Фон элементов
<p class="bg-primary">Основной текст</p> <p class="bg-success">Цвет для сообщения об успехе</p> <p class="bg-info">Цвет для информации</p> <p class="bg-warning">Цвет для предупреждений</p> <p class="bg-danger">Цвет для сообщений об ошибках</p>
Результат применения этих классов показан на рис. 2.
Врезки
Для создания врезок предназначены классы pull-left и pull-right, которые выравнивают элемент, соответственно, по левому и правому краям. Врезкой называется блок с рисунками и текстом, который встраивается в основной текст. Врезка обычно располагается по левому или правому краю текстового блока, а основной текст обтекает её с других сторон (пример 3).
Пример 3. Создание врезки
<h1>Борщ</h1> <div class="pull-right bg-info" style="width: 20em; padding: 10px;"> <h2><small>Хозяйке на заметку</small></h2> <p>Борщ получится вкуснее, если добавить в него немного соли.</p> </div> <p>Мясо отварить до готовности. Промыть свеклу, очистить, нарезать соломкой и тушить с помидорами до полуготовности.</p> <p>Бульон процедить, мясо нарезать кусочками. В бульон добавить нарезанный дольками картофель, довести до кипения, опустить нарезанную соломкой свежую капусту и варить 10-15 минут, добавить пассерованные овощи, болгарский перец, нашинкованный тонкой соломкой, специи и довести до готовности.</p> <p>Готовому борщу дать настояться в течение 20-25 минут. При подаче к столу добавить сметану, мясо, зелень.</p>
Результат данного примера показан на рис. 3.
Чтобы наша врезка была более заметна, к <div> добавлен класс bg-info, а также ограничена его ширина. Само обтекание в стилях делается с помощью свойства float, которое продолжает воздействовать и на нижние элементы. Для отмены действия float применяется класс clearfix, он добавляется к любому нижележащему элементу.
Стили - текст
По умолчанию размер шрифта основного текста установлен как 14px, а межстрочное расстояние (значение свойства line-height) — 1.428. Между абзацами текста (элемент <p>) введено дополнительное расстояние в 10 пикселей.
Заголовки
Для заголовков применяются знакомые из HTML элементы с <h1> по <h6>. Их стиль немного отличается от исходного (рис. 1).
Заголовки допустимо немного уменьшить самостоятельно, если внутрь вставить элемент <small>, получится такая комбинация.
<h1><small>Заголовок первого уровня</small></h1>
Такого типа заголовки по виду несколько иные и предназначены для других разделов сайта, например, боковой панели (рис. 2).
Лид
Лидом в журналистике называют первый абзац статьи привлекающий внимание и дающий краткое представление о содержании статьи. Обычно он по своему виду немного отличается от основного текста. Чтобы указать лид достаточно к абзацу или колонке добавить класс lead, как показано в примере 1.
Пример 1. Создание лида
<p class="lead">Дорогой друг! Я расскажу тебе удивительную историю про маленького червячка, который жил в яблоке, о его путешествии в волшебную страну Нортландия, о том, какие опасности подстерегали его на пути, кого он повстречал по дороге, какие приключения и испытания прошёл, и что он рассказал по возвращению домой.</p> <p>Итак, сказка про маленького червячка, который жил в яблоке, о его путешествии в волшебную страну Нортландия, о том, какие опасности подстерегали его на пути, кого он повстречал по дороге, какие приключения и испытания прошёл, и что он рассказал по возвращению домой.</p>
Результат данного примера показан на рис. 3.
Аббревиатура
Аббревиатура это сложносокращённое слово (колхоз) или слово, полученное из первых букв слов предложения (КГБ). Для обозначения аббревиатур в тексте применяется элемент <abbr>, а для расшифровки внутрь него добавляется атрибут title(пример 2).
Пример 2. Аббревиатура
<p><abbr title="Cascading Style Sheets, Каскадные таблицы стилей">CSS</abbr> — набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. </p>
Аббревиатура обозначается точечным подчёркиванием, при наведении на слово курсора мыши он меняет свой вид на подсказывающий и появляется всплывающая подсказка, если она есть.
При добавлении класса initialism к элементу <abbr> для него устанавливается свойство font-size со значением 90%, тем самым аббревиатура выводится уменьшенного размера.
<abbr title="Cascading Style Sheets, каскадные таблицы стилей" class="initialism">CSS</abbr>
Цитаты
Для оформления больших цитат в HTML применяется элемент <blockquote>, но Bootstrap немного меняет его оформление (рис. 4). Слева от цитаты отображается серая вертикальная линия, а имя автора или источник цитаты выводится уменьшенным размером и серого цвета.
Если сама цитата делается весьма традиционно, то подпись к ней добавляется с помощью элемента <small> или <footer>, как показано в примере 3.
Пример 3. Добавление цитаты
<blockquote> <p>Нельзя сказать человеку: «Ты можешь творить. Так давай, твори». Гораздо вернее подождать, пока он сам не скажет: «Я могу творить, и я буду творить, хотите вы этого или нет».</p> <p><small>Айзек Азимов</small></p> </blockquote>
Цитату можно инвертировать, тогда линия будет справа, а текст выравниваться также по правому краю (рис. 5).
Просто добавьте класс pull-right к <blockquote>.
<blockquote class="pull-right">...</blockquote>
Листинг
Нам часто приходится выкладывать листинги программ и указывать переменные. В HTML для этого есть несколько готовых элементов — <var> обозначает отдельные переменные, <code> — строчный фрагмент кода, а <pre> используется для многострочного кода (пример 4).
Пример 4. Вывод программы
<p>Функция <code>checkParent()</code> вызывается
с параметрами <var>src</var> и <var>dest</var>.</p>
<pre>function checkParent (src, dest) {
while (src != null) {
if (src.tagName == dest)
src = src.parentElement
}
return null
}</pre>
Результат данного примера показан на рис. 6.
Элемент <pre> занимает высоту равную его содержимому, что для больших листингов может быть неудобно. Чтобы ограничить высоту достаточно добавить класс pre-scrollable, тогда высота будет равна 350 пикселей и появится вертикальная полоса прокрутки.
Стили - изображения
Для оформления изображений есть несколько классов — img-rounded, img-circle и img-thumbnail. Чтобы изменить стиль отображения картинок просто добавьте один из этих классов к элементу <img>. На рис. 1 показаны результаты применения каждого класса.
Класс img-rounded скругляет уголки у картинки, img-circle делает её круглой, а img-thumbnail добавляет рамку вокруг изображения.
В примере 1 показано, как вывести фотографию и задать её стиль.
Пример 1. Круглая картинка
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Изображения</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4"><img src="img/cat.jpg" alt="Котёнок" class="img-circle img-responsive"></div>
<div class="col-xs-8">Настоящий боевой котик. Почему боевой, спросите вы?
Так ведь только опасных животных держат на привязи,
чтобы они никому случаем не навредили.</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Любые выводимые изображения имеют исходные размеры, но для адаптивного дизайна лучше, когда ширина картинки подстраивается под ширину колонки. Для этого к элементу <img> достаточно добавить класс img-responsive, как показано в примере выше. Заметьте, что классы для адаптивного размера и стиля изображения вполне сочетаются между собой. В результате при уменьшении размера окна мы увидим и уменьшение самой картинки (рис. 2).
Стили - списки
На сайтах списки применяются как по прямому назначению — для вывода именно списков, так и для создания различной навигации. Это связано с тем, что сами элементы списков имеют строгую иерархию и позволяют делать вложенную структуру, вдобавок видом списков легко управлять через стили.
Горизонтальный список
Такой список обычно используется для создания меню, к элементу <ul> для этого нужно только добавить класс list-inline(пример 1).
Пример 1. Горизонтальное меню
<ul class="list-inline"> <li><a href=#>Сепульки</a></li> <li><a href=#>Сепулькарии</a></li> <li><a href=#>Сепуление</a></li> </ul>
Вот как выглядит подобное меню (рис. 1). Стиль средней ссылки меняется при наведении на неё курсора.
Список определений
Список определений состоит из двух элементов — термина и его определения. Сам список создаётся с помощью контейнера <dl>, термин — элементом <dt>, а его определение — с помощью <dd> (пример 2).
Пример 2. Список определений
<dl> <dt>Сепульки</dt> <dd>Важный элемент цивилизации ардритов с планеты Энтеропия.</dd> <dt>Сепулькарии</dt> <dd>Устройства для сепуления.</dd> <dt>Сепуление</dt> <dd>Занятие ардритов с планеты Энтеропия.</dd> </dl>
Bootstrap предлагает сделать такой список нагляднее за счёт горизонтального расположения термина и определения. К элементу <dl> достаточно добавить класс dl-horizontal (пример 3).
Пример 3. Горизонтальный список определений
<dl class="dl-horizontal"> <dt>Сепульки</dt> <dd>Важный элемент цивилизации ардритов с планеты Энтеропия.</dd> <dt>Сепулькарии</dt> <dd>Устройства для сепуления.</dd> <dt>Сепуление</dt> <dd>Занятие ардритов с планеты Энтеропия.</dd> </dl>
Результат данного примера показан на рис. 2.
Если термин слишком длинный, то он будет обрезан и к нему добавлено многоточие. Также при уменьшении размеров окна вид списка меняется на традиционный (рис. 3).
Стили - таблицы
Для базового оформления таблиц в элемент <table> достаточно включить класс table. Вид оформленной через стили таблицы показан на рис. 1.
Рамки вокруг таблицы нет, строки таблицы отделяются друг от друга линиями. Чтобы таблица представляла собой сетку добавьте класс table-bordered (пример 1).
Пример 1. Сетка
<table class="table table-bordered"> <thead> <tr> <th></th><th>2021</th><th>2022</th><th>2023</th> </tr> </thead> <tbody> <tr> <td>Рубины</td><td>43</td><td>51</td><td>79</td> </tr> <tr> <td>Изумруды</td><td>28</td><td>34</td><td>48</td> </tr> <tr> <td>Сапфиры</td><td>29</td><td>57</td><td>36</td> </tr> </tbody> </table>
Заметьте, что класс table мы сохраняем и добавляем к нему новые классы. Результат данного примера показан на рис. 2.
Можно добавить к нашему набору ещё один класс table-hover и тогда при наведении на строку таблицы она будет подсвечиваться серым цветом (рис. 3). Строки внутри <thead> не выделяются таким образом.
Для удобного представления табличных данных имеет смысл делать строки таблицы чередующимися, чтобы цвет фона чётных и нечётных строк различался (рис. 4). Такой вид таблицы часто называют «зеброй».
Такой формат опять же делается путём добавления класса table-striped к элементу <table>. Всё вышеперечисленное можно объединить в одной таблице.
<table class="table table-bordered table-hover table-striped">
Стили - кнопки
Кнопки применяются не только как элементы форм, в кнопку вполне можно превратить и ссылку, придав ей прямоугольный вид. Она по прежнему останется ссылкой со всем доступным функционалом, но по своему оформлению будет напоминать ту же кнопку. Аналогично и обратное — кнопке допустимо придать вид ссылки.
Для создания кнопок добавьте к элементу <a>, <input> или <button> класс btn. Второй класс нужен для изменения стиля кнопки. В примере 1 показаны возможные варианты кнопок и для каких целей и предназначены.
Пример 1. Кнопки
<button type="button" class="btn btn-default">Кнопка по умолчанию</button> <button type="button" class="btn btn-primary">Основная кнопка</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>
Результат данного примера показан на рис. 1.
При наведении курсора на кнопку она становится чуть темнее.
Размеры кнопок
Если вам требуется сделать кнопку больше или меньше, то для этого применяется три дополнительных класса. Класс btn-lgустанавливает кнопку большого размера, btn-sm — маленького, а btn-xs — очень маленького (пример 2).
Пример 2. Кнопки разного размера
<button type="button" class="btn btn-primary btn-lg">Большая кнопка</button> <button type="button" class="btn btn-primary">Размер по умолчанию</button> <button type="button" class="btn btn-primary btn-sm">Маленькая кнопка</button> <button type="button" class="btn btn-primary btn-xs">Очень маленькая</button>
Результат данного примера показан на рис. 2.
Кнопку можно сделать и блочной, занимающей всю доступную ей ширину. Добавьте к ней только класс btn-block, в результате получится следующая кнопка (рис. 3).
Код для создания таких кнопок показан в примере 3.
Пример 3. Блочные кнопки
<button type="button" class="btn btn-primary btn-block">Кнопка шириной 100%</button> <button type="button" class="btn btn-block">Ещё одна такая кнопка</button>
Блокирование кнопок
Чтобы кнопка перестала работать, для элементов <input> и <button> достаточно добавить атрибут disabled. Bootstrap сам изменит стиль таких кнопок, показав наглядно, что нажимать на них бесполезно. Для ссылок, оформленных как кнопки, нужно включить класс disabled, как показано в примере 4.
Пример 4. Блокированные кнопки
<button type="button" class="btn btn-default">Обычная кнопка</button> <button type="button" class="btn btn-primary" disabled>Ты не нажмёшь!</button> <input type="submit" class="btn btn-default" disabled value="Блокированная кнопка"> <a href="link1.html" class="btn btn-default disabled">Блокированная ссылка</a>
Результат данного примера показан на рис. 4.
Стили - иконки
Bootstrap включает несколько десятков иконок, которые можно применять в тексте, для кнопок, в формах, в навигации и в других местах. Иконки сделаны в виде символов шрифта, поэтому могут масштабироваться в больших пределах без ухудшения качества и занимают при этом небольшой объём. Для добавления желаемой иконки обычно используется пустой элемент <i>, внутри которого пишем класс иконки. Вот, например, как на кнопку добавить символ лупы, она обычно символизирует поиск.
<button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
В примере 1 показано создание панели инструментов с кнопками и иконками на них.
Пример 1. Панель инструментов
<div class="btn-toolbar"> <div class="btn-group"> <a class="btn btn-default" href="#"><i class="glyphicon glyphicon-align-left"></i></a> <a class="btn btn-default" href="#"><i class="glyphicon glyphicon-align-center"></i></a> <a class="btn btn-default" href="#"><i class="glyphicon glyphicon-align-right"></i></a> <a class="btn btn-default" href="#"><i class="glyphicon glyphicon-align-justify"></i></a> </div> <div class="btn-group"> <a class="btn btn-default" href="#"><i class="glyphicon glyphicon-bold"></i></a> <a class="btn btn-default" href="#"><i class="glyphicon glyphicon-italic"></i></a> </div> </div>
Результат данного примера показан на рис. 1.
