Как делать в Bootstrap оформление текста?

Как делать в Bootstrap оформление текста?

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

Все примеры, которые я буду использовать в этой статье, вы также можете найти в документации фреймворка. Перейдите на страницу CSS, и выберите в вертикальном меню пункт Печать (на русском) или Typography (речь идет об официальном сайте).

Заголовки

На этом скриншоте вы можете видеть, как выглядят по умолчанию заголовки в Bootstrap:

Вы можете использовать теги h1-h6, либо классы .h1-.h6, если хотите придать дополнительную стилизацию своим заголовкам. Эти классы позволяют придать вид заголовка любому тексту. Например, если я напишу так:

<p class = "h1">h1. Bootstrap heading</p>

Внешний вид абзаца будет таким же, как если бы мы обернули текст в реальный тег h1. Кроме этого, с помощью своих css-правил вы можете дописать этому классу свои стили. Например:

.h1{
	color: yellow;
	text-shadow: 1px 1px 1px #000;
}

Вот мы уже и оформили заголовок по-своему:

Такой код:

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

Позволяет вывести в заголовке дополнительный текст, у которого будет меньший шрифт и более серый цвет. Естественно, вы сможете стилизовать по-своему.

По умолчанию Bootstrap устанавливает размер шрифта 14 пикселей. Изменить его можно при кастомизации фреймворка, изменив переменную @font-size-base.

Абзацы

Из нескольких абзацов вы можете быстро выделить один, просто добавив для него класс lead, вот как это будет выглядеть:

В документации также перечисляются теги, которые делают текст подчеркнутым, жирным, курсивным и т.д. Но я не вижу смысла повторять их, эти теги 100 раз обсуждались в наших статьях и уроках по html. Напомню только один тег – mark, который выделяет текст фоновым цветом.

<p><mark>Абзац 1</mark></p>

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

<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.

<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:

<p class = "h1 bg-custom">h1. Bootstrap heading</p>

И опишем его в css:

.bg-custom{
	background: #306F91;
}

Добавлю в селектор .h1 еще такие стили:

transform: rotate(-4deg);
border-radius: 15px/7px;

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree