Оригинал Посмотреть на GitHub

Reboot

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

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

Подход

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

Вот наши рекомендации и причины выбора того, что следует переопределить в Перезагрузке:

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

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

Элементы <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,
  // Простой веб резерв
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Резервный вариант без засечек
  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 для удобного размещения.

Заголовок	Пример
`<h1></h1>`	h1. Заголовок Bootstrap
`<h2></h2>`	h2. Заголовок Bootstrap
`<h3></h3>`	h3. Заголовок Bootstrap
`<h4></h4>`	h4. Заголовок Bootstrap
`<h5></h5>`	h5. Заголовок Bootstrap
`<h6></h6>`	h6. Заголовок Bootstrap

Списки

Во всех списках <ul>, <ol> и <dl> удалены их margin-top и margin-bottom: 1rem. Вложенные списки не имеют margin-bottom. Мы также сбросили padding-left для элементов <ul> и <ol>.

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
The left padding has also been reset

Here’s an ordered list
With a few list items
It has the same overall look
As the previous unordered list

Для упрощения стиля, четкой иерархии и лучшего интервала в списках описаний обновлены поля 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.

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

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

Блоки кода

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

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

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

Переменные

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

y = mx + b

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

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

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

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

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

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

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

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

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

Таблицы

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

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

<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
[email protected]

Цитата

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

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

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

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

Nulla attr vitae elit libero, a pharetra augue.

Резюме

По умолчанию 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 вместо этого.