Заголовки

Доступні всі заголовки <h1>HTML <h6>.

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

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

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

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

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

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

Основна копія

Глобальне значення Bootstrap за замовчуванням font-sizeстановить 14 пікселів із line-heightзначенням 20 пікселів . Це стосується <body>і всіх абзаців. Крім того, <p>(абзаци) отримують нижнє поле в половину висоти рядка (10 пікселів за замовчуванням).

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.

<p> ... </p>

Провідна основна копія

Виділіть абзац, додавши .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 адаптується.

Наголос

Використовуйте стандартні теги виділення HTML зі спрощеними стилями.

`<small>`

Щоб зменшити виділення рядків або блоків тексту, використовуйте малий тег.

Цей рядок тексту має розглядатися як дрібний шрифт.

<p> <small> Цей рядок тексту має розглядатися як дрібний шрифт. </small> </p>

жирний

Для виділення фрагмента тексту з більшою товщиною шрифту.

Наступний фрагмент тексту відображається жирним шрифтом .

<strong> відображено жирним шрифтом </strong>

Курсив

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

Наступний фрагмент тексту відображається як текст, виділений курсивом .

<em> відображається як текст, виділений курсивом </em>

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

Класи вирівнювання

Легко переставте текст до компонентів за допомогою класів вирівнювання тексту.

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

Текст, вирівняний по центру.

Текст вирівняний по правому краю.

<p class = "text-left" > Текст, вирівняний за лівим краєм. </p> 
<p class = "text-center" > Текст, вирівняний по центру. </p> 
<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.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Скорочення

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

`<abbr>`

Для розгорнутого тексту при тривалому наведенні на абревіатуру додайте titleатрибут.

Абревіатура слова атрибут - 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

Повне ім'я
[email protected]

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

Блок цитат

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

Цитата за замовчуванням

Оберніть <blockquote>будь-який HTML як цитату. Для прямих цитат ми рекомендуємо <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante. </p>
</blockquote>

Параметри цитат

Зміни стилю та змісту для простих варіацій стандартної цитати.

Називання джерела

Додайте <small>тег для визначення джерела. Увімкніть назву вихідної роботи в <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.
Хтось відомий у назві джерела

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante. </p>
  <small> Хтось відомий <cite title = "Source Title" > Джерело Назва </cite></small> 
</blockquote>

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

Використовуйте .pull-rightдля зміщеної цитати, вирівняної праворуч.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.
Хтось відомий у назві джерела

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

списки

Невпорядкований

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ціле число molesteie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li> ... </li>
</ul>

Замовив

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ціле число molesteie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

Нестилізований

Видаліть стандартні list-styleта ліві відступи для елементів списку (лише безпосередні дочірні елементи).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ціле число molesteie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

В лінію

Розмістіть усі елементи списку в одному рядку з inline-blockлегким відступом.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

опис

Список термінів із відповідними описами.

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

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

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

Поставте терміни та описи <dl>поруч.

Списки опису: Список описів ідеально підходить для визначення термінів.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Порта Малесуада: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Голови вгору!Горизонтальні списки описів скоротять терміни, які занадто довгі, щоб поміститися у виправлення лівого стовпця text-overflow. У вужчих вікнах перегляду вони зміняться на макет у вигляді стопки за замовчуванням.

В лінію

Оберніть вбудовані фрагменти коду за допомогою <code>.

Наприклад, <section>слід загорнути як вбудований.

Наприклад , <code > & lt ; розділ & gt ;</ code > має бути загорнутий як вбудований .

Базовий блок

Використовуйте <pre>для кількох рядків коду. Обов’язково зніміть будь-які кутові дужки в коді для правильного відтворення.

<p>Зразок тексту тут...</p>

<pre>
  <p>Зразок тексту тут...</p>
</pre>

Голови вгору!Обов’язково зберігайте код у <pre>тегах якомога ближче до лівого боку; він відобразить усі вкладки.

За бажанням ви можете додати .pre-scrollableклас, який встановить максимальну висоту 350 пікселів і надасть смугу прокрутки по осі Y.

Стилі за замовчуванням

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

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

<table class = "table" > 
  …
</table>

Факультативні заняття

Додайте будь-який із наведених нижче класів до .tableбазового класу.

`.table-striped`

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

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

<table class = "table table-striped" > 
  …
</table>

`.table-bordered`

Додайте до столу рамки та закруглені кути.

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
1	Марк	Отто	@getbootstrap
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class = "table table-bordered" > 
  …
</table>

`.table-hover`

Увімкніть стан наведення курсора на рядки таблиці в межах <tbody>.

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class = "table table-hover" > 
  …
</table>

`.table-condensed`

Робить таблиці компактнішими, розрізаючи заповнення комірок навпіл.

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Пташка Ларрі		@twitter

<table class = "table table-condensed" > 
  …
</table>

Факультативні класи рядків

Використовуйте контекстні класи для розфарбовування рядків таблиці.

Клас	опис
`.success`	Вказує на успішну або позитивну дію.
`.error`	Вказує на небезпечну або потенційно негативну дію.
`.warning`	Вказує на попередження, яке може потребувати уваги.
`.info`	Використовується як альтернатива стилям за замовчуванням.

#	Продукт	Оплата прийнята	Статус
1	ТБ - Щомісяця	01.04.2012	Затверджено
2	ТБ - Щомісяця	04.02.2012	Відхилено
3	ТБ - Щомісяця	04.03.2012	В очікуванні
4	ТБ - Щомісяця	04.04.2012	Телефонуйте для підтвердження

...
  < tr class = "success" >
    <td> 1 < /td>
    <td>ТБ - щомісяця</ td >
    < td > 04.01.2012 < / td >
    <td>Схвалено</ td >
  </ tr >
...

Підтримувана розмітка таблиці

Список підтримуваних елементів HTML таблиці та способи їх використання.

Тег	опис
`<table>`	Елемент обтікання для відображення даних у табличному форматі
`<thead>`	Елемент-контейнер для рядків заголовків таблиці ( `<tr>`) для позначення стовпців таблиці
`<tbody>`	Елемент-контейнер для рядків таблиці ( `<tr>`) у тілі таблиці
`<tr>`	Елемент-контейнер для набору клітинок таблиці ( `<td>`або `<th>`), який відображається в одному рядку
`<td>`	Комірка таблиці за замовчуванням
`<th>`	Спеціальна клітинка таблиці для міток стовпців (або рядків, залежно від обсягу та розташування).
`<caption>`	Опис або підсумок того, що містить таблиця, особливо корисний для програм зчитування з екрана

<таблиця>
  <caption> ... </caption>
  <head>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Стилі за замовчуванням

Окремі елементи керування форми отримують стиль, але без будь-якого необхідного базового класу <form>або великих змін у розмітці. У результаті над елементами керування формою з’являються мітки, вирівняні за лівим краєм.

<form>
  <набір полів>
    <legend> Легенда </legend>
    <label> Назва мітки </label>
    <input type = "text" placeholder = "Введіть щось…" >  
    <span class = "help-block" > Приклад тексту довідки на рівні блоку тут. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Перевірте мене 
    </label>
    <button type = "submit" class = "btn" > Надіслати </button>  
  </fieldset>
</form>

Додаткові макети

До складу Bootstrap входять три додаткові макети форм для типових випадків використання.

Форма пошуку

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

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Пошук </button>  
</form>

Вбудована форма

Додайте .form-inlineдля міток, вирівняних за лівим краєм, і вбудованих елементів керування для компактного макета.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Запам'ятати мене 
  </label>
  <button type = "submit" class = "btn" > Увійти </button>  
</form>

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

Вирівняйте мітки праворуч і перемістіть їх ліворуч, щоб вони відображалися в одному рядку з елементами керування. Вимагає найбільше змін розмітки з форми за замовчуванням:

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

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > Електронна пошта </label>  
    <div class = "controls" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > Пароль </label>  
    <div class = "controls" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "controls" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Запам'ятати мене 
      </label>
      <button type = "submit" class = "btn" > Увійти </button>  
    </div>
  </div>
</form>

Підтримувані елементи керування формою

Приклади стандартних елементів керування форми, які підтримуються в прикладі макета форми.

Вхідні дані

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

Вимагає постійного використання зазначеного type.

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

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

Елемент керування формою, який підтримує кілька рядків тексту. За потреби змініть rowsатрибут.

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

Прапорці та радіо

Прапорці призначені для вибору одного або кількох варіантів у списку, а радіо — для вибору одного варіанту з багатьох.

За замовчуванням (стосований)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  Варіант один — те й те — обов’язково вкажіть, чому це чудово
</label>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" вибрано >     
  Варіант один — те й те — обов’язково вкажіть, чому це чудово
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Другий варіант може бути чимось іншим, і його вибір скасує вибір першого
</label>

Вбудовані прапорці

Додайте .inlineклас до ряду прапорців або радіо, щоб елементи керування з’являлися в тому самому рядку.

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Вибирає

Використовуйте параметр за замовчуванням або вкажіть a multiple="multiple", щоб відобразити декілька параметрів одночасно.

