Bootstrap классы: Стили CSS | Bootstrap по-русски

Содержание

Стили CSS | Bootstrap по-русски

Заголовки

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

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

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

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

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

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

Размеры Body

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

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Класс Lead body

Выделяйте абзац путем добавления .lead.

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

<p>...</p>

Форматирование Less

Все шрифты и размеры основаны на двух переменных LESS в variables.less: @baseFontSize и @baseLineHeight. Первая — это основной размер шрифта, используемый во всем документе, вторая — это основная высота строки. Мы используем эти переменные и немного вычислений, чтобы создать отступы, поля, высоту строк разного типа и многое другое. Настраивайте Bootstrap для себя.

Выделение

Используя простые стили Bootstrap, применяйте HTML теги для выделения.

`<small>`

Для выделения блоков текста мелким шрифтом используйте тег small.

Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт

<p>
  <small>Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт.</small>
</p>

Полужирный

Выделение фрагмента текста с помощью important

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

<strong>набран полужирным шрифтом</strong>

Курсив

Выделение фрагмента текста с помощью stress

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

<em>выделен курсивом</em>

Внимание! Смело используйте <b>

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

д.

Классы выделения

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

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

Аббревиатуры

Используйте элемент HTML <abbr> для аббревиатур. При этом наведите курсор на аббревиатуру, чтобы увидеть ее расшифровку. Аббревиатуры с атрибутом title выделены полупрозрачным подчеркиванием точками, а при длительном наведении курсора вы увидите знак вопроса и расшифровку аббревиатуры.

`<abbr>`

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

Аббревиатура слова «attribute» — attr.

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

`<abbr>`

Добавьте .initialism, чтобы немного уменьшить размер шрифта.

HTML — это круче вареного яйца.

<abbr title="HyperText Markup Language">HTML</abbr>

Адреса

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

`<address>`

Сохраните форматирование, ставя в конце всех строк тег <br>.

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

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

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
 
 <address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Цитаты

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

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

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

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

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

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

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

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

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

<cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Кто-то очень известный в Названии источника

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Кто-то очень известный в
Названии источника

<blockquote>
  ...
</blockquote>

Списки

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

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

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

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

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

Список без стиля или без дополнительного левого поля.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel

Aenean sit amet erat nunc
Eget porttitor lorem

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

Описание

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

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

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

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

Выстраивает термины и описания <dl> в одну линию.

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

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

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

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

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

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

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

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

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

<p>Sample text here...</p>

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

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

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

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

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table>
  …
</table>

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

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

`.table-striped`

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

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table>
  …
</table>

`.table-bordered`

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

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table>
  …
</table>

`. table-hover`

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

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table>
  …
</table>

`.table-condensed`

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

#	Имя	Фамилия	Имя пользователя
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table>
  …
</table>

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

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

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

#	Продукт	Платеж	Статус
1	TB — Ежемесячно	01/04/2012	Подтвержден
2	TB — Ежемесячно	02/04/2012	Отклонен
3	TB — Ежемесячно	03/04/2012	Задержка
4	TB — Ежемесячно	04/04/2012	Позвонить для подтверждения

. ..
  <tr>
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

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

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

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

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>. ..</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

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

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

<form>
  <legend>Условные обозначения</legend>
  <label>Название</label>
  <input type="text" placeholder="Type something…">
  <span>Это пример вспомогательного текста.</span>
  <label>
    <input type="checkbox"> Проверить
  </label>
  <button type="submit">Подтвердить</button>
</form>

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

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

Форма поиска

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

<form>
  <input type="text">
  <button type="submit">Search</button>
</form>

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

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

<form>
  <input type="text" placeholder="Email">
  <input type="password" placeholder="Password">
  <label>
    <input type="checkbox"> Запомнить
  </label>
  <button type="submit">Отправить</button>
</form>

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

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

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

<form>
  <div>
    <label for="inputEmail">Email</label>
    <div>
      <input type="text" placeholder="Email">
    </div>
  </div>
  <div>
    <label for="inputPassword">Password</label>
    <div>
      <input type="password" placeholder="Password">
    </div>
  </div>
  <div>
    <div>
      <label>
        <input type="checkbox"> Remember me
      </label>
      <button type="submit">Sign in</button>
    </div>
  </div>
</form>

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

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

Поле ввода

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

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

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

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

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

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

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

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

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

<label>
  <input type="checkbox" value="">
   А вот вам опция номер один - очень крутая штука. 
</label>
 
<label>
  <input type="radio" name="optionsRadios" value="option1" checked>
   А вот вам опция номер один - очень крутая штука.
</label>
<label>
  <input type="radio" name="optionsRadios" value="option2">
  Опция два - это нечто другое. Выбрав ее, отменяете первую.
</label>

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

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

<label>
  <input type="checkbox" value="option1"> 1
</label>
<label>
  <input type="checkbox" value="option2"> 2
</label>
<label>
  <input type="checkbox" value="option3"> 3
</label>

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

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

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
 
<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

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

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

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

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

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

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

<div>
  <span>@</span><input size="16" type="text" placeholder="Username">
</div>
<div>
  <input size="16" type="text"><span>.00</span>
</div>

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

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

<div>
  <span>$</span><input size="16" type="text"><span>.00</span>
</div>

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

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

<div>
  <input size="16" type="text"><button type="button">Go!</button>
</div>
 
<div>
  <input size="16" type="text"><button type="button">Search</button><button type="button">Options</button>
</div>

Форма поиска

<form>
  <div>
    <input type="text">
    <button type="submit">Search</button>
  </div>
  <div>
    <button type="submit">Search</button>
    <input type="text">
  </div>
</form>

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

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

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

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

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

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

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

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

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

<div>
  <input type="text" placeholder=".span5">
</div>
<div>
  <input type="text" placeholder=".span4">
  <input type="text" placeholder=".span1">
</div>
...

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

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

<span>Some value here</span>

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

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

<div>
  <button type="submit">Сохранить изменения</button>
  <button type="button">Отмена</button>
</div>

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

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

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

<input type="text"><span>Inline help text</span>

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

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

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

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

Фокус ввода

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

<input type="text" value="This is focused...">

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

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

<input type="text" placeholder="Disabled input here..." disabled>

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

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

<div>
  <label for="inputWarning">Предупреждение</label>
  <div>
    <input type="text">
    <span>Что-то идет не так</span>
  </div>
</div>
<div>
  <label for="inputError">Ошибка</label>
  <div>
    <input type="text">
    <span>Пожалуйста, исправьте ошибку</span>
  </div>
</div>
<div>
  <label for="inputSuccess">Выполнено успешно</label>
  <div>
    <input type="text">
    <span>Урааа!</span>
  </div>
</div>

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

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

