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

В этой статье рассмотрим различные варианты оформления HTML заголовков, а также познакомимся с Bootstrap классами h1..h6 и page-header.
Назначение HTML заголовков
Заголовки используются для того, чтобы представить информацию на веб-странице в виде иерархической структуры.
Корнем такой иерархии является заголовок первого уровня 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 уровня.
<p class="h2">Некоторый контент...</p>
Например, если добавить класс h2 к элементу h1, то заголовок 1 уровня будет выглядеть как заголовок 2 уровня.
<h1 class="h2">Заголовок 1 уровня, который выглядит как заголовок 2 уровня</h1>
Класс page-header (Bootstrap 3)
В Bootstrap 3 имеется класс page-header, который добавляет к элементу светло-серую нижнюю границу и дополнительные отступы сверху и снизу. В основном данный класс используется для оформления заголовка h1.
<h1 class="page-header">Название статьи</h1>
Варианты CSS оформления заголовков
В этом разделе рассмотрим как с помощью CSS можно стилизовать (оформить) заголовки на сайте.
Вариант 1.

<style> .header-h1 { position: relative; margin-bottom: .5rem; } .header-h1::after { content: ""; position: absolute; border-top: 2px solid #c62828; border-bottom: 2px solid #c62828; height: .375rem; left: 0; top: 50%; width: 100%; transform: translateY(-50%); z-index: -999; } .header-h1 h1 { font-size: 1.5rem; color: #c62828; display: inline-block; background: #fff; margin-bottom: 0; padding-right: 1rem; text-transform: uppercase; } .header-h1-center { text-align: center; } .header-h1-center h1 { padding-left: 1rem; } .header-h1-right { text-align: right; } .header-h1-right h1 { padding-left: 1rem; padding-right: 0; } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-center"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-right"> <h1>Название заголовка</h1> </div>
Вариант 2.

<style> .header-h1 h1 { position: relative; padding-bottom: .5rem; font-size: 1.5rem; text-transform: uppercase; text-align: center; color: #00838f; } .header-h1 h1::before { content: ""; position: absolute; border-bottom: 2px solid #00838f; bottom: .25rem; left: 50%; width: 30%; transform: translateX(-50%); } .header-h1 h1::after { content: ""; position: absolute; border-bottom: 2px solid #00838f; bottom: 0; left: 50%; width: 15%; transform: translateX(-50%); } .header-h1-left h1 { text-align: left; } .header-h1-left h1::before, .header-h1-left h1::after { left: 0; transform: translateX(0); } .header-h1-right h1 { text-align: right; } .header-h1-right h1::before, .header-h1-right h1::after { left: unset; right: 0; transform: translateX(0); } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-left"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-right"> <h1>Название заголовка</h1> </div>
Вариант 3.

<style> .header-h1 { position: relative; margin-bottom: .5rem; text-align: center; } .header-h1 h1 { display: inline-block; background: #fff; margin-bottom: 0; font-size: 1.5rem; text-transform: uppercase; padding: .5rem 1.5rem; border: .125rem solid #6a1b9a; color: #6a1b9a; } .header-h1 h1::after { content: ""; position: absolute; background: #6a1b9a; height: .125rem; left: 0; top: 50%; width: 100%; transform: translateY(-50%); z-index: -999; } .header-h1-dark h1 { background: #6a1b9a; color: #fff; } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-dark"> <h1>Название заголовка</h1> </div>
Вариант 4.

<style> .header-h1 { position: relative; margin-bottom: .5rem; text-align: center; } .header-h1 h1 { display: inline-block; background: #fff; margin-bottom: 0; font-size: 1.5rem; text-transform: uppercase; padding-left: 1rem; padding-right: 1rem; color: #f57f17; } .header-h1::after { content: ""; position: absolute; background: #f57f17; height: .25rem; left: 0; top: 50%; width: 100%; transform: translateY(-50%); z-index: -999; } .header-h1-left { text-align: left; } .header-h1-left h1 { padding-left: 0; } .header-h1-right { text-align: right; } .header-h1-right h1 { padding-right: 0; } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-left"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-right"> <h1>Название заголовка</h1> </div
Вариант 5.

<style> .header-h1 h1 { padding-bottom: .125rem; border-top: .125rem solid #000; border-bottom: .125rem solid #000; font-size: 1.5rem; text-transform: uppercase; text-align: center; } .header-h1-left h1 { text-align: left; } .header-h1-right h1 { text-align: right; } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-left"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-right"> <h1>Название заголовка</h1> </div>
Вариант 6.

<style> .header-h1 { position: relative; text-align: center; margin-bottom: .5rem; } .header-h1 h1 { display: inline-block; background: #fff; margin-bottom: 0; padding: 0.25rem .875rem; border-left: .125rem solid #e0e0e0; border-right: .125rem solid #e0e0e0; font-size: 1.25rem; text-transform: uppercase; color: #9e9e9e; } .header-h1::after { content: ""; position: absolute; background: #e0e0e0; height: .125rem; left: 0; top: 50%; width: 100%; transform: translateY(-50%); z-index: -999; } .header-h1-left { text-align: left; } .header-h1-left h1 { padding-left: 0; border-left: none; } .header-h1-right { text-align: right; } .header-h1-right h1 { padding-right: 0; border-right: none; } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-left"> <h1>Название заголовка</h1> </div> <div class="header-h1 header-h1-right"> <h1>Название заголовка</h1> </div>
Вариант 7.

<style> .header-h1 { position: relative; text-align: center; margin-bottom: .5rem; } .header-h1 h1 { position: relative; display: inline-block; background: #fff; margin-bottom: 0; padding: 0.5rem 1rem; border-bottom: .125rem solid #a5d6a7; font-size: 1.25rem; text-transform: uppercase; color: #4caf50; } .header-h1 h1::before { content: ""; position: absolute; left: 50%; bottom: -1.25rem; transform: translateX(-1.25rem); border-top: 1.25rem solid #a5d6a7; border-left: 1.25rem solid transparent; border-right: 1.25rem solid transparent; } .header-h1 h1::after { content: ""; position: absolute; left: 50%; bottom: -1.125rem; transform: translateX(-1.25rem); border-top: 1.25rem solid #fff; border-left: 1.25rem solid transparent; border-right: 1.25rem solid transparent; } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div>
Вариант 8.

<style> .header-h1 { text-align: center; margin-bottom: .5rem; } .header-h1 h1 { background: #0097a7; margin-bottom: 0; padding: .5rem 1rem; font-size: 1.25rem; text-transform: uppercase; color: #fff; } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div>
Вариант 9.

<style> .header-h1 { text-align: center; margin-bottom: .5rem; } .header-h1 h1 { display: inline-block; position: relative; background: #0097a7; color: #fff; margin-bottom: 0; padding: .5rem 3rem; font-size: 1.5rem; text-transform: uppercase; } .header-h1 h1::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-left: 1.5rem solid #fff; border-top: 3rem solid transparent; border-bottom: 3rem solid transparent; } .header-h1 h1::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-right: 1.5rem solid #fff; border-top: 3rem solid transparent; border-bottom: 3rem solid transparent; } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div>
Вариант 10.

<style> .header-h1 { text-align: center; margin-bottom: .5rem; } .header-h1 h1 { display: inline-block; background: #0097a7; color: #fff; margin-bottom: 0; padding: .5rem 1rem .625rem 1rem; font-size: 1.5rem; text-transform: uppercase; border-radius: 30px; } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div>
Вариант 11.

<style> .header-h1 { position: relative; margin-bottom: .5rem; } .header-h1 h1 { font-size: 1.5rem; margin-bottom: 0; padding-left: 3rem; color: #e91e63; } .header-h1 h1::before { content: ""; position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; background: #e91e63; } .header-h1 h1::after { content: ""; position: absolute; left: 0; top: 2rem; width: 100%; height: .25rem; background-color: #e91e63; } </style> <div class="header-h1"> <h1>Название заголовка</h1> </div>
В этот файл помещайте свои стили, которые вы хотите применить к странице.
После этого подключите этот файл к нужным страницам после подключения CSS Bootstrap: