Начальная загрузка

Базовый CSS

Фундаментальные элементы HTML, стилизованные и улучшенные с помощью расширяемых классов.

Типография

Заголовки

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

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

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

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

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

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

Копия тела

Глобальное значение Bootstrap по умолчанию font-size— 14px , с 20px . Это относится к и всем пунктам. Кроме того, (абзацы) получают нижнее поле, равное половине их высоты строки (по умолчанию 10 пикселей).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>

Курсив

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

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

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

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

Классы выравнивания

Легко выравнивайте текст по компонентам с помощью классов выравнивания текста.

Текст с выравниванием по левому краю.

Текст с выравниванием по центру.

Выровненный по правому краю текст.

  1. <p class = "text-left" > Текст с выравниванием по левому краю. </p> 
  2. <p class = "text-center" > Выровненный по центру текст. </p> 
  3. <p class = "text-right" > Выровненный по правому краю текст. </p>

Классы акцента

Передайте смысл с помощью цвета с помощью нескольких вспомогательных классов акцента.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Энейский 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атрибут.

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

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

<abbr class="initialism">

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

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

<abbr title = "Язык гипертекстовой разметки" class = "initialism" > HTML </abbr>

Адреса

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

<address>

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 Тел
.: (123) 456-7890
Полное имя
[email protected] 
  1. <адрес>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Фолсом Авеню, Люкс 600 <br>
  4.   Сан-Франциско, Калифорния 94107 <br>
  5.   <abbr title = "Телефон" > Телефон : </abbr> (123) 456-7890 
  6. </адрес>
  7.  
  8. <адрес>
  9.   <strong> Полное имя </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </адрес>

Цитаты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кто-то известный в Source Title 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </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
  1. <ул>
  2.   <li> ... </li>
  3. </ul>

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

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Целое число слов и масса
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Энеан сит амет эрат нунк
  8. Eget porttitor lorem
  1. <ол>
  2.   <li> ... </li>
  3. </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
  1. <ul class = "без стиля" > 
  2.   <li> ... </li>
  3. </ul>

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

Поместите все элементы списка в одну строку с inline-blockнебольшим отступом.

  • Лорем ипсум
  • Фазеллус якулис
  • Нулла волютпат
  1. <ul class = "встроенный" > 
  2.   <li> ... </li>
  3. </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. 
  1. <дл>
  2.   <дт> ... </дт>
  3.   <дд> ... </дд>
  4. </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. 
  1. <dl class = "dl-горизонтальный" > 
  2.   <дт> ... </дт>
  3.   <дд> ... </дд>
  4. </dl>

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

Код

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

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

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

Базовый блок

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

<p>Пример текста здесь...</p>
  1. <пред>
  2.   <p>Образец текста здесь...</p>
  3. </pre>

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

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

Столы

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

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

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

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

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

.table-striped

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

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

.table-bordered

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

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

.table-hover

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

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

.table-condensed

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

# Имя Фамилия Имя пользователя
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри Птица @твиттер 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </таблица>

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

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

Учебный класс Описание
.success Указывает на успешное или положительное действие.
.error Указывает на опасное или потенциально негативное действие.
.warning Указывает на предупреждение, которое может потребовать внимания.
.info Используется как альтернатива стилям по умолчанию.
# Товар Оплата принята Статус
1 ТБ - Ежемесячно 04.01.2012 Одобренный
2 ТБ - Ежемесячно 04.02.2012 Отклоненный
3 ТБ - Ежемесячно 04.03.2012 В ожидании
4 ТБ - Ежемесячно 04.04.2012 Позвоните, чтобы подтвердить 
  1. ...
  2.   < класс тр = "успех" >
  3.     <td> 1 < /td>
  4.     <td>ТБ – Ежемесячно</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Одобрено</ td >
  7.   </ тр >
  8. ...

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

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

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

Формы

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

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

