Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Работа с текстом Bootstrap 5: Основы верстки

Bootstrap дает широкие возможности при работе с текстом. Для этого разработчики ввели множество различных классов. Правильная работа с типографикой и использование доступных инструментов Bootstrap позволяют создавать правильную структуру тегов, при этом видоизменяя контент так, как это необходимо по дизайну. Рассмотрим это на примере создания заголовков.

Начинающие разработчики используют разные уровни заголовков только для изменения размера заголовка. Распространенный пример:

<div class="container">
  <div class="row">
    <div class="col">
      <h1>Страница сайта</h1>

      <!-- Здесь текст -->

      <h3>Преимущества работы с нами</h3>
      <h2>Быстрая доставка</h2>
      <!-- Текст -->
      <h2>Низкие цены</h2>
      <!-- Текст -->
    </div>
  </div>
</div>

В попытке выделить сами преимущества нарушилась семантика заголовка. Теперь неясно какой заголовок к чему относится. Заголовок <h3> следует за заголовком <h1>, что означает пропуск целой секции между ними с заголовком второго уровня. Сами же преимущества перестали относиться к заголовку «Преимущества работы с нами», так как имеют заголовки с большим весом.

Чтобы избежать такого нарушения семантики в Bootstrap существуют классы .h*, где вместо звездочки используется число от 1 до 6. Эти классы установят внешний вид тексту таким, как если бы он был обернут в один из заголовков. Это поможет решить проблему выше. Правильная верстка будет выглядеть так:

<div class="container">
  <div class="row">
    <div class="col">
      <h1>Страница сайта</h1>

      <!-- Здесь текст -->

      <h2 class="h3">Преимущества работы с нами</h2>
      <h3 class="h2">Быстрая доставка</h3>
      <!-- Текст -->
      <h3 class="h2">Низкие цены</h3>
      <!-- Текст -->
    </div>
  </div>
</div>

С точки зрения визуального представления ничего не изменилось, а семантический смысл пришел в норму.

Другая распространенная проблема — оборачивание в тег заголовка текста, который не является заголовком страницы. Это делают для выделения участка текста, при этом забывая о доступности и семантике страницы.

В уроке уже описаны классы вида .h*, которые можно использовать для такого выделения. Помимо этого в Bootstrap существуют 4 класса, которые отвечают за создание визуальных заголовков. Это классы .display-1, .display-2, .display-3 и .display-4. По умолчанию они имеют больший размер относительно своих братьев — заголовков <h1> — <h4>, при этом значение насыщенности у них меньше.

По умолчанию, многие теги для вывода текстового контента, такие как списки, цитаты, определение терминов уже имеют стили по умолчанию. Помимо этого множество стандартных задач уже реализовано внутри Bootstrap, а это значит, что нет необходимости писать свои стили.

Например, для создания inline-списка используется класс .list-inline, который сбросит значения свойств list-style и padding. Добавив класс .list-inline-item к дочерним элементам, получится аккуратный inline-список со всеми необходимыми отступами.

<nav>
  <ul class="list-inline">
    <li class="list-inline-item"><a href="#">Ссылка 1</a></li>
    <li class="list-inline-item"><a href="#">Ссылка 2</a></li>
    <li class="list-inline-item"><a href="#">Ссылка 3</a></li>
  </ul>
</nav>

RFS

Начиная с версии Bootstrap 4.3 появилась функция Responsive Font Sizes (RFS), которая отвечает за адаптивность текста. При использовании RFS шрифты на различных разрешениях экрана будут автоматически адаптироваться, сохраняя при этом пропорции относительно друг друга. В этом режиме невозможна ситуация, при которой текст станет больше заголовков.

С версии Bootstrap 5 RFS включен по умолчанию. При создании своих компонентов доступна функция rfs(), которая принимает базовое значение для свойства в единицах rem и свойство, которое нужно добавить: rfs(value, property)

.title {
  @include rfs(4rem, font-size);
}

Этот код создаст правило font-size для селектора .title и дополнительно создаст медиазапрос:

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Если вам интересно, откуда берутся все эти расчеты, то можете посмотреть их в официальном репозитории RFS

Перейдите на сайт CodePen и попробуйте изменять ширину viewport. При изменении ширины размер шрифта так же будет уменьшаться

Управление шрифтами

Для управления набором шрифтов в Bootstrap существует SASS переменная $font-family-base в которой находятся шрифты, доступные в рамках проекта. По умолчанию эта переменная берет значение из переменной $font-family-sans-serif, внутри которой находятся следующие шрифты:

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

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

По возможности старайтесь не менять этот набор шрифтов. Это повысит скорость отображения вашего сайта и поможет избежать различных проблем при загрузке шрифтов


Самостоятельная работа

Добавьте текст на вашу страницу. Используйте заголовки первого, второго и третьего уровня. Сделайте их адаптивными при помощи RFS


Дополнительные материалы

  1. Документация по использованию типографики в Bootstrap
  2. Проект RFS на Github

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
с нуля
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»