Оформление текста в Bootstrap

Оформление текста шаблона uCoz с помощью фреймворка Bootstrap: заголовки h1-h6, шрифт, списки, выравнивание, форматирование

Сергей 22.12.2016 2718 0.0 из 5.0 (0)

Оцените материал:

Цель урока

Познакомиться с инструментами оформления текста в Bootstrap. Мы рассмотрим заголовки, основной текст, форматирование, выравнивание, списки, цитаты.

Найти применение инструментам оформления в интернет магазине.

Заголовки

Все HTML заголовки (<h1>-<h6>) имеют заданный размер шрифта. Также для задания заголовков могут использоваться классы (.h1-.h6). Их используют, когда необходимо сохранить размер текста, но нельзя при этом использовать семантику заголовков. Второй случай — чтобы сохранить свойство inline у контейнера с заголовком.

h1. Заголовок	Полужирный 36px
h2. Заголовок	Полужирный 30px
h3. Заголовок	Полужирный 24px
h4. Заголовок	Полужирный 18px
h5. Заголовок	Полужирный 14px
h6. Заголовок	Полужирный 12px

<h1>h1. Заголовок</h1>
<h2>h2. Заголовок</h2>
<h3>h3. Заголовок</h3>
<h4>h4. Заголовок</h4>
<h5>h5. Заголовок</h5>
<h6>h6. Заголовок</h6>

Чтобы добавить заголовку примечание (подзаголовок), используйте тег <small> или класс .small:

h1. Заголовок Подзаголовок

h2. Заголовок Подзаголовок

h3. Заголовок Подзаголовок

h4. Заголовок Подзаголовок

h5. Заголовок Подзаголовок

h6. Заголовок Подзаголовок

<h1>h1. Заголовок <small>Подзаголовок</small></h1>
<h2>h2. Заголовок <small>Подзаголовок</small></h2>
<h3>h3. Заголовок <small>Подзаголовок</small></h3>
<h4>h4. Заголовок <small>Подзаголовок</small></h4>
<h5>h5. Заголовок <small>Подзаголовок</small></h5>
<h6>h6. Заголовок <small>Подзаголовок</small></h6>

Форматирование текста

По умолчанию весь текст в Bootstrap имеет размер font-size 14px и высоту строки line-height 1,428. Это касается <body> и всех параграфов. У параграфом (<p>) также имеется отступ снизу равный половине от высоты строки (по умолчанию 10px).

<p> Ваш текст... </p>

Чтобы выделить параграф, можно использовать класс .lead

Обычный параграф

Параграф с классом .lead

<p> Обычный параграф </p>
<p class="lead">Параграф с классом .lead </p>

Подсветка текста выполняется с помощью тега <mark>:

Текст с подсветкой

<p> Текст с <mark>подсветкой</mark> </p>

Зачеркнутый текст в магазинах часто используется для старых цен или неактуальной информации. Этого можно добиться с помощью тега <s>.

Для выделения жирным используется тег <strong>, а для курсива — <em>. Помните, что читать длинные тексты набранные курсивом очень дискомфортно, такое форматирование допустимо для цитат, отзывов, но не для набора описаний или оформления сайта.

Выравнивание

Пожалуй, после форматирования текста, наиболее часто приходится использовать выравнивание. Не используйте устаревшие атрибуты align и не пишите в CSS свойства text-align. Теперь, как только вам понадобится выровнять содержимое блока, используйте готовые классы .text-left, .text-right, .text-justify, .text-nowrap и .text-center.

По левому краю.

По центру.

По правому краю.

По всей ширине.

Без переносов на новую строку.

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

Цитаты

Размещение цитат актуально для отзывов. Используйте для них тег <blockquote>. Пример:

«Этот текст отзыва»

Имя автора

<blockquote>
 <p>«Этот текст отзыва»</p>
 <footer>Имя автора</footer>
</blockquote>

Когда нужно выровнять цитату по правому краю, используйте класс .blockquote-reverse:

«Этот текст отзыва»

Имя автора

<blockquote class="blockquote-reverse">
 <p>«Этот текст отзыва»</p>
 <footer>Имя автора</footer>
</blockquote>

Списки

И завершающая в данном уроке часть оформления это списки. Они будет нумерованные, ненумерованные, нестилизованные, строчные.

Нумерованный	Пример Пример Пример	<ol> <li> Пример </li> <li> Пример </li> <li> Пример </li> </ol>
Ненумерованный	Пример Пример Пример	<ul> <li> Пример </li> <li> Пример </li> <li> Пример </li> </ul>
Нестилизованные	Пример Пример Пример	<ul class="list-inline"> <li> Пример </li> <li> Пример </li> <li> Пример </li> </ul>
Строчный	Пример Пример Пример	<ul class="list-unstyled"> <li> Пример </li> <li> Пример </li> <li> Пример </li> </ul>
Списки-дескрипторы	Термин 1 Описание 1 Термин 2 Описание 2 Термин 3 Описание 3	<dl> <dt> Термин 1</dt> <dd> Описание 1</dd> <dt> Термин 2</dt> <dd> Описание 2</dd> <dt> Термин 3</dt> <dd> Описание 3</dd> </dl>

Задание

Подумайте, как можно разделить основной контент страницы с помощью заголовков
Выделите важные места в тексте с помощью тегов mark, strong
Запомните классы для выравнивания текста. Они сильно пригодятся при создании блоков магазина
Списки дескрипторы хорошо подходят для размещения описаний товара, а также способов его оплаты и получения

Оцените материал:

Расскажите друзьям и коллегам о полезной статье:

Обсуждение

Всего комментариев: 0