Bootstrap стили: Заголовки и тег

Заголовки

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

<h1>itProger</h1>
<h3>Заголовок третьего уровня</h3>
<h5>Заголовок пятого уровня</h5>

Обновив страницу, увидим, что заголовки оформлены стилями Bootstrap: используется другой шрифт и присутствуют отступы.

Тег

Тег уменьшает размер текста. Например:

<h1>Заголовок с <small>маленьким текстом</small></h1>

В Bootstrap уменьшает текст до 85% от размера родительского элемента, добавляет серый цвет и использует более приятный шрифт.

Тег

Тег используется для выделения информации:

<p>Текст с <mark>Test Example</mark> выделением.</p>

Test Example выделен цветом фона, привлекая внимание пользователя.

Выравнивание текста

Bootstrap предоставляет классы для выравнивания текста: text-left, text-center, text-right, text-justify, text-nowrap. Они выравнивают текст по левому краю, центрируют, выравнивают по правому краю, выравнивают по ширине и предотвращают перенос слов соответственно.

<p class="text-left">Текст слева</p>
<p class="text-center">Текст по центру</p>
<p class="text-right">Текст справа</p>
<p class="text-justify">Текст по ширине</p>
<p class="text-nowrap">Текст без переносов</p>

Цитаты

Bootstrap оформляет цитаты. Пример:

<blockquote>Некая очень умная цитата.</blockquote>

Цитата выделена тонкой границей. Добавим футер:

<blockquote>Некая очень умная цитата.<footer>Стив Джобс</footer></blockquote>

Футер также выделен. Класс blockquote-reverse отобразит цитату справа налево.

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

Классы text-uppercase, text-lowercase и text-capitalize изменяют регистр текста:

<p class="text-uppercase">ВЕРХНИЙ РЕГИСТР</p>
<p class="text-lowercase">нижний регистр</p>
<p class="text-capitalize">Заглавные Буквы</p>

Теги <code> и <pre>

Теги <code> и <pre> используются для отображения кода.

<code>while, do while, for</code>

<pre>
<code>
for (int i = 0; i < 10; i++) {
  System.out.println("Hi");
}
</code>
</pre>

Код выделяется фоном и шрифтом, отступы сохраняются. Для лучшего отображения, поместите <pre> в блок с классом container.

Цвета текста

Bootstrap предоставляет классы для выделения текста разными цветами: text-muted, text-primary, text-success, text-info, text-warning, text-danger.

<p class="text-muted">Приглушенный текст</p>
<p class="text-primary">Важный текст</p>
<p class="text-success">Успешный текст</p>
<p class="text-info">Информационный текст</p>
<p class="text-warning">Предупреждение</p>
<p class="text-danger">Опасность</p>

Классы bg-* (например, bg-danger) изменяют цвет фона блока.

Мы рассмотрели основные стили Bootstrap для работы с текстом. Bootstrap позволяет создавать стильные страницы без написания CSS-кода.

Bootstrap стили: Заголовки и тег <small>