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>

В 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>

Сергей

24.04.2020, 00:21

Замечательная статья, я установил Bootstrap 4, вот только не пойму, что дальше. Дайте пожалуйста наглядный пример куда прописывать эти стили? В какой файл и как правильно редактировать. Спасибо!

Александр Мальцев

24.04.2020, 13:33

Спасибо, за отзыв! Тут всё просто. Для этого нужно создать файл с расширением css и поместить его в какую-нибудь директорию на сайте. Например, в ту, в которой у вас расположен «bootstrap.min.css».
В этот файл помещайте свои стили, которые вы хотите применить к странице.
После этого подключите этот файл к нужным страницам после подключения CSS Bootstrap:

<!-- CSS Bootstrap -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<!-- Cвой файл стилей -->
<link rel="stylesheet" href="/assets/css/my-style.css">

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

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

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

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

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

Комментарии: 2