Bootstrap — Оформление заголовков

Заголовки используются для того, чтобы представить информацию на веб-странице в виде иерархической структуры.

Корнем такой иерархии является заголовок первого уровня h1 , который размещается в верхней части страницы. Заголовок h1 на веб-странице должен быть всего один и чаще всего он используется для заключения в него название статьи, новости и т.п.

Заголовок второго уровня h2 обычно используется для создания разделов внутри статьи. Заголовки третьего уровня h3 используются для создания подразделов в заголовках второго уровня.

Заголовки 4 уровня h4 обычно используют в боковых панелях. Заголовки 5 и 6 уровня веб-мастерами используются очень редко, вместо них обычно используются теги strong или em .

Но такое использование заголовков было до появления HTML5. В этой версии появились новые элементы article , aside , nav и section . Эти элементы в отличие от заголовков предназначены для создания явных разделов.

Заголовки h1. h6 в HTML 5 уже не являются «сквозными». Т.е. если они используются внутри какого-то элемента из категории sectioning, то они уже влияют только на его структуру, и не создают неявные разделы вне его. Поэтому, например, заголовок h1 может много раз использоваться на странице. Т.е. являться отправной точкой, с которой будет начинаться создания структуры каждого явного раздела веб-страницы.

Классы h1..h6 в Bootstrap

В Bootstrap 3 и 4 имеются классы h1. h6. Данные классы предназначены для стилизации некоторого контента в виде заголовка соответствующего уровня.

Например, класс h2 при добавлении его к p изменит его дизайн так, что он будет выглядеть как заголовок 2 уровня.

Например, если добавить класс h2 к элементу h1, то заголовок 1 уровня будет выглядеть как заголовок 2 уровня.

Заголовок 1 уровня, который выглядит как заголовок 2 уровня
 

Класс page-header (Bootstrap 3)

В Bootstrap 3 имеется класс page-header, который добавляет к элементу светло-серую нижнюю границу и дополнительные отступы сверху и снизу. В основном данный класс используется для оформления заголовка h1.

Варианты CSS оформления заголовков

В этом разделе рассмотрим как с помощью CSS можно стилизовать (оформить) заголовки на сайте.

  
Название заголовка
 
 
Название заголовка
 
 
Название заголовка
 
 

  
Название заголовка
 
 
Название заголовка
 
 
Название заголовка
 
 

  
Название заголовка
 
 
Название заголовка
 
 

  
Название заголовка
 
 
Название заголовка
 
 
Название заголовка
 
 
  
Название заголовка
 
 
Название заголовка
 
 
Название заголовка
 
 
 
 
 
  
Название заголовка
 
 
Название заголовка
 
 
Название заголовка
 
 
 
 
 
  
Название заголовка
 
 
 
 
 
  
Название заголовка
 
 
 
 
 
  
Название заголовка
 
 
 
 
 
  
Название заголовка
 
 
 
 
 
  
Название заголовка
 
 
 
Источник