Перейти к основному содержанию Перейти к навигации по документам
Check
in English

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

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

На этой странице

Подход

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

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

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

CSS-переменные

Добавлено в версии 5.2.0

В версии 5.1.1 мы стандартизировали необходимые @imports во всех наших пакетах CSS (включая bootstrap.css, bootstrap-reboot.cssи bootstrap-grid.css), чтобы включить _root.scss. Это добавляет :rootпеременные уровня CSS ко всем пакетам, независимо от того, сколько из них используется в этом пакете. В конечном счете, в Bootstrap 5 со временем будет добавляться больше переменных CSS , чтобы обеспечить больше настроек в реальном времени без необходимости постоянно перекомпилировать Sass. Наш подход заключается в том, чтобы взять наши исходные переменные Sass и преобразовать их в переменные CSS. Таким образом, даже если вы не используете переменные CSS, у вас все еще есть все возможности Sass. Это все еще находится в стадии разработки, и для полной реализации потребуется время.

Например, рассмотрите эти :rootпеременные CSS для общих <body>стилей:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

На практике эти переменные затем применяются при перезагрузке следующим образом:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Что позволяет вам делать настройки в реальном времени, как вам нравится:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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

Элементы <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:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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. Начальный заголовок

Горизонтальные правила

Элемент <hr>упрощен. Подобно настройкам браузера по умолчанию, <hr>элементы s имеют стиль via border-top, имеют значение по умолчанию opacity: .25и автоматически наследуют свое значение border-colorvia color, в том числе когда colorоно установлено через родителя. Их можно изменить с помощью утилит для текста, границ и непрозрачности.

HTML 
<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Списки

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

  • У всех списков удалены верхние поля
  • И их нижнее поле нормализовано
  • Вложенные списки не имеют нижнего поля
    • Таким образом, они имеют более ровный вид.
    • Особенно, когда за ними следуют другие элементы списка
  • Левое дополнение также было сброшено
  1. Вот упорядоченный список
  2. С несколькими элементами списка
  3. Он имеет такой же общий вид
  4. Как предыдущий неупорядоченный список

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

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

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

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

Например, <section>должен быть обернут как встроенный.
HTML 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Кодовые блоки

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

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
HTML 
<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>тег.

у = м х + б
HTML 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

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

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

Чтобы переключить каталоги, введите cdимя каталога.
Чтобы изменить настройки, нажмите ctrl + ,
HTML 
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>тег.

Этот текст следует рассматривать как образец вывода компьютерной программы.
HTML 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Столы

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

Это пример таблицы, а это ее заголовок для описания содержимого.
Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
HTML 
<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</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

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

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

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

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

Кнопка элемента без кнопки
HTML 
<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>получает базовый стиль, чтобы выделить его среди текста абзаца.

Элемент аббревиатуры HTML .

Резюме

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

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

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

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

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

[hidden]Атрибут HTML5

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

<input type="text" hidden>
несовместимость jQuery

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

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