Reboot

Подход

Reboot опирается на Normalize, предоставляя многим HTML-элементам стили с определёнными предпочтениями, используя только селекторы элементов. Дополнительная стилизация выполняется только с помощью классов. Например, мы перезапускаем некоторые <table> стили для более простого базового уровня, а затем предоставляем .table, .table-bordered, и многое другое.

Вот наши рекомендации и причины выбора того, что переопределять в Reboot:

Обновить некоторые значения по умолчанию браузера, чтобы использовать rem вместо em для масштабируемого компоновочного отступа.
Избегать margin-top. Вертикальные отступы могут схлопываться, приводя к непредсказуемым результатам. Более важно то, что единственное направление margin представляет более простую концепцию.
Для более лёгкого масштабирования на разных устройствах, блочные элементы должны использовать rem для margin.
Сводить к минимуму объявления свойств, относящихся к font, используя inherit всякий раз, когда это возможно.

CSS-переменные

Добавлено в v5.2.0

С v5.1.1 мы стандартизировали необходимые @import во всех наших CSS-пакетах (включая bootstrap.css, bootstrap-reboot.css, и bootstrap-grid.css) для включения _root.scss. Это добавляет CSS-переменные уровня :root ко всем пакетам, независимо от того, сколько из них используется в этом пакете. В конечном итоге Bootstrap 5 будет продолжать добавлять больше CSS-переменных со временем, чтобы обеспечить более быструю настройку без необходимости постоянной перекомпиляции Sass. Наш подход заключается в преобразовании исходных переменных Sass в CSS-переменные. Таким образом, даже если вы не используете CSS-переменные, у вас всё ещё есть все возможности Sass. Эта работа всё ещё в процессе и займёт время для полной реализации.

Например, рассмотрите эти :root CSS-переменные для общих <body> стилей:

scss/_root.scss

@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)};

На практике эти переменные затем применяются в Reboot следующим образом:

scss/_reboot.scss

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:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and 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 fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Обратите внимание, что поскольку шрифтовая база включает шрифты эмодзи, многие общие символы/dingbat Unicode будут отображаться как многоцветные пиктограммы. Их внешний вид будет меняться в зависимости от стиля, используемого в родном шрифте эмодзи браузера/платформы, и они не будут затронуты никакими CSS color стилями.

Этот 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 для простоты форматирования.

html

<p>This is an example paragraph.</p>

Ссылки

Ссылки имеют color и подчёркивание по умолчанию. Хотя ссылки изменяются при :hover, они не меняются в зависимости от того, :visited ли кто-то на ссылку. Они также не получают специальных :focus стилей.

html

<a href="#">This is an example link</a>

Начиная с версии v5.3.x, непрозрачность цвета ссылки color устанавливается с помощью rgba() и новых -rgb CSS-переменных, позволяя легко настраивать непрозрачность цвета ссылки. Измените непрозрачность цвета ссылки с помощью CSS-переменной --bs-link-opacity.

html

<a href="#" style="--bs-link-opacity: .5">This is an example link</a>

Ссылкам-заполнителям — тем, у которых нет href — применяется более специфический селектор, у которых color и text-decoration сброшены до значений по умолчанию.

html

<a>This is a placeholder link</a>

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

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

Встроенный код

Оборачивайте встроенные фрагменты кода с помощью <code>. Убедитесь, что вы экранируете HTML-скобки.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Блоки кода

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

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Переменные

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

html

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

Ввод пользователя

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

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>Ctrl</kbd> + <kbd>,</kbd></kbd>

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

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

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Таблицы

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Формы

Различные элементы форм были переработаны для более простых базовых стилей. Вот некоторые из самых заметных изменений:

<fieldset>s не имеют границ, отступов или отступов, чтобы их можно было легко использовать в качестве обёртки для отдельных входных данных или групп входных данных.
<legend>s, такие как fieldset, также были перестилизованы, чтобы отображаться как своего рода заголовки.
<label>s установлены в display: inline-block для применения margin.
<input>s, <select>s, <textarea>s и <button>s в основном обрабатываются Normalize, но Reboot также удаляет их margin и устанавливает line-height: inherit.
<textarea>s изменены, чтобы быть масштабируемыми только по вертикали, так как горизонтальное масштабирование часто «ломает» макет страницы.
<button>s и <input> элементы кнопок имеют cursor: pointer при :not(:disabled).

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

Некоторые типы ввода даты не полностью поддерживаются последними версиями Safari и Firefox.

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

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

html

<span role="button" tabindex="0">Non-button element button</span>

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

Адрес

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

Блокцитата

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

Элементы в строку

Элемент <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 вместо этого.

© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/content/reboot/

Reboot

Подход

CSS-переменные

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

Нативный шрифт

Заголовки

Абзацы

Ссылки

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

Списки

Встроенный код

Блоки кода

Переменные

Ввод пользователя

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

Таблицы

Формы

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

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

Адрес

Блокцитата

Элементы в строку

Резюме

Атрибут HTML5 [hidden]

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