Reboot (перезагрузка)

Approach

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

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

Обновите некоторые значения браузера по умолчанию, чтобы использовать rem вместо em для масштабируемого расстояния между компонентами.
Избегайте margin-top. Вертикальные поля могут исчезнуть, что приведет к неожиданным результатам. Что еще более важно, одно направление margin - это более простая ментальная модель.
Для упрощения масштабирования по размеру устройства блочные элементы должны использовать rem вместо margin.
font cведите к минимуму декларации связанных свойств, по возможности используйте 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:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Это 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 удалены и a margin-bottom: 1rem. Вложенных списков нет margin-bottom. Мы также сброс padding-left <ul> и <ol> элементов.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целочисленный molestie lorem at massa
Facilisis в аликвоте pretium nisl
Нулла волутпат аликвам велит
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat в
Faucibus porta lacus fringilla vel
Энеан сижу амет эрат нунк
Эгет-порттитор лорем

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целочисленный molestie lorem at massa
Facilisis в аликвоте pretium nisl
Нулла волутпат аликвам велит
Faucibus porta lacus fringilla vel
Энеан сижу амет эрат нунк
Эгет-порттитор лорем

Для упрощения стиля, четкой иерархии и лучшего интервала в списках описаний были обновлены символы margin. <dd> сбросить margin-left на 0 и добавить margin-bottom: .5rem. <dt> выделены жирным шрифтом.

Списки описаний: Список описаний идеально подходит для определения терминов.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

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

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

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

Блоки кода

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

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

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

у = м х + Ь

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

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

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

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

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>тег.

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

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

Таблицы

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

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

Формы

Для упрощения базовых стилей были перезагружены различные элементы формы. Вот некоторые из наиболее заметных изменений:

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

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

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

Пример ввода

Пример электронного письма

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

Пример URL

Номер примера

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

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

Пример ввода файла

Пример выбрать

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

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

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

Пример даты

Пример время

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

Пример datetime-local

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

Пример месяц

Пример цвета

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

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

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

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

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

{ % capture example% } Кнопка элемента без кнопки { % endcapture% } { % include example.html content = example% }

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

Адрес

Элемент <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

Полное имя
first.last@example.com

Blockquote (цитата)

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

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число посуере эрат анте.

Кто-то известный в названии источника

Inline элементы

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

Nulla attr vitae elit libero, pharetra augue.

Summary

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