Як робити в Bootstrap оформлення тексту?

56

Від автора: я знову вітаю вас. У нашому циклі статей ми розглянули практично всі сторони фреймворку Bootstrap. Залишилося сказати кілька слів про типографіці. Що ж дає нам Bootstrap в плані оформлення тексту?

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

Заголовки

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

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

h1. Bootstrap heading

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

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

Ось ми вже й оформили заголовок по-своєму:

Такий код:

h1. Bootstrap heading Secondary text

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

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

Абзаци

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

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

Абзац 1

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

h1. Bootstrap heading

Абзац 1

Абзац 1

Абзац 1

Абзац 1

Абзац, в якому багато-багато тексту і він ніяк не переноситься на інший рядок

Відповідно, клас text-left буде вирівнювати текст по лівому краю, text-right – по правому і т. д. Text-nowrap забороняє перенос тексту на інший рядок, так що, як бачите, він виліз за блок. Трансформація тексту. Тут і говорити нічого, дивіться на картинку:

Для виведення адреси використовуйте тег address, для виведення абревіатур – abbr. Цитати поміщайте в тег blockquote, а сам текст цитати – в тег абзацу. Ось таке оформлення за замовчуванням:

Як бачите, зліва є товста світло-сіра лінія. Клас blockquote-reverse вирівняє цитату по правому краю. За допомогою тегів footer і cite можна також додати джерело, з якого взята цитата. Код, як зазвичай, пишіть в тег code. Ось таке у нього оформлення за замовчуванням:

Власне, я наводжу не всі приклади з документації, інші ви можете подивитися в ній. Наостанок давайте розглянемо класи, які задають тексту фоновий колір. За замовчуванням їх в Bootstrap 5: bg-primary, info, success, warning, danger.

Абзац 1

Абзац 1

Абзац 1

Абзац 1

Абзац, в якому багато-багато тексту

Ось так це виглядає. Власне, це всі класи бутстрапа, які дозволяють оформити текст. Природно, вам навряд чи вистачить, тому потрібно буде створювати свій файл стилів для якихось додаткових ефектів.

Bootstrap: приклад оформлення тексту по-своєму

Давайте візьмемо той же заголовок. Хоча я вже показував вам, як можна змінити його зовнішній вигляд, зупинимося на цьому дещо детальніше.

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

Давайте додамо йому ще клас bg-custom:

h1. Bootstrap heading

І опишемо його в css:

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

Додам в селектор .h1 ще такі стилі:

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

Ось вам і приклад оформлення тексту по-своєму. Лише додаємо свої класи, або навіть доповнюємо ті, що вже є у фреймворку. Все, на цьому я залишаю вас самих, експериментуйте, пробуйте стилізувати по-своєму будь шматки тексту і т. д.