in English

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

Перезагрузите, набор изменений 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,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

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

Это 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.

У всех списков удалены верхние поля
И их нижнее поле нормализовано
Вложенные списки не имеют нижнего поля
- Таким образом, они имеют более ровный вид.
- Особенно, когда за ними следуют другие элементы списка
Левое дополнение также было сброшено

Вот упорядоченный список
С несколькими элементами списка
Он имеет такой же общий вид
Как предыдущий неупорядоченный список

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

Списки описаний: Список описаний идеально подходит для определения терминов.
Срок: Определение термина.; Второе определение того же термина.
Другой термин: Определение этого другого термина.

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

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

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

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

Кнопка элемента без кнопки

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

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

Адрес

Элемент <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на что-то более согласованное с другими элементами.

Известная цитата, содержащаяся в элементе blockquote.

Кто-то известный в 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.