Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная Инструкции Bootstrap Bootstrap 3 - Работа с текстом

Bootstrap 3 - Работа с текстом

На этом уроке Вы познакомитесь с основными классами 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. Заголовок Bootstrap Дополнительный текст

h2. Заголовок Bootstrap Дополнительный текст

h3. Заголовок Bootstrap Дополнительный текст

h4. Заголовок Bootstrap Дополнительный текст

h5. Заголовок Bootstrap Дополнительный текст
h6. Заголовок Bootstrap Дополнительный текст

Вы также можете сделать, чтобы заголовок <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>

 

Выше приведенный пример будет выглядеть примерно так:

Форматирование текста с помощью Twitter Bootstrap

Вы можете свободно использовать теги форматирования текста, такие как <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>

 

Выше приведенный пример будет выглядеть примерно так: