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

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

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 шрифты на различных разрешениях экрана будут автоматически адаптироваться, сохраняя при этом пропорции относительно друг друга. В этом режиме невозможна ситуация, при которой текст станет больше заголовков.

Чтобы включить функцию RFS необходимо указать значение true у переменной $enable-responsive-font-sizes. Это можно сделать в отдельном файле с вашими настройками проекта. После этого станет доступно три функции:

  • font-size()
  • responsive-font-size()
  • rfs()

Первые две функции являются «сахаром» функции rfs(). Они вызывают её же. Это сделано для удобного использования внутри проекта. Так сохраняется семантический смысл функций. Все функции принимают 2 параметра:

  • Значение адаптивности. Здесь можно не указывать единицу измерения, либо указывать значение в px или rem.
  • Флаг !important. По умолчанию имеет значение false. При использовании значения true к свойству font-size будет добавлен флаг !important.

Перейдите на сайт 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.


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

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

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

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

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

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

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

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

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

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

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

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

Есть вопрос или хотите участвовать в обсуждении?

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

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»