Справочник Bootstrap СSS для основного текста

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

Bootstrap задаёт к элементам <body> и <p> следующие свойства с помощью стилей CSS:

  • элементу <body> устанавливается размер шрифта (font-size) 14px и междустрочный интервал (line-height), равный 1,428.
  • Элементам <p> задаются отступы снизу (margin), равные половине их междустрочного интервала line-height (10px по умолчанию).

Список элементов и классов Bootstrap

Список элементов и классов Bootstrap представлен в нижерасположенной таблице. Элементы Bootstrap – это элементы HTML, которые имеют определённые стили CSS и выглядят немного по-другому для того, чтобы они гармонично вписывались в интерфейс сайта, создаваемый с помощью платформы Twitter Bootstrap 3. Классы задаются к элементам Bootstrap и применяют к ним дополнительные стили.

Элемент | класс Описание
<h1> - <h6> или .h1 - .h6 Предназначен для создания заголовков h1 - h6.
Например:
<h1>Заголовок h1</h1>
<p class="h2">Заголовок 2 уровня</p>

Заголовок h1

Заголовок 2 уровня

<small> Предназначен для создания дополнительного текста в заголовке, который меньше по размеру и имеет более светлый цвет.
Например:
<h1>H1<small>H1</small></h1>
<p class="h2">2<small>2</small></p>

H1H1

22

.small Позволяет задать выделенному тексту более мелкий размер шрифта (85% от размера шрифта родительского элемента).
Например:
<p calss="small">
Абзац с более мелким размером шрифта.
</p>

Lorem ipsum dolor sit amet. Similique sunt in ea commodi autem quibusdam et quasi architecto beatae vitae.

Sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque. Ea commodi autem vel illum, qui dolorem eum iure. Totam rem aperiam eaque ipsa quae. Commodi autem vel illum, qui in culpa. Velit, sed ut enim ipsam voluptatem.

Sunt, explicabo ipsum, quia consequuntur magni dolores et dolorum fuga minima veniam. Exercitationem ullam corporis suscipit laboriosam. Assumenda est, qui incidunt, ut aut odit aut officiis. Illum, qui in ea voluptate velit esse, quam nihil.

.lead Предназначен для выделения абзаца по сравнению с остальным содержимом.
Например:
<p calss="lead">
Выделенный абзац.
</p>

Lorem ipsum dolor sit amet. Similique sunt in ea commodi autem quibusdam et quasi architecto beatae vitae.

Sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque. Ea commodi autem vel illum, qui dolorem eum iure. Totam rem aperiam eaque ipsa quae. Commodi autem vel illum, qui in culpa. Velit, sed ut enim ipsam voluptatem.

Sunt, explicabo ipsum, quia consequuntur magni dolores et dolorum fuga minima veniam. Exercitationem ullam corporis suscipit laboriosam. Assumenda est, qui incidunt, ut aut odit aut officiis. Illum, qui in ea voluptate velit esse, quam nihil.

<mark> Предназначен для создания выделенного текста.
Например:
<p>
<mark>выделенный текст</mark>.
</p>

Этот текст является выделенным.

<del> Предназначен для выделения текста, удаленного из текущего документа.
Например:
<p>
<del>удалённый текст</del>.
</p>

Этот текст удалён из текущего документа.

<s> Предназначен для выделения текста, который уже утратил свою актуальность.
Например:
<p>
<s>текст, утративший свою актуальность</s>.
</p>

Этот текст утратил уже свою актуальность.

<ins> Предназначен для выделения вставленного текста в существующий документ.
Например:
<p>
<ins>вставленный текст</ins>.
</p>

Этот текст только что вставлен в существующий документ.

<u> Предназначен для создания подчеркнутого текста.
Например:
<p>
<u>подчеркнутый текст</u>.
</p>

Обычное предложение с подчеркнутым текстом.

<strong> Предназначен для привлечения внимания к тексту с помощью выделения его жирным начертанием.
Например:
<p>
<strong>жирный текст</strong>.
</p>

Обычное предложение с жирным текстом.

<em> Предназначен для привлечения внимания к тексту с помощью выделения его курсивом.
Например:
<p>
<em>курсивный текст</em>.
</p>

Обычное предложение с курсивным текстом.

.text-left Предназначен для выравнивания текста по левому краю.
Например:
<p class="text-left">
...
</p>

Lorem ipsum dolor sit amet. Sunt in ea voluptate velit. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor. Saepe eveniet, ut et expedita distinctio doloremque laudantium, totam rem aperiam eaque. Vel eum iure reprehenderit, qui dolorem eum fugiat. Consequatur aut officiis debitis aut odit aut odit aut rerum. Repudiandae sint et dolore magnam aliquam quaerat voluptatem. Modi tempora incidunt, ut labore et quas molestias excepturi sint obcaecati. Ullam corporis suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor. Iure reprehenderit, qui in ea voluptate velit esse, quam nihil impedit.

.text-center Предназначен для выравнивания текста по центру.
Например:
<p class="text-center">
...
</p>

Lorem ipsum dolor sit amet. Sunt in ea voluptate velit. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor. Saepe eveniet, ut et expedita distinctio doloremque laudantium, totam rem aperiam eaque. Vel eum iure reprehenderit, qui dolorem eum fugiat. Consequatur aut officiis debitis aut odit aut odit aut rerum. Repudiandae sint et dolore magnam aliquam quaerat voluptatem. Modi tempora incidunt, ut labore et quas molestias excepturi sint obcaecati. Ullam corporis suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor. Iure reprehenderit, qui in ea voluptate velit esse, quam nihil impedit.

.text-right Предназначен для выравнивания текста по правому краю.
Например:
<p class="text-right">
...
</p>

Lorem ipsum dolor sit amet. Sunt in ea voluptate velit. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor. Saepe eveniet, ut et expedita distinctio doloremque laudantium, totam rem aperiam eaque. Vel eum iure reprehenderit, qui dolorem eum fugiat. Consequatur aut officiis debitis aut odit aut odit aut rerum. Repudiandae sint et dolore magnam aliquam quaerat voluptatem. Modi tempora incidunt, ut labore et quas molestias excepturi sint obcaecati. Ullam corporis suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor. Iure reprehenderit, qui in ea voluptate velit esse, quam nihil impedit.

.text-justify Предназначен для выравнивания текста по ширине.
Например:
<p class="text-justify">
...
</p>

Lorem ipsum dolor sit amet. Sunt in ea voluptate velit. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor. Saepe eveniet, ut et expedita distinctio doloremque laudantium, totam rem aperiam eaque. Vel eum iure reprehenderit, qui dolorem eum fugiat. Consequatur aut officiis debitis aut odit aut odit aut rerum. Repudiandae sint et dolore magnam aliquam quaerat voluptatem. Modi tempora incidunt, ut labore et quas molestias excepturi sint obcaecati. Ullam corporis suscipit laboriosam, nisi ut perspiciatis, unde omnis dolor. Iure reprehenderit, qui in ea voluptate velit esse, quam nihil impedit.

.text-nowrap Запрещает перенос слов.
Например:
<p class="text-nowrap">
Очень длинный текст.
</p>
.text-lowercase Предназначен для изменения регистра всех букв на строчные.
Например:
<p class="text-lowercase">
Очень интересный текст.
</p>
очень интересный текст.
.text-uppercase Предназначен для изменения регистра всех букв на прописные.
Например:
<p class="text-uppercase">
Очень интересный текст.
</p>
ОЧЕНЬ ИНТЕРЕСНЫЙ ТЕКСТ.
.text-capitalize Предназначен для изменения регистра первых букв всех слов на прописные.
Например:
<p class="text-capitalize">
Очень интересный текст.
</p>
Очень Интересный Текст.
<abbr> Предназначен для создания аббревиатур.
Например:
<abbr title="Союз независимых государств">
  СНГ
</abbr>
СНГ
Для уменьшения размера текста внутри элемента <abbr> по отношению к остальному тексту добавьте дополнительный класс .initialism:
<abbr title="Союз независимых государств" 
      class="initialism">
  СНГ
