Bootstrap — фреймворк, свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров. Желаете видеть свой сайт на различных устройствах, то используйте Bootstrap для отображения адаптивного дизайна для смартфонов, планшетов, нетбуков и т.д.
Заголовки
Доступны все HTML заголовки, от <h1>
до <h6>
.
h1. Заголовок 1
h2. Заголовок 2
h3. Заголовок 3
h4. Заголовок 4
h5. Заголовок 5
h6. Заголовок 6
Размеры Body
В Bootstrap основной размер шрифта font-size
по умолчанию 14px, с высотой строки line-height
в 20px. Это применимо к <body>
и всем остальным абзацам. Дополнительно <p>
(абзац) имеет нижний отступ, равный половине высоты его строки (по умолчанию 10px).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Класс Lead body
Выделяйте абзац путем добавления .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
Форматирование Less
Все шрифты и размеры основаны на двух переменных LESS в variables.less: @baseFontSize
и @baseLineHeight
. Первая — это основной размер шрифта, используемый во всем документе, вторая — это основная высота строки. Мы используем эти переменные и немного вычислений, чтобы создать отступы, поля, высоту строк разного типа и многое другое. Настраивайте Bootstrap для себя.
Выделение
Используя простые стили Bootstrap, применяйте HTML теги для выделения.
<small>
Для выделения блоков текста мелким шрифтом используйте тег small.
Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт
<p> <small>Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт.</small> </p>
Полужирный
Выделение фрагмента текста с помощью important
Следующий фрагмент текста набран полужирным шрифтом.
<strong>набран полужирным шрифтом</strong>
Курсив
Выделение фрагмента текста с помощью stress
Следующий фрагмент текста выделен курсивом.
<em>выделен курсивом</em>
Внимание! Смело используйте <b>
и <i>
в HTML5. Но <b>
предназначен для выделения слова или фразы, которое не выражает особой важности, в то время как <i>
используется для выделения разговорной речи, технических терминов и т.д.
Классы выделения
Выделение цветом с помощью нескольких вспомогательных классов.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
- <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
- <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
- <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
- <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
Аббревиатуры
Используйте элемент HTML <abbr>
для аббревиатур. При этом наведите курсор на аббревиатуру, чтобы увидеть ее расшифровку. Аббревиатуры с атрибутом title
выделены полупрозрачным подчеркиванием точками, а при длительном наведении курсора вы увидите знак вопроса и расшифровку аббревиатуры.
<abbr>
Чтобы показать расшифровку аббревиатуры при длительном наведении курсора, добавьте атрибут title
.
Аббревиатура слова «attribute» — attr.
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
Добавьте .initialism
, чтобы немного уменьшить размер шрифта.
HTML — это круче вареного яйца.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Адреса
Представьте или только основную или полную контактную информацию.
<address>
Сохраните форматирование, ставя в конце всех строк тег <br>
.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Полное имя
first.last@gmail.com
- <address>
- <strong>Twitter, Inc.</strong><br>
- 795 Folsom Ave, Suite 600<br>
- San Francisco, CA 94107<br>
- <abbr title="Phone">P:</abbr> (123) 456-7890
- </address>
- <address>
- <strong>Full Name</strong><br>
- <a href="mailto:#">first.last@gmail.com</a>
- </address>
Цитаты
Цитирование фрагментов текста из других источников.
Цитаты по умолчанию
Цитата HTML ставится внутрь тега <blockquote>
. Для однострочных цитат используйте тег <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- </blockquote>
Опции цитирования
Простые изменения стиля и содержания в стандартных цитатах.
Указание источника
Добавьте тег <small>
для указания на источник. Поместите название источника внутрь тега <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Кто-то очень известный в Названии источника
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- <small>Кто-то очень известный в <cite title="Source Title">Названии источника</cite></small>
- </blockquote>
Альтернативное отображение
Используйте .pull-right
для выравнивания текста по правую сторону.
- <blockquote class="pull-right">
- ...
- </blockquote>
Списки
Неупорядоченный
Список, в котором порядок явно не обозначен.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- <ul>
- <li>...</li>
- </ul>
Упорядоченный
Список, в котором порядок четко определен.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- <ol>
- <li>...</li>
- </ol>
Не стилизованный
Список без стиля
или без дополнительного левого поля.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- <ul class="unstyled">
- <li>...</li>
- </ul>
Описание
Список терминов с их сопутствующими описаниями.
- Списки описаний
- Список описания идеально подходит для определения терминов.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- <dl>
- <dt>...</dt>
- <dd>...</dd>
- </dl>
Горизонтальный список описания
Выстраивает термины и описания <dl>
в одну линию.
- Списки описания
- Список описания идеально подходит для обозначения терминов.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- <dl class="dl-horizontal">
- <dt>...</dt>
- <dd>...</dd>
- </dl>
Внимание! В горизонтальных списках описания слишком длинные термины будут обрезаться с помощью text-overflow
. На малых дисплеях размеры списков будут изменяться в соответствии с сеткой шаблона.
Код
Строковое выделение кода
Поместите строковый код внутрь тега <code>
.
<section>
следует поместить внутрь как строковый.
- Для примера,<code><section></код> следует поместить внутрь как строковый.
Блочное выделение
Используйте <pre>
для выделения многих строк кода. Избегайте угловых скобок в коде для его корректного отображения.
<p>Sample text here...</p>
- <pre>
- <p>Sample text here...</p>
- </pre>
Внимание! Всегда используйте теги <pre>
как можно левее; это сохранит все отступы. Дополнительно вы можете использовать класс .pre-scrollable
, который имеет максимальную высоту в 350px и добавляет вертикальную прокрутку.
Таблицы
Стили по умолчанию
Для основного форматирования и только горизонтальной разметки добавьте класс .table
в любой тег <table>
.
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
- <table class="table">
- …
- </table>
Дополнительные классы
Добавьте любой из следующих классов к основному классу .table
.
.table-striped
Добавить светло-серый фон к нечетным строкам внутри <tbody>
можно посредством CSS селектора :nth-child
(в IE7-IE8 не поддерживается).
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
- <table class="table table-striped">
- …
- </table>
.table-bordered
Добавляет рамки и закругляет углы таблицы.
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
- <table class="table table-bordered">
- …
- </table>
.table-hover
Делает активным наведение курсора внутри.
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
- <table class="table table-hover">
- …
- </table>
.table-condensed
Делает таблицы более компактными, наполовину сокращая отступы.
# | Имя | Фамилия | Имя пользователя |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
- <table class="table table-condensed">
- …
- </table>
Дополнительные классы строк
Используйте контекстные классы, чтобы выделить цветом строки таблицы.
Класс | Описание |
---|---|
.success
|
Указывает на успешно выполненное действие. |
.error
|
Указывает на опасное или негативное действие.. |
.warning
|
Указывает на предупреждение, на которое следует обратить внимание. |
.info
|
Используется как альтернатива стилям по умолчанию. |
# | Продукт | Платеж | Статус |
---|---|---|---|
1 | TB — Ежемесячно | 01/04/2012 | Подтвержден |
2 | TB — Ежемесячно | 02/04/2012 | Отклонен |
3 | TB — Ежемесячно | 03/04/2012 | Задержка |
4 | TB — Ежемесячно | 04/04/2012 | Позвонить для подтверждения |
- ...
- <tr class="success">
- <td>1</td>
- <td>TB - Monthly</td>
- <td>01/04/2012</td>
- <td>Approved</td>
- </tr>
- ...
Поддерживаемая разметка таблиц
Список поддерживаемых элементов HTML и указания для их использования.
Тег | Описание |
---|---|
<table>
|
Вставляет элемент для отображения данных в табличной форме. |
<thead>
|
Элемент контейнера предназначен для хранения одной или нескольких строк таблицы. (<tr> ) Озаглавливает колонки таблицы.
|
<tbody>
|
Элемент контейнера для создания строк в теле таблицы (<tr> )
|
<tr>
|
Элемент контейнера для настройки ячеек таблицы. (<td> or <th> ) Создает отдельную строку.
|
<td>
|
Ячейка таблицы по умолчанию |
<th>
|
Специальная ячейка для названий столбцов таблицы (или строк — зависит от расположения). Следует использовать с кодом <thead>
|
<caption>
|
Краткое описание в таблице, которое очень удобно для мобильных устройств. |
- <table>
- <caption>...</caption>
- <thead>
- <tr>
- <th>...</th>
- <th>...</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>...</td>
- <td>...</td>
- </tr>
- </tbody>
- </table>
Формы
Стили по умолчанию
Отдельные элементы формы имеют свой стиль, но без обязательного класса <form>
или каких-либо особых изменений в разметке. В результате получаются упорядоченный, выровненный по левому краю текст в элементах формы.
- <form>
- <legend>Условные обозначения</legend>
- <label>Название</label>
- <input type="text" placeholder="Type something…">
- <span class="help-block">Это пример вспомогательного текста.</span>
- <label class="checkbox">
- <input type="checkbox"> Проверить
- </label>
- <button type="submit" class="btn">Подтвердить</button>
- </form>
Дополнительные шаблоны
В Bootstrap есть три дополнительных шаблона форм для общего пользования.
Форма поиска
Добавьте .form-search
в форму и .search-query
в элемент <input>
для построения закругленной рамки.
- <form class="form-search">
- <input type="text" class="input-medium search-query">
- <button type="submit" class="btn">Search</button>
- </form>
Линейная форма
Добавьте класс .form-inline
для компактного расположения выровненного по левому краю текста и строк.
- <form class="form-inline">
- <input type="text" class="input-small" placeholder="Email">
- <input type="password" class="input-small" placeholder="Password">
- <label class="checkbox">
- <input type="checkbox"> Запомнить
- </label>
- <button type="submit" class="btn">Отправить</button>
- </form>
Горизонтальная форма
Выровняйте текст по правой стороне, ставя обтекание слева, чтобы он находился на одной линии с элементами формы:
- Добавьте
.form-horizontal
в форму - Добавьте текст и элементы управления внутрь
.control-group
- Добавьте
.control-label
в текст - Добавьте любой подходящий элемент управления
.controls
для точной настройки
- <form class="form-horizontal">
- <div class="control-group">
- <label class="control-label" for="inputEmail">Email</label>
- <div class="controls">
- <input type="text" id="inputEmail" placeholder="Email">
- </div>
- </div>
- <div class="control-group">
- <label class="control-label" for="inputPassword">Password</label>
- <div class="controls">
- <input type="password" id="inputPassword" placeholder="Password">
- </div>
- </div>
- <div class="control-group">
- <div class="controls">
- <label class="checkbox">
- <input type="checkbox"> Remember me
- </label>
- <button type="submit" class="btn">Sign in</button>
- </div>
- </div>
- </form>
Поддерживаемые элементы формы
Примеры стандартных поддерживаемых элементов формы.
Поле ввода
Самый простой элемент формы с текстовыми полями ввода. Поддерживает все типы HTML5: текст, пароль, text, password, время и дата, региональные настройки времени и даты, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, номер телефона и цвет.
Всякий раз обязательно используйте нужный тип type
.
- <input type="text" placeholder="Text input">
Многострочный текст
Для элементов формы, которые позволяют использовать многострочный текст. Измените атрибут rows
в случае необходимости.
- <textarea rows="3"></textarea>
Флажки и радио-кнопки
Элементы «флажки» (чек-боксы) используются для выбора одной или нескольких опций в списке, а радио-кнопки предназначены только для выбора одной опции из нескольких.
По умолчанию (вертикально)
- <label class="checkbox">
- <input type="checkbox" value="">
- А вот вам опция номер один - очень крутая штука.
- </label>
- <label class="radio">
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
- А вот вам опция номер один - очень крутая штука.
- </label>
- <label class="radio">
- <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
- Опция два - это нечто другое. Выбрав ее, отменяете первую.
- </label>
Флажки в одной строке
Добавьте класс .inline
к нескольким флажкам или радио-кнопкам, чтобы разместить их на одной линии.
- <label class="checkbox inline">
- <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
- </label>
- <label class="checkbox inline">
- <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
- </label>
- <label class="checkbox inline">
- <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
- </label>
Список выбора
Используйте опцию по умолчанию или укажите multiple="multiple"
, чтобы отобразить сразу несколько опций.
- <select>
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- <select multiple="multiple">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
Дополнения к формам
В Bootstrap имеются также другие полезные компоненты формы, которые могут встраиваться в панель браузера.
Пред-идущие и Пост-идущие элементы
Добавьте текст или кнопки до или после поля текстового ввода. Обратите внимание, что элементы select
при этом не поддерживаются.
Настройки по умолчанию
Добавьте один или два класса внутрь тегов .add-on
и input
, чтобы отобразить текст до или после поля ввода.
- <div class="input-prepend">
- <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
- </div>
- <div class="input-append">
- <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
- </div>
Комбинирование
Используйте оба класса и дважды — .add-on
, чтобы отобразить текст впереди или позади.
- <div class="input-prepend input-append">
- <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
- </div>
Кнопки вместо текста
Используйте с текстом вместо <span>
класс .btn
, чтобы к вводу подключить кнопку.
- <div class="input-append">
- <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
- </div>
- <div class="input-append">
- <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
- </div>
Форма поиска
- <form class="form-search">
- <div class="input-append">
- <input type="text" class="span2 search-query">
- <button type="submit" class="btn">Search</button>
- </div>
- <div class="input-prepend">
- <button type="submit" class="btn">Search</button>
- <input type="text" class="span2 search-query">
- </div>
- </form>
Настройка размеров
Используйте соответствующие классы, такие как .input-large
или согласуйте ваше поле ввода с сеткой размеров, используя классы .span*
.
Взаимосвязанные размеры
- <input class="input-mini" type="text" placeholder=".input-mini">
- <input class="input-small" type="text" placeholder=".input-small">
- <input class="input-medium" type="text" placeholder=".input-medium">
- <input class="input-large" type="text" placeholder=".input-large">
- <input class="input-xlarge" type="text" placeholder=".input-xlarge">
- <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
Внимание! В дальнейших версиях мы изменим использование этих взаимосвязанных классов ввода, чтобы согласовать размер кнопок. Например, .input-large
будет увеличивать отступ и размер шрифта в поле ввода.
Сетка размеров
Используйте от .span1
до .span12
, чтобы задать одинаковые размеры в поле ввода и в сетке столбцов.
- <input class="span1" type="text" placeholder=".span1">
- <input class="span2" type="text" placeholder=".span2">
- <input class="span3" type="text" placeholder=".span3">
- <select class="span1">
- ...
- </select>
- <select class="span2">
- ...
- </select>
- <select class="span3">
- ...
- </select>
Для множественного ввода используйте класс модификатора .controls-row
для корректного отображения пробелов. Это позволяет убрать лишние пробелы при обтекании, настраивает соответствующие поля и прозрачность обтекания.
- <div class="controls">
- <input class="span5" type="text" placeholder=".span5">
- </div>
- <div class="controls controls-row">
- <input class="span4" type="text" placeholder=".span4">
- <input class="span1" type="text" placeholder=".span1">
- </div>
- ...
Неформатируемые поля
Представьте данные в форме, которая не редактируется без использования фактической разметки.
- <span class="input-xlarge uneditable-input">Some value here</span>
Формы для действий
Добавьте в конец формы действие (кнопки). Расположенные внутри класса .form-horizontal
, кнопки автоматически получат отступ, соответствующий форме.
- <div class="form-actions">
- <button type="submit" class="btn btn-primary">Сохранить изменения</button>
- <button type="button" class="btn">Отмена</button>
- </div>
Вспомогательный текст
Поддержка строчного и блокового текста, который отображается около управления формы.
Строчный вспомогательный текст
- <input type="text"><span class="help-inline">Inline help text</span>
Блоковый вспомогательный текст
- <input type="text"><span class="help-block">Слишком большой блок вспомогательного текста переносится на новую строку и может продолжиться более, чем на одну строку.</span>
Настройки состояния элементов формы
Обеспечивают обратную связь с пользователями или посетителями.
Фокус ввода
Мы удалили стили по умолчанию outline
в настройках некоторых форм и поставили на их место box-shadow
для фокуса :focus
.
- <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
Отключенное состояние
Добавьте атрибут disabled
в поле ввода для того, чтобы предотвратить ввод. Внешний вид поля при этом немного изменится.
- <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Состояния валидации
В Bootstrap имеются стили валидации для ошибок, предупреждений, информации и успешных действий. Для использования добавьте подходящий класс к ближайшему классу .control-group
.
- <div class="control-group warning">
- <label class="control-label" for="inputWarning">Предупреждение</label>
- <div class="controls">
- <input type="text" id="inputWarning">
- <span class="help-inline">Что-то идет не так</span>
- </div>
- </div>
- <div class="control-group error">
- <label class="control-label" for="inputError">Ошибка</label>
- <div class="controls">
- <input type="text" id="inputError">
- <span class="help-inline">Пожалуйста, исправьте ошибку</span>
- </div>
- </div>
- <div class="control-group success">
- <label class="control-label" for="inputSuccess">Выполнено успешно</label>
- <div class="controls">
- <input type="text" id="inputSuccess">
- <span class="help-inline">Урааа!</span>
- </div>
- </div>
Изображения
Добавьте классы к элементу <img>
, чтобы легко настроить стили изображений.



