Перейти к основному содержанию

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

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

Содержание

Approach

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

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

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

<html> и <body> элементы будут обновлены , чтобы обеспечить лучшие страницы в масштабе по умолчанию. Более конкретно:

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

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
  • Энеан сижу амет эрат нунк
  • Эгет-порттитор лорем
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Целочисленный molestie lorem at massa
  4. Facilisis в аликвоте pretium nisl
  5. Нулла волутпат аликвам велит
  6. Faucibus porta lacus fringilla vel
  7. Энеан сижу амет эрат нунк
  8. Эгет-порттитор лорем

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

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

Формы

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

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

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

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

Комментарии для сайта Cackle