Легенда Пример текста справки на уровне блока здесь. 
  1. <форма>
  2.   <набор полей>
  3.     <легенда> Легенда </легенда>
  4.     <label> Имя ярлыка </label>
  5.     <input type = "text" placeholder = "Введите что-нибудь..." >  
  6.     <span class = "help-block" > Пример текста справки на уровне блока здесь. </span> 
  7.     < класс метки = "флажок" > 
  8.       <input type = "checkbox" > Проверить меня 
  9.     </метка>
  10.     <button type = "submit" class = "btn" > Отправить </button>  
  11.   </поля>
  12. </форма>

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

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

Форма поиска

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

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

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

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

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

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

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

  • Добавить .form-horizontalв форму
  • Оберните этикетки и элементы управления в.control-group
  • Добавить .control-labelна этикетку
  • Оберните все связанные элементы управления .controlsдля правильного выравнивания
  1. < класс формы = "форма-горизонтальная" > 
  2.   <div класс = "контрольная группа" > 
  3.     <label class = "control-label" for = "inputEmail" > Электронная почта </label>  
  4.     <div класс = "элементы управления" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Электронная почта" >   
  6.     </div>
  7.   </div>
  8.   <div класс = "контрольная группа" > 
  9.     <label class = "control-label" for = "inputPassword" > Пароль </label>  
  10.     <div класс = "элементы управления" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div класс = "контрольная группа" > 
  15.     <div класс = "элементы управления" > 
  16.       < класс метки = "флажок" > 
  17.         <input type = "checkbox" > Запомнить меня 
  18.       </метка>
  19.       <button type = "submit" class = "btn" > Войти </button>  
  20.     </div>
  21.   </div>
  22. </форма>

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

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

Входы

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

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

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

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

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

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

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

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

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


  1. < класс метки = "флажок" > 
  2.   < тип ввода = "флажок" значение = "" >  
  3.   Первый вариант — это и то — не забудьте указать, почему это здорово
  4. </метка>
  5.  
  6. < класс метки = "радио" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" отмечен >     
  8.   Первый вариант — это и то — не забудьте указать, почему это здорово
  9. </метка>
  10. < класс метки = "радио" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Второй вариант может быть чем-то другим, и его выбор отменяет выбор первого варианта.
  13. </метка>

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

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

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

Выбирает

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


  1. <выбрать>
  2.   <опция> 1 </опция>
  3.   <опция> 2 </опция>
  4.   <опция> 3 </опция>
  5.   <опция> 4 </опция>
  6.   <опция> 5 </опция>
  7. </выбрать>
  8.  
  9. <выбрать несколько = "несколько" > 
  10.   <опция> 1 </опция>
  11.   <опция> 2 </опция>
  12.   <опция> 3 </опция>
  13.   <опция> 4 </опция>
  14.   <опция> 5 </опция>
  15. </выбрать>

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

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

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

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

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

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

@

.00 
  1. <div класс = "ввод-препенди" > 
  2.   <span class = "надстройка" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
  4. </div>
  5. <div класс = "ввод-дополнение" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "дополнение" > .00 </span> 
  8. </div>

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

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

$ .00 
  1. <div class = "ввод-дополнение ввод-добавление" > 
  2.   <span class = "дополнение" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "дополнение" > .00 </span> 
  5. </div>

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

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

  1. <div класс = "ввод-дополнение" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Вперёд! </кнопка>  
  4. </div>
  1. <div класс = "ввод-дополнение" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Поиск </button>  
  4.   <button class = "btn" type = "button" > Параметры </button>  
  5. </div>

