Сегодня продолжим изучение популярного фреймворка 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.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

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

Довольно часто при создании ненумерованного и не маркированного списка напротив строк появляются точки, маркеры и т.д. Эта проблема решалась в 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

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



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok