Работа с текстом. Основы bootstrap 3 для начинающих. Урок №5

Всем привет!
Продолжаем изучать основы «bootstrap 3».
Пришло время поработать над тестом. Что именно мы научимся в этом уроке?
Мы научимся выравнивать текст, выставлять размер, менять цвет, делать текст жирным, курсивом, зачеркнутым либо подчеркнутым… И это еще далеко не весь список. Итак, приступаем к уроку №5 и учимся работать с текстом.

1. Заголовки в Bootstrap

Если вы изучали основы HTML, то должны знать, что заголовки обозначаются тегами  <h1> - <h6>. Так вот, в Bootstrap 3 пишем аналогично:

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

Результат:

Если вам нужно создать в заголовке вторичный текст, можно использовать  тег <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>

Результат:

2. Параграф в Bootstrap

<p>текст в Bootstrap</p>

Выделение параграфа классом «lead»

<p class="lead">текст в Bootstrap </p>

Для уменьшения текста на 85% от размера родительского элемента, используют тег  <small>.
Закрывающий тег обязателен.

<small>1.текст в Bootstrap</small>
<p>2. текст в<small> Bootstrap</small></p>
<p class="lead">3. текст в<small> Bootstrap</small></p>

Результат:

3. Выделение текста в Bootstrap

Полужирный текст

<b>Полужирный текст</b>

Жирный текст

<strong>Жирное начертание</strong>

Курсивное начертание

<i>Курсивное начертание текста</i>

Выделенный текст фоновым цветом

<mark>Выделенный текст</mark>

Выделение программного кода

<code>Программный код</code>

Результат:

4. Нижний и верхний индексы текста в Bootstrap

Нижний

<sub>Нижний</sub>

Верхний

<sup>верхний</sup>

Пример:

<p>Н<sub>2</sub>O</p>
<p>см<sup>2</sup></p>

Результат:

Н₂O

см²

5. Подчеркивание текста в Bootstrap

Подчеркнутый тест

<ins> Отображается подчеркнутый тест </ins>

Перечеркнутый текст

<del>Отображается перечеркнутый текст </del>

Результат:

Отображается подчеркнутый тест

Отображается перечеркнутый текст

6. Размеры текста

Увеличить размер текста на одну единицу

<big>Текст с увеличенным размером шрифта</big>

Уменьшить размер текста на одну единицу

<small>Текст с уменьшенным размером шрифта</small>

Результат:

Текст с увеличенным размером шрифта

Текст с уменьшенным размером шрифта

7. Выравнивание текста и заголовка

Чтобы выровнять текст или заголовок,  достаточно добавить class:

"text-left" - Выравнивание по левому краю
"text-center" - Выравнивание по центру
"text-right" - Выравнивание по правому краю
"text-justify" - Выравнивание текста по ширине

Для параграфа

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

Результат:

8. Цитата

Полоса с левой стороны

 

<blockquote>
<p>Всё, что человек способен представить в воображении, другие сумеют претворить в жизнь.</p>
<small>Жюль Верн</small>
</blockquote>

Результат:

Полоса с правой стороны
Добавить нужно класс «pull-right»

<blockquote class="pull-right">
<p>Всё, что человек способен представить в воображении, другие сумеют претворить в жизнь.</p>
<small>Жюль Верн</small>
</blockquote>

Результат:

8. Цвет текста для информации

Способ передачи важной информации в веб-дизайне

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

Результат:

Продолжение по основам Bootstrap 3 следует…
Не пропустите!…
Подписывайтесь  на обновления блога!