Kan-studio

Оформление bootstrap

Bootstrap — фреймворк, свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров. Желаете видеть свой сайт на различных устройствах, то используйте Bootstrap для отображения адаптивного дизайна для смартфонов, планшетов, нетбуков и т.д.

bootstrrap

Заголовки

Доступны все 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.

  1. <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
  2. <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
  3. <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
  4. <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
  5. <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>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Полное имя
first.last@gmail.com

  1. <address>
  2. <strong>Twitter, Inc.</strong><br>
  3. 795 Folsom Ave, Suite 600<br>
  4. San Francisco, CA 94107<br>
  5. <abbr title="Phone">P:</abbr> (123) 456-7890
  6. </address>
  7.  
  8. <address>
  9. <strong>Full Name</strong><br>
  10. <a href="mailto:#">first.last@gmail.com</a>
  11. </address>

Цитаты

Цитирование фрагментов текста из других источников.

Цитаты по умолчанию

Цитата HTML ставится внутрь тега <blockquote>. Для однострочных цитат используйте тег <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3. </blockquote>

Опции цитирования

Простые изменения стиля и содержания в стандартных цитатах.

Указание источника

Добавьте тег <small> для указания на источник. Поместите название источника внутрь тега <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то очень известный в Названии источника

  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3. <small>Кто-то очень известный в <cite title="Source Title">Названии источника</cite></small>
  4. </blockquote>

Альтернативное отображение

Используйте .pull-right для выравнивания текста по правую сторону.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то очень известный в Названии источника

  1. <blockquote class="pull-right">
  2. ...
  3. </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
  1. <ul>
  2. <li>...</li>
  3. </ul>

Упорядоченный

Список, в котором порядок четко определен.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2. <li>...</li>
  3. </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
  1. <ul class="unstyled">
  2. <li>...</li>
  3. </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.
  1. <dl>
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </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.
  1. <dl class="dl-horizontal">
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

Внимание! В горизонтальных списках описания слишком длинные термины будут обрезаться с помощью text-overflow. На малых дисплеях размеры списков будут изменяться в соответствии с сеткой шаблона.

Строковое выделение кода

Поместите строковый код внутрь тега <code>.

Для примера, <section> следует поместить внутрь как строковый.
  1. Для примера,<code><section></код> следует поместить внутрь как строковый.

Блочное выделение

Используйте <pre> для выделения многих строк кода. Избегайте угловых скобок в коде для его корректного отображения.

<p>Sample text here...</p>
  1. <pre>
  2. &lt;p&gt;Sample text here...&lt;/p&gt;
  3. </pre>

Внимание! Всегда используйте теги <pre> как можно левее; это сохранит все отступы. Дополнительно вы можете использовать класс .pre-scrollable, который имеет максимальную высоту в 350px и добавляет вертикальную прокрутку.

Стили по умолчанию

Для основного форматирования и только горизонтальной разметки добавьте класс .table в любой тег <table>.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table">
  2. </table>

Дополнительные классы

Добавьте любой из следующих классов к основному классу .table.

.table-striped

Добавить светло-серый фон к нечетным строкам внутри <tbody> можно посредством CSS селектора :nth-child (в IE7-IE8 не поддерживается).

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-striped">
  2. </table>

.table-bordered

Добавляет рамки и закругляет углы таблицы.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-bordered">
  2. </table>

.table-hover

Делает активным наведение курсора внутри.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-hover">
  2. </table>

.table-condensed

Делает таблицы более компактными, наполовину сокращая отступы.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-condensed">
  2. </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 Позвонить для подтверждения
  1. ...
  2. <tr class="success">
  3. <td>1</td>
  4. <td>TB - Monthly</td>
  5. <td>01/04/2012</td>
  6. <td>Approved</td>
  7. </tr>
  8. ...

Поддерживаемая разметка таблиц

Список поддерживаемых элементов HTML и указания для их использования.

Тег Описание
<table> Вставляет элемент для отображения данных в табличной форме.
<thead> Элемент контейнера предназначен для хранения одной или нескольких строк таблицы. (<tr>) Озаглавливает колонки таблицы.
<tbody> Элемент контейнера для создания строк в теле таблицы (<tr>)
<tr> Элемент контейнера для настройки ячеек таблицы. (<td> or <th>) Создает отдельную строку.
<td> Ячейка таблицы по умолчанию
<th> Специальная ячейка для названий столбцов таблицы (или строк — зависит от расположения).
Следует использовать с кодом <thead>
<caption> Краткое описание в таблице, которое очень удобно для мобильных устройств.
  1. <table>
  2. <caption>...</caption>
  3. <thead>
  4. <tr>
  5. <th>...</th>
  6. <th>...</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>...</td>
  12. <td>...</td>
  13. </tr>
  14. </tbody>
  15. </table>

Стили по умолчанию

Отдельные элементы формы имеют свой стиль, но без обязательного класса <form> или каких-либо особых изменений в разметке. В результате получаются упорядоченный, выровненный по левому краю текст в элементах формы.

Условные обозначения



Это пример вспомогательного текста.


  1. <form>
  2. <legend>Условные обозначения</legend>
  3. <label>Название</label>
  4. <input type="text" placeholder="Type something…">
  5. <span class="help-block">Это пример вспомогательного текста.</span>
  6. <label class="checkbox">
  7. <input type="checkbox"> Проверить
  8. </label>
  9. <button type="submit" class="btn">Подтвердить</button>
  10. </form>

Дополнительные шаблоны

В Bootstrap есть три дополнительных шаблона форм для общего пользования.

Форма поиска

Добавьте .form-search в форму и .search-query в элемент <input> для построения закругленной рамки.

  1. <form class="form-search">
  2. <input type="text" class="input-medium search-query">
  3. <button type="submit" class="btn">Search</button>
  4. </form>

Линейная форма

Добавьте класс .form-inline для компактного расположения выровненного по левому краю текста и строк.


  1. <form class="form-inline">
  2. <input type="text" class="input-small" placeholder="Email">
  3. <input type="password" class="input-small" placeholder="Password">
  4. <label class="checkbox">
  5. <input type="checkbox"> Запомнить
  6. </label>
  7. <button type="submit" class="btn">Отправить</button>
  8. </form>

Горизонтальная форма

Выровняйте текст по правой стороне, ставя обтекание слева, чтобы он находился на одной линии с элементами формы:

  • Добавьте .form-horizontal в форму
  • Добавьте текст и элементы управления внутрь .control-group
  • Добавьте .control-label в текст
  • Добавьте любой подходящий элемент управления .controls для точной настройки
Условные обозначения

  1. <form class="form-horizontal">
  2. <div class="control-group">
  3. <label class="control-label" for="inputEmail">Email</label>
  4. <div class="controls">
  5. <input type="text" id="inputEmail" placeholder="Email">
  6. </div>
  7. </div>
  8. <div class="control-group">
  9. <label class="control-label" for="inputPassword">Password</label>
  10. <div class="controls">
  11. <input type="password" id="inputPassword" placeholder="Password">
  12. </div>
  13. </div>
  14. <div class="control-group">
  15. <div class="controls">
  16. <label class="checkbox">
  17. <input type="checkbox"> Remember me
  18. </label>
  19. <button type="submit" class="btn">Sign in</button>
  20. </div>
  21. </div>
  22. </form>

Поддерживаемые элементы формы

Примеры стандартных поддерживаемых элементов формы.

Поле ввода

Самый простой элемент формы с текстовыми полями ввода. Поддерживает все типы HTML5: текст, пароль, text, password, время и дата, региональные настройки времени и даты, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, номер телефона и цвет.

Всякий раз обязательно используйте нужный тип type.


  1. <input type="text" placeholder="Text input">

Многострочный текст

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


  1. <textarea rows="3"></textarea>

Флажки и радио-кнопки

Элементы «флажки» (чек-боксы) используются для выбора одной или нескольких опций в списке, а радио-кнопки предназначены только для выбора одной опции из нескольких.

По умолчанию (вертикально)




  1. <label class="checkbox">
  2. <input type="checkbox" value="">
  3. А вот вам опция номер один - очень крутая штука.
  4. </label>
  5.  
  6. <label class="radio">
  7. <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  8. А вот вам опция номер один - очень крутая штука.
  9. </label>
  10. <label class="radio">
  11. <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  12. Опция два - это нечто другое. Выбрав ее, отменяете первую.
  13. </label>

Флажки в одной строке

Добавьте класс .inline к нескольким флажкам или радио-кнопкам, чтобы разместить их на одной линии.




  1. <label class="checkbox inline">
  2. <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
  3. </label>
  4. <label class="checkbox inline">
  5. <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
  6. </label>
  7. <label class="checkbox inline">
  8. <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
  9. </label>

Список выбора

Используйте опцию по умолчанию или укажите multiple="multiple", чтобы отобразить сразу несколько опций.




  1. <select>
  2. <option>1</option>
  3. <option>2</option>
  4. <option>3</option>
  5. <option>4</option>
  6. <option>5</option>
  7. </select>
  8.  
  9. <select multiple="multiple">
  10. <option>1</option>
  11. <option>2</option>
  12. <option>3</option>
  13. <option>4</option>
  14. <option>5</option>
  15. </select>

Дополнения к формам

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

Пред-идущие и Пост-идущие элементы

Добавьте текст или кнопки до или после поля текстового ввода. Обратите внимание, что элементы select при этом не поддерживаются.

Настройки по умолчанию

Добавьте один или два класса внутрь тегов .add-on и input, чтобы отобразить текст до или после поля ввода.

@

.00

  1. <div class="input-prepend">
  2. <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
  3. </div>
  4. <div class="input-append">
  5. <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
  6. </div>

Комбинирование

Используйте оба класса и дважды — .add-on, чтобы отобразить текст впереди или позади.

$ .00

  1. <div class="input-prepend input-append">
  2. <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
  3. </div>

Кнопки вместо текста

Используйте с текстом вместо <span> класс .btn, чтобы к вводу подключить кнопку.

  1. <div class="input-append">
  2. <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
  3. </div>
  4.  
  5. <div class="input-append">
  6. <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
  7. </div>

Форма поиска

  1. <form class="form-search">
  2. <div class="input-append">
  3. <input type="text" class="span2 search-query">
  4. <button type="submit" class="btn">Search</button>
  5. </div>
  6. <div class="input-prepend">
  7. <button type="submit" class="btn">Search</button>
  8. <input type="text" class="span2 search-query">
  9. </div>
  10. </form>

Настройка размеров

Используйте соответствующие классы, такие как .input-large или согласуйте ваше поле ввода с сеткой размеров, используя классы .span*.

Взаимосвязанные размеры






  1. <input class="input-mini" type="text" placeholder=".input-mini">
  2. <input class="input-small" type="text" placeholder=".input-small">
  3. <input class="input-medium" type="text" placeholder=".input-medium">
  4. <input class="input-large" type="text" placeholder=".input-large">
  5. <input class="input-xlarge" type="text" placeholder=".input-xlarge">
  6. <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Внимание! В дальнейших версиях мы изменим использование этих взаимосвязанных классов ввода, чтобы согласовать размер кнопок. Например, .input-large будет увеличивать отступ и размер шрифта в поле ввода.

Сетка размеров

Используйте от .span1 до .span12, чтобы задать одинаковые размеры в поле ввода и в сетке столбцов.






  1. <input class="span1" type="text" placeholder=".span1">
  2. <input class="span2" type="text" placeholder=".span2">
  3. <input class="span3" type="text" placeholder=".span3">
  4. <select class="span1">
  5. ...
  6. </select>
  7. <select class="span2">
  8. ...
  9. </select>
  10. <select class="span3">
  11. ...
  12. </select>

Для множественного ввода используйте класс модификатора .controls-row для корректного отображения пробелов. Это позволяет убрать лишние пробелы при обтекании, настраивает соответствующие поля и прозрачность обтекания.

  1. <div class="controls">
  2. <input class="span5" type="text" placeholder=".span5">
  3. </div>
  4. <div class="controls controls-row">
  5. <input class="span4" type="text" placeholder=".span4">
  6. <input class="span1" type="text" placeholder=".span1">
  7. </div>
  8. ...

Неформатируемые поля

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

Some value here
  1. <span class="input-xlarge uneditable-input">Some value here</span>

Формы для действий

Добавьте в конец формы действие (кнопки). Расположенные внутри класса .form-horizontal, кнопки автоматически получат отступ, соответствующий форме.

  1. <div class="form-actions">
  2. <button type="submit" class="btn btn-primary">Сохранить изменения</button>
  3. <button type="button" class="btn">Отмена</button>
  4. </div>

Вспомогательный текст

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

Строчный вспомогательный текст

Строчный вспомогательный текст
  1. <input type="text"><span class="help-inline">Inline help text</span>

Блоковый вспомогательный текст