<вибрати>
  <опція> 1 </опція>
  <опція> 2 </опція>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<select multiple = "multiple" > 
  <опція> 1 </опція>
  <опція> 2 </опція>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Розширення елементів керування форми

Додаючи до існуючих елементів керування браузера, Bootstrap включає інші корисні компоненти форми.

Додані та додані входи

Додайте текст або кнопки до або після будь-якого текстового введення. Зауважте, що selectелементи тут не підтримуються.

Параметри за замовчуванням

Оберніть an .add-onі an inputодним із двох класів, щоб додати текст на початку або до введення.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput " type = "text" placeholder = "Ім'я користувача" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > 0,00 </span> 
</div>

Комбінований

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

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "add-on" > 0,00 </span> 
</div>

Кнопки замість тексту

Замість a <span>з текстом використовуйте a , .btnщоб прикріпити кнопку (або дві) до введення.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "button" > Вперед! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" > Пошук </button>  
  <button class = "btn" type = "button" > Параметри </button>  
</div>

Випадаючі кнопки

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Дія
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Дія
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton " type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Дія
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Дія
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

Сегментовані спадні групи

<form>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <input type = "text" > 
  </div>
  <div class = "input-append" > 
    <input type = "text" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Форма пошуку

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Пошук </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Пошук </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Контроль розмірів

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

Входи рівня блоку

Змусити будь -який <input>або <textarea>елемент поводитися як елемент рівня блоку.

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

Відносні розміри

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Голови вгору!У наступних версіях ми змінимо використання цих відносних класів введення відповідно до розмірів кнопок. Наприклад, .input-largeзбільшить відступ і розмір шрифту введення.

Розмір сітки

Використовуйте .span1для .span12вхідних даних, які відповідають однаковим розмірам стовпців сітки.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

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

<div class = "controls" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Вхідні дані, які не можна редагувати

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

<span class = "input-xlarge uneditable-input" > Деякі значення тут </span>

Форма дії

Завершіть форму групою дій (кнопок). Якщо розташувати .form-actionsкнопки в межах , вони автоматично відступатимуться відповідно до елементів керування форми.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Зберегти зміни </button>  
  <button type = "button" class = "btn" > Скасувати </button>  
</div>

Текст довідки

Підтримка вбудованого та блокового рівня для тексту довідки, який з’являється навколо елементів керування форми.

Вбудована довідка

<input type = "text" ><span class = "help-inline" > Вбудований текст довідки </span>

Заблокувати довідку

<input type = "text" ><span class = "help-block" > Довший блок довідкового тексту, який розривається на новий рядок і може виходити за межі одного рядка. </span>

Контрольні стани форми

Надайте відгук користувачам або відвідувачам за допомогою основних станів відгуків щодо елементів керування форми та міток.

Фокус введення

Ми видаляємо outlineстилі за замовчуванням для деяких елементів керування форми та застосовуємо box-shadowзамість них a для :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Це фокус..." >

Недійсні введення

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

Це недоступно у версіях Internet Explorer 7-9 через відсутність підтримки псевдоселекторів CSS.

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

Відключені входи

Додайте disabledатрибут до введення, щоб запобігти введенню користувачем і викликати дещо інший вигляд.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Введення тут вимкнено..." вимкнено >

Стани перевірки

Bootstrap включає стилі перевірки для повідомлень про помилку, попередження, інформацію та успішне виконання. Для використання додайте відповідний клас до навколишнього .control-group.

<div class = "control-group warning" > 
  <label class = "control-label" for = "inputWarning" > Введення з попередженням </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Можливо, щось пішло не так </span> 
  </div>
</div>
 
<div class = "control-group error" > 
  <label class = "control-label" for = "inputError" > Введення з помилкою </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Виправте помилку </span> 
  </div>
</div>
 
<div class = "control-group info" > 
  <label class = "control-label" for = "inputInfo" > Введення з інформацією </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Ім’я користувача вже зайнято </span> 
  </div>
</div>
 
<div class = "control-group success" > 
  <label class = "control-label" for = "inputSuccess" > Введення успішно </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Ого! </span> 
  </div>
</div>

Кнопки за замовчуванням

Стилі кнопок можна застосовувати до будь-чого, із .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класу, тому префікс не потрібен. Крім того, цей клас призначений лише для естетики; ви повинні використовувати спеціальний JavaScript, щоб вимкнути посилання тут.

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

Додайте 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-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

Голови вгору! .img-roundedі .img-circleне працюють в IE7-8 через відсутність border-radiusпідтримки.

Піктограми

140 значків у формі спрайтів, доступних у темно-сірому (за замовчуванням) і білому кольорах, надані Glyphicons .

