Изменение font-weight в Bootstrap: предопределенные классы

Быстрый ответ

В Bootstrap для установки жирности шрифта можно использовать такие вспомогательные классы как .fw-bold для жирного текста, .fw-semibold для полужирного и .fw-normal для текста с нормальной толщиной шрифта:

<strong class="fw-bold">Жирный текст во всей своей красе!</strong>
<strong class="fw-semibold">Полужирный текст – оптимальный вариант</strong>
<span class="fw-normal">Обычный текст, спокойствие и умеренность</span>

Это помогает сохранить порядок в CSS, делая его аккуратным и структурированным.

Вспомогательные классы Bootstrap для контролирования жирности текста

Bootstrap порадует вас разнообразием уровней толщины шрифтов. В четвёртой версии фреймворка появились такие классы как .font-weight-bold, .font-weight-normal и .font-weight-light, призванные облегчить и усовершенствовать выделение текста, сохраняя при этом стиль и оформление в духе Bootstrap.

Нет необходимости создавать собственные классы

Если Bootstrap предоставляет обширный спектр готовых классов, то нет никакой необходимости усложнять ситуацию, создавая собственные CSS-классы, такие как .font-bold. Вместо этого можно применять уже существующие классы, что сэкономит время и спасёт от неконсистентности дизайна.

Помните проверенную истину: не стоит чинить то, что работает.

Дальше простого: управление жирностью текста с использованием классов Bootstrap

Для быстрого применения жирного начертания текста идеально подойдёт тег <strong>. Однако, если вам нужен полный контроль над всеми градациями жирности, то стоит обратиться к классам Bootstrap, таким как .fw-light, .fw-normal, .fw-bold и .fw-bolder. Они помогут передать все нюансы текстового сообщения.

Визуализация

Представьте набор классов Bootstrap для контроля жирности шрифта как универсальную ящичку с инструментами (🧰), где каждый инструмент соответствует определённому уровню жирности:

| Класс Bootstrap    | Инструмент    | Жирность    |
|--------------------|---------------|-------------|
| .fw-light          | 🪶 Перышко    | Лёгкий      |
| .fw-normal         | 📄 Листок     | Нормальный  |
| .fw-bold           | 🔨 Молот      | Жирный      |
| .fw-bolder         | 🛠️ Кувалда   | Очень жирный|

Применение этого набора классов Bootstrap существенно улучшит вашу стилистику.

Сохранение единства визуального внешнего вида

Консистентность — залог успешного дизайна. Преднастроенные классы Bootstrap помогают её достичь, минимизируя визуальные недочёты, которые могут возникнуть при использовании самописных классов. Созданием классов в Bootstrap занимаются профессионалы, которые проводят тщательное тестирование для обеспечения идеального визуального восприятия.

Пользовательские классы: когда это необходимо

Иногда для специальных проектов стандартные классы Bootstrap не подойдут. В таких случаях создание собственных CSS-классов может быть оправданным, например:

/* Когда 300 — это новый нормальный вес */
.font-weight-300 {  
  font-weight: 300;
}

Используйте собственные классы обдуманно, когда это действительно необходимо:

<p class="font-weight-300">Текст лёгкости лета</p>

Полезные материалы

1. Типографика · Bootstrap v5.1 — Официальная документация по управлению типографикой и классами жирности шрифта в Bootstrap.
2. Текст · Bootstrap v5.1 — Проверенные классы для управления стилем и толщиной текста.
3. Шпаргалка Bootstrap 5 от ThemeSelection | Классы — Полный перечень классов Bootstrap 5 с акцентом на классы для жирности шрифта.
4. font-weight – CSS: Cascading Style Sheets | MDN — Статья от Mozilla о свойстве CSS font-weight.
5. font-weight | CSS-Tricks — Подробное руководство по свойству font-weight и особенностям его использования.
6. Bootstrap 5 alpha! | Блог Bootstrap — Обзор новинок Bootstrap 5, включая типографику и вспомогательные классы.