Перезагрузка
Перезагрузка - это набор изменений CSS для конкретных элементов в одном файле, запускает Bootstrap, чтобы обеспечить элегантную, последовательную и простую основу для построения.
Подход
Reboot (перезагрузка) основывается на Normalize, предоставляя многие элементы HTML с несколько самоуверенными стилями, используя только селекторы элементов. Дополнительная стилизация выполняется только с классами. Например, мы перезагружаем некоторые стили <table>
для упрощения базовой линии, а позже предоставляем .table
, .table-bordered
и другие.
Вот наши рекомендации и причины выбора того, что следует переопределить в Перезагрузке:
- Обновите некоторые значения браузера по умолчанию, чтобы использовать
rem
вместоem
для масштабируемого интервала между компонентами. - Избегайте
margin-top
. Вертикальные поля могут исчезнуть, что приведет к неожиданным результатам. Что еще более важно, одно направлениеmargin
это более простая ментальная модель. - Для упрощения масштабирования по размеру устройства в элементах блока следует использовать
rem
дляmargin
. - Сведите к минимуму объявления свойств, связанных с
font
, по возможности используйтеinherit
.
Переменные CSS
Добавлено в версии 5.2.0В версии 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
для общих стилей <body>
:
@if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@if $body-text-align != null {
--#{$prefix}body-text-align: #{$body-text-align};
}
--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}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>
Параметры страницы по умолчанию
Элементы <html>
и <body>
обновлены, чтобы обеспечить лучшие значения по умолчанию для всей страницы. Более конкретно:
box-sizing
устанавливается глобально для каждого элемента, включая*::before
и*::after
, дляborder-box
. Это гарантирует, что заявленная ширина элемента никогда не будет превышена из-за заполнения или границы.- Базовый размер
font-size
не объявлен в<html>
, но предполагается16px
(по умолчанию в браузере).font-size: 1rem
применяется к элементу<body>
для быстрого масштабирования типов с помощью медиа-запросов, при этом соблюдая предпочтения пользователя и обеспечивая более доступный подход. Это значение по умолчанию для браузера можно изменить, изменив переменную$font-size-root
.
- Базовый размер
<body>
также устанавливает глобальные значенияfont-family
,font-weight
,line-height
иcolor
. Позднее это наследуется некоторыми элементами формы, чтобы предотвратить несоответствие шрифтов.- Для безопасности
<body>
имеет объявленныйbackground-color
, по умолчанию#fff
.
Стек собственных шрифтов
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
применяется к <body>
и автоматически наследуется глобально через Bootstrap. Чтобы переключить глобально font-family
, обновите $font-family-base
и перекомпилируйте Bootstrap.
Заголовки
У всех элементов заголовков — <h1>
—<h6>
удалено margin-top
, а margin-bottom: .5rem
установлено, а line-height
ужесточено. Хотя заголовки наследуют свой color
по умолчанию, вы также можете переопределить его с помощью дополнительной переменной CSS --bs-heading-color
.
Заголовок | Пример |
---|---|
<h1></h1> |
h1. Заголовок Bootstrap |
<h2></h2> |
h2. Заголовок Bootstrap |
<h3></h3> |
h3. Заголовок Bootstrap |
<h4></h4> |
h4. Заголовок Bootstrap |
<h5></h5> |
h5. Заголовок Bootstrap |
<h6></h6> |
h6. Заголовок Bootstrap |
Параграфы
У всех элементов <p>
их margin-top
удалено, а margin-bottom: 1rem
установлено для упрощения интервала.
This is an example paragraph.
<p>This is an example paragraph.</p>
Ссылки
Ссылки имеют color
по умолчанию и подчеркивание. Хотя ссылки изменяются при :hover
, они не меняются в зависимости от того, посещал ли кто-то ссылку :visited
. Они также не получают никаких специальных стилей :focus
.
<a href="#">Это ссылка для примера</a>
Начиная с версии 5.3.x, color
ссылки задается с помощью rgba()
и новых переменных CSS -rgb
, что позволяет легко настраивать непрозрачность цвета ссылки. Измените непрозрачность цвета ссылки с помощью переменной CSS --bs-link-opacity
:
<a href="#" style="--bs-link-opacity: .5">Это ссылка для примера</a>
Ссылки-заполнители — те, у которых нет href
, — нацелены на более конкретный селектор, а их color
и text-decoration
сбрасываются до значений по умолчанию.
<a>Это ссылка-заполнитель</a>
Горизонтальные правила
Элемент <hr>
был упрощен. Подобно настройкам браузера по умолчанию, <hr>
стилизуются через border-top
, имеют значение по умолчанию opacity: .25
и автоматически наследуют border-color
через color
, в том числе, когда color
устанавливается через родителя. Их можно изменить с помощью утилит для текста, границ и непрозрачности.
<hr>
<div class="text-success">
<hr>
</div>
<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">
Списки
Во всех списках <ul>
, <ol>
и <dl>
удалены их margin-top
и margin-bottom: 1rem
. Вложенные списки не имеют margin-bottom
. Мы также сбросили padding-left
для элементов <ul>
и <ol>
.
- У всех списков удалены верхние поля
- И их нижнее поле нормализовано
- Вложенные списки не имеют нижнего поля
- Таким образом, они имеют более ровный вид
- Особенно, когда за ними следуют другие элементы списка
- Также был сброшен левый отступ
- Вот упорядоченный список
- С несколькими элементами списка
- Он имеет такой же общий вид
- Как предыдущий неупорядоченный список
Для упрощения стиля, четкой иерархии и лучшего интервала в списках описаний обновлены поля margin
. <dd>
сбрасывает margin-left
в 0
и добавляет margin-bottom: .5rem
. <dt>
выделены жирным шрифтом.
- Списки описаний
- Список описаний идеально подходит для определения терминов.
- Срок
- Определение термина.
- Второе определение того же термина.
- Другой термин
- Определение этого другого термина.
Строчный код
Оберните строчные фрагменты кода в <code>
. Обязательно избегайте угловых скобок HTML.
<раздел>
должен быть заключен в оболочку как строчный.
Например, <code><раздел></code> должен быть заключен в оболочку как строчный.
Блоки кода
Используйте <pre>
для нескольких строк кода. Еще раз, не забудьте снять угловые скобки в коде для правильного рендеринга. Элемент <pre>
сбрасывается, чтобы удалить его margin-top
и использовать единицы rem
для его margin-bottom
.
<p>Образец текста здесь...</p>
<p>И еще одна строка образца текста здесь...</p>
<pre><code><p>Образец текста здесь...</p>
<p>И еще одна строка образца текста здесь...</p>
</code></pre>
Переменные
Для обозначения переменных используйте тег <var>
.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Пользовательский ввод
Используйте <kbd>
для обозначения ввода, который обычно вводится с клавиатуры.
Для редактирования настроек нажмите Ctrl + ,
Чтобы сменить каталог, введите <kbd>cd</kbd>, а затем имя каталога.<br>
Для редактирования настроек нажмите <kbd><kbd>Ctrl</kbd> + <kbd>,</kbd></kbd>
Пример вывода
Для указания образца вывода из программы используйте тег <samp>
.
<samp>Этот текст следует рассматривать как образец вывода компьютерной программы.</samp>
Таблицы
Таблицы немного скорректированы для стиля <caption>
, сворачивания границ и обеспечения единообразия text-align
повсюду. Дополнительные изменения границ, отступов и прочего связаны с классом .table
.
Заголовок таблицы | Заголовок таблицы | Заголовок таблицы | Заголовок таблицы |
---|---|---|---|
Ячейка таблицы | Ячейка таблицы | Ячейка таблицы | Ячейка таблицы |
Ячейка таблицы | Ячейка таблицы | Ячейка таблицы | Ячейка таблицы |
Ячейка таблицы | Ячейка таблицы | Ячейка таблицы | Ячейка таблицы |
<table>
<caption>
Это пример таблицы, а это ее заголовок для описания содержимого.
</caption>
<thead>
<tr>
<th>Заголовок таблицы</th>
<th>Заголовок таблицы</th>
<th>Заголовок таблицы</th>
<th>Заголовок таблицы</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка таблицы</td>
<td>Ячейка таблицы</td>
<td>Ячейка таблицы</td>
<td>Ячейка таблицы</td>
</tr>
<tr>
<td>Ячейка таблицы</td>
<td>Ячейка таблицы</td>
<td>Ячейка таблицы</td>
<td>Ячейка таблицы</td>
</tr>
<tr>
<td>Ячейка таблицы</td>
<td>Ячейка таблицы</td>
<td>Ячейка таблицы</td>
<td>Ячейка таблицы</td>
</tr>
</tbody>
</table>
Формы
Различные элементы формы были перезагружены для упрощения базовых стилей. Вот некоторые из наиболее заметных изменений:
<fieldset>
не имеют границ, отступов или полей, поэтому их можно легко использовать в качестве оберток для отдельных полей ввода или групп полей ввода.<legend>
как и наборы полей, также были переработаны, чтобы отображаться как своего рода заголовки.<label>
установлены вdisplay: inline-block
, чтобы разрешить применениеmargin
.- Элементы
<input>
,<select>
,<textarea>
и<button>
в основном обрабатываются Normalize, но Reboot удаляет ихmargin
и устанавливаетline-height: inherit
, тоже. <textarea>
изменены так, чтобы их размер можно было изменять только по вертикали, поскольку изменение размера по горизонтали часто “ломает” макет страницы.- Элементы кнопки
<button>
и<input>
имеютcursor: pointer
когда:not(:disabled)
.
Эти и другие изменения показаны ниже.
Указатели на кнопках
Reboot включает усовершенствование для role="button"
, позволяющее изменить курсор по умолчанию на pointer
. Добавьте этот атрибут к элементам, чтобы указать, что элементы интерактивны. Эта роль не обязательна для элементов <button>
, у которых есть собственное изменение cursor
.
<span role="button" tabindex="0">Элемент не кнопка как кнопка</span>
Разные элементы
Адрес
Элемент <address>
обновлен, чтобы сбросить стиль шрифта браузера по умолчанию с font-style
с italic
на normal
. line-height
теперь унаследован, и был добавлен margin-bottom: 1rem
. <address>
служит для представления контактной информации ближайшего предка (или всего объема работы). Сохраните форматирование, заканчивая строки символом <br>
.
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890 Full Name
[email protected]
Цитата
По умолчанию margin
для цитат составляет 1em 40px
, поэтому мы сбрасываем ее на 0 0 1rem
для большей согласованности с другими элементами.
Известная цитата, содержащаяся в элементе blockquote.
Кто-то известный в Исходном заголовке
Строчные элементы
Элемент <abbr>
получает базовый стиль, чтобы выделить его среди текста абзаца.
Резюме
По умолчанию cursor
в сводке является text
, поэтому мы сбрасываем его на pointer
, чтобы указать, что с элементом можно взаимодействовать, щелкнув по нему.
Некоторые детали
Подробнее о деталях.
Еще больше деталей
Вот еще более подробная информация о деталях.
HTML5 атрибут [hidden]
HTML5 добавляет новый глобальный атрибут с именем [hidden]
, который имеет стиль display: none
по умолчанию. Заимствуя идею из PureCSS, мы улучшаем это значение по умолчанию, сделав [hidden] { display: none !important; }
, чтобы предотвратить случайное переопределение его свойства display
.
<input type="text" hidden>
[hidden]
не совместим с методами jQuery $(...).hide()
и $(...).show()
, мы специально не одобряем [hidden]
другие методы управления display
элементов.
Чтобы просто переключить видимость элемента, то есть его display
не изменяется, и элемент все еще может влиять на поток документа, используйте класс .invisible
вместо этого.