Заголовки

Наполняя сайт контентом вы можете использовать на любой странице заголовки разных уровней: от h1 до h6.

H1. Заголовок

H2. Заголовок

H3. Заголовок

H4. Заголовок

H5. Заголовок

H6. Заголовок

                <h1>H1. Заголовок</h1>                <h2>H2. Заголовок</h2>                <h3>H3. Заголовок</h3>                <h4>H4. Заголовок</h4>                <h5>H5. Заголовок</h5>                <h6>H6. Заголовок</h6>                <div class="h1">H1. Заголовок</div>                <div class="h2">H2. Заголовок</div>                <div class="h3">H3. Заголовок</div>                <div class="h4">H4. Заголовок</div>                <div class="h5">H5. Заголовок</div>                <div class="h6">H6. Заголовок</div>

Блочные текстовые элементы

Стили для обычных блочных элементов HTML5.

Обычный текст

Тег-выделитель для подсветки текста.

~~Зачеркнутый текст~~

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

Мелкий текст

Жирный текст

Курсив

                <p class="font-p">Обычный  текст</p>                <p class="font-p">Тег-выделитель для  <mark>подсветки</mark>  текста.</p>                <p class="font-p"><s>Зачеркнутый текст</s></p>                <p class="font-p"><u>Подчеркнутый текст</u></p>                <p class="font-small">Мелкий текст</p>                <p class="font-bold-p">Жирный текст</p>                <p class="font-p"><em>Курсив</em></p>

Цитаты

Используются если нужно привести цитату в тексте.

Я собираюсь сделать ему предложение, от которого он не сможет отказаться.

Вито Корлеоне. Фильм «Крестный отец»

                <blockquote class="blockquote">                    <i class="icon-double-quotes-l"></i>                    <div class="wrap">                        <p class="font-big">Я собираюсь сделать ему предложение, от которого он не сможет отказаться.</p>                        <div class="blockquote-footer font-p">Вито Корлеоне.<cite>Фильм «Крестный отец»</cite></div>                    </div>                </blockquote>

Врезки

Используются для выделения важных моментов в тексте.

Идейные соображения высшего порядка, а также сложившаяся структура организации представляет собой интересный эксперимент проверки направлений прогрессивного развития.

                <p class="lead font-big">Идейные соображения высшего порядка, а также сложившаяся структура организации представляет собой интересный эксперимент проверки направлений прогрессивного развития.</p>

Списки

Используются для упорядочивания текста. По способу оформления бывают маркированными и нумерованными, а по структуре: одноуровневыми и многоуровневыми.

Неупорядоченный список

текст в списке
текст в списке
текст в списке

текст в списке
текст в списке

                <ul class="list-dash">                    <li>текст в списке</li>                    <li>текст в списке</li>                    <li>текст в списке</li>                    <ul class="list-circle">                        <li>текст в списке</li>                        <li>текст в списке</li>                    </ul>                </ul>

Упорядоченный список

текст в списке
текст в списке
текст в списке

текст в списке
текст в списке

                <ol class="list-counter">                    <li>текст в списке</li>                    <li>текст в списке</li>                    <li>текст в списке</li>                    <ol>                        <li>текст в списке</li>                        <li>текст в списке</li>                    </ol>                </ol>

Не стилизованный список

текст в списке
текст в списке
текст в списке

текст в списке
текст в списке

                <ul class="unstyled">                    <li>текст в списке</li>                    <li>текст в списке</li>                    <li>текст в списке</li>                    <ul class="list-circle">                        <li>текст в списке</li>                        <li>текст в списке</li>                    </ul>                </ul>

Список с использованием иконок

текст в списке с иконкой
текст в списке
текст в списке

                <ul class="list icons unstyled">                    <li><i class="icon-briefcase-2-line"></i>текст в списке с иконкой</li>                    <li><i class="icon-profile-line"></i>текст в списке</li>                    <li><i class="icon-inbox-archive-line"></i>текст в списке</li>                </ul>