Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

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

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

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

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

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

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

10 <a>Codepen</a>