21 Березень 2015
45 240
Рубрика: уроки

Уроки по Bootstrap. Урок №7: оформление текста

Ранее мы узнали, как подключить Bootstrap, создать в нём свой шаблон, оформить таблицы и элементы форм. Кроме того, фреймворк добавляет новые стили для обыкновенного текста и строчных элементов. Он определяет стандартный размер любого текста внутри тега <body> в 14px и высоту строки в 1,428. Для абзацев меняются внешние отступы (margin) сверху и снизу: теперь это половина высоты строки, по умолчанию 10px.

Давайте посмотрим на примеры и разберёмся с текстом в бутстрапе.

Заголовки

Заголовки в бутстрапе выглядят так:

Заголовок h1, 36px

Заголовок h2, 30px

Заголовок h3, 24px

Заголовок h4, 18px

Заголовок h5, 14px
Заголовок h6, 12px

Элемент <small> в заголовке

Также можно добавить пояснительный текст в теге <small> и разместить его в заголовке, он будет выглядеть так:

Заголовок h1 пояснительный текст

Заголовок h2 пояснительный текст

Заголовок h3 пояснительный текст

Заголовок h4 пояснительный текст

Заголовок h5 пояснительный текст
Заголовок h6 пояснительный текст

Тег <mark>

Элемент <mark> будет оформлен в таком стиле:

Ваня зпт всё пошло не так зпт подробности письмом тчк

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

В бутстрапе есть набор классов для выравнивания текста:

<p class="text-left">Равнение по левому краю</p>
<p class="text-center">Текст по центру</p>
<p class="text-right">Равнение по правому краю</p>
<p class="text-justify">Равнение по обоим краям</p>
<p class="text-nowrap">Текст без переносов</p>

Больше не нужно добавлять дополнительные классы для равнения с разными вариантами text-align в css.

Текст слева (ну, как обычно)

Отцентрованный текст

Текст справа

Цитата, <blockquote>

Цитаты в Bootstrap выглядят так:

Целый год между нами происходило что-то вроде интеллектуальной близости. С оттенком вражды и разврата.

Сергей Довлатов

Код примера:

<blockquote>
Целый год между нами происходило что-то вроде интеллектуальной близости. С оттенком вражды и разврата
<footer>Сергей Довлатов</footer>
</blockquote>

Чтобы добавить цитате равнение по правому краю, добавьте ей класс .blockquote-reverse:

Танцювала риба з раком, риба з раком, а петрушка з пастернаком, з пастернаком!
А цибуля з часником, а дівчина з козаком!

Н. Гоголь, Пропавшая грамота

Трансформация текста

Трансформировать текст можно простым добавлением классов: нижний, верхний регистр и заглавные буквы.

нижний регистр

верхний регистр

заглавные буквы

<p class="text-lowercase">нижний регистр</p> 
<p class="text-uppercase">верхний регистр</p> 
<p class="text-capitalize">заглавные буквы</p>

<dl>

Список описаний — не самый популярный тег, но его можно удобно использовать для быстрого создания списков с пояснениями.

Beatles
– Liverpool, Great Britain
Bon Jovi
– New Jersey, USA
<dl>
<dt>Beatles</dt>
<dd>- Liverpool, Great Britain</dd>
<dt>Bon Jovi</dt>
<dd>- New Jersey, USA</dd>
</dl>

<code>

Bootstrap добавляет строчным элементам <code> контрастный стиль, фон и красный цвет:

Примеры блочных элементов: pre, div и p.

Код примера:

Примеры блочных элементов: <code>pre</code>, <code>div</code> и <code>p</code>.

Контекстные цвета и фоны

В бутстрапе есть набор классов для выделения текста цветом или фоном: .text-muted, .text-primary, .text-success, .text-info, .text-warning, и .text-danger.

Грусть-печаль-тоска.

Важный текст.

Хорошо там, где?

Иногда вы едите тигра, а иногда тигр ест вас.

В Польше есть памятник Википедии.

Мы найдем вас и сделаем счастливыми.

 <p class="text-muted">Грусть-печаль-тоска.</p>
 <p class="text-primary">Важный текст.</p>
 <p class="text-success">Хорошо там, где?</p>
 <p class="text-info">Иногда вы едите тигра, а иногда тигр есть вас.</p>
 <p class="text-warning">В Польше есть памятник Википедии.</p>
 <p class="text-danger">Мы найдем вас и сделаем счастливыми.</p>

Классы для контекстного фона следующие: .bg-primary, .bg-success, .bg-info, .bg-warning, и .bg-danger.

Никогда не доверяйте людям, которые не умеют писать грамотно.

Вы успешно прочли предыдущие абзацы.

Пожалуйста, закройте рот с другой стороны.

Вы и правда считаете, что выключили утюг?

Внимание: все ваши корованы разграблены.

Обзор классов для текста

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

Класс Описание
.lead Выделяет параграф увеличением размера текста
.small Уменьшает размер текста до 85% от родительского элемента
.text-left Равнение текста по левому краю
.text-center Центровка текста
.text-right Равнение текста по правому краю
.text-justify Выравнивание текста по левому и правому краям
.text-nowrap Текст без переносов строк
.text-lowercase Текст в нижнем регистре
.text-uppercase Текст в верхнем регистре
.text-capitalize Каждое Слово С Заглавной Буквы
.list-unstyled Убирает стандартное оформление для списка и отступы для его элементов. Работает как для <ul>, так и для <ol>. Стили уберутся только для элементов первого уровня вложенности. Чтобы убрать стили для другой вложенности, используйте это класс снова для их родительских элементов.
.list-inline Отображает все элементы списка в одну строку, превращая их в строчные
.dl-horizontal Используется для terms (<dt>) и descriptions (<dl>) в <dl> (списке описаний, description list). Вместо вертикального отображения описания под заголовком пары располагаются горизонтально. В случаях небольших экранов списки описаний с таким классом будут отображаться как обычно, вертикально ориентированными.

Всем хорошей вёрстки :)

На десерт

Пожалуйста, избегайте есть блины с лопаты и слушайте хорошую музыку:

Тепер я хочу бачити коментарі 5