- <img src="..." class="img-rounded">
- <img src="..." class="img-circle">
- <img src="..." class="img-polaroid">
Внимание! .img-rounded
и .img-circle
не работают в IE7-8 из-за недостаточной поддержки border-radius
.
Иконки от Glyphicons
Иконки glyphs
140 иконок в едином файле, по умолчанию в темно-сером и белом цвете. Предоставлены Glyphicons.
Авторство Glyphicons
Набор иконок Glyphicons Halflings не является бесплатным, но по соглашению между Bootstrap и Glyphicons разработчики имеют возможность использовать его без дополнительной платы. В знак благодарности мы просим вас разместить ссылку на оригинал проекта Glyphicons.
Как использовать
Все иконки требуют использования тега <i>
с уникальным классом и префиксом icon-
. Для использования поместите код с примера ниже в нужное место:
- <i class="icon-search"></i>
Также иконки могут использоваться в белом цвете (в виде инверсии), и доступны при дополнительном классе. Этот класс применяется при наведении курсора, активных состояний, навигации и раскрывающихся ссылок.
- <i class="icon-search icon-white"></i>
Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i>
для корректного расположения элемента.
Примеры иконок
Используйте иконки для кнопок, пунктов меню, навигации или присоедините к формам ввода.
Кнопки
Группа кнопок в меню
- <div class="btn-toolbar">
- <div class="btn-group">
- <a class="btn" href="#"><i class="icon-align-left"></i></a>
- <a class="btn" href="#"><i class="icon-align-center"></i></a>
- <a class="btn" href="#"><i class="icon-align-right"></i></a>
- <a class="btn" href="#"><i class="icon-align-justify"></i></a>
- </div>
- </div>
Кнопки с выпадающим списком
- <div class="btn-group">
- <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> Пользователь</a>
- <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#"><i class="icon-pencil"></i> Редактировать</a></li>
- <li><a href="#"><i class="icon-trash"></i> Удалить</a></li>
- <li><a href="#"><i class="icon-ban-circle"></i> Запретить</a></li>
- <li class="divider"></li>
- <li><a href="#"><i class="i"></i> Назначить администратором</a></li>
- </ul>
- </div>
Маленькая кнопка
- <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
Навигация
- <ul class="nav nav-list">
- <li class="active"><a href="#"><i class="icon-home icon-white"></i> Домой</a></li>
- <li><a href="#"><i class="icon-book"></i> Библиотека</a></li>
- <li><a href="#"><i class="icon-pencil"></i> Приложения</a></li>
- <li><a href="#"><i class="i"></i> Дополнительно</a></li>
- </ul>
Поля формы
- <div class="control-group">
- <label class="control-label" for="inputIcon">Адрес электронной почты</label>
- <div class="controls">
- <div class="input-prepend">
- <span class="add-on"><i class="icon-envelope"></i></span>
- <input class="span2" id="inputIcon" type="text">
- </div>
- </div>
- </div>
12.05.2025