Продолжаем изучать фреймворк Bootstrap 3.
В этом уроке мы поговорим о том, как при помощи Bootstrap можно оформлять текст, цитаты и т. д.
Пожалуй, начну с заголовка.
Заголовки в Bootstrap
В Bootstrap 3 все HTML заголовки от <h1> до <h6> и классы в CSS от .h1 и до .h6 являются доступными.
<h1>h1. Bootstrap заголовок</h1> <h2>h2. Bootstrap заголовок</h2> <h3>h3. Bootstrap заголовок</h3> <h4>h4. Bootstrap заголовок</h4> <h5>h5. Bootstrap заголовок</h5> <h6>h6. Bootstrap заголовок</h6>
C помощью тега <small> в любом заголовке можно создать вторичный текст.
<h1>h1. Bootstrap заголовок <small>Вторичный текст</small></h1> <h2>h2. Bootstrap заголовок <small>Вторичный текст</small></h2> <h3>h3. Bootstrap заголовок <small>Вторичный текст</small></h3> <h4>h4. Bootstrap заголовок <small>Вторичный текст</small></h4> <h5>h5. Bootstrap заголовок <small>Вторичный текст</small></h5> <h6>h6. Bootstrap заголовок <small>Вторичный текст</small></h6>
Общий текст в Bootstrap (параграф)
В Bootstrap все параграфы размером 14px (font-size:14px;), междустрочный интервал 1.428 (line-height: 1.428;), расстояние между параграфами 10px (margin: 0 0 10px;):
<p>текст в Bootstrap</p>
Можно выделить параграф путем добавления класса lead.
<p class="lead"> текст в Bootstrap </p>
Если нужно уменьшить выделение текста, используйте тег <small>. Размер будет составлять 85% от размера его родительского элемента.
<small> текст в Bootstrap</small>
или так:
<p> текст в <small> Bootstrap</small></p>
можно так:
<p class="lead"> текст в <small> Bootstrap</small></p>
Жирный шрифт в Bootstrap
Чтобы выделить какую-то область текста жирным шрифтом, воспользуйтесь тегом <strong></strong> или<b></b>
<strong> текст в Bootstrap </strong>
или так:
<p> текст в <strong> <strong> </strong>Bootstrap</strong></p>
можно так:
<p class="lead">текст в <strong> <strong> </strong>Bootstrap</strong></p>
Курсив в Bootstrap
Чтобы выделить какую-либо область текста курсивом, воспользуйтесь тегом <em></em> или <i></i>
<em> текст в Bootstrap</em>
или так:
<p> текст в <em> Bootstrap</em></p>
можно так:
<p class="lead">текст в <em>Bootstrap</em></p>
Выравнивание текста и заголовка в Bootstrap
Текст или заголовок в Bootstrap можно легко выровнять по центру, разместить слева, справа или по ширине экрана с помощью специальных классов.
Выравнивание по левому краю.
Выравнивание по центру.
Выравнивание по правому краю.
Выравнивание текста по ширине
для параграфа:
<p class="text-left">Выравнивание по левому краю.</p>
<p class="text-center">Выравнивание по центру.</p>
<p class="text-right">Выравнивание по правому краю.</p>
<p class="text-justify">Выравнивание текста по ширине</p>
для заголовков:
<h1 class="text-left">Выравнивание по левому краю.</h1 >
<h2 class="text-center">Выравнивание по центру.</h2>
<h3 class="text-right">Выравнивание по правому краю.</h3>
<h4 class="text-justify">Выравнивание текста по ширине</h4>
Создание цитат
Если вам нужно вставить цитату на сайт, заключите его в теги <blockquote>.
<blockquote> <p>Всё, что человек способен представить в воображении, другие сумеют претворить в жизнь.</p> <small>Жюль Верн</small> </blockquote>
Цитату можно выровнять по правому краю с помощью класса .pull-right к элементу <blockquote>:
<blockquote class="pull-right"> <p>Всё, что человек способен представить в воображении, другие сумеют претворить в жизнь.</p> <small>Жюль Верн</small> </blockquote>
Я думаю, на этом месте стоит заканчивать наш урок. В следующем уроке мы продолжим знакомиться с возможностями в Bootstrap, которые можно использовать для работы с текстом.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274370 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220444 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181504
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