Заголовки

Все заголовки HTML <h1>доступны <h6>.

ч1. Заголовок 1

ч2. Заголовок 2

h3. Заголовок 3

h4. Заголовок 4

h5. Заголовок 5

h6. Заголовок 6

Копия тела

Глобальное значение Bootstrap по умолчанию font-size— 14px , с 20px . Это относится к и всем параграфам. Кроме того, (абзацы) получают нижнее поле, равное половине высоты строки (по умолчанию 9 пикселей).line-height<body><p>

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.

Меценат 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.

<п> ... </п>

Основной текст

Выделите абзац, добавив .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "ведущий" > ... </p>

Создано с меньшими затратами

Типографская шкала основана на двух МЕНЬШЕ переменных в variable.less : @baseFontSizeи @baseLineHeight. Первый — это базовый размер шрифта, используемый повсюду, а второй — базовая высота строки. Мы используем эти переменные и некоторые простые математические операции для создания полей, отступов и высоты строки всего нашего типа и многого другого. Настройте их, и Bootstrap адаптируется.

Акцент

Используйте теги акцента HTML по умолчанию с облегченными стилями.

`<small>`

Чтобы уменьшить выделение строк или блоков текста, используйте маленький тег.

Эта строка текста должна рассматриваться как мелкий шрифт.

<p> <small> Эта строка текста должна рассматриваться как мелкий шрифт. </маленький> </p>

`<strong>`

Для выделения фрагмента текста важным

Следующий фрагмент текста выделен полужирным шрифтом .

<strong> отображается жирным шрифтом </strong>

`<em>`

Для выделения фрагмента текста ударением

Следующий фрагмент текста выделен курсивом .

<em> отображается курсивом </em>

Берегись! Не стесняйтесь использовать <b>и <i>в HTML5. <b>предназначен для выделения слов или фраз без дополнительной важности, в то время <i>как в основном для голоса, технических терминов и т. д.

Сокращения

Стилизованная реализация элемента HTML <abbr>для аббревиатур и акронимов для отображения расширенной версии при наведении. Аббревиатуры с titleатрибутом имеют светлую пунктирную нижнюю границу и вспомогательный курсор при наведении, предоставляя дополнительный контекст при наведении.

`<abbr>`

Для расширенного текста при долгом наведении на аббревиатуру включите titleатрибут.

Аббревиатура атрибута слова attr .

<abbr title = "атрибут" > атрибут </abbr>

`<abbr class="initialism">`

Добавьте .initialismк аббревиатуре немного меньший размер шрифта.

HTML — лучшее, что есть после нарезанного хлеба.

<abbr title = "attribute" class = "initialism" > attr </abbr>

Адреса

Представьте контактную информацию для ближайшего предка или всей совокупности работ.

`<address>`

Сохраните форматирование, завершив все строки символом <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 Тел
.: (123) 456-7890

Полное имя
[email protected]

<адрес>
  <strong> Twitter, Inc. </strong><br>
  795 Фолсом Авеню, Люкс 600 <br>
  Сан-Франциско, Калифорния 94107 <br>
  <abbr title = "Телефон" > Телефон : </abbr> (123) 456-7890 
</адрес>
 
<адрес>
  <strong> Полное имя </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</адрес>

Цитаты

Для цитирования блоков контента из другого источника в вашем документе.

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

Оберните <blockquote>любой HTML как цитату. Для прямых котировок мы рекомендуем расширение <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

<цитата>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее. </p>
</blockquote>

Параметры блокировки

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

Наименование источника

Добавьте <small>тег для идентификации источника. Оберните название исходной работы в <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.
Кто-то известный в Source Title

<цитата>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее. </p>
  <small> Кто-то известный <cite title = "Source Title" > Source Title </cite></small> 
</blockquote>

Альтернативные дисплеи

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.
Кто-то известный в Source Title

<blockquote class = "pull-right" > 
  ...
</blockquote>

Списки

Неупорядоченный

Список элементов, в которых порядок явно не имеет значения.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целое число слов и масса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Угревая сыпь
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан сит амет эрат нунк
Eget porttitor lorem

<ул>
  <li> ... </li>
</ul>

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

Список элементов, в которых порядок явно имеет значение.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целое число слов и масса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Энеан сит амет эрат нунк
Eget porttitor lorem

<ол>
  <li> ... </li>
</ol>

без стиля

Список элементов без list-styleзаполнения или с дополнительным левым отступом.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целое число слов и масса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Угревая сыпь
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан сит амет эрат нунк
Eget porttitor lorem

