Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Оформляем текст с Bootstrap

Раздел: 

Помимо оформления форм, таблиц и прочих приятных мелочей вместе с Bootstrap мы получаем набор стилей для оформления текста, которые применяются сразу, как мы подключаем bootstrap.min.css и, как обычно, передают в наше распоряжение набор классов позволяющих оформлять теги имеющие отношение к текстам на свое усмотрение.

Текст Bootstrap

Стандартно любые текста получают размер шрифта в 14px с полуторным интервалом, абзацы получают в добавок 10 пиксельные отступы сверху и снизу.

По остальным нюансам оформления пройдемся подробнее:

Заголовки

Простым подключением файла мы меняем шрифт, цвет и стандартные отступы наших тегов h1-h6, что делает их на порядок более удобными для восприятия:

Bootstrap заголовки

При желании, внутрь заголовка можно добавить подпись, которая выведется серым цветом и на порядок меньшим шрифтом. Для этого нам придется воспользоваться тегом <small> внутри нашего заглавного тега. Результат будет следующий:

Подпись в заголовке Bootstrap

Помимо всего прочего мы получаем в свое распоряжение набор классов .h1-.h6, применение которых к любым тегам оформит их в точности также, как сами заголовки. Это сделано для того, чтобы было удобнее формировать сео-структуру страницы, придавая необходимое оформление элементам разметки там, где это для нас удобно.

Выделение текста

Чтобы выделить фрагмент текста, который, к примеру, может быть полезен пользователю, мы можем воспользоваться тегом <mark>. Результат его действия- к тексту добавится пастельный бежевый фон и чуть затемнится цвет шрифта:

Bootstrap mark

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

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

  • .text-left — отравняет текст по левому краю
  • .text-center — выравниваем по центру
  • .text-right — правый край
  • .text-justify — отравнять текст по обоим краям
  • .text-nowrap — текст проигнорирует рамки контейнеров и будет идти до конца одной строкой

Визуально результат их действия выглядит следующим образом:

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

Выводим цитаты

Для оформления цитат в html предусмотрен специальный тег <blockquote>, Bootstrap добавляет ему красивый внешний вид. Так, код:

<blockquote>
   Веб-разработчики ценящие свое время давно пришли к созданию собственных
   фреймворков или же использованию уже готовых.
   <footer>Автор неизвестен</footer>
</blockquote>

заказать разработку сайта компании.

Будет выглядеть следующим образом:

Цитата в Bootstrap

При желании можно воспользоваться классом .blockquote-reverse, примененным к тегу цитаты, для получения следующего результата:

Bootstrap реверсная цитата

Меняем регистр текста

Для данных целей предназначено три класса:

  • . text-lowercase — сделает вывод всех букв в нижнем регистре
  • . text-uppercase — трансформирует все в верхний регистр
  • . text-capitalize — задаст верхний регистр всем первым буквам в словах

Пример:

<p class="text-lowercase">Меняем регистр букв</p>
<p class="text-uppercase">Меняем регистр букв</p>
<p class="text-capitalize">Меняем регистр букв</p>

Регистр букв Bootstrap

Оформляем список определений

Хоть мало кто этим пользуется, да и вообще мало кто о этом знает, но по стандартам html для оформления списков определений и им подобной информации существуют специальные теги dl, dt, dd. Тем не менее красивое оформление в Bootstrap предусмотрено и для них:

Список Bootstrap

Код примера:

<dl>
   <dt>Определение термина</dt>
   <dd>- Автор определения</dd>
   <dt>Определение термина</dt>
   <dd>- Автор определения</dd>
</dl>

Подсветка кода

Воспользовавшись тегом <code>, мы выделим элементы текста бежеватым фоном и изменим их цвет на красным.

В целом, чтобы обратить внимание пользователя на что-то в тексте не дурно, но как по мне со своим прямым назначением данное оформление не справляется, поскольку для полноценной подсветки синтаксиса кода по-прежнему придется пользоваться внешними плагинами, а в базовой комплектации мы получаем по сути слегка доработанную версию тега <mark>

Пример:

Подсветка кода Bootstrap

<p>Для оформления таблиц мы пользуемся рядом тегов,
в частности <code>tr</code> и <code>td</code>.<p>

Предформатированный текст

Текст внутри тега <pre>, который сам делает его моноширинным и сохраняет его исходное форматирование (за что он и получает такое странное название- предформатированный) будет выглядеть следующим образом:

Bootstrap pre

Код примера:

<pre>Содержимое контейнера pre будет выделено особым образом</pre>

Выделение текста цветом

По своему усмотрению, добавив соответствующие классы тегам p мы можем задать цвета тексту внутри них. В Bootstrap для этого используется шесть стандартных цветовых гамм:

<p class="text-muted">Оформление muted</p>
<p class="text-primary">Оформление primary</p>
<p class="text-success">Оформление success</p>
<p class="text-info">Оформление info</p>
<p class="text-warning">Оформление warning</p>
<p class="text-danger">Оформление danger</p>

В результате чего получаем:

Bootstrap цвет текста

Выделение текста фоном

То же самое мы можем проделать в отношении фона тегов с текстом. Классы отвечающие за название цвета те же самые, только начинаться они теперь будут с bg.

<p class="bg-primary">Фон primary</p>
<p class="bg-success">Фон success</p>
<p class="bg-info">Фон info</p>
<p class="bg-warning">Фон warning</p>
<p class="bg-danger">Фон danger</p>

Результат:

Фон текста Bootstrap

Подводя итоги

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

Узнать о прочих возможностях данного фреймворка можно почитав вводную статью нашего курса.