Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
Всем привет!
Продолжаем изучать основы «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>
Результат:
Н2O
см2
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 следует…
Не пропустите!…
Подписывайтесь на обновления блога!