Cмотреть на GitHub

Reboot

Reboot - набор изменений для отдельных элементов CSS в едином файле, обеспечиваещий Bootstrap элегантную, простую и последовательную основу для для развития.

На этой странице

Подходы

Reboot основан на файле normalize.css (для лучшего отображения унифицирует стили которые в этом нуждаются), который позволяет обеспечить многие элементы HTML некоторым набором стилей, используя только селекторы элемента. Дополнительная стилизация реализуется только посредством классов. Например, мы «перезагружаем» стили некоего элемента <table> для более простого вертикального выравнивания (baseline – вертикальный «ритм» контента, или иной), а потом применяем классы .table, .table-bordered и т.д.

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

Приведите настройки браузера по умолчанию к использованию единиц rem вместо em при масштабируемом расположении контента.
Избегайте margin-top’a. Вертикальные отступы могут «рушиться», приводя к нежелательным результатам. Однако важнее тот факт, что одно направление 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]`