Помимо оформления форм, таблиц и прочих приятных мелочей вместе с Bootstrap мы получаем набор стилей для оформления текста, которые применяются сразу, как мы подключаем bootstrap.min.css и, как обычно, передают в наше распоряжение набор классов позволяющих оформлять теги имеющие отношение к текстам на свое усмотрение.
Стандартно любые текста получают размер шрифта в 14px с полуторным интервалом, абзацы получают в добавок 10 пиксельные отступы сверху и снизу.
По остальным нюансам оформления пройдемся подробнее:
Заголовки
Простым подключением файла мы меняем шрифт, цвет и стандартные отступы наших тегов h1-h6, что делает их на порядок более удобными для восприятия:
При желании, внутрь заголовка можно добавить подпись, которая выведется серым цветом и на порядок меньшим шрифтом. Для этого нам придется воспользоваться тегом <small>
внутри нашего заглавного тега. Результат будет следующий:
Помимо всего прочего мы получаем в свое распоряжение набор классов .h1-.h6, применение которых к любым тегам оформит их в точности также, как сами заголовки. Это сделано для того, чтобы было удобнее формировать сео-структуру страницы, придавая необходимое оформление элементам разметки там, где это для нас удобно.
Выделение текста
Чтобы выделить фрагмент текста, который, к примеру, может быть полезен пользователю, мы можем воспользоваться тегом <mark>
. Результат его действия- к тексту добавится пастельный бежевый фон и чуть затемнится цвет шрифта:
Выравнивание текста
Для этих целей используется следующий набор классов:
- .text-left — отравняет текст по левому краю
- .text-center — выравниваем по центру
- .text-right — правый край
- .text-justify — отравнять текст по обоим краям
- .text-nowrap — текст проигнорирует рамки контейнеров и будет идти до конца одной строкой
Визуально результат их действия выглядит следующим образом:
Выводим цитаты
Для оформления цитат в html предусмотрен специальный тег <blockquote>
, Bootstrap добавляет ему красивый внешний вид. Так, код:
<blockquote> Веб-разработчики ценящие свое время давно пришли к созданию собственных фреймворков или же использованию уже готовых. <footer>Автор неизвестен</footer> </blockquote>
заказать разработку сайта компании.
Будет выглядеть следующим образом:
При желании можно воспользоваться классом .blockquote-reverse, примененным к тегу цитаты, для получения следующего результата:
Меняем регистр текста
Для данных целей предназначено три класса:
- . text-lowercase — сделает вывод всех букв в нижнем регистре
- . text-uppercase — трансформирует все в верхний регистр
- . text-capitalize — задаст верхний регистр всем первым буквам в словах
Пример:
<p class="text-lowercase">Меняем регистр букв</p> <p class="text-uppercase">Меняем регистр букв</p> <p class="text-capitalize">Меняем регистр букв</p>
Оформляем список определений
Хоть мало кто этим пользуется, да и вообще мало кто о этом знает, но по стандартам html для оформления списков определений и им подобной информации существуют специальные теги dl, dt, dd. Тем не менее красивое оформление в Bootstrap предусмотрено и для них:
Код примера:
<dl> <dt>Определение термина</dt> <dd>- Автор определения</dd> <dt>Определение термина</dt> <dd>- Автор определения</dd> </dl>
Подсветка кода
Воспользовавшись тегом <code>
, мы выделим элементы текста бежеватым фоном и изменим их цвет на красным.
В целом, чтобы обратить внимание пользователя на что-то в тексте не дурно, но как по мне со своим прямым назначением данное оформление не справляется, поскольку для полноценной подсветки синтаксиса кода по-прежнему придется пользоваться внешними плагинами, а в базовой комплектации мы получаем по сути слегка доработанную версию тега <mark>
Пример:
<p>Для оформления таблиц мы пользуемся рядом тегов, в частности <code>tr</code> и <code>td</code>.<p>
Предформатированный текст
Текст внутри тега <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>
В результате чего получаем:
Выделение текста фоном
То же самое мы можем проделать в отношении фона тегов с текстом. Классы отвечающие за название цвета те же самые, только начинаться они теперь будут с 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. Пользуйтесь на здоровье и проводите приятно время сэкономленное на работе.
Узнать о прочих возможностях данного фреймворка можно почитав вводную статью нашего курса.