</abbr>
СНГ
<address> Предназначен для оформления информации об авторе статьи или контактной информации.
Например:
<address>
Статья написана itchief.ru.
Страница в <a href="#" >Facebook</a>.
</address>
Статья написана itchief.ru. Страница в Facebook.
<blockquote> Предназначен для создания цитат.
<blockquote>
  <p>Текст цитаты</p>
  <small><cite>Автор</cite></small>
</blockquote>

Текст цитаты

Автор

Для создания цитаты, выровненной по правому краю добавьте класс .blockquote-reverse:

<blockquote class="blockquote-reverse">
  <p>Текст цитаты</p>
  <small><cite>Автор</cite></small>
</blockquote>

Текст цитаты

Автор
<ul> Предназначен для создания маркированного списка.
Например:
<ul>
  <li>Кофе</li>
  <li>Молоко</li>
</ul> 
  • Кофе
  • Молоко
<ol> Предназначен для создания нумерованного списка.
Например:
<ol>
  <li>Кофе</li>
  <li>Молоко</li>
</ol> 
  1. Кофе
  2. Молоко
.list-unstyled Предназначен для создания списков без использования стилей.
Например:
<ol class="list-unstyled">
  <li>Кофе</li>
  <li>Молоко</li>
</ol> 
  1. Кофе
  2. Молоко
.list-inline Предназначен для создания списков, элементы которых располагаются в одну строку.
Например:
<ol class="list-inline">
  <li>Кофе</li>
  <li>Молоко</li>
</ol> 
  1. Кофе
  2. Молоко
<dl> Предназначен для создания списков определений.
Например:
<dl>
  <dt>Кофе</dt>
  <dd>- горячий напиток тёмного цвета</dd>
  <dt>Молоко</dt>
  <dd>- прохладный напиток белого цвета</dd>
</dl> 
Кофе
- горячий напиток тёмного цвета
Молоко
- прохладный напиток белого цвета
.dl-horizontal Предназначен для создания списков определений, в котором термины и описания этих терминов располагаются в одну строку.
<dl class="dl-horizontal">
  <dt>Кофе</dt>
  <dd>- горячий напиток тёмного цвета</dd>
  <dt>Молоко</dt>
  <dd>- прохладный напиток белого цвета</dd>
</dl> 
Кофе
- горячий напиток тёмного цвета
Молоко
- прохладный напиток белого цвета
<code> Предназначен для оформления фрагментов кода в тексте.
Например: Элемент <code>h1</code>.
Элемент h1.
<kbd> Предназначен для оформления текста, который представляет собой клавиши или сочетания клавиш на клавиатуре. Например: <kbd>Alt+F4</kbd>
Alt+F4
<pre> Предназначен для оформления программного кода, состоящего из нескольких строк. Если вы дополнительно добавите класс .pre-scrollable к элементу <pre>, то вы получите блок имеющий максимальную высоту 350px и элементы прокрутки по оси y.
Например:
<pre>
Программный код,
состоящий из нескольких строк
</pre>
Программный код,
состоящий из нескольких строк
Например:
<pre class="pre-scrollable">
  Программный код с прокруткой
</pre>
Программный код с прокруткой
<samp> Предназначен для отображения текста, который появляется на выходе в результате работы компьютерной программы.
Например:
<samp>
Текст на выходе из компьютерной программы
</samp>
Текст на выходе из компьютерной программы
<var> Предназначен для оформления переменных.

Например:

<var>y</var> = <var>x</var><sup>2</sup>
y = x2


   Bootstrap 0    7995 0

Комментарии (3)

  1. Дамир # +1
    Крутой справочник, как раз это и искал.
    1. Артем # 0
      Было бы шикарно, если бы был такой справочник по data атрибутам. Какой для чего использовать и где это уместно. За это так же спасибо.
      1. Александр Мальцев # 0
        Спасибо, возможно сделаю.

      Вы должны авторизоваться, чтобы оставлять комментарии.