Source

Перезагрузить

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

Подход

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

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

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

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

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

Глобально box-sizingустанавливается для каждого элемента, включая *::beforeи *::afterдо border-box. Это гарантирует, что объявленная ширина элемента никогда не будет превышена из-за заполнения или границы.
База font-sizeне объявлена в <html>, но 16pxпредполагается (браузер по умолчанию). font-size: 1remприменяется <body>для легкого адаптивного масштабирования типов с помощью медиа-запросов, при этом учитываются предпочтения пользователя и обеспечивается более доступный подход.
Также <body>устанавливает глобальные font-family, line-heightи text-align. Позже это наследуется некоторыми элементами формы для предотвращения несоответствия шрифтов.
В целях безопасности <body>объявлено background-colorзначение #fff.

Родной стек шрифтов

Веб-шрифты по умолчанию (Helvetica Neue, Helvetica и Arial) были удалены в Bootstrap 4 и заменены «нативным стеком шрифтов» для оптимального отображения текста на каждом устройстве и в любой ОС. Подробнее о нативных стеках шрифтов читайте в этой статье 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Это font-familyприменяется к <body>и автоматически наследуется глобально во всем Bootstrap. Чтобы переключить глобальный файл font-family, обновите $font-family-baseи перекомпилируйте Bootstrap.

Заголовки и абзацы

Все элементы заголовков — например, — и <h1>сбрасываются <p>для их margin-topудаления. Добавлены заголовки margin-bottom: .5remи абзацы margin-bottom: 1remдля легкого интервала.

Заголовок	Пример
`<h1></h1>`	ч1. Начальный заголовок
`<h2></h2>`	ч2. Начальный заголовок
`<h3></h3>`	h3. Начальный заголовок
`<h4></h4>`	h4. Начальный заголовок
`<h5></h5>`	h5. Начальный заголовок
`<h6></h6>`	h6. Начальный заголовок

Списки

Все списки— <ul>, <ol>и <dl>—удалены , margin-topа margin-bottom: 1rem. Вложенные списки не имеют margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целое число слов и масса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Угревая сыпь
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан сит амет эрат нунк
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Целое число слов и масса
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Энеан сит амет эрат нунк
Eget porttitor lorem

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

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

Предварительно отформатированный текст

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

.example-элемент {
  нижняя граница: 1re;
}

Столы

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

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

Формы

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

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

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

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

Пример ввода

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

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

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

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

Пример даты

Пример времени

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

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

Адрес

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

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103 Тел
.: (123) 456-7890

Полное имя
[email protected]

Цитата

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

Кто-то известный в Source Title

Встроенные элементы

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

Nulla attr vitae elit libero, a pharetra augue.

Резюме

Значение по умолчанию cursorдля сводки — text, поэтому мы сбрасываем его, чтобы pointerпоказать, что с элементом можно взаимодействовать, щелкнув по нему.

Некоторые подробности

Подробнее о деталях.

Еще больше деталей

Вот еще подробнее о деталях.

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

HTML5 добавляет новый глобальный атрибут с именем[hidden] , который имеет стиль display: noneпо умолчанию. Заимствуя идею из PureCSS , мы улучшили это значение по умолчанию, [hidden] { display: none !important; }предотвратив его displayслучайное переопределение. Хотя [hidden]это изначально не поддерживается IE10, явное объявление в нашем CSS решает эту проблему.

<input type="text" hidden>

несовместимость jQuery

[hidden]не совместим с jQuery $(...).hide()и $(...).show()методами. Поэтому в настоящее время мы особо не поддерживаем [hidden]другие методы управления displayэлементами.

Чтобы просто переключить видимость элемента, что означает, что displayон не изменен, и элемент все еще может влиять на поток документа, используйте вместо этого класс .invisible.