Оригинал На GitHub

Reboot

Перезагрузка - это набор изменений 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: #{$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};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-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> и <p> сбрасываются, чтобы удалить их margin-top. В заголовки добавлены margin-bottom: .5rem и параграфы margin-bottom: 1rem для удобного размещения.

Heading	Example
`<h1></h1>`	h1. Заголовок Bootstrap
`<h2></h2>`	h2. Заголовок Bootstrap
`<h3></h3>`	h3. Заголовок Bootstrap
`<h4></h4>`	h4. Заголовок Bootstrap
`<h5></h5>`	h5. Заголовок Bootstrap
`<h6></h6>`	h6. Заголовок Bootstrap

Горизонтальные правила

Элемент <hr> был упрощен. Подобно настройкам браузера по умолчанию, <hr> стилизуются через border-top, имеют значение по умолчанию opacity: .25 и автоматически наследуют border-color через color, в том числе, когда color устанавливается через родителя. Их можно изменить с помощью утилит для текста, границ и непрозрачности.

html

<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> выделены жирным шрифтом.

Description lists: A description list is perfect for defining terms.
Term: Definition for the term.; A second definition for the same term.
Another term: Definition for this other term.

Строчный код

Оберните строчные фрагменты кода в <code>. Обязательно избегайте угловых скобок HTML.

Например, <раздел> должен быть заключен в оболочку как строчный.

html

Например, <code>&lt;раздел&gt;</code> должен быть заключен в оболочку как строчный.

Блоки кода

Используйте <pre> для нескольких строк кода. Еще раз, не забудьте снять угловые скобки в коде для правильного рендеринга. Элемент <pre> сбрасывается, чтобы удалить его margin-top и использовать единицы rem для его margin-bottom.

<p>Образец текста здесь...</p>
<p>И еще одна строка образца текста здесь...</p>

html

<pre><code>&lt;p&gt;Образец текста здесь...&lt;/p&gt;
&lt;p&gt;И еще одна строка образца текста здесь...&lt;/p&gt;
</code></pre>

Переменные

Для обозначения переменных используйте тег <var>.

y = mx + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Пользовательский ввод

Используйте <kbd> для обозначения ввода, который обычно вводится с клавиатуры.

Чтобы сменить каталог, введите cd, а затем имя каталога.
Для редактирования настроек нажмите ctrl + ,

html

Чтобы сменить каталог, введите <kbd>cd</kbd>, а затем имя каталога.<br>
Для редактирования настроек нажмите <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Пример вывода

Для указания образца вывода из программы используйте тег <samp>.

Этот текст следует рассматривать как образец вывода компьютерной программы.

html

<samp>Этот текст следует рассматривать как образец вывода компьютерной программы.</samp>

Таблицы

Таблицы немного скорректированы для стиля <caption>, сворачивания границ и обеспечения единообразия text-align повсюду. Дополнительные изменения границ, отступов и прочего связаны с классом .table.

Это пример таблицы, а это ее заголовок для описания содержимого.
Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы
Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы
Ячейка таблицы	Ячейка таблицы	Ячейка таблицы	Ячейка таблицы

html

<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).

Эти и другие изменения показаны ниже.

Пример легенды

Пример поля ввода

Пример эл. почты

Пример телефона

Пример адреса

Пример поля ввода числа

Пример поиска

Пример диапазона

Пример выбора файла

Пример выбора из списка

Установите этот флажок

Вариант первый то и это. Второй вариант - это что-то еще, что также очень длинное, чтобы продемонстрировать упаковку этих причудливых элементов управления формой. Вариант третий отключен.

Пример текстового поля

Пример даты

Пример времени

Пример пароля

Пример даты-времени

Пример недели

Пример месяца

Пример цвета

Пример вывода 100

Поддержка ввода даты и цвета

Имейте в виду, что ввод даты не полностью поддерживается всеми браузерами, а именно Safari.

Указатели на кнопках

Reboot включает усовершенствование для role="button" , позволяющее изменить курсор по умолчанию на pointer. Добавьте этот атрибут к элементам, чтобы указать, что элементы интерактивны. Эта роль не обязательна для элементов <button>, у которых есть собственное изменение cursor.

Элемент не кнопка как кнопка

html

<span role="button" tabindex="0">Элемент не кнопка как кнопка</span>

Разные элементы

Адрес

Элемент <address> обновлен, чтобы сбросить стиль шрифта браузера по умолчанию с font-style с italic на normal. line-height теперь унаследован, и был добавлен margin-bottom: 1rem. <address> служит для представления контактной информации ближайшего предка (или всего объема работы). Сохраните форматирование, заканчивая строки символом <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Цитата

По умолчанию margin для цитат составляет 1em 40px, поэтому мы сбрасываем ее на 0 0 1rem для большей согласованности с другими элементами.

Известная цитата, содержащаяся в элементе blockquote.

Кто-то известный в Исходном заголовке

Строчные элементы

Элемент <abbr> получает базовый стиль, чтобы выделить его среди текста абзаца.

Элемент аббревиатуры HTML.

Резюме

По умолчанию cursor в сводке является text, поэтому мы сбрасываем его на pointer, чтобы указать, что с элементом можно взаимодействовать, щелкнув по нему.

Некоторые детали

Подробнее о деталях.

Еще больше деталей

Вот еще более подробная информация о деталях.

HTML5 атрибут `[hidden]`

HTML5 добавляет новый глобальный атрибут с именем [hidden], который имеет стиль display: none по умолчанию. Заимствуя идею из PureCSS, мы улучшаем это значение по умолчанию, сделав [hidden] { display: none !important; }, чтобы предотвратить случайное переопределение его свойства display.

<input type="text" hidden>

Несовместимость jQuery

[hidden] несовместим с методами jQuery $(...).hide() и $(...).show(). Поэтому в настоящее время мы не особо поддерживаем [hidden] по сравнению с другими методами управления элементами display.

Чтобы просто переключить видимость элемента, то есть его display не изменяется, и элемент все еще может влиять на поток документа, используйте класс .invisible вместо этого.

Reboot

Подход

Переменные CSS

Параметры страницы по умолчанию

Стек собственных шрифтов

Заголовки и абзацы

Горизонтальные правила

Списки

Строчный код

Блоки кода

Переменные

Пользовательский ввод

Пример вывода

Таблицы

Формы

Поддержка ввода даты и цвета

Указатели на кнопках

Разные элементы

Адрес

Цитата

Строчные элементы

Резюме

HTML5 атрибут [hidden]

Несовместимость jQuery

HTML5 атрибут `[hidden]`