Перезагрузка

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

Подход

Перезагрузка основана на Нормализации, предоставляя многим 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>, что обеспечивает лёгкую адаптивную масштабирование текста с помощью медиа-запросов с учётом предпочтений пользователя и обеспечения более доступного подхода.
<body> также задаёт глобальное значение font-family, line-height, и text-align. Это наследуется некоторыми элементами форм для предотвращения несоответствий шрифтов.
Для безопасности, у <body> объявлена background-color, значение по умолчанию #fff.

Нативный набор шрифтов

В Bootstrap 4 стандартные веб-шрифты (Helvetica Neue, Helvetica и Arial) были удалены и заменены «нативным набором шрифтов» для оптимального отображения текста на всех устройствах и операционных системах. Дополнительную информацию о нативных наборах шрифтов см. в этой статье 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 и добавленный margin-bottom: 1rem. Вложенные списки не имеют margin-bottom.

Открыть пример на getbootstrap.com

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

Открыть пример на getbootstrap.com

Форматированный текст

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

Открыть пример на getbootstrap.com

Таблицы

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

Открыть пример на getbootstrap.com

Формы

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

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

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

Открыть пример на getbootstrap.com

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

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

Открыть пример на getbootstrap.com

<span role="button" tabindex="0">Non-button element button</span>

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

Адрес

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

Открыть пример на getbootstrap.com

Блок цитаты

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

Открыть пример на getbootstrap.com

Элементы в строке

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

Открыть пример на getbootstrap.com

Сводка

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

Открыть пример на getbootstrap.com

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

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

© 2011–2020 Twitter, Inc.
© 2011–2020 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/4.5/content/reboot/

Перезагрузка

Подход

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

Нативный набор шрифтов

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

Списки

Форматированный текст

Таблицы

Формы

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

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

Адрес

Блок цитаты

Элементы в строке

Сводка

Атрибут HTML5 [hidden]

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

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