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
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