<ul class = "без стиля" > 
  <li> ... </li>
</ul>

Описание

Список терминов с соответствующими описаниями.

Списки описаний: Список описаний идеально подходит для определения терминов.
Юисмод: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Порта Малесуада: Etiam porta sem malesuada magna mollis euismod.

<дл>
  <дт> ... </дт>
  <дд> ... </дд>
</dl>

Горизонтальное описание

Поставьте термины и описания <dl>рядом друг с другом.

Списки описаний: Список описаний идеально подходит для определения терминов.
Юисмод: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Порта Малесуада: 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-горизонтальный" > 
  <дт> ... </дт>
  <дд> ... </дд>
</dl>

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

В соответствии

Оберните встроенные фрагменты кода с помощью <code>.

Например, <section>должен быть обернут как встроенный.

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

Базовый блок

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

<p>Пример текста здесь...</p>

<пред>
  <p>Образец текста здесь...</p>
</pre>

Берегись! Обязательно размещайте код внутри <pre>тегов как можно ближе к левому краю; он отобразит все вкладки.

При желании вы можете добавить .pre-scrollableкласс, который установит максимальную высоту 350 пикселей и предоставит полосу прокрутки по оси Y.

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

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

#	Имя	Фамилия	Имя пользователя
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри	птица	@твиттер

< класс таблицы = "таблица" > 
  …
</таблица>

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

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

`.table-striped`

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

#	Имя	Фамилия	Имя пользователя
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри	птица	@твиттер

< класс таблицы = "таблица полосатая таблица" > 
  …
</таблица>

`.table-bordered`

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

#	Имя	Фамилия	Имя пользователя
1	Отметка	Отто	@мдо
1	Отметка	Отто	@getbootstrap
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

< класс таблицы = "таблица с границей таблицы" > 
  …
</таблица>

`.table-hover`

Включите состояние наведения на строки таблицы в файле <tbody>.

#	Имя	Фамилия	Имя пользователя
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

< класс таблицы = "таблица при наведении курсора" > 
  …
</таблица>

`.table-condensed`

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

#	Имя	Фамилия	Имя пользователя
1	Отметка	Отто	@мдо
2	Джейкоб	Торнтон	@толстый
3	Ларри Птица		@твиттер

<table class = "table table-condensed" > 
  …
</таблица>

Необязательные классы строк

Используйте контекстные классы для окрашивания строк таблицы.

Учебный класс	Описание
`.success`	Указывает на успешное или положительное действие.
`.error`	Указывает на опасное или потенциально негативное действие.
`.info`	Используется как альтернатива стилям по умолчанию.

#	Товар	Оплата принята	Статус
1	ТБ - Ежемесячно	04.01.2012	Одобренный
2	ТБ - Ежемесячно	04.02.2012	Отклоненный
3	ТБ - Ежемесячно	04.03.2012	В ожидании

...
  < класс тр = "успех" >
    <td> 1 < /td>
    <td>ТБ – Ежемесячно</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Одобрено</ td >
  </ тр >
...

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

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

Ярлык	Описание
`<table>`	Элемент-обертка для отображения данных в табличном формате
`<thead>`	Элемент-контейнер для строк заголовка таблицы ( `<tr>`) для маркировки столбцов таблицы
`<tbody>`	Элемент-контейнер для строк таблицы ( `<tr>`) в теле таблицы
`<tr>`	Элемент-контейнер для набора ячеек таблицы ( `<td>`или `<th>`), который отображается в одной строке.
`<td>`	Ячейка таблицы по умолчанию
`<th>`	Специальная ячейка таблицы для меток столбцов (или строк, в зависимости от области действия и размещения) Должны использоваться внутри`<thead>`
`<caption>`	Описание или краткая информация о том, что содержится в таблице, особенно полезно для программ чтения с экрана.

<таблица>
  <заголовок> ... </заголовок>
  <thead>
    <tr>
      <й> ... </й>
      <й> ... </й>
    </tr>
  </thead>
  <тело>
    <tr>
      <тд> ... </тд>
      <тд> ... </тд>
    </tr>
  </tbody>
</таблица>

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

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

<форма>
  <легенда> Легенда </легенда>
  <label> Имя ярлыка </label>
  <input type = "text" placeholder = "Введите что-нибудь..." >  
  <span class = "help-block" > Пример текста справки на уровне блока здесь. </span> 
  < класс метки = "флажок" > 
    <input type = "checkbox" > Проверить меня 
  </метка>
  <button type = "submit" class = "btn" > Отправить </button>  
</форма>

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

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

Форма поиска

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

< класс формы = "форма-поиск" > 
  <input type = "text" class = "input-media search-query" >  
  <button type = "submit" class = "btn" > Поиск </button>  
</форма>

Встроенная форма

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

< класс формы = "встроенная форма" > 
  <input type = "text" class = "input-small" placeholder = "Электронная почта" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  < класс метки = "флажок" > 
    <input type = "checkbox" > Запомнить меня 
  </метка>
  <button type = "submit" class = "btn" > Войти </button>  
</форма>

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

Выровняйте метки по правому краю и переместите их влево, чтобы они отображались в той же строке, что и элементы управления. Требуется максимальное количество изменений разметки по сравнению с формой по умолчанию:

Добавить .form-horizontalв форму
Оберните этикетки и элементы управления в.control-group
Добавить .control-labelна этикетку
Оберните все связанные элементы управления .controlsдля правильного выравнивания

< класс формы = "форма-горизонтальная" > 
  <div класс = "контрольная группа" > 
    <label class = "control-label" for = "inputEmail" > Электронная почта </label>  
    <div класс = "элементы управления" > 
      <input type = "text" id = "inputEmail" placeholder = "Электронная почта" >   
    </div>
  </div>
  <div класс = "контрольная группа" > 
    <label class = "control-label" for = "inputPassword" > Пароль </label>  
    <div класс = "элементы управления" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div класс = "контрольная группа" > 
    <div класс = "элементы управления" > 
      < класс метки = "флажок" > 
        <input type = "checkbox" > Запомнить меня 
      </метка>
      <button type = "submit" class = "btn" > Войти </button>  
    </div>
  </div>
</форма>

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

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

Входы

Наиболее распространенное управление формой, текстовые поля ввода. Включает поддержку всех типов HTML5: текст, пароль, дата и время, дата и время, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, телефон и цвет.

Требует использования указанного typeво все времена.

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

Текстовое поле

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

< строки текстового поля = "3" ></текстовое поле>

Флажки и радио

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

По умолчанию (с накоплением)

< класс метки = "флажок" > 
  < тип ввода = "флажок" значение = "" >  
  Первый вариант — это и то — не забудьте указать, почему это здорово
</метка>
 
< класс метки = "радио" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" отмечен >     
  Первый вариант — это и то — не забудьте указать, почему это здорово
</метка>
< класс метки = "радио" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Второй вариант может быть чем-то другим, и его выбор отменяет выбор первого варианта.
</метка>

Встроенные флажки

Добавьте .inlineкласс в ряд флажков или переключателей, чтобы элементы управления отображались в той же строке.

<label class = "встроенный флажок" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</метка>
<label class = "встроенный флажок" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</метка>
<label class = "встроенный флажок" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</метка>

Выбирает

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

<выбрать>
  <опция> 1 </опция>
  <опция> 2 </опция>
  <опция> 3 </опция>
  <опция> 4 </опция>
  <опция> 5 </опция>
</выбрать>
 
<выбрать несколько = "несколько" > 
  <опция> 1 </опция>
  <опция> 2 </опция>
  <опция> 3 </опция>
  <опция> 4 </опция>
  <опция> 5 </опция>
</выбрать>

Расширение элементов управления формой

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

Предварительные и добавленные входные данные

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

Параметры по умолчанию

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

<div класс = "ввод-препенди" > 
  <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" placeholder = "Username" >      
</div>
<div класс = "ввод-дополнение" > 
  <input class = "span2" id = "appendedInput " size = "16" type = "text" ><span class = "add-on" > .00 </span>     
</div>

Комбинированный

Используйте оба класса и два экземпляра .add-onдля добавления и добавления входных данных.

<div class = "ввод-дополнение ввод-добавление" > 
  <span class = "надстройка" > $ </span><input class = "span2" id = "appendedPrependedInput " size = "16" type = "text" ><span class = "add-on" > .00 </span>      
</div>

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

Вместо <span>с текстом используйте a, .btnчтобы прикрепить кнопку (или две) к входу.

<div класс = "ввод-дополнение" > 
  <input class = "span2" id = "appenedInputButton " size = "16" type = "text" ><button class = "btn" type = "button" > Вперёд! </кнопка>      
</div>
 
<div класс = "ввод-дополнение" > 
  <input class = "span2" id = "appenedInputButtons " size = "16" type = "text" ><button class = "btn" type = "button" > Search </button><button class = "btn" type = "кнопка" > Параметры </button>        
</div>

Форма поиска

< класс формы = "форма-поиск" > 
  <div класс = "ввод-дополнение" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Поиск </button>  
  </div>
  <div класс = "ввод-препенди" > 
    <button type = "submit" class = "btn" > Поиск </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</форма>

Контроль размера

Используйте классы относительного размера, например, .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увеличится отступ и размер шрифта ввода.

Размер сетки

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

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<выберите класс = "span1" > 
  ...
</выбрать>
<выберите класс = "span2" > 
  ...
</выбрать>
<выберите класс = "span3" > 
  ...
</выбрать>

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

<div класс = "элементы управления" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "элементы управления-строка" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Нередактируемые входы

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

<span class = "input-xlarge uneditable-input" > Здесь какое- то значение </span>

Действия формы

Завершите форму группой действий (кнопок). При размещении внутри .form-horizontalкнопки автоматически смещаются в соответствии с элементами управления формы.

<div class = "форма-действия" > 
  <button type = "submit" class = "btn btn-primary" > Сохранить изменения </button>  
  <button type = "button" class = "btn" > Отмена </button>  
</div>

Текст справки

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

Встроенная справка

<input type = "text" ><span class = "help-inline" > Встроенный текст справки </span>

Заблокировать помощь

<input type = "text" ><span class = "help-block" > Более длинный блок текста справки, который переходит на новую строку и может выходить за пределы одной строки. </span>

Состояние контроля формы

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

Фокус ввода

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

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Это сфокусировано..." >

Отключенные входы

Добавьте disabledатрибут к входу, чтобы предотвратить ввод данных пользователем и вызвать немного другой вид.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Здесь отключен ввод..." disabled >

Состояния проверки

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

<div class = "предупреждение контрольной группы" > 
  <label class = "control-label" for = "inputWarning" > Ввод с предупреждением </label>  
  <div класс = "элементы управления" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Возможно, что- то пошло не так </span> 
  </div>
</div>
<div class = "ошибка контрольной группы" > 
  <label class = "control-label" for = "inputError" > Ввод с ошибкой </label>  
  <div класс = "элементы управления" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Исправьте ошибку </span> 
  </div>
</div>
<div class = "успех контрольной группы" > 
  <label class = "control-label" for = "inputSuccess" > Ввод выполнен успешно </label>  
  <div класс = "элементы управления" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Ура! </span> 
  </div>
</div>

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

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

