Перезагрузка
Перезагрузка — это набор изменений CSS для конкретных элементов в одном файле, запускает Bootstrap, чтобы обеспечить элегантную, последовательную и простую основу для построения.
Подход
Вот наши рекомендации и причины выбора того, что следует переопределить в Перезагрузке:
- Обновите некоторые значения браузера по умолчанию, чтобы использовать rem вместо em для масштабируемого интервала между компонентами.
- Избегайте margin-top . Вертикальные поля могут исчезнуть, что приведет к неожиданным результатам. Что еще более важно, одно направление margin это более простая ментальная модель.
- Для упрощения масштабирования по размеру устройства в элементах блока следует использовать rem для margin .
- Сведите к минимуму объявления свойств, связанных с font , по возможности используйте inherit .
Переменные CSS
В версии 5.1.1 мы стандартизировали обязательные @import для всех наших пакетов CSS (включая bootstrap.css , bootstrap-reboot.css и bootstrap-grid.css ), чтобы включить _root.scss . Это добавляет переменные CSS уровня :root ко всем пакетам, независимо от того, сколько из них используется в этом пакете. В конечном счете, в Bootstrap 5 со временем будет добавляться больше CSS-переменных, чтобы обеспечить больше настроек в реальном времени без необходимости постоянно перекомпилировать Sass. Наш подход заключается в том, чтобы взять наши исходные переменные Sass и преобразовать их в переменные CSS. Таким образом, даже если вы не используете переменные CSS, у вас все еще есть все возможности Sass. Это еще не завершено, и для полной реализации потребуется время.
Например, рассмотрите эти переменные CSS :root для общих стилей :
@if $font-size-root != null --#root-font-size: #$font-size-root>; > --#body-font-family: #inspect($font-family-base)>; @include rfs($font-size-base, --#$prefix>body-font-size); --#body-font-weight: #$font-weight-base>; --#body-line-height: #$line-height-base>; @if $body-text-align != null --#body-text-align: #$body-text-align>; > --#body-color: #$body-color>; --#body-color-rgb: #to-rgb($body-color)>; --#body-bg: #$body-bg>; --#body-bg-rgb: #to-rgb($body-bg)>; --#emphasis-color: #$body-emphasis-color>; --#emphasis-color-rgb: #to-rgb($body-emphasis-color)>; --#secondary-color: #$body-secondary-color>; --#secondary-color-rgb: #to-rgb($body-secondary-color)>; --#secondary-bg: #$body-secondary-bg>; --#secondary-bg-rgb: #to-rgb($body-secondary-bg)>; --#tertiary-color: #$body-tertiary-color>; --#tertiary-color-rgb: #to-rgb($body-tertiary-color)>; --#tertiary-bg: #$body-tertiary-bg>; --#tertiary-bg-rgb: #to-rgb($body-tertiary-bg)>;На практике эти переменные затем применяются при перезагрузке следующим образом:
body margin: 0; // 1 font-family: var(--#$prefix>body-font-family); @include font-size(var(--#$prefix>body-font-size)); font-weight: var(--#$prefix>body-font-weight); line-height: var(--#$prefix>body-line-height); color: var(--#$prefix>body-color); text-align: var(--#$prefix>body-text-align); background-color: var(--#$prefix>body-bg); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 > Что позволяет вам делать настройки в реальном времени, как вам нравится:
body style="--bs-body-color: #333;"> body> Параметры страницы по умолчанию
Элементы и обновлены, чтобы обеспечить лучшие значения по умолчанию для всей страницы. Более конкретно:
- box-sizing устанавливается глобально для каждого элемента, включая *::before и *::after , для border-box . Это гарантирует, что заявленная ширина элемента никогда не будет превышена из-за заполнения или границы.
- Базовый размер font-size не объявлен в , но предполагается 16px (по умолчанию в браузере). font-size: 1rem применяется к элементу для быстрого масштабирования типов с помощью медиа-запросов, при этом соблюдая предпочтения пользователя и обеспечивая более доступный подход. Это значение по умолчанию для браузера можно изменить, изменив переменную $font-size-root .
Стек собственных шрифтов
Bootstrap использует «стек собственных шрифтов» или «стек системных шрифтов» для оптимального рендеринга текста на всех устройствах и ОС. Эти системные шрифты были разработаны специально для современных устройств с улучшенным отображением на экранах, поддержкой переменных шрифтов и многим другим. Узнайте больше о стеках собственных шрифтов в этой статье Smashing Magazine.
$font-family-sans-serif: // Кросс-платформенное общее семейство шрифтов (шрифт пользовательского интерфейса по умолчанию) system-ui, // Safari для macOS и iOS (San Francisco) -apple-system, // Windows "Segoe UI", // Android Roboto, // older macOS and iOS "Helvetica Neue" // Linux "Noto Sans", "Liberation Sans", // Basic web fallback Arial, // Sans serif fallback sans-serif, // Emoji шрифты "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;Обратите внимание: поскольку стек шрифтов включает шрифты эмодзи, многие распространенные символы Unicode символов/дингбатов будут отображаться как разноцветные пиктограммы. Их внешний вид будет варьироваться в зависимости от стиля, используемого в собственном шрифте emoji браузера/платформы, и на них не будут влиять никакие color стили CSS.
font-family применяется к и автоматически наследуется глобально через Bootstrap. Чтобы переключить глобально font-family , обновите $font-family-base и перекомпилируйте Bootstrap.
Заголовки
У всех элементов заголовков — — удалено margin-top , а margin-bottom: .5rem установлено, а line-height ужесточено. Хотя заголовки наследуют свой color по умолчанию, вы также можете переопределить его с помощью дополнительной переменной CSS —bs-heading-color .
Заголовок Пример h1. Заголовок Bootstrap h2. Заголовок Bootstrap h3. Заголовок Bootstrap h4. Заголовок Bootstrap h5. Заголовок Bootstrap h6. Заголовок Bootstrap Параграфы
У всех элементов
их margin-top удалено, а margin-bottom: 1rem установлено для упрощения интервала.
This is an example paragraph.