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