ікона-шклярка
ікон.-муз
іконка-пошук
ікона-конверт
ікона-серце
ікона-зірка
значок-зірка-порожній
значок користувача
ікон-фільм
значок-ий-великий
значок-й
icon-th-list
значок-ок
значок-видалити
icon-zoom-in
icon-zoom-out
значок вимкнено
значок-сигнал
значок-гвинтик
значок-кошик
ікона-дом
файл-іконка
значок-час
ікона-дорога
icon-download-alt
значок завантаження
завантаження значків
icon-inbox
значок-гра-коло
значок-повтор
піктограма оновлення
icon-list-alt
значок-замок
значок-прапор
значок-навушники
icon-volume-off
icon-volume-down
icon-volume up
icon-qrcode
значок-штрих-код
значок-тег
значки-теги
іконопис
значок-закладка
ікона-друк
значок-фотоапарат
значок-шрифт
значок-жирний
значок-курсив
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
значок-список
icon-indent-left
icon-indent-right
icon-facetime-video
ікона-картина
значок-олівець
значок-карта-маркер
налаштування значків
відтінок значка
icon-edit
icon-share
значок-перевірка
значок-хід
icon-step-backward
icon-fast-backward
значок назад
іконогра
значок-пауза
значок-стоп
значок-вперед
icon-fast-forward
icon-step-forward
витягнення значка
icon-chevron-left
icon-chevron-праворуч
значок-плюс
значок-знак-мінус
icon-remove-sign
icon-ok-sign
значок-знак питання
icon-info-sign
іконка-скріншот
icon-remove-circle
значок-ок-коло
значок-заборона-коло
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
значок-плюс
значок-мінус
значок-зірочка
значок-знак оклику
ікона-подарунок
ікона-лист
ікона-вогнище
icon-eye-open
icon-eye-close
значок-попередження-знак
ікона-площина
ікона-календар
значок-випадковий
значок-коментар
ікона-магніт
icon-chevron-up
icon-chevron-down
значок-ретвіт
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-hdd
значок-мегафон
ікона-дзвін
ікона-грамота
значок-великий палець вгору
icon-thumbs-down
значок-рука-праворуч
значок-рука-ліворуч
icon-hand-up
значок з рук вниз
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
ікона-глобус
іконний ключ
значки-завдання
значок-фільтр
ікона-портфель
icon-fullscreen

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

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

Як використовувати

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

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

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

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

Голови вгору!Використовуючи поряд із рядками тексту, як у кнопках або навігаційних посиланнях, обов’язково залишайте пробіл після <i>тегу для правильного інтервалу.

Приклади значків

Використовуйте їх у кнопках, групах кнопок для панелі інструментів, навігації або введених форм.

кнопки

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Випадаюче меню в групі кнопок

Користувач

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Користувач </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "dropdown-menu" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Редагувати </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Видалити </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Забанити </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Зробити адміністратором </a></li>  
  </ul>
</div>

Розміри ґудзиків

зірка зірка зірка

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Зірочка </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Зірочка </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Зірка </a>

Навігація

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Домашня сторінка </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Бібліотека </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Програми </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Різне </a></li>  
</ul>

Поля форми

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > Адреса електронної пошти </label>  
  <div class = "controls" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Типографіка

Заголовки

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

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

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

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

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

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

Основна копія

Провідна основна копія

Створено за допомогою Less

Наголос

<small>

жирний

Курсив

Класи вирівнювання

Акцент класи

Скорочення

<abbr>

<abbr class="initialism">

Адреси

<address>

Блок цитат

Цитата за замовчуванням

Параметри цитат

Називання джерела

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

списки

Невпорядкований

Замовив

Нестилізований

В лінію

опис

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

Код

В лінію

Базовий блок

Таблиці

Стилі за замовчуванням

Факультативні заняття

.table-striped

.table-bordered

.table-hover

.table-condensed

Факультативні класи рядків

Підтримувана розмітка таблиці

Форми

Стилі за замовчуванням

Додаткові макети

Форма пошуку

Вбудована форма

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

Підтримувані елементи керування формою

Вхідні дані

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

Прапорці та радіо

За замовчуванням (стосований)

Вбудовані прапорці

Вибирає

Розширення елементів керування форми

Додані та додані входи

Параметри за замовчуванням

Комбінований

Кнопки замість тексту

Випадаючі кнопки

Сегментовані спадні групи

Форма пошуку

Контроль розмірів

Входи рівня блоку

Відносні розміри

Розмір сітки

Вхідні дані, які не можна редагувати

Форма дії

Текст довідки

Вбудована довідка

Заблокувати довідку

Контрольні стани форми

Фокус введення

Недійсні введення

Відключені входи

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`