Кнопка	класс = ""	Описание
	`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для дополнительных размеров.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Большая кнопка </button>  
  <button class = "btn btn-large" type = "button" > Большая кнопка </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Кнопка по умолчанию </button>  
  <button class = "btn" type = "button" > Кнопка по умолчанию </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Маленькая кнопка </button>  
  <button class = "btn btn-small" type = "button" > Маленькая кнопка </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Мини-кнопка </button>  
  <button class = "btn btn-mini" type = "button" > Мини-кнопка </button>  
</p>

Создайте кнопки уровня блока — те, которые охватывают всю ширину родителя — путем добавления .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Кнопка уровня блока </button>  
<button class = "btn btn-large btn-block" type = "button" > Кнопка уровня блока </button>

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

Чтобы кнопки выглядели ненажимаемыми, уменьшите их яркость на 50%.

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

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

Основная ссылка Ссылка на сайт

<a href = "#" class = "btn btn-large btn-primary disabled" > Основная ссылка </a>  
<a href = "#" class = "btn btn-large disabled" > Ссылка </a>

Берегись! Здесь мы используем .disabledслужебный класс, аналогичный обычному .activeклассу, поэтому префикс не требуется.

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

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

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Основная кнопка </button>   
<button type = "button" class = "btn btn-large" disabled > Кнопка </button>

Один класс, несколько тегов

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

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

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

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

<img src = "..." class = "img-округленный" >  
<img src = "..." класс = "img-круг" >  
<img src = "..." class = "img-поляроид" >

Берегись! .img-roundedи .img-circleне работают в IE7-8 из-за отсутствия border-radiusподдержки.

Символы значков

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

рюмка
икона-музыка
иконка-поиск
икона-конверт
икона-сердце
значок-звезда
значок-звезда-пустой
значок-пользователь
фильм-икона
значок-й-большой
значок-й
значок-th-список
значок-ок
значок-удалить
значок-увеличение
значок-уменьшить
значок выключен
значок-сигнал
значок-винтик
значок-мусор
икона-дом
значок-файл
значок-время
икона-дорога
значок-скачать-alt
значок загрузки
значок загрузки
значок-входящие
значок-игра-круг
значок-повтор
значок-обновить
значок-список-альт
значок-замок
значок-флаг
значок-наушники
значок-громкость-выкл.
значок уменьшения громкости
значок-громкость-вверх
значок-qrcode
значок-штрих-код
значок-тег
значок-теги
иконопись
значок-закладка
иконопись
значок-камера
значок-шрифт
жирный значок
иконка-курсив
значок-текст-высота
значок-текст-ширина
значок выравнивания по левому краю
выравнивание значков по центру
значок-выравнивание-вправо
значок-выравнивание-выравнивание
список иконок
значок-отступ-влево
значок-отступ-вправо
значок-facetime-видео
икона-картина
значок-карандаш
значок-карта-маркер
значок-настроить
оттенок значка
значок редактирования
значок-доля
проверка иконок
значок-перемещение
значок шаг назад
значок-быстро-назад
значок-назад
иконка
значок-пауза
значок-стоп
значок вперед
значок-перемотка вперед
значок шаг вперед
значок-извлечь
значок-шеврон-слева
значок-шеврон-право
значок-плюс
значок-минус
значок-удалить-знак
значок-ок-знак
значок-вопросительный знак
значок-информация-знак
значок-скриншот
значок-удалить-круг
значок-ok-круг
значок бан круг
значок-стрелка-влево
значок-стрелка-вправо
значок-стрелка вверх
значок-стрелка вниз
icon-share-alt
значок-изменить размер-полный
icon-resize-small
значок-плюс
значок-минус
значок-звездочка
значок-восклицательный знак
икона-дар
икона
икона-огонь
значок с открытыми глазами
значок-глаз-закрыть
значок-предупреждающий знак
икона-самолет
значок-календарь
случайный значок
значок-комментарий
значок-магнит
значок-шеврон-вверх
значок-шеврон-вниз
значок-ретвит
значок-корзина
значок-папка-закрыть
значок-папка-открыть
значок изменения размера по вертикали
значок-изменить размер-горизонтальный
значок-жесткий диск
значок-рупор
колокольчик
значок-сертификат
значок-большой палец вверх
значок-палец вниз
значок-рука-право
значок-рука-левая
значок-поднятая рука
значок-вниз
значок-круг-стрелка-вправо
значок-круг-стрелка-влево
значок-круг-стрелка вверх
значок-круг-стрелка вниз
значок-глобус
гаечный ключ
иконки-задачи
значок-фильтр
икона-портфель
значок-полноэкранный

Атрибуция глификонов

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

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

Для всех значков требуется <i>тег с уникальным классом с префиксом icon-. Чтобы использовать, разместите следующий код где угодно:

<i class = "иконка-поиск" ></i>

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

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

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

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

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

Кнопки

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

<div класс = "кнопка-панель инструментов" > 
  <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 = "раскрывающееся меню" > 
    <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 = "разделитель" ></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 класс = "контрольная группа" > 
  <label class = "control-label" for = "inputIcon" > Адрес электронной почты </label>  
  <div класс = "элементы управления" > 
    <div класс = "ввод-препенди" > 
    <span class = "add-on" ><i class = "icon-envelope" ><i><span><input class = "span2" id = "inputIcon" type = "text" >     
  </div>
</div>

Типография

Заголовки

ч1. Заголовок 1

ч2. Заголовок 2

h3. Заголовок 3

h4. Заголовок 4

h5. Заголовок 5

h6. Заголовок 6

Копия тела

Основной текст

Создано с меньшими затратами

Акцент

<small>

<strong>

<em>

Сокращения

<abbr>

<abbr class="initialism">

Адреса

<address>

Цитаты

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

Параметры блокировки

Наименование источника

Альтернативные дисплеи

Списки

Неупорядоченный

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

без стиля

Описание

Горизонтальное описание

Код

В соответствии

Базовый блок

Столы

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

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

.table-striped

.table-bordered

.table-hover

.table-condensed

Необязательные классы строк

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

Формы

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

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

Форма поиска

Встроенная форма

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

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

Входы

Текстовое поле

Флажки и радио

По умолчанию (с накоплением)

Встроенные флажки

Выбирает

Расширение элементов управления формой

Предварительные и добавленные входные данные

Параметры по умолчанию

Комбинированный

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

Форма поиска

Контроль размера

Относительный размер

Размер сетки

Нередактируемые входы

Действия формы

Текст справки

Встроенная справка

Заблокировать помощь

Состояние контроля формы

Фокус ввода

Отключенные входы

Состояния проверки

Кнопки

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

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

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

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

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

`<small>`

`<strong>`

`<em>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`