От автора: я вновь приветствую вас. В нашем цикле статей мы рассмотрели практически все стороны фреймворка Bootstrap. Осталось сказать несколько слов о типографике. Что же дает нам Bootstrap в плане оформления текста?
Все примеры, которые я буду использовать в этой статье, вы также можете найти в документации фреймворка. Перейдите на страницу CSS, и выберите в вертикальном меню пункт Печать (на русском) или Typography (речь идет об официальном сайте).
Заголовки
На этом скриншоте вы можете видеть, как выглядят по умолчанию заголовки в Bootstrap:
Вы можете использовать теги h1-h6, либо классы .h1-.h6, если хотите придать дополнительную стилизацию своим заголовкам. Эти классы позволяют придать вид заголовка любому тексту. Например, если я напишу так:
|
1 |
<p class = "h1">h1. Bootstrap heading</p> |
Внешний вид абзаца будет таким же, как если бы мы обернули текст в реальный тег h1. Кроме этого, с помощью своих css-правил вы можете дописать этому классу свои стили. Например:
|
1 2 3 4 |
.h1{ color: yellow; text-shadow: 1px 1px 1px #000; } |
Вот мы уже и оформили заголовок по-своему:
Такой код:
|
1 |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> |
Позволяет вывести в заголовке дополнительный текст, у которого будет меньший шрифт и более серый цвет. Естественно, вы сможете стилизовать по-своему.
По умолчанию Bootstrap устанавливает размер шрифта 14 пикселей. Изменить его можно при кастомизации фреймворка, изменив переменную @font-size-base.
Абзацы
Из нескольких абзацов вы можете быстро выделить один, просто добавив для него класс lead, вот как это будет выглядеть:
В документации также перечисляются теги, которые делают текст подчеркнутым, жирным, курсивным и т.д. Но я не вижу смысла повторять их, эти теги 100 раз обсуждались в наших статьях и уроках по html. Напомню только один тег – mark, который выделяет текст фоновым цветом.
|
1 |
<p><mark>Абзац 1</mark></p> |
Для выравнивания в Bootstrap есть 5 классов. Я хочу вам как раз показать пример кода, где используются все эти 5 классов:
|
1 2 3 4 5 6 7 8 |
<div class = "col-md-3"> <p class = "h1">h1. Bootstrap heading</p> <p class = "text-left">Абзац 1</p> <p class = "text-right"><mark>Абзац 1</mark></p> <p class = "lead text-center" >Абзац 1</p> <p class = "text-justify">Абзац 1</p> <p class = "text-nowrap">Абзац, в котором много-много текста и он не никак переносится на другую строку</p> </div> |
Соответственно, класс text-left будет выравнивать текст по левому краю, text-right – по правому и т.д. Text-nowrap запрещает перенос текста на другую строку, так что, как видите, он вылез за блок. Трансформация текста. Тут и говорить нечего, смотрите на картинку:
Для вывода адреса используйте тег address, для вывода аббревиатур – abbr. Цитаты помещайте в тег blockquote, а сам текст цитаты – в тег абзаца. Вот такое оформление по умолчанию:
Как видите, слева есть толстая светло-серая линия. Класс blockquote-reverse выровняет цитату по правому краю. С помощью тегов footer и cite можно также добавить источник, с которого взята цитата. Код, как обычно, помещайте в тег code. Вот такое у него оформление по умолчанию:
Собственно, я привожу не все примеры из документации, остальные вы можете посмотреть в ней. Напоследок давайте рассмотрим классы, которые задают тексту фоновый цвет. По умолчанию их в Bootstrap 5: bg-primary, info, success, warning, danger.
|
1 2 3 4 5 |
<p class = "text-left bg-primary">Абзац 1</p> <p class = "text-right bg-info">Абзац 1</p> <p class = "lead text-center bg-success" >Абзац 1</p> <p class = "text-justify bg-danger">Абзац 1</p> <p class = "text-nowrap bg-warning">Абзац, в котором много-много текста |
Вот так это выглядит. Собственно, это все классы бутстрапа, которые позволяют оформить текст. Естественно, вам едва ли их хватит, поэтому нужно будет создавать свой файл стилей для каких-то дополнительных эффектов.
Bootstrap: пример оформления текста по-своему
Давайте возьмем тот же заголовок. Хотя я уже показывал вам, как можно изменить его внешний вид, остановимся на этом чуть подробнее.
Итак, чтобы применить свое оформляйте к заголовку, добавьте ему класс h1-h6, либо пропишите вообще свой собственный класс. Выше я уже покзывал вам стили, с помощью которых мы перекрасили заголовок в желтый и дали тексту небольшую тень.
Давайте добавим ему еще класс bg-custom:
|
1 |
<p class = "h1 bg-custom">h1. Bootstrap heading</p> |
И опишем его в css:
|
1 2 3 |
.bg-custom{ background: #306F91; } |
Добавлю в селектор .h1 еще такие стили:
|
1 2 |
transform: rotate(-4deg); border-radius: 15px/7px; |
Вот вам и пример оформления текста по-своему. Всего лишь добавляем свои классы, или даже дополняем те, что уже есть в фреймворке. Все, на этом я оставляю вас самих, экспериментируйте, пробуйте стилизовать по-своему любые куски текста и т.д.