Кнопка	class=»»	Описание
Default	`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 type="button">Большая кнопка</button>
  <button type="button">Большая кнопка</button>
</p>
<p>
  <button type="button">Кнопка по умолчанию</button>
  <button type="button">Кнопка по умолчанию</button>
</p>
<p>
  <button type="button">Маленькая кнопка</button>
  <button type="button">Маленькая кнопка</button>
</p>
<p>
  <button type="button">Мини-кнопка</button>
  <button type="button">Мини-кнопка</button>
</p>

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

Вложенная кнопка
Вложенная кнопка

<button type="button">Вложенная кнопка</button>
<button type="button">Вложенная кнопка</button>

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

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

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

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

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

<a href="#">Исходная ссылка</a>
<a href="#">Ссылка</a>

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

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

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

Главная кнопка Кнопка

<button type="button" disabled="disabled">Главная кнопка</button>
<button type="button" disabled>Кнопка</button>

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

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

<a href="">Ссылка</a>

класс выравнивания текста для внутренней таблицы – 19 Ответов

Нет, у Bootstrap нет класса для этого, но этот класс считается классом «utility», аналогичным классу «.pull-right», который упоминается в @anton.

Если вы посмотрите на utilities.less, вы увидите очень мало классов полезности в Bootstrap, причина в том, что этот тип класса обычно недооценивается и рекомендуется использовать для: а) прототипирование и разработка — чтобы вы могли быстро создавать свои страницы, а затем удалять классы pull-right и pull-left в пользу применения float для более семантических классов или самих элементов или б) когда это явно более практично, чем более семантическое решение.

В вашем случае, по вашему вопросу, похоже, что вы хотите, чтобы текст выравнивался справа в вашей таблице, но не все. Семантически, было бы лучше сделать что-то вроде (я просто собираюсь сделать несколько классов здесь, кроме класса начальной загрузки, таблицы):

  <table>
    <thead>
      <th>Total</th>
    </thead>
    <tbody>
      <tr>
        <td>$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

И просто применяйте объявления text-align: left или text-align: right к классам цены и цены (или какие-либо классы работают для вас).

Проблема с применением align-right как класса заключается в том, что если вы хотите реорганизовать свои таблицы, вам придется переделать разметку и стили. Если вы используете семантические классы, вы можете уйти с рефакторингом только css. Кроме того, если у вас есть время, чтобы применить класс к элементу, лучше всего попытаться присвоить семантическую ценность этому классу, чтобы разметка была легче ориентироваться для других программистов (или вас через три месяца).

Один из способов подумать об этом: когда вы задаете вопрос «Что это за td для?», вы не получите разъяснений из ответа «align-right».

Django Forms И Bootstrap — Классы Css И

Я использую Twitter Bootstrap с Django для рендеринга форм.

Bootstrap может форматировать ваши формы довольно хорошо — если у вас есть классы CSS, которые он ожидает включить.

Однако, моя проблема заключается в том, что формы, созданные Django {{ form.as_p }}, не очень хорошо отображают Bootstrap, так как они не имеют этих классов. Например, вывод из Django:

<form action="/contact/" method="post">
<div
<input type='hidden' name='csrfmiddlewaretoken' value='26c39ab41e38cf6061367750ea8c2ea8'/>
</div>
<p><label for="id_name">Name:</label> <input type="text" name="name" value="FOOBAR" maxlength="20" /></p>
<p><label for="id_directory">Directory:</label> <input type="text" name="directory" value="FOOBAR" maxlength="60" /></p>
<p><label for="id_comment">Comment:</label> <textarea rows="10" cols="40" name="comment">Lorem ipsum dolor sic amet. </textarea></p>
<p><label for="id_server">Server:</label> <select name="server">
<option value="">---------</option>
<option value="1" selected="selected">sydeqexcd01.au.db.com</option>
<option value="2">server1</option>
<option value="3">server2</option>
<option value="4">server3</option>
</select></p>
<input type="submit" value="Submit" />
</form>

Из того, что я могу сказать, Bootstrap требует, чтобы ваши формы имели <fieldset>, каждый <label> имеет class="control-label", и каждый <input> завернут в <div>:

<fieldset>
<label for="input01">Text input</label>
<div>
<input type="text" name="input01">
<p>Help text here. Be sure to fill this out like so, or else!</p>
</div>
</fieldset>

Однако добавление пользовательских меток CSS в каждое поле формы в Django довольно болезненно:

Добавить класс в Django label_tag() вывод

Есть ли более разумный способ использования {{ form. as_p }}, или итерации по полям, без необходимости вручную указывать вещи или делать целую кучу хакеров?

Cheers,
Виктор

Bootstrap 4 Все классы CSS

`.active`	Добавляет белый цвет текста к активной ссылке на панели навигации .	Попытайся	Навигационная панель
`. Активный`	Добавляет синий цвет фона к активному элементу списка в группе списков	Попытайся	Группы списков
`.активный`	Добавляет темно-синий цвет фона для имитации «нажатой» кнопки	Попытайся	Кнопки
`. Активный`	Добавляет синий цвет фона к активному раскрывающемуся элементу в раскрывающемся списке	Попытайся	Выпадающее меню
`. активный`	Добавляет синий цвет фона к активной ссылке pagination (для выделения текущей страницы)	Попытайся	Пагинация
`. Активный`	Отображает / показывает текущий карусель элемент	Попытайся	Карусель
. `оповещение`	Создает окно предупреждающего сообщения	Попробовать	Предупреждения
`.alert-dangerous`	Красная тревога. Указывает на опасное или потенциально негативное действие	Попробовать	Предупреждения
`. Светло-темный`	Темная тревога. Темно-серый ящик оповещения	Попробовать	Предупреждения
`. предупреждение-отключено`	Указывает закрываемое окно предупреждения. Вместе с классом `.close` этот класс используется для закрытия предупреждения (добавляет дополнительные отступы)	Попробовать	Предупреждения
`. Напоминание`	Добавляет `цвета: наследует` указанному элементу	Попробовать	Предупреждения
`.alert-info`	Бирюзовое оповещение.Указывает на нейтральное информативное изменение или действие	Попробовать	Предупреждения
`. Сигнальная лампа`	Световое оповещение. Светло-серый ящик оповещения	Попробовать	Предупреждения
`.alert-link`	Используется в ссылках внутри предупреждений для предоставления соответствующих цветных ссылок	Попробовать	Предупреждения
`. первичное оповещение`	Синяя тревога. Указывает на важное действие	Попробовать	Предупреждения
`. Алерт-вторичный`	Серое предупреждение. Указывает на «менее» важное действие	Попробовать	Предупреждения
`.alert-success`	Зеленая тревога. Указывает на успешное или положительное действие	Попробовать	Предупреждения
`.предупреждение-предупреждение`	Желтое предупреждение. Указывает на то, что при выполнении этого действия следует соблюдать осторожность.	Попробовать	Предупреждения
`.align-baseline`	Элемент выровнен по базовой линии родительского элемента. Это по умолчанию	Попробовать	Коммунальные услуги
`. Выровненное дно`	Элемент выровнен с нижним элементом в строке	Попробовать	Коммунальные услуги
`.выровнять по середине`	Элемент помещается в середину родительского элемента	Попробовать	Коммунальные услуги
`.align-top`	Элемент выровнен по верхнему краю самого высокого элемента по линии	Попробовать	Коммунальные услуги
`.align-text-top`	Элемент выровнен по верхнему краю шрифта родительского элемента	Попробовать	Коммунальные услуги
`.align-text-bottom`	Элемент выровнен по нижнему краю шрифта родительского элемента	Попробовать	Коммунальные услуги
`.align-content-около`	Выровняйте собранные предметы «вокруг»	Попробовать	Flex
`.align-content - * - около`	Выровняйте собранные предметы «по кругу» на разных экранах	Попробовать	Flex
`.выровнять контент-центр`	Выровнять собранные предметы по центру	Попробовать	Flex
`.align-content - * - центр`	Выровняйте собранные предметы по центру на разных экранах	Попробовать	Flex
`.align-content-end`	Выровнять собранные предметы в конце	Попробовать	Flex
`.align-content - * - конец`	Выровняйте собранные предметы в конце на разных экранах	Попробовать	Flex
`.align-content-start`	Выровнять собранные предметы с самого начала	Попробовать	Flex
`.align-content - * - начало`	Выровнять собранные предметы с самого начала на разных экранах	Попробовать	Flex
`.выровнять контент-стрейч`	Собранные изделия из эластичной ткани	Попробовать	Flex
`.align-content - * - stretch`	Растягивайте собранные предметы на разных экранах	Попробовать	Flex
`.align-items-start`	Выровнять отдельные ряды элементов с начала	Попробовать	Flex
`.align-items - * - начало`	Выровнять отдельные ряды элементов с самого начала на разных экранах	Попробовать	Flex
`.align-items-end`	Выровнять отдельные ряды элементов в конце	Попробовать	Flex
`.align-items - * - конец`	Выровнять отдельные ряды элементов в конце на разных экранах	Попробовать	Flex
`.выровнять элементы-центр`	Выровнять отдельные ряды предметов по центру	Попробовать	Flex
`.align-items - * - центр`	Выровнять отдельные ряды элементов по центру на разных экранах	Попробовать	Flex
`.align-items-baseline`	Выровнять отдельные строки элементов по базовой линии	Попробовать	Flex
`.align-items - * - базовый`	Выровнять отдельные строки элементов по базовой линии на разных экранах	Попробовать	Flex
`.align-items-stretch`	Растянуть отдельные ряды предметов	Попробовать	Flex
`.align-items - * - протяжка`	Растягивать отдельные ряды элементов на разных экранах	Попробовать	Flex
`.выровнять-самозапуск`	Выровняйте гибкий элемент с начала	Попробовать	Flex
`.align-self - * - начало`	Выровняйте гибкий элемент с самого начала на разных экранах	Попробовать	Flex
`.align-self-end`	Выровняйте гибкий элемент на конце	Попробовать	Flex
`.align-self - * - конец`	Выровняйте гибкий элемент в конце на разных экранах	Попробовать	Flex
`.align-самоцентрирование`	Выровняйте гибкий элемент по центру	Попробовать	Flex
`.align-self - * - центр`	Выровняйте гибкий элемент по центру на разных экранах	Попробовать	Flex
`.align-self-baseline`	Выровняйте гибкий элемент по базовой линии	Попробовать	Flex
`.align-self - * - базовый`	Выровняйте гибкий элемент по базовой линии на разных экранах	Попробовать	Flex
`. Выравнивание-саморастягивание`	Растянуть гибкий элемент	Попробовать	Flex
`.align-self - * - растяжение`	Растянуть гибкий элемент на разных экранах	Попробовать	Flex
`. Значок`	Создает круглый значок (серый кружок — часто используется как числовой индикатор)	Попытайся	Значки
`.badge-dangerous`	Красный значок. Указывает на опасное или потенциально негативное действие	Попробовать	Значки
`.знак темный`	Темный значок. Темно-серый ящик оповещения	Попробовать	Значки
`.badge-info`	Бирюзовый значок. Указывает на нейтральное информативное изменение или действие	Попробовать	Значки
`. Световой значок`	Световой значок. Светло-серый ящик оповещения	Попробовать	Значки
`.значок-таблетка`	Делает значок более круглым	Попытайся	Значки
`.badge-primary`	Синий значок. Указывает на важное действие	Попробовать	Значки
`. Значок вторичный`	Значок серый. Указывает на «менее» важное действие	Попробовать	Значки
`.знак успеха`	Зеленый значок. Указывает на успешное или положительное действие	Попробовать	Значки
`. Значок-предупреждение`	Желтый значок. Указывает на то, что при выполнении этого действия следует соблюдать осторожность.	Попробовать	Значки
`.bg-dangerous`	Добавляет красный цвет фона к элементу.Представляет опасность или негативное действие	Попытайся	Цвета
`.bg-темный`	Добавляет темно-серый цвет фона к элементу	Попытайся	Цвета
`.bg-info`	Добавляет бирюзовый цвет фона к элементу. Представляет некоторую информацию	Попытайся	Цвета
`.bg-свет`	Добавляет светло-серый цвет фона к элементу	Попытайся	Цвета
`.bg-primary`	Добавляет синий цвет фона к элементу. Представляет нечто важное	Попытайся	Цвета
`.bg-вторичный`	Добавляет серый цвет фона к элементу.Указывает на «менее» важное действие	Попытайся	Цвета
`.bg-success`	Добавляет зеленый цвет фона к элементу. Указывает на успех или положительное действие	Попытайся	Цвета
`.bg-warning`	Добавляет желто-оранжевый цвет фона к элементу.Представляет предупреждение или негативное действие	Попытайся	Цвета
`.blockquote`	Стилизует цитируемые блоки контента из другого источника (добавляет увеличенный размер шрифта (1,25 rem))	Попытайся	Типографика
`.blockquote-footer`	Стилизует заголовок источника внутри цитаты (светло-серый текст с отступом)	Попытайся	Типографика
`.граница`	Добавляет границу к элементу	Попытайся	Коммунальные услуги
`.border-bottom-0`	Удаляет нижнюю границу элемента	Попытайся	Коммунальные услуги
`. Пограничная опасность`	Добавляет красную рамку к элементу (указывает на опасность)	Попытайся	Коммунальные услуги
`.бордюр темный`	Добавляет темную рамку к элементу	Попытайся	Коммунальные услуги
`.border-info`	Добавляет бирюзовую границу к элементу (указывает информацию)	Попытайся	Коммунальные услуги
`.border-left-0`	Удаляет левую границу элемента	Попытайся	Коммунальные услуги
`.бордюр`	Добавляет светло-серую границу к элементу	Попытайся	Коммунальные услуги
`. Граница первичная`	Добавляет синюю рамку к элементу	Попытайся	Коммунальные услуги
`.граница-правая-0`	Удаляет правую границу элемента	Попытайся	Коммунальные услуги
`.border-top-0`	Удаляет верхнюю границу элемента	Попытайся	Коммунальные услуги
`. Граница-вторичная`	Добавляет серую рамку к элементу	Попытайся	Коммунальные услуги
`.граница-успех`	Добавляет зеленую рамку к элементу (указывает на успех)	Попытайся	Коммунальные услуги
`.пограничное предупреждение`	Добавляет оранжевую рамку к элементу (обозначает предупреждение)	Попытайся	Коммунальные услуги
`. Бордюр-белый`	Добавляет белую рамку к элементу	Попытайся	Коммунальные услуги
`.border-0`	Удаляет все границы элемента	Попытайся	Коммунальные услуги
`.панировочные сухари`	Пагинация. Указывает местоположение текущей страницы в иерархии навигации	Попытайся	Пагинация
`.breadcrumb-item`	Стили перечисляют элементы или ссылки внутри навигационной цепочки	Попытайся	Пагинация
`.btn`	Создает простую кнопку (серый фон и закругленные углы)	Попытайся	Кнопки
`.btn-блок`	Создает кнопку уровня блока, занимающую всю ширину родительского элемента	Попытайся	Кнопки
`.btn-темный`	Темно-серая кнопка	Попытайся	Кнопки
`.БТН-опасность`	Красная кнопка. Указывает на опасность или негативное действие	Попытайся	Кнопки
`.btn-group`	Группирует кнопки в одну строку	Попытайся	Группы кнопок
`.btn-group-lg`	Большая группа кнопок (увеличивает все кнопки в группе кнопок — увеличенный размер шрифта и отступы)	Попытайся	Группы кнопок
`.btn-group-sm`	Маленькая группа кнопок (уменьшает все кнопки в группе кнопок)	Попытайся	Группы кнопок
`.btn-group-вертикальный`	Делает группу кнопок вертикальной	Попытайся	Группы кнопок
`.btn-info`	Бирюзовая кнопка.Представляет нейтральное информативное изменение или действие	Попытайся	Кнопки
`.btn-светлый`	Светло-серая кнопка	Попытайся	Кнопки
`.btn-link`	Делает кнопку похожей на ссылку (поведение кнопки получения)	Попытайся	Кнопки
`.btn-lg`	Большая кнопка	Попытайся	Кнопки
`.btn-outline-dark`	Кнопка темно-серого цвета с окантовкой / обведенным контуром	Попытайся	Кнопки
`.btn-outline-dangerous`	Кнопка с красной рамкой. Указывает на опасность или негативное действие	Попытайся	Кнопки
`.btn-outline-info`	Пуговица с бирюзовой окантовкой / контуром. Представляет нейтральное информативное изменение или действие	Попытайся	Кнопки
`.btn-outline-light`	Кнопка светло-серого цвета с окантовкой / очертаниями	Попытайся	Кнопки
`.btn-outline-primary`	Кнопка с синей рамкой / контуром.	Попытайся	Кнопки
`.btn-outline-secondary`	Кнопка с серой рамкой / обведенным контуром. Указывает на «менее» важное действие	Попытайся	Кнопки
`.btn-outline-success`	Кнопка с зеленой рамкой / контуром. Указывает на успех или положительное действие	Попытайся	Кнопки
`.btn-outline-warning`	Кнопка с оранжевой окантовкой / обведенным контуром. Обозначает предупреждение или негативное действие	Попытайся	Кнопки
`.btn-primary`	Синяя кнопка. Указывает на что-то важное	Попытайся	Кнопки
`.btn-sm`	Маленькая кнопка	Попытайся	Кнопки
`.btn-вторичный`	Серая кнопка. Указывает на «менее» важное действие	Попытайся	Кнопки
`.btn-success`	Зеленая кнопка. Указывает на успех или положительное действие	Попытайся	Кнопки
`.btn-панель инструментов`	Объединение наборов групп кнопок в панели инструментов кнопок для более сложных компонентов	Попытайся	Группы кнопок
`.btn-предупреждение`	Оранжевая кнопка. Обозначает предупреждение или негативное действие	Попытайся	Кнопки
`. Карта`	Создает карту	Попытайся	Карты
`. Карта-тело`	Контейнер для содержания карты	Попытайся	Карты
`.карточки-столбцы`	Контейнер для создания сетки из карточек, напоминающей кладку	Попытайся	Карты
`.card-dangerous`	Добавляет красный цвет фона к карточке. Представляет опасность или негативное действие	Попытайся	Карты
`. Card-dark`	Добавляет серый цвет фона на карту	Попытайся	Карты
`.карточная колода`	Контейнер для создания сетки карточек одинаковой высоты и ширины	Попытайся	Карты
`. Нижний колонтитул`	Нижний колонтитул карточки	Попытайся	Карты
`.card-group`	Контейнер для создания сетки карточек одинаковой высоты и ширины, без боковых полей	Попытайся	Карты
`.карточка-заголовок`	Заголовок карты	Попытайся	Карты
`.card-header-tabs`	Вкладки навигации по стилям внутри заголовка карточки	Попытайся	Карты
`.card-header-pills`	Стили навигационных таблеток внутри заголовка карточки	Попытайся	Карты
`.карта-img-дно`	Поместите изображение внизу внутри карточки	Попытайся	Карты
`.card-img-overlay`	Превращает изображение в фон карты. Часто используется для добавления текста поверх изображения	Попытайся	Карты
`.card-img-top`	Поместите изображение вверху внутри карточки	Попытайся	Карты
`.карта-информация`	Добавляет бирюзовый цвет фона к карте. Представляет некоторую информацию	Попытайся	Карты
`. Card-light`	Добавляет светло-серый цвет фона на карту	Попытайся	Карты
`.card-link`	Добавляет синий цвет к любой ссылке и эффект наведения внутри карты	Попытайся	Карты
`.карточка первичная`	Добавляет синий цвет фона к карточке. Представляет нечто важное	Попытайся	Карты
`. Карта-вторичная`	Добавляет серый цвет фона к карточке. Представляет нечто «менее важное»	Попытайся	Карты
`.карта-подзаголовок`	`.card-subtitle` используется после `.card-title` и добавляет к элементу следующее: `margin-top: -.375rem; нижнее поле: 0;`	Попытайся	Карты
`. Карта-успех`	Добавляет зеленый цвет фона к карточке. Указывает на успех или положительное действие	Попытайся	Карты
`.карточка-текст`	Используется для удаления нижних полей для элемента p, если это последний дочерний элемент (или единственный) внутри `.card-body`	Попытайся	Карты
`. Название карты`	Добавляет заголовок к любому элементу заголовка внутри карточки	Попытайся	Карты
`.карта-предупреждение`	Добавляет желто-оранжевый цвет фона к карточке. Представляет предупреждение или негативное действие	Попытайся	Карты
`. Карусель`	Создает карусель (слайд-шоу)	Попытайся	Карусель
`.carousel-caption`	Создает текст заголовка для каждого слайда в карусели	Попытайся	Карусель
`.Карусель-контроль-следующий`	Контейнер для «следующей» карусели / ссылки на товар	Попытайся	Карусель
`.carousel-control-next-icon`	Используется вместе с `.carousel-control-next` для создания «следующего» значка / кнопки (стрелка вправо)	Попытайся	Карусель
`.carousel-control-prev`	Контейнер для «предыдущей» карусели / ссылки на товар	Попытайся	Карусель
`.carousel-control-prev-icon`	Используется вместе с `.carousel-control-prev` для создания «предыдущего» значка / кнопки (стрелка влево)	Попытайся	Карусель
`.карусель-индикаторы`	Добавляет маленькие точки / индикаторы внизу каждого слайда (который указывает, сколько слайдов в карусели и какой слайд пользователь просматривает в данный момент).	Попытайся	Карусель
`. Карусель внутренняя`	Контейнер для предметов слайда	Попытайся	Карусель
`.карусель`	Определяет содержание каждого слайда	Попытайся	Карусель
`.clearfix`	Очищает поплавки	Попытайся	Коммунальные услуги
`. Закрыть`	Стилизует значок закрытия. Это часто используется для предупреждений и модальных окон.Часто используется вместе с & times; символ для создания фактического значка (более красивый «x»). По умолчанию плавает справа	Попытайся	Коммунальные услуги
`.col-auto`	Автоматически настраивать размер столбцов формы в зависимости от их содержимого	Попытайся	Формы
`.col- *`	Создает макет столбцов для сверхмалых устройств ( и выше / все устройства , если они не объединены с другими классами столбцов). `*` может быть числом от 1 до 12	Попытайся	Сетка
`.col-sm- *`	Создает макет столбцов для небольших устройств ( и выше , если они не объединены с другими классами столбцов). `*` может быть числом от 1 до 12	Попытайся	Сетка
`.col-md- *`	Создает макет столбца для средних устройств ( и выше , если не объединен с другими классами столбцов). `*` может быть числом от 1 до 12	Попытайся	Сетка
`.col-lg- *`	Создает макет столбцов для больших устройств ( и выше , если они не объединены с другими классами столбцов). `*` может быть числом от 1 до 12	Попытайся	Сетка
`.col-xl- *`	Создает макет столбцов для очень больших устройств. `*` может быть числом от 1 до 12	Попытайся	Сетка
`.свернуть`	Обозначает сворачиваемое содержимое, которое можно скрыть или показать по запросу.	Попытайся	Свернуть
`. Свернуть показать`	По умолчанию показывать сворачиваемое содержимое	Попытайся	Свернуть
`. Контейнер`	Контейнер фиксированной ширины, ширина определяется узлами экрана.Равное поле слева и справа.	Попытайся	Контейнеры
`. Контейнер-жидкость`	Контейнер, занимающий всю ширину экрана	Попытайся	Контейнеры
`. Контейнер- *`	Адаптивные контейнеры	Попытайся	Контейнеры
`.настраиваемый флажок`	Обертка / контейнер для пользовательских флажков	Попытайся	Пользовательские формы
`. Таможенно-контрольный`	Обертка / контейнер для нестандартных форм	Попытайся	Пользовательские формы
`. Пользовательский-контроль-ввод`	Управление индивидуальной формой	Попытайся	Пользовательские формы
`.custom-control-inline`	Встроенные (горизонтально — бок о бок) элементы управления настраиваемой формы	Попытайся	Пользовательские формы
`. Этикетка-таможня`	Индивидуальная этикетка при использовании вместе с настраиваемым элементом управления формой	Попытайся	Пользовательские формы
`.нестандартный файл`	Пользовательская загрузка файла	Попытайся	Пользовательские формы
`.custom-file-input`	Пользовательская загрузка файла	Попытайся	Пользовательские формы
`. Ярлык-файла-заказчика`	Индивидуальная этикетка для файлов	Попытайся	Пользовательские формы
`.индивидуальное радио`	Обертка / контейнер для пользовательских переключателей	Попытайся	Пользовательские формы
`. Заказной диапазон`	Регулируемый диапазон	Попытайся	Пользовательские формы
`. Индивидуальный выбор`	Индивидуальное меню выбора	Попытайся	Пользовательские формы
`.custom-select-lg`	Большое индивидуальное меню выбора	Попытайся	Пользовательские формы
`. Custom-select-sm`	Маленькое настраиваемое меню выбора	Попытайся	Пользовательские формы
`. Пользовательский переключатель`	Тумблер под заказ	Попытайся	Пользовательские формы
`.отключен`	Отключает кнопку (добавляет непрозрачность и значок запрета парковки при наведении курсора)	Попытайся	Кнопки
`. Отключено`	Отключает раскрывающийся список . элемент (добавляет серый цвет текста и значок запрета парковки при наведении курсора)	Попытайся	Выпадающее меню
`.отключен`	Отключает ссылку для разбивки на страницы. (нельзя щелкнуть — добавляет серый цвет текста и значок запрета на парковку при наведении курсора)	Попытайся	Пагинация
`. Отключено`	Отключает список элемент в группе списков (нельзя щелкнуть — добавляет светло-серый цвет и удаляет эффект наведения на ссылки элементов списка)	Попытайся	Группы списков
`.раскрывающийся список`	Создает переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка	Попытайся	Выпадающее меню
`. Выпадающий разделитель`	Используется для разделения ссылок в раскрывающемся меню тонкой горизонтальной рамкой	Попытайся	Выпадающее меню
`.раскрывающийся заголовок`	Используется для добавления заголовков в раскрывающееся меню	Попытайся	Выпадающее меню
`. Dropdown-item`	Создает выпадающий элемент (добавляется к ссылкам или кнопкам внутри .dropdown-menu)	Попытайся	Выпадающее меню
`. Dropdown-item-text`	Используется для добавления обычного текста в раскрывающийся список или используется в ссылках для стиля ссылок по умолчанию	Попытайся	Выпадающее меню
`.выпадающее меню`	Добавляет стили по умолчанию для контейнера раскрывающегося меню	Попытайся	Выпадающее меню
`. Dropdown-menu-right`	Выравнивает раскрывающееся меню по правому краю	Попытайся	Выпадающее меню
`. Dropdown-toggle`	Используется на кнопке, которая должна скрывать и отображать (переключать) раскрывающееся меню	Попытайся	Выпадающее меню
`.капельница`	Выравнивает раскрывающийся список по левому краю	Попытайся	Выпадающее меню
`. Прямая`	Выравнивает раскрывающийся список по правому краю	Попытайся	Выпадающее меню
`. Раздача`	Обозначает раскрывающееся меню (вверх, а не вниз)	Попытайся	Выпадающее меню
`.d-блок`	Создает элемент блока (добавляет отображение `: блок` )	Попытайся	Коммунальные услуги
`.d - * - блок`	Создает элемент блока на экране определенной ширины	Попытайся	Коммунальные услуги
`.d-рядный`	Делает элемент встроенным	Попробовать	Коммунальные услуги
`.d - * - рядный`	Делает элемент встроенным на экране определенного размера	Попробовать	Коммунальные услуги
`.d-встроенный блок`	Делает элемент встроенным в блок	Попробовать	Коммунальные услуги
`.d - * - встроенный блок`	Создает встроенный блок элемента на экране определенного размера	Попробовать	Коммунальные услуги
`.d-flex`	Создает контейнер flexbox и преобразует прямые дочерние элементы в элементы гибкости	Попытайся	Flex
`.d - * - гибкий`	Создает контейнер flexbox на экране определенного размера	Попытайся	Flex
`.d-inline-flex`	Создает встроенный контейнер Flexbox	Попытайся	Flex
`.d - * - inline-flex`	Создает встроенный контейнер Flexbox на экране определенного размера	Попытайся	Flex
`.d-нет`	Скрывает элемент	Попробовать	Коммунальные услуги
`.d - * - нет`	Скрывает элемент на экране определенного размера	Попробовать	Коммунальные услуги
`.d-стол`	Отображает элемент в виде таблицы	Попробовать	Коммунальные услуги
`.d - * - таблица`	Отображает элемент в виде таблицы на экране определенного размера	Попробовать	Коммунальные услуги
`.d-таблица-ячейка`	Отображает элемент в виде ячейки таблицы	Попробовать	Коммунальные услуги
`.d - * - таблица-ячейка`	Отображает элемент в виде ячейки таблицы на экране определенного размера	Попробовать	Коммунальные услуги
`.d-table-row`	Отображает элемент в виде строки таблицы	Попробовать	Коммунальные услуги
`.d - * - таблица-строка`	Отображает элемент в виде строки таблицы на экране определенного размера	Попробовать	Коммунальные услуги
`.внедрять адаптивный`	Контейнер для встроенного контента. Делает видео или слайд-шоу правильно масштабируемыми на любом устройстве	Попытайся	Изображения
`.embed-response-16by9`	Контейнер для встроенного контента. Создает встроенный контент с соотношением сторон 16: 9	Попытайся	Изображения
`.встроенный-отзывчивый-3by4`	Контейнер для встроенного контента. Создает встроенный контент с соотношением сторон 3: 4	Попытайся	Изображения
`. Элемент, отвечающий за внедрение`	Используется внутри `. Реагирует на встраивание` . Красиво масштабирует видео до родительского элемента	Попытайся	Изображения
`.исчезать`	Добавляет эффект затухания при закрытии окна предупреждения	Попытайся	Предупреждения
`. Выцветание`	Добавляет эффект затухания при отображении содержимого табуляции / таблетки	Попытайся	Навс
`. Выцветание`	Добавляет эффект затухания при открытии модального окна	Попытайся	Модальный
`.фиксированное дно`	Заставляет элемент оставаться в нижней части экрана (липкий / фиксированный)	Попытайся	Коммунальные услуги
`. Фиксированный верх`	Заставляет элемент оставаться в верхней части экрана (липкий / фиксированный)	Попытайся	Коммунальные услуги
`. Гибкая колонка`	Вертикальное отображение гибких элементов	Попытайся	Flex
`.гибкий - * - столбец`	Вертикальное отображение гибких элементов на экранах разного размера:	Попытайся	Flex
`.flex-колонка-реверс`	Вертикальное отображение гибких элементов, перевернутое	Попытайся	Flex
`.flex - * - колонка-реверс`	Отображать гибкие элементы вертикально, перевернуто, на экранах разного размера	Попытайся	Flex
`.гибкий заполнитель`	Используется на гибких элементах, чтобы поместить его / их в столбцы одинаковой ширины	Попытайся	Flex
`.flex - * - заполнить`	Принудительная установка гибких элементов на одинаковую ширину на разных экранах	Попытайся	Flex
`.flex-grow-0 \| 1`	Используется на одном гибком элементе, чтобы занять остальное доступное пространство	Попытайся	Flex
`.Flex-nowrap`	Не заворачивайте гибкие элементы	Попытайся	Flex
`.flex - * - nowrap`	Не переносить элементы на разные экраны	Попытайся	Flex
`.flex-shrink-0 \| 1`	Используется на отдельном гибком элементе для его усадки при необходимости		Flex
`.гибкий ряд`	Отображать гибкие элементы по горизонтали (рядом)	Попытайся	Flex
`.flex - * - ряд`	Отображение гибких элементов по горизонтали на экране определенного размера	Попытайся	Flex
`.flex-row-reverse`	Отображать гибкие элементы по правому краю и по горизонтали	Попытайся	Flex
`.гибкость - * - ряд-обратный`	Отображение гибких элементов по правому краю и по горизонтали на экране определенного размера	Попытайся	Flex
`.flex-wrap`	Гибкая упаковка	Попытайся	Flex
`.flex - * - пленка`	Перенести элементы на разные экраны	Попытайся	Flex
`.Flex-Wrap-Реверс`	Оберните гибкие элементы в обратном порядке	Попытайся	Flex
`.flex - * - обратная пленка`	Оберните гибкие элементы в обратном порядке на разных экранах	Попытайся	Flex
`. Плавающий левый`	Смещает элемент влево	Попытайся	Коммунальные услуги
`.поплавок - * - левый`	Перемещает элемент слева на разных экранах	Попытайся	Коммунальные услуги
`. Float-none`	Удалить поплавки из элемента	Попытайся	Коммунальные услуги
`. Плавучий правый`	Смещает элемент вправо	Попытайся	Коммунальные услуги
`.поплавок - * - правый`	Перемещает элемент слева на разных экранах	Попытайся	Коммунальные услуги
`. Шрифт курсив`	Курсив текст	Попытайся	Типографика
`. Font-weight-bold`	Жирный текст	Попытайся	Типографика
`.шрифт жирный`	Полужирный текст (начертание шрифта: полужирнее)	Попытайся	Типографика
`. Font-weight-light`	Облегченный текст (font-weight: 300)	Попытайся	Типографика
`. Font-weight-lightighter`	Более легкий текст (начертание шрифта: светлее)	Попытайся	Типографика
`.шрифт-вес-нормальный`	Обычный текст (font-weight: 400)	Попытайся	Типографика
`.form-check`	Контейнер для флажков. Добавляет правильный отступ	Попытайся	Формы
`.form-check-inline`	Отображает флажки на одной строке (по горизонтали)	Попытайся	Формы
`.форма-проверка-ввод`	Флажки стилей с правильными полями	Попытайся	Формы
`.form-check-label`	Обеспечивает правильные поля для этикеток, используемых вместе с флажками	Попытайся	Формы
`.form-control`	Используется для ввода, текстового поля и элементов выбора, чтобы охватить всю ширину страницы и сделать их адаптивными	Попытайся	Формы
`.форма-контроль-файл`	Добавляет `display: block` и `width: 100%` к входному полю с type = «file»	Попытайся	Формы
`.form-control-lg`	Элемент управления большой формы	Попытайся	Формы
`.form-control-plaintext`	Стилизует элемент управления формы как обычный текст	Попытайся	Формы
`.форма-контроль-диапазон`	Добавляет `display: block` and `width: 100%` к входному полю с type = «range»	Попытайся	Формы
`.form-control-sm`	Малая форма управления	Попытайся	Формы
`.form-group`	Контейнер для ввода формы и этикетки	Попытайся	Формы
`.form-inline`	Делает выровненным по левому краю с элементами управления встроенным блоком (только это применяется к формам в области просмотра шириной не менее 768 пикселей)	Попробовать	Формы
`.форм-ряд`	Контейнер для адаптивных столбцов (меньше левого и правого полей, чем `.row` / заменяет отступы столбцов по умолчанию)	Попытайся	Формы
`.h2 - .h6`	Делает элемент похожим на заголовок выбранного класса (h2-h6)	Попытайся	Типографика
`.h-25`	Устанавливает высоту элемента на 25%	Попытайся	Коммунальные услуги
`.h-50`	Устанавливает высоту элемента на 50%	Попытайся	Коммунальные услуги
`.ч-75`	Устанавливает высоту элемента на 75%	Попытайся	Коммунальные услуги
`.h-100`	Устанавливает высоту элемента на 100%	Попытайся	Коммунальные услуги
`.img-жидкость`	Адаптивное изображение (добавляет max-width: 100% и height: auto)	Попытайся	Изображения
`.img-thumbnail`	Преобразует изображение в миниатюру (тонкие светло-серые границы)	Попытайся	Изображения
`.инициализм`	Отображает текст внутри элемента с немного меньшим размером шрифта	Попытайся	Типографика
`.группа ввода`	Контейнер для улучшения ввода путем добавления значка, текста или кнопки перед или за полем ввода в качестве «справочного текста»	Попытайся	Группа ввода
`.input-group-append`	Контейнер группы ввода для добавления текста справки за полем ввода	Попытайся	Группа ввода
`.вход-группа-LG`	Большая группа входов	Попытайся	Группа ввода
`.input-group-prepend`	Контейнер группы ввода для добавления текста справки перед полем ввода	Попытайся	Группа ввода
`. Вход-группа-см`	Малая группа ввода	Попытайся	Группа ввода
`.ввод-группа-текст`	Стилизует указанный текст справки в группе ввода	Попытайся	Группа ввода
`.input-lg`	Большое поле ввода	Попытайся	Размер входа
`. Вход-см`	Малое поле ввода	Попытайся	Размер входа
`.недействительная обратная связь`	Создает настраиваемое сообщение проверки, используемое в проверенных формах (красный цвет текста)	Попытайся	Формы
`.invalid-tooltip`	Создает настраиваемое сообщение проверки, используемое в проверенных формах (красная подсказка)	Попытайся	Формы
`.невидимый`	Сделать элемент невидимым	Попытайся	Коммунальные услуги
`. Недействителен`	Проверяет элемент формы (добавляет красную рамку к полям ввода). Примечание: для серверной части	Попытайся	Формы
`. Действует`	Проверяет элемент формы (добавляет зеленую рамку к полям ввода).Примечание: для серверной части	Попытайся	Формы
`. Джумботрон`	Создает заполненный серый заголовок / прямоугольник с закругленными углами, что увеличивает размер шрифта текста внутри него. Используется для привлечения дополнительного внимания к специальному содержанию или информации	Попытайся	Джумботрон
`.jumbotron-жидкость`	Создает полноразмерный jumbotron (заголовок с серой набивкой) без закругленных границ	Попытайся	Джумботрон
`.justify-content- *`	Выравнивает элементы гибкости от начала , до конца , с центром , в между и « около »	Попытайся	Flex
`.justify-content - * - около`	Выравнивает гибкие элементы «по кругу» на экранах разного размера	Попытайся	Flex
`.justify-content - * - между`	Выравнивает гибкие элементы «между» на экранах разного размера	Попытайся	Flex
`.justify-content - * - центр`	Выравнивает гибкие элементы по центру на экранах разного размера	Попытайся	Flex
`.justify-content - * - конец`	Выравнивает гибкие элементы в конце на экранах разного размера	Попытайся	Flex
`.justify-content - * - начало`	С самого начала выравнивает гибкие элементы на экранах разных размеров	Попытайся	Flex
`. Свинец`	Увеличить размер шрифта и высоту строки абзаца	Попытайся	Типографика
`.список-группа`	Создает группу списка с рамкой для элементов	Попытайся	Группа списков
`.list-group-flush`	Удаляет некоторые границы и закругленные углы у элементов списка в группе списков	Попытайся	Группа списков
`.список-группа-горизонтальный`	Отображать элементы списка по горизонтали, а не по вертикали (рядом, а не поверх друг друга)	Попытайся	Группа списков
`.list-group-horizontal- *`	Отображать элементы списка по горизонтали, а не по вертикали на экранах разных размеров	Попытайся	Группа списков
`.список-группа-элемент`	Добавляется к каждому элементу в группе списков	Попытайся	Группа списков
`.list-group-item-action`	Добавлены ссылки внутри группы списка, чтобы они выделялись при наведении курсора (темный фон)	Попытайся	Группа списков
`.список-группа-пункт-опасность`	Красный цвет фона для элемента списка в группе списков	Попытайся	Группа списков
`.list-group-item-dark`	Темно-серый цвет фона для элемента списка в группе списков	Попытайся	Группа списков
`. List-group-item-info`	Голубой цвет фона для элемента списка в группе списков	Попытайся	Группа списков
`.список-группа-элемент-свет`	Светло-серый цвет фона для элемента списка в группе списков	Попытайся	Группа списков
`.list-group-item-primary`	Синий цвет фона для элемента списка в группе списков	Попытайся	Группа списков
`.список-группа-элемент-успех`	Зеленый цвет фона для элемента списка в группе списков	Попытайся	Группа списков
`.list-group-item-warning`	Желтый цвет фона для элемента списка в группе списков	Попытайся	Группа списков
`.список в строке`	Помещает все элементы списка в одну строку (используется вместе с `.list-inline-item` для каждого элемента )	Попытайся	Типографика
`.list-inline-item`	Помещает все элементы списка в одну строку (используется вместе с `.list-inline` в родительском элементе )	Попытайся	Типографика
`.список без стиля`	Удаляет все стили списка по умолчанию (маркеры, левое поле и т. Д.) Из или список	Попытайся	Типографика
`. Марка`	Выделение текста: выделенный текст	Попытайся	Типографика
`.СМИ`	Выравнивает медиа-объекты вместе с контентом (например, изображениями или видео — часто используются для комментариев в сообщениях в блогах и т. Д.)	Попытайся	Медиа-объекты
`. Медиа-корпус`	Контейнер для медиа-контента	Попытайся	Медиа-объекты
`.модальный`	Определяет контент как модальный и привлекает к нему внимание	Попытайся	Модальные
`. Модальный кузов`	Определяет стиль тела модального окна. Добавьте сюда любую разметку HTML (p, img и т. Д.)	Попытайся	Модальные
`.modal-content`	Стилизует модальный (граница, цвет фона и т. Д.).Внутри этого добавьте верхний, основной и нижний колонтитулы модального окна, если необходимо	Попытайся	Модальные
`.modal-dialog-centered`	Центрирует модальное окно по вертикали и горизонтали на странице	Попытайся	Модальные
`.modal-dialog-scrollable`	Добавляет полосу прокрутки внутри модального окна	Попытайся	Модальные
`.модальный нижний колонтитул`	Нижний колонтитул модального окна (часто содержит кнопку действия и кнопку закрытия)	Попытайся	Модальные
`.modal-header`	Заголовок модального окна (часто содержит заголовок и кнопку закрытия)	Попытайся	Модальные
`.модальный-LG`	Большое модальное окно (шире, чем по умолчанию)	Попытайся	Модальные
`.modal-sm`	Малый модальный (без ширины)	Попытайся	Модальные
`.modal-xl`	Очень большой модальный	Попытайся	Модальные
`.м- # / м - * - #`	Классы отзывчивой маржи. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.mt- # / mt - * - #`	Адаптивные классы максимальной маржи. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.mb- # / mb - * - #`	Классы отзывчивой нижней маржи. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.ml- # / ml - * - #`	Адаптивные классы левой маржи. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.MR- # / MR - * - #`	Адаптивные классы правого поля. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.mx- # / mx - * - #`	Адаптивные классы авто (горизонтального) левого и правого полей. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.my- # / my - * - #`	Адаптивные классы автоматического (вертикального) верхнего и нижнего полей. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.mx-auto`	Центрирует элемент по горизонтали	Попытайся	Коммунальные услуги
`.nav nav-tabs`	Создает меню с вкладками	Попытайся	Вкладки
`.nav nav-pills`	Создает меню таблеток	Попытайся	Вкладки
`. Оправдано`	Обосновывает ссылки табуляции / таблетки одинаковой ширины	Попытайся	Вкладки
`.навигационная панель`	Создает панель навигации	Попытайся	Навигационная панель
`.navbar-nav`	Контейнер для навигационных ссылок внутри контейнера .navbar	Попытайся	Навигационная панель
`.navbar-brand`	Добавлен к ссылке или элементу заголовка внутри панели навигации для представления логотипа или заголовка	Попытайся	Навигационная панель
`.Навбар-развал`	Сворачивает панель навигации (скрывается и заменяется значком меню / гамбургера на мобильных телефонах и небольших планшетах)	Попытайся	Навигационная панель
`.navbar-expand- *`	Отзывчивый складной класс — складывает панель навигации вертикально на маленьких (sm), средних (md), больших (lg) или очень больших (xl) экранах	Попытайся	Навигационная панель
`.navbar-dark`	Добавляет белый цвет текста ко всем ссылкам на панели навигации	Попытайся	Навигационная панель
`.navbar-light`	Добавляет черный цвет текста ко всем ссылкам на панели навигации	Попытайся	Навигационная панель
`.navbar-text`	Выровняйте по вертикали любые элементы внутри навигационной панели, которые не являются ссылками (обеспечивает правильное заполнение)	Попытайся	Навигационная панель
`.переключение навигационной панели`	Стилизует кнопку, которая должна открывать панель навигации на маленьких экранах. Автоматически стилизован под гамбургер / три батончика	Попытайся	Навигационная панель
`.nav-link`	Используется для стилизации ссылок / якорей внутри навигационной панели	Попытайся	Навигационная панель
`.nav-item`	Используется для стилизации элементов списка внутри панели навигации	Попытайся	Навигационная панель
`. Проверка потребности`	Добавляет стили проверки в отправленную форму	Попытайся	Формы
`. Без желобов`	Удалить желоба / лишнее пространство из колонн	Попытайся	Сетка
`.page-item`	Элементы списка стилей внутри страницы	Попытайся	Пагинация
`. Page-link`	Стили ссылок внутри страницы	Попытайся	Пагинация
`.pagination`	Создает пагинацию (полезно, если у вас есть веб-сайт с большим количеством страниц.	Попытайся	Пагинация
`.pagination-lg`	Большая разбивка на страницы (каждая ссылка на страницу получает больший размер шрифта и большее количество отступов)	Попытайся	Пагинация
`.pagination-sm`	Маленькая разбивка на страницы (каждая ссылка на страницу получает меньший размер шрифта и меньше отступов)	Попытайся	Пагинация
`.предварительно прокручиваемый`	Делает элемент прокручиваемым ( `max-height` из 350 пикселей и обеспечивает полосу прокрутки по оси Y)	Попытайся	Помощники
`. Прогресс`	Контейнер для прогресс-бара	Попытайся	Прогресс-бар
`.прогресс-бар`	Создает индикатор выполнения	Попытайся	Прогресс-бар
`.progress-bar-animated`	Анимирует индикатор выполнения (используется вместе с полосами)	Попытайся	Прогресс-бар
`. Прогресс-бар полосатая`	Добавляет полосы на индикатор выполнения	Попытайся	Прогресс-бар
`.п- # / п - * - #`	Классы адаптивного заполнения. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.pt- # / pt - * - #`	Адаптивные классы верхнего заполнения. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.pb- # / pb - * - #`	Адаптивные классы нижнего отступа. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.pl- # / pl - * - #`	Адаптивные классы левого заполнения. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.пр- # / пр - * - #`	Адаптивные классы правого заполнения. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.py- # / py - * - #`	Адаптивные классы верхнего и нижнего отступов. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`.px- # / px - * - #`	Адаптивные классы левого и правого заполнения. * может быть sm, md, lg или xl. # может быть числом от 0 до 5	Попытайся	Коммунальные услуги
`. Окр.`	Добавляет закругленные углы к элементу	Попытайся	Коммунальные услуги
`.с закругленным дном`	Добавляет нижние закругленные углы к элементу	Попытайся	Коммунальные услуги
`. Окружность`	Преобразует элемент в круг (не поддерживается в IE8 и более ранних версиях)	Попытайся	Коммунальные услуги
`. Закругленное-левое`	Добавляет закругленные левые углы элемента	Попытайся	Коммунальные услуги
`.с закругленными углами`	Добавляет правильные закругленные углы к элементу	Попытайся	Коммунальные услуги
`. Скругленная верхняя`	Добавляет верхние закругленные углы к элементу	Попытайся	Коммунальные услуги
`. Округлено-0`	Удаляет закругленные углы с элемента	Попытайся	Коммунальные услуги
`.ряд`	Контейнер для отзывчивых столбцов	Попытайся	Сетка
`.row-cols- *`	Установите количество столбцов, которые должны отображаться рядом друг с другом	Попытайся	Сетка
`. Тень`	Добавляет тень к элементу	Попытайся	Коммунальные услуги
`.тень-LG`	Добавляет большую тень к элементу	Попытайся	Коммунальные услуги
`. Тени-нет`	Удаляет тени от элемента	Попытайся	Коммунальные услуги
`. Тень-см`	Добавляет небольшую тень к элементу	Попытайся	Коммунальные услуги
`.малый`	Создает более светлый второстепенный текст в любом заголовке	Попытайся	Типографика
`. Спиннер-бордюр`	Cre

Справка по вспомогательным классам CSS для начальной загрузки

Текст

Добавьте смысл с помощью цветов текста с помощью классов ниже. Ссылки будут темнеть при наведении курсора:

Класс	Описание	Пример
.без звука	Текст с классом «без звука»	Попробовать
.text-primary	Текст, стилизованный под класс "text-primary"	Попробовать
.text-success	Текст с классом "text-success"	Попробовать
.text-info	Текст с классом "text-info"	Попробовать
.текст-предупреждение	Текст с классом «текст-предупреждение»	Попробовать
.text-dangerous	Текст с классом "опасность текста"	Попробовать

Фон

Добавьте смысл с помощью фоновых цветов с помощью классов ниже. Ссылки будут темнеть при наведении курсора, как и классы текста:

Класс	Описание	Пример
.bg-primary	Ячейка таблицы имеет стиль класса "bg-primary"	Попробовать
.bg-success	Ячейка таблицы оформлена с использованием класса "bg-success"	Попробовать
.bg-info	Ячейка таблицы оформлена с использованием класса "bg-info"	Попробовать
.bg-warning	Ячейка таблицы оформлена с использованием класса "bg-warning"	Попробовать
.BG-Опасность	Ячейка таблицы стилизована под класс "bg-dangerous"	Попробовать

Прочее

Класс	Описание	Пример
. Левый	Смещает элемент влево	Попробовать
. Вправо	Смещает элемент вправо	Попробовать
.центральный блок	Устанавливает элемент для отображения: block с margin-right: auto и margin-left: auto	Попробовать
.clearfix	Очищает поплавки	Попробовать
. Показать	Принудительно отображает элемент (отображение: блок)	Попробовать
. Скрытый	Заставляет элемент быть скрытым (отображение: нет)	Попробовать
.невидимый	Заставляет элемент быть невидимым (видимость: скрыта). Занимает место на странице, даже если его не видно	Попробовать
.sr-только	Скрывает элемент для всех устройств, кроме программ чтения с экрана	Попробовать
.sr-only-focusable	Объедините с .sr-only, чтобы снова показать элемент, когда он находится в фокусе (например, пользователем, работающим только с клавиатурой)	Попробовать
.текст скрыть	Помогает заменить текстовое содержимое элемента фоновым изображением	Попробовать
. Закрыть	Обозначает значок закрытия	Попробовать
.caret	Указывает на функциональность раскрывающегося списка (автоматически меняет направление в раскрывающемся меню)	Попробовать

Адаптивные утилиты

Эти классы используются для отображения и / или скрытия содержимого устройством с помощью медиа-запросов.

Используйте один или комбинацию доступных классов для переключения содержимого между точками останова области просмотра:

Классы	Очень маленькие устройства Телефоны (<768 пикселей)	Маленькие устройства Таблетки (≥768 пикселей)	Средние устройства Настольные компьютеры (≥992 пикселей)	Большие устройства Настольные компьютеры (≥1200 пикселей)
.visible-xs- *	видимый	Скрытый	Скрытый	Скрытый
.visible-sm- *	Скрытый	видимый	Скрытый	Скрытый
.visible-md- *	Скрытый	Скрытый	видимый	Скрытый
.видимый-LG- *	Скрытый	Скрытый	Скрытый	видимый
.hidden-xs	Скрытый	видимый	видимый	видимый
.hidden-sm	видимый	Скрытый	видимый	видимый
.скрытый-md	видимый	видимый	Скрытый	видимый
.hidden-LG	видимый	видимый	видимый	Скрытый

Скрытый

Скрыть элементы в зависимости от размера экрана:

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Этот текст скрыт на ДОПОЛНИТЕЛЬНО МАЛЕНЬКОМ экране.

Этот текст скрыт на МАЛЕНЬКОМ экране.

Это текст, скрытый на СРЕДНЕМ экране.

Это текст, скрытый на БОЛЬШОМ экране. .

Результат:

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Попробуй сам "

Начиная с версии 3.2.0, классы .visible - * - * для поставляются в трех вариантах, по одному для каждого дисплея CSS Стоимость объекта:

Группа классов	CSS-дисплей
видимый - * - блок	дисплей: блочный;
.видимый - * - встроенный	дисплей: встроенный;
.visible - * - встроенный блок	дисплей: встроенный блок;

Например. для небольших ( см ) экранов доступны классы .visible - * - * : .visible-sm-block , .visible-sm-inline и .visible-sm-inline-block .

Классы .visible-xs , .visible-sm , .visible-md и .visible-lg являются устаревшими , начиная с версии v3.2.0 .

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Этот текст отображается только на ДОПОЛНИТЕЛЬНО МАЛЕНЬКОМ экране.

Этот текст отображается только на МАЛЕНЬКОМ экране.

Этот текст отображается только на СРЕДНЕМ экране.

Этот текст отображается только на БОЛЬШОМ экране.

Результат:

Пример

Измените размер этой страницы, чтобы увидеть, как изменится текст ниже:

Этот текст отображается только на МАЛЕНЬКОМ экране.

Этот текст отображается только на СРЕДНЕМ экране.

Этот текст отображается только на БОЛЬШОМ экране.

Попробуй сам "

Шпаргалка по Bootstrap 4 - Полный список классов Bootstrap

Интерактивный список классов Bootstrap для версии 4.3,1

Взгляните на мой недавно выпущенный шаблон администратора Bootstrap: Spur Расширить все Свернуть все Поделиться Твитнуть
Оповещения

первичное оповещение

вторичное оповещение

бдительный успех

информация о предупреждении

предупреждение-предупреждение

тревожная опасность

сигнальная лампа

тревожно-темный

ссылка на предупреждение

предупреждение-отключено

заголовок предупреждения

Значки

значок

значок-таблетка

нагрудный знак

нагрудный знак

знак успеха

значок-информация

значок-предупреждение

знак опасности

значок-свет

значок темный

Панировочные сухари

панировочные сухари

Пуговицы

btn-primary

btn-вторичный

btn-успех

btn-info

btn-предупреждение

btn-опасность

btn-light

btn-dark

btn-ссылка

btn-outline-primary

btn-outline-secondary

btn-outline-success

btn-outline-info

btn-outline-предупреждение

btn-схема-опасность

btn-outline-light

btn-outline-dark

Группы кнопок

btn-group

btn-group-lg

btn-group-sm

btn-group-vertical

btn-group (вложенный)

btn-панель инструментов

Кнопочные модификаторы

btn-lg

btn-sm

btn-блок

активная кнопка

отключенная кнопка

флажок как кнопка

радио как кнопка

Карт

карта

тело карты

название карты

карта-подзаголовок

карточка-текст

карточка-ссылка

card-img-top

среднее изображение

card-img-bottom

card-img-overlay

список-группа

заголовок карты

час*.заголовок карты

нижний колонтитул карты

карточная группа

колода карт

карточки-столбцы

карта bg-... текст -...

Карусель

карусель слайд

карусель

карусель-индикаторы

карусель-заголовок

Свернуть

коллапс

аккордеон

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

падать

раскрывающийся список (разделенный)

падение

dropup (сплит)

падение

капля

раскрывающийся заголовок

выпадающий текст

выпадающий разделитель

раскрывающийся список отключен

раскрывающееся меню справа

Формы

форма-группа

форма в строке

форма с использованием сетки

форма-контроль

form-control-lg

форма-контроль-см

форма-контроль-файл

форма-контроль-открытый текст

форма-контроль-диапазон

проверка формы

форма-регистрация

отключенные предметы

только чтение

Группы ввода форм

группа ввода

группа ввода в начале

группа ввода-добавление

ввод-группа-см

Классы полей и отступов начальной загрузки

Свойство margin добавляет интервал между элементами, а CSS-отступы между содержимым и границей контейнера.

Bootstrap 4 имеет встроенные вспомогательные классы для полей и отступов, которые вы можете легко использовать в различных элементах для управления интервалом.

Несколько простых примеров

Синтаксис использования сокращенных полей и отступов

Вы можете использовать сокращенные классы заполнения и поля Bootstrap 4 следующим образом:

Для очень маленьких устройств, например xs:

{свойство} {стороны} - {размер}

Для других устройств / окон просмотра (малых, средних, больших и очень больших):

{свойство} {стороны} - {точка останова} - {размер}

Где:

свойство = м для поля и p для заполнения

Ниже приведены сторон сокращенных значений:

l = определяет левое поле или отступ слева

r = определяет правое поле или правое заполнение

t = определяет верхнее поле или верхнее заполнение

b = определяет нижнее поле или правое заполнение

x = Для установки левого и правого заполнения и полей одним вызовом

y = Для настройки верхнего и нижнего полей

пусто = поля и отступы со всех сторон

Размер может принимать значения от 0 до 5 и автоматически .Я покажу вам примеры, чтобы увидеть разницу.

Точка останова = sm, md, lg и xl.

Объединяя все вышеперечисленное, полный код левого заполнения может быть (например):

Для левой набивки в сверхмалых устройствах:

пл-2

или от среднего до очень большого:

пл-мд-2

Теперь позвольте мне показать вам использование этих сокращенных служебных классов заполнения и полей в действии в Bootstrap 4.

Пример классов заполнения Bootstrap для всех направлений

В этом примере классы заполнения используются в абзацах следующим образом:

Таким образом, точка останова не используется, поэтому это применимо к окнам просмотра от очень малых до очень больших. Это означает, что если вы измените размер страницы примера, отступы сохранятся для всех окон просмотра. Посмотри:

Посмотреть онлайн-демонстрацию и код

В разметке:

1

2

3

4

5

6

7

8

9

10

11

12

13

1446 946

144619

18

19

Демонстрация классов заполнения

p-5

p-4

п-3

п-2

п-1

п- 0

Вы можете видеть, что p-0 находится рядом с элементом div контейнера и различием заполнения во всех направлениях для разных служебных классов.
Пример использования левого и верхнего классов заполнения

В следующем примере четырем абзацам даны разные индивидуальные классы заполнения. Первый применяется от небольших устройств с использованием класса pl-sm-5 . То есть будет применяться только левый отступ.

Во втором теге
используются классы pt-md-2 и pl-md-3 . Это означает, что для средних окон просмотра верхний отступ будет равен двум точкам, а левый отступ - 3.

Для третьего абзаца применяются классы pt-lg-3 и pl-lg-2 . Под .lg это означает с больших устройств / окон просмотра. Левый отступ - 2, а верхний - 3.

Наконец, в последнем абзаце приведены классы заполнения для очень больших окон просмотра. Классы: pt-xl-5 и pl-xl-4 .

Для всех вышеперечисленных абзацев для очень маленьких окон просмотра отступы остаются нулевыми. Посмотри:

Посмотреть онлайн-демонстрацию и код

В разметке:

Демонстрация индивидуальных классов заполнения

pl-sm-5

pt-md-2 pl-md-3

pt-lg-3 pl-lg-2

pt-xl-5 pl-xl-4

Точно так же вы можете использовать нижнее и правое отступы по отдельности в разных элементах.Например:
Нижняя обивка:

Прокладка правая:

Демонстрация использования классов маржи для всех направлений

Таким же образом вы можете использовать служебные классы полей Bootstrap для добавления пробелов между элементами. Как и заполнение, вы можете использовать один класс для всех направлений или отдельные классы для каждого направления.

В следующем примере применяется заполнение во всех направлениях в четырех абзацах для всех окон просмотра:

CSS · Bootstrap 3.0.3 Документация

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

HTML5 doctype

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

...
Первый мобильный
В Bootstrap 2 мы добавили дополнительные стили, удобные для мобильных устройств, для ключевых аспектов платформы.В Bootstrap 3 мы с самого начала переписали проект, чтобы он был удобен для мобильных устройств. Вместо добавления необязательных мобильных стилей они встроены прямо в ядро. Фактически, Bootstrap - это сначала мобильная версия . Стили Mobile first можно найти во всей библиотеке, а не в отдельных файлах.
Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте метатег видового экрана к вашему .

Вы можете отключить возможности масштабирования на мобильных устройствах, добавив user-scalable = no в метатег области просмотра. Это отключает масштабирование, что означает, что пользователи могут только прокручивать, и в результате ваш сайт будет больше похож на собственное приложение. В целом мы не рекомендуем это на всех сайтах, поэтому будьте осторожны!

Адаптивные изображения
Образы в Bootstrap 3 можно сделать адаптивными, добавив файл .img-responseive класс. Применяется max-width: 100%; Высота и : авто; к изображению, чтобы оно хорошо масштабировалось до родительского элемента.

Типографика и ссылки
Bootstrap устанавливает базовые глобальные стили отображения, оформления и ссылок. В частности, мы:
Установить цвет фона: #fff; на корпусе
Используйте атрибуты @ font-family-base , @ font-size-base и @ line-height-base в качестве нашей типографской базы
Установите глобальный цвет ссылки через @ link-color и примените подчеркивание ссылок только на : hover
Эти стили можно найти в строительных лесах .менее .
Нормализовать
Для улучшения кроссбраузерного рендеринга мы используем Normalize, проект Николаса Галлахера и Джонатана Нила.
Контейнеры
С легкостью центрируйте содержимое страницы, обернув его содержимое в .container . Контейнеры устанавливают ширину в различных точках останова медиа-запросов, чтобы соответствовать нашей сеточной системе.
Обратите внимание, что из-за заполнения и фиксированной ширины контейнеры по умолчанию не могут быть вложенными.
...
Bootstrap включает в себя адаптивную мобильную первую жидкую сеточную систему, которая соответствующим образом масштабирует до 12 столбцов по мере увеличения размера устройства или области просмотра. Он включает в себя предопределенные классы для простых вариантов макета, а также мощные миксины для создания более семантических макетов.
Введение
Системы сетки
используются для создания макетов страниц с помощью ряда строк и столбцов, в которых размещается ваш контент.Вот как работает сетка Bootstrap:
Строки должны быть помещены в контейнер . для правильного выравнивания и заполнения.
Используйте строки для создания горизонтальных групп столбцов.
Содержимое следует размещать внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
Предопределенные классы сетки, такие как .row и .col-xs-4 , доступны для быстрого создания макетов сетки. LESS-миксины также могут использоваться для более семантических макетов.
Столбцы создают промежутки (промежутки между содержимым столбца) через отступ . Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на .row s.
Столбцы сетки создаются путем указания числа из двенадцати доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три .col-xs-4 .
Посмотрите на примеры применения этих принципов к вашему коду.
Сетки и макеты во всю ширину
Люди, которые хотят создавать полностью гибкие макеты (то есть ваш сайт растягивает всю ширину области просмотра), должны заключить свое содержимое сетки в содержащий элемент с отступом : 0 15px; для смещения поля : 0-15 пикселей; используется на .ряд с.
Медиа
Как находятся классы
Как средство запуска Java находит классы
Средство запуска Java, java , запускает виртуальную машина. Виртуальная машина ищет и загружает классы в этом заказ:
Bootstrap classes - Классы, составляющие Java платформу, включая классы в rt.jar и несколько другие важные файлы jar.
Классы расширения - Классы, использующие расширение Java механизм.Они объединены в файлов .jar , расположенных в каталог расширений.
Классы пользователей - Классы, определенные разработчиками и третьими лицами стороны, не использующие механизм продления. Вы определить расположение этих классов с помощью параметр -classpath в командной строке (предпочтительный метод) или с помощью переменной среды CLASSPATH. (Видеть Установка пути к классам для Windows или Unix.)
Фактически, эти три пути поиска объединены в простой путь класса.Это похоже на «плоский» путь класса ранее используется, но у текущей модели есть несколько важных отличий:
Относительно сложно случайно «спрятать» или пропустить классы начальной загрузки.
В общем, вам нужно только указать местоположение пользователя классы. Найдены классы Bootstrap и классы расширений "автоматически".
Классы инструментов теперь в отдельном архиве (tools.jar) и может использоваться, только если он включен в пользовательский путь к классу (поясняется в ближайшее время).
Как средство запуска Java находит классы начальной загрузки
классы Bootstrap - это классы, реализующие Java 2 Платформа. Классы начальной загрузки находятся в rt.jar и несколько других файлов jar в каталоге jre / lib . Эти архивы определяются значением класса начальной загрузки путь, который хранится в системе sun.boot.class.path свойство. Это системное свойство предназначено только для справки и должно не подлежат непосредственному изменению.
Маловероятно, что вам потребуется переопределить бутстрап. путь класса.Нестандартный вариант -Xbootclasspath позволяет вы должны делать это в тех редких обстоятельствах, когда это необходимо использовать другой набор основных классов.
Обратите внимание, что классы, реализующие инструменты Java 2 SDK: в отдельном архиве из классов начальной загрузки. Архив инструментов это файл SDK /lib/tools.jar . Инструменты разработки добавить этот архив в путь класса пользователя при вызове средства запуска. Однако этот расширенный путь к пользовательскому классу используется только для выполнения инструмент.Инструменты, обрабатывающие исходный код, javac и javadoc , используйте исходный путь класса, а не расширенный версия. (Для получения дополнительной информации см. Как Javac и Javadoc Find Classes, ниже.)
Как средство запуска Java находит классы расширений
Классы расширения - это классы, расширяющие платформу Java. Каждый файл .jar в каталоге расширений, jre / lib / ext, считается расширением и загружается с помощью расширения Java Фреймворк. Свободные файлы классов в каталоге расширений будут не найти.Они должны содержаться в файле .jar (или .zip файл). Нет возможности изменить расположение каталога расширений.
Если каталог jre / lib / ext содержит несколько .jar файлов, и эти файлы содержат классы с то же имя, например:
smart-extension1_0.jar содержит класс smart.extension.Smart smart-extension1_1.jar содержит класс smart.extension.Smart
фактически загружаемый класс не определен.
Как средство запуска Java находит классы пользователей
Пользовательские классы - это классы, основанные на платформе Java. Чтобы найти классы пользователей, пусковая установка относится к классу пользователей путь - список каталогов, архивов JAR и архивов ZIP которые содержат файлы классов.
Файл класса имеет имя подпути, которое отражает полное имя. Например, если класс com.mypackage.MyClass хранится в / myclasses , тогда / myclasses должны быть в путь к классу пользователя и полный путь к файлу класса должны быть / myclasses / com / mypackage / MyClass.класс . Если класс хранится в архиве с именем myclasses.jar , тогда myclasses.jar должен быть в пути к классу пользователя, а файл класса должен храниться в архиве как com / mypackage / MyClass.class .
Путь к пользовательскому классу указывается в виде строки с двоеточием. ( : ) разделение записей пути класса на Solaris и точка с запятой ( ; ), разделяющая записи в системах Microsoft Windows. Лаунчер java ставит строка пути к пользовательскому классу в файле java.class.path системное свойство. Возможные источники этого значения:
Значение по умолчанию: « . », что означает, что пользователь файлы классов - это все файлы классов в текущем каталоге (или под ней, если в упаковке).
Значение переменной среды CLASSPATH , которая отменяет значение по умолчанию.
Значение командной строки -cp или -classpath параметр, который отменяет как значение по умолчанию, так и CLASSPATH значение.
Архив JAR, заданный опцией -jar , которая отменяет все остальные значения. Если этот параметр используется, все пользователи классы должны происходить из указанного архива.
Как средство запуска Java находит классы JAR-class-path
Файл JAR обычно содержит "манифест" - файл, в котором содержимое JAR. Манифест может определять путь к классу JAR, что еще больше расширяет путь к классу (но только при загрузке классы из этого JAR). Классы, к которым обращается JAR-class-path: находится в следующем порядке:
Обычно классы, на которые ссылается запись JAR-class-path, являются обнаружено, как если бы они были частью файла JAR.Файлы JAR, которые появляются в JAR-class-path ищутся после любого более раннего класса записи пути и перед любыми записями, которые появляются позже в классе путь.
Однако, если путь к классу JAR указывает на файл JAR, который был уже найден (например, расширение или файл JAR, который перечисленных ранее в пути к классу), то этот файл JAR не будет искал снова. (Эта оптимизация повышает эффективность и предотвращает круговой поиск.) Такой JAR-файл ищется в точке, оказывается, раньше в пути класса.
Если файл JAR установлен как расширение, то любой Путь к JAR-классу, который он определяет, игнорируется. Все классы, требуемые предполагается, что расширение является частью SDK или имеет сами были установлены как расширения.
Как Javac и JavaDoc находят классы
Инструменты javac и javadoc используют файлы классов в двух различными способами:
Как и любое приложение Java, javac и javadoc должны загрузить различные файлы классов для запуска.
Для обработки исходного кода, с которым они работают, javac и javadoc должен получать информацию о типах объектов, используемых в исходный код.
Файлы классов, используемые для разрешения ссылок на исходный код: в основном те же файлы классов, которые использовались для запуска javac и javadoc . Но есть несколько важных исключений:
И javac , и javadoc часто разрешают ссылки к классам и интерфейсам, которые не имеют ничего общего с реализация javac или javadoc .Информация о указанные пользовательские классы и интерфейсы могут быть представлены в форме файлов классов, файлов исходного кода или того и другого.
Классы инструментов в tools.jar используются только для запустите javac и javadoc . Классы инструментов не используются для разрешения ссылок на исходный код, если tools.jar не в пути к пользовательскому классу.
Программист может захотеть разрешить класс загрузки или класс расширения ссылки с использованием альтернативной реализации платформы Java.И то и другое javac и javadoc поддерживают это своими -bootclasspath и -extdirs варианты. Использование этих не изменяет набор файлов классов, используемых для запуска javac или javadoc сами инструменты.
Если ссылочный класс определен как в файле класса, так и в источнике файл, javadoc всегда использует исходный файл (javadoc никогда компилирует исходные файлы). В той же ситуации javac использует файлы классов, но автоматически перекомпилирует любые файлы классов, определяет как устаревший.Правила автоматической перекомпиляции описаны в документе javac для Windows или Unix.
По умолчанию javac и javadoc ищут пользователя путь к классам как для файлов классов, так и для файлов исходного кода. Если -sourcepath параметр указан, javac и javadoc поиск исходных файлов только на указанном источнике путь к файлу, все еще ища путь к классу пользователя для класса файлы.
Загрузка классов и политики безопасности
Для использования класс или интерфейс должен быть загружен классом. погрузчик.Использование определенного загрузчика классов определяет безопасность политика, связанная с загрузчиком классов.
Программа может загрузить класс или интерфейс, вызвав loadClass метод объекта загрузчика классов. Но обычно программа загружает класс или интерфейс, просто ссылаясь на него. Этот вызывает внутренний загрузчик классов, который может применять политику безопасности расширению и пользовательским классам. Если политика безопасности не была включен, все классы "доверенные". Даже если политика безопасности включен, он не применяется к классам начальной загрузки, которые всегда "доверенный.«
При включении политика безопасности настраивается системой и пользователем. файлы политики. Пакет SDK для Java 2 включает файл системной политики, который присваивает статус "доверенный" классам расширения и размещает базовые ограничения на классы пользователей.
Чтобы включить или настроить политику безопасности, см. Функции безопасности.
Примечание: Некоторые методы программирования безопасности, которые работали с платформой Java 1.1 несовместимы с загрузкой классов модель платформы Java 2.
.

Bootstrap классы: Стили CSS | Bootstrap по-русски

Стили CSS | Bootstrap по-русски

Заголовки

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

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

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

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

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

Размеры Body

Класс Lead body

Форматирование Less

Выделение

<small>

Полужирный

Курсив

Классы выделения

Аббревиатуры

<abbr>

<abbr>

Адреса

<address>

Цитаты

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

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

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

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

Списки

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

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

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

Описание

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

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

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

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

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

.table-striped

.table-bordered

.<img src='/800/600/https/cdn.dribbble.com/users/58743/screenshots/5591195/apex-react.jpg' /> table-hover

.table-condensed

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

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

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

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

Форма поиска

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

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

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

Поле ввода

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

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

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

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

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

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

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

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

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

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

Форма поиска

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

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

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

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

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

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

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

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

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

Фокус ввода

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

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

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

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

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

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

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

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

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

класс выравнивания текста для внутренней таблицы – 19 Ответов

`<small>`

`<abbr>`

`<abbr>`

`<address>`

`.table-striped`

`.table-bordered`

`. table-hover`

`.table-condensed`