Выпадающие списки кнопок

  1. <div класс = "ввод-дополнение" > 
  2.   <input class = "span2" id = "appenedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Действие
  6.       <span class = "каретка" ></span> 
  7.     </кнопка>
  8.     <ul class = "раскрывающееся меню" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div класс = "ввод-препенди" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Действие
  5.       <span class = "каретка" ></span> 
  6.     </кнопка>
  7.     <ul class = "раскрывающееся меню" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "ввод-дополнение ввод-добавление" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Действие
  5.       <span class = "каретка" ></span> 
  6.     </кнопка>
  7.     <ul class = "раскрывающееся меню" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Действие
  15.       <span class = "каретка" ></span> 
  16.     </кнопка>
  17.     <ul class = "раскрывающееся меню" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Сегментированные выпадающие группы

  1. <форма>
  2.   <div класс = "ввод-препенди" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < тип ввода = "текст" > 
  5.   </div>
  6.   <div класс = "ввод-дополнение" > 
  7.     < тип ввода = "текст" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </форма>

Форма поиска

  1. < класс формы = "форма-поиск" > 
  2.   <div класс = "ввод-дополнение" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Поиск </button>  
  5.   </div>
  6.   <div класс = "ввод-препенди" > 
  7.     <button type = "submit" class = "btn" > Поиск </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </форма>

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

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

Входы уровня блока

Заставьте любой элемент <input>или <textarea>вести себя как элемент блочного уровня.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

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

  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увеличится отступ и размер шрифта ввода.

Размер сетки

Используйте .span1to .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. <выберите класс = "span1" > 
  5.   ...
  6. </выбрать>
  7. <выберите класс = "span2" > 
  8.   ...
  9. </выбрать>
  10. <выберите класс = "span3" > 
  11.   ...
  12. </выбрать>

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

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

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

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

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

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

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

  1. <div class = "форма-действия" > 
  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" > Встроенный текст справки </span>

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

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

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

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

Фокус ввода

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

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

Неверные входные данные

Ввод стилей с помощью функций браузера по умолчанию с расширением :invalid. Укажите type, добавьте requiredатрибут, если поле не является необязательным, и (если применимо) укажите pattern.

Это недоступно в версиях Internet Explorer 7-9 из-за отсутствия поддержки псевдоселекторов CSS.

  1. <input class = "span3" type = "email" required >

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

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

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

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

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

Что-то могло пойти не так
Пожалуйста, исправьте ошибку
Имя пользователя занято
Ууууу! 
  1. <div class = "предупреждение контрольной группы" > 
  2.   <label class = "control-label" for = "inputWarning" > Ввод с предупреждением </label>  
  3.   <div класс = "элементы управления" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Возможно, что- то пошло не так </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "ошибка контрольной группы" > 
  10.   <label class = "control-label" for = "inputError" > Ввод с ошибкой </label>  
  11.   <div класс = "элементы управления" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Исправьте ошибку </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "информация о контрольной группе" > 
  18.   <label class = "control-label" for = "inputInfo" > Ввод с информацией </label>  
  19.   <div класс = "элементы управления" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Имя пользователя уже занято </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "успех контрольной группы" > 
  26.   <label class = "control-label" for = "inputSuccess" > Ввод выполнен успешно </label>  
  27.   <div класс = "элементы управления" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Ура! </span> 
  30.   </div>
  31. </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для дополнительных размеров.

  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>элементу, чтобы легко стилизовать изображения в любом проекте.

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

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

Иконки от Glyphicons

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопки

Группа кнопок на панели инструментов кнопок
  1. <div класс = "кнопка-панель инструментов" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </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 = "раскрывающееся меню" > 
  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 класс = "разделитель" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Сделать администратором </a></li>  
  10.   </ul>
  11. </div>
Размеры кнопок
Звезда Звезда Звезда 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Звездочка </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Звездочка </a>   
  3. <a class = "btn btn-mini" 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 класс = "контрольная группа" > 
  2.   <label class = "control-label" for = "inputIcon" > Адрес электронной почты </label>  
  3.   <div класс = "элементы управления" > 
  4.     <div класс = "ввод-препенди" > 
  5.       <span class = "дополнение" ><i class = "иконка-конверт" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>