На этом уроке Вы познакомитесь с основными классами Twitter Bootstrap 3, позволяющими создавать заголовки, абзацы, цитаты и пр.
В Twitter Bootstrap 3 доступны все HTML-заголовки от <h1> до <h6>. Вы также можете использовать классы от .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>
Выше приведенный пример будет выглядеть примерно так:
Более того, вы можете использовать теги <small> или тег <span> с классом .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>
Вышеприведенный пример будет выглядеть примерно так:
Вы также можете сделать, чтобы заголовок <h1> отображался иначе, чем остальные заголовки на странице, используя компонент с классом "page-header". Кроме того, вы можете использовать тег <small>, чтобы создать подтекст к Заголовку.
<div class="page-header"> <h1>Заголовок <small>подтекст к заголовку</small> </h1> </div>
Выше приведенный пример будет выглядеть примерно так:
По умолчанию основной размер шрифта (font-size) в Bootstrap — 14px, при высоте строки (line-height) 1.428. Эти параметры применяются к тегу <body> и всем разделам. Кроме того, отступ снизу для абзацев (<p>) составляет половину высоты строки (10px по умолчанию). Вы также можете сделать любой абзац выделенным, просто добавив к нему класс .lead.
<p>Так выглядит обычный абзац Twitter Bootstrap.</p> <p class="lead">Так выглядит абзац Twitter Bootstrap, выделенный с помощью класса .lead</p>
HTML код выше приведенного примера будет выглядеть примерно так:
Вы можете легко выровнять текст внутри абзаца и другие элементы, используя классы для выравнивания текста.
<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>
Выше приведенный пример будет выглядеть примерно так:
Вы можете свободно использовать теги форматирования текста, такие как <strong>, <i>, <small>, чтобы выделить текст полужирным, курсивом, или уменьшить размер шрифта так же, как и в простом HTML.
<p><b>Полужирное начертание текста</b></p> <p><big>Текст, с увеличенным размером шрифта</big></p> <p><code>Программный код</code></p> <p><em>Акцентированный текст (курсивное начертание)</em></p> <p><i>Курсивное начертание текста</i></p> <p><mark>Выделенный текст</mark></p> <p><small>Текст с уменьшенным размером шрифта</small></p> <p><strong>Акцентированный текст (жирное начертание)</strong></p> <p><sub>Нижний</sub> и <sup>верхний</sup> индексы текста</p> <p><ins>Этот тег используется для выделения текста, добавленного в новую версию документа
(отображается подчеркнутым)</ins></p> <p><del>Этот тег используется для выделения текста, удаленного из документа
(отображается как перечеркнутый)</del></p>
Выше приведенный пример будет выглядеть примерно так:
Вы также можете преобразовать текст в нижний или верхний регистр, или начинать каждое слово с прописных букв.
<p class="text-lowercase">Машины должны работать. Люди должны думать.</p> <p class="text-uppercase">Машины должны работать. Люди должны думать.</p> <p class="text-capitalize">Машины должны работать. Люди должны думать.</p>
Цвета - это мощный способ передачи важной информации в веб-дизайне. Bootstrap имеет несколько вспомогательных классов, которые могут быть использованы для придания тексту дополнительной информации. Например, зеленый цвет текста обозначает успех, оранжевый – предупреждение, красный - ошибки и т.д.
<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>
Выше приведенный пример будет выглядеть примерно так:
Чтобы оформить любой HTML как цитату, заключите его в теги <blockquote>. Для прямого цитирования мы рекомендуем <p>.
<blockquote> <p>У моих детей, конечно, будет компьютер. Но первым делом они получат книги.</p> <small><cite>Билл Гейтс</cite></small> </blockquote>
Выше приведенный пример будет выглядеть примерно так:
В качестве альтернативы вы можете выровнять цитату по правому краю, применяя класс .pull-right к элементу <blockquote>.
<blockquote class="pull-right"> <p>У моих детей, конечно, будет компьютер. Но первым делом они получат книги.</p> <small><cite>Билл Гейтс</cite></small> </blockquote>
Выше приведенный пример будет выглядеть примерно так:
