Сегодня продолжим изучение популярного фреймворка Bootstrap 3 и рассмотрим дополнительные и вспомогательные классы для работы с текстом, заголовками, цитатами, списками и элементами страницы. Кто не читал первую часть, рекомендую ознакомиться со статьей Подключение фреймворка Bootstrap 3 к сайту. Основы сетки шаблона. Часть 1.

Заголовки

Традиционно в HTML используются заголовки h1-h6, есть они и в Bootstrap 3. Они позволяют выделять части текста одна от другой, важно соблюдать правила следования заголовков:

• заголовок h1 должен быть на странице только ОДИН раз;
• после заголовка h1 не может следовать h3, а только h2;
• при формировании группы заголовков следование должно быть от старшего к младшему h2-h3-h4-h5-h6;
новая группа заголовков после цепочки h2-h3-h4 начнется снова с h2.

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

h1. Bootstrap заголовок

h2. Bootstrap заголовок

h3. Bootstrap заголовок

h4. Bootstrap заголовок

h5. Bootstrap заголовок

h6. Bootstrap заголовок

Лидер текст в параграфе

Применяя класс "lead" в теге p можно визуально выделить текст по сравнению с другимим параграфами.

<p class="lead">Какой-то текст. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.</p>
<p>Обычный параграф с текстом. Fusce posuere, magna sed pulvinar ultricies,
 purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>

Какой-то текст. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

Обычный параграф с текстом. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Классы выравнивание текста

Добавляя классы text-left, text-center, text-right можно располагать текст слева, справа и по центру.

<p class="text-left">Текст слева</p>
<p class="text-center">Текст по центру</p>
<p class="text-right">Текст справа</p>

Текст слева

Текст по центру

Текст справа

Классы преобразований текста

Классы text-lowercase, text-uppercase, text-capitalize позволяют преобразовывать текст в нижний, верхний регистр и делать заглавной первую букву Каждого Слова В Абзаце.

<p class="text-lowercase">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="text-uppercase">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="text-capitalize">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Цитаты в Bootstrap

Особый тег blockquote позволяет оформить ваш текст, добавив в него цитату, состоящую из заголовка в теге P и основного текста в теге

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.</p>
  <footer>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

Список без стиля

Довольно часто при создании ненумерованного и не маркированного списка напротив строк появляются точки, маркеры и т.д. Эта проблема решалась в CSS файле, путем установки свойств тега ul.

ul{
list-style-type: none;
}

В Bootstrap 3 для этого есть специальный класс list-unstyled, который упрощает эту задачу.

<ul class="list-unstyled">
<li>Текст 1</li>
<li>Текст 2</li>
<li>Текст 3</li>
</ul>

• Текст 1
• Текст 2
• Текст 3

Список в строку

Это звучало нереально, пока в Bootstrap не появился класс list-inline, позволивший вертикальный список превратить в горизонтальную строку, с отступами, как и положено.

<ul class="list-inline">
<li>Текст 1</li>
<li>Текст 2</li>
<li>Текст 3</li>
</ul>

• Текст 1
• Текст 2
• Текст 3

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!