Слишком большой блок вспомогательного текста переносится на новую строку и может продолжиться более, чем на одну строку.
  1. <input type="text"><span class="help-block">Слишком большой блок вспомогательного текста переносится на новую строку и может продолжиться более, чем на одну строку.</span>

Настройки состояния элементов формы

Обеспечивают обратную связь с пользователями или посетителями.

Фокус ввода

Мы удалили стили по умолчанию outline в настройках некоторых форм и поставили на их место box-shadow для фокуса :focus.


  1. <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Отключенное состояние

Добавьте атрибут disabled в поле ввода для того, чтобы предотвратить ввод. Внешний вид поля при этом немного изменится.


  1. <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Состояния валидации

В Bootstrap имеются стили валидации для ошибок, предупреждений, информации и успешных действий. Для использования добавьте подходящий класс к ближайшему классу .control-group.


Что-то идет не так


Пожалуйста, исправьте ошибку


Имя пользователя


Урааа!

  1. <div class="control-group warning">
  2. <label class="control-label" for="inputWarning">Предупреждение</label>
  3. <div class="controls">
  4. <input type="text" id="inputWarning">
  5. <span class="help-inline">Что-то идет не так</span>
  6. </div>
  7. </div>
  8. <div class="control-group error">
  9. <label class="control-label" for="inputError">Ошибка</label>
  10. <div class="controls">
  11. <input type="text" id="inputError">
  12. <span class="help-inline">Пожалуйста, исправьте ошибку</span>
  13. </div>
  14. </div>
  15. <div class="control-group success">
  16. <label class="control-label" for="inputSuccess">Выполнено успешно</label>
  17. <div class="controls">
  18. <input type="text" id="inputSuccess">
  19. <span class="help-inline">Урааа!</span>
  20. </div>
  21. </div>

Кнопки по умолчанию

Стили кнопок могут применяться к любым элементам посредством класса .btn. Однако, обычно применяйте их только к элементам <a> and <button> для лучшего отображения.

Кнопка class=»» Описание
btn Стандартная серая кнопка с градиентом
btn btn-primary Обеспечивает дополнительную визуальную ширину и указывает на первичное действие в наборе кнопок
btn btn-info Используется как альтернатива стилям по умолчанию
btn btn-success Указывает на успешное или положительное действие
btn btn-warning Указывает на то, что действие должно совершаться с предусмотрительностью
btn btn-danger Указывает на опасное или потенциально негативное действие
btn btn-inverse Чередующиеся темно-серые кнопки, не связанные с определенным действием
btn btn-link Отмена выделения кнопки. Кнопка получает вид ссылки, сохраняя при этом свои функции

Кросс-браузерная совместимость

Поскольку IE9 не подгоняет градиент заднего плана к закругленным углам, мы его удалили. Кроме того, IE9 искажает элементы кнопки отключения button отображая текст в сером цвете с ужасной тенью, которую мы не можем исправить.

Размеры кнопок

Желаете кнопки побольше или поменьше? Добавьте класс .btn-large, .btn-small, или .btn-mini для установки дополнительных размеров.

  1. <p>
  2. <button class="btn btn-large btn-primary" type="button">Большая кнопка</button>
  3. <button class="btn btn-large" type="button">Большая кнопка</button>
  4. </p>
  5. <p>
  6. <button class="btn btn-primary" type="button">Кнопка по умолчанию</button>
  7. <button class="btn" type="button">Кнопка по умолчанию</button>
  8. </p>
  9. <p>
  10. <button class="btn btn-small btn-primary" type="button">Маленькая кнопка</button>
  11. <button class="btn btn-small" type="button">Маленькая кнопка</button>
  12. </p>
  13. <p>
  14. <button class="btn btn-mini btn-primary" type="button">Мини-кнопка</button>
  15. <button class="btn btn-mini" type="button">Мини-кнопка</button>
  16. </p>

Создайте вложенный блок кнопок, который размещается по всей ширине родительских кнопок. Для этого добавьте класс .btn-block.


  1. <button class="btn btn-large btn-block btn-primary" type="button">Вложенная кнопка</button>
  2. <button class="btn btn-large btn-block" type="button">Вложенная кнопка</button>

Отключенное состояние

Отмените нажатие кнопок, уменьшив их четкость на 50%.

Анкерный элемент

Добавьте класс .disabled к кнопкам <a>.

Исходная ссылка Ссылка

  1. <a href="#" class="btn btn-large btn-primary disabled">Исходная ссылка</a>
  2. <a href="#" class="btn btn-large disabled">Ссылка</a>

Внимание!
Мы используем класс .disabled как дополнение к классу, подобно общему классу .active, так что никакой префикс не требуется. Также этот класс по сути только для внешнего вида — для того, чтобы сделать ссылку неактивной, используйте JavaScript.

Элемент кнопки

Добавьте атрибут disabled к кнопкам <button>.

  1. <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Главная кнопка</button>
  2. <button type="button" class="btn btn-large" disabled>Кнопка</button>

Один класс, множественные теги

Используйте класс .btn в элементах <a>, <button> или <input>.

Ссылка
  1. <a class="btn" href="">Ссылка</a>
  2. <button class="btn" type="submit">Кнопка</button>
  3. <input class="btn" type="button" value="Input">
  4. <input class="btn" type="submit" value="Submit">

Для наилучшей совместимости с браузерами, используйте элементы, подходящие для всех браузеров. Используйте input как кнопку <input type="submit">.

Добавьте классы к элементу <img>, чтобы легко настроить стили изображений.

  1. <img src="..." class="img-rounded">
  2. <img src="..." class="img-circle">
  3. <img src="..." class="img-polaroid">

Внимание! .img-rounded и .img-circle не работают в IE7-8 из-за недостаточной поддержки border-radius.

Иконки glyphs

140 иконок в едином файле, по умолчанию в темно-сером и белом цвете. Предоставлены Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Авторство Glyphicons

Набор иконок Glyphicons Halflings не является бесплатным, но по соглашению между Bootstrap и Glyphicons разработчики имеют возможность использовать его без дополнительной платы. В знак благодарности мы просим вас разместить ссылку на оригинал проекта Glyphicons.


Как использовать

Все иконки требуют использования тега <i> с уникальным классом и префиксом icon-. Для использования поместите код с примера ниже в нужное место:

  1. <i class="icon-search"></i>

Также иконки могут использоваться в белом цвете (в виде инверсии), и доступны при дополнительном классе. Этот класс применяется при наведении курсора, активных состояний, навигации и раскрывающихся ссылок.

  1. <i class="icon-search icon-white"></i>

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i> для корректного расположения элемента.


Примеры иконок

Используйте иконки для кнопок, пунктов меню, навигации или присоедините к формам ввода.

Кнопки

Группа кнопок в меню

  1. <div class="btn-toolbar">
  2. <div class="btn-group">
  3.  
  4. <a class="btn" href="#"><i class="icon-align-left"></i></a>
  5. <a class="btn" href="#"><i class="icon-align-center"></i></a>
  6. <a class="btn" href="#"><i class="icon-align-right"></i></a>
  7. <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  8. </div>
  9. </div>
Кнопки с выпадающим списком
  1. <div class="btn-group">
  2. <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> Пользователь</a>
  3. <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  4. <ul class="dropdown-menu">
  5. <li><a href="#"><i class="icon-pencil"></i> Редактировать</a></li>
  6. <li><a href="#"><i class="icon-trash"></i> Удалить</a></li>
  7. <li><a href="#"><i class="icon-ban-circle"></i> Запретить</a></li>
  8. <li class="divider"></li>
  9. <li><a href="#"><i class="i"></i> Назначить администратором</a></li>
  10. </ul>
  11. </div>
Маленькая кнопка
  1. <a class="btn btn-small" href="#"><i class="icon-star"></i></a>

Навигация

  1. <ul class="nav nav-list">
  2. <li class="active"><a href="#"><i class="icon-home icon-white"></i> Домой</a></li>
  3. <li><a href="#"><i class="icon-book"></i> Библиотека</a></li>
  4. <li><a href="#"><i class="icon-pencil"></i> Приложения</a></li>
  5. <li><a href="#"><i class="i"></i> Дополнительно</a></li>
  6. </ul>

Поля формы

  1. <div class="control-group">
  2. <label class="control-label" for="inputIcon">Адрес электронной почты</label>
  3. <div class="controls">
  4. <div class="input-prepend">
  5. <span class="add-on"><i class="icon-envelope"></i></span>
  6. <input class="span2" id="inputIcon" type="text">
  7. </div>
  8. </div>
  9. </div>

06.12.2016