Перейти к основному контенту Перейти к навигации документации
Просмотреть на GitHub

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

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

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

Подход

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

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

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

CSS переменные

Добавлено в v5.2.0

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

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

scss/_root.scss 
@if $font-size-root != null {
  --#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($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};
@if $body-text-align != null {
  --#{$prefix}body-text-align: #{$body-text-align};
}

--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};

--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};

--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};

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

scss/_reboot.scss 
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 будут отображаться как многоцветные пиктограммы. Их внешний вид будет отличаться в зависимости от стиля, используемого в нативном шрифте эмодзи браузера или платформы, и они не будут подчиняться никаким CSS-стилям color.

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

Заголовки

Все элементы заголовков — <h1>—<h6> имеют удаленный margin-top, установленный margin-bottom: .5rem и сжатый line-height. Хотя заголовки наследуют свой color по умолчанию, вы также можете переопределить его через необязательную CSS переменную --bs-heading-color.

ЗаголовокПример
<h1></h1>h1. Bootstrap heading
<h2></h2>h2. Bootstrap heading
<h3></h3>h3. Bootstrap heading
<h4></h4>h4. Bootstrap heading
<h5></h5>h5. Bootstrap heading
<h6></h6>h6. Bootstrap heading

Параграфы

Все элементы <p> имеют удаленный margin-top и установленный margin-bottom: 1rem для удобного интервала.

Это пример параграфа.

html 
<p>Это пример параграфа.</p>

Ссылки

Ссылки имеют применяемый по умолчанию color и подчеркивание. Хотя ссылки изменяются при :hover, они не изменяются в зависимости от того, :visited ли кто-то ссылку. Они также не получают специальных стилей :focus.

This is an example link
html 
<a href="#">This is an example link</a>

Начиная с v5.3.x, цвет ссылки устанавливается с помощью rgba() и новых CSS переменных -rgb, что позволяет легко настраивать прозрачность цвета ссылки. Измените прозрачность цвета ссылки с помощью CSS переменной --bs-link-opacity:

Это пример ссылки
html 
<a href="#" style="--bs-link-opacity: .5">Это пример ссылки</a>

Ссылки-заполнители — те, у которых отсутствует атрибут href, — выбираются с помощью более специфичного селектора, и их color и text-decoration сбрасываются к значениям по умолчанию.

Это пример ссылки
html 
<a>Это пример ссылки</a>

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

Элемент <hr> был упрощен. Подобно браузерным дефолтам, <hr> стилизуются через border-top, имеют по умолчанию opacity: .25 и автоматически наследуют свой border-color через 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-left на элементах <ul> и <ol>.

  • All lists have their top margin removed
  • And their bottom margin normalized
  • Nested lists have no bottom margin
    • This way they have a more even appearance
    • Particularly when followed by more list items
  • The left padding has also been reset
  1. Here’s an ordered list
  2. With a few list items
  3. It has the same overall look
  4. As the previous unordered list

For simpler styling, clear hierarchy, and better spacing, description lists have updated margins. <dd>s reset margin-left to 0 and add margin-bottom: .5rem. <dt>s are bolded.

Description lists
A description list is perfect for defining terms.
Term
Definition for the term.
A second definition for the same term.
Another term
Definition for this other term.

Инлайновый код

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

For example, <section> should be wrapped as inline.
html 
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>
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>.

y = mx + b
html 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

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

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

To switch directories, type cd followed by the name of the directory.
To edit settings, press 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>.

This text is meant to be treated as sample output from a computer program.
html 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Таблицы

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

This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
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> отсутствуют границы, внутренние и внешние отступы, чтобы их было удобно использовать как обертки для отдельных или групповых полей ввода.
  • <legend>, как и fieldset, также был стилизован для отображения в виде заголовка.
  • <label> имеет свойство display: inline-block, чтобы можно было применять margin.
  • <input>, <select>, <textarea> и <button> в основном обрабатываются Normalize, но Reboot также убирает их margin и устанавливает line-height: inherit.
  • <textarea> можно изменять по размеру только по вертикали, так как горизонтальное изменение часто "ломает" вёрстку страницы.
  • У <button> и элементов <input> с типом button появляется cursor: pointer, если они не имеют состояния :disabled.

Эти изменения, и многие другие, демонстрируются ниже.

Некоторые типы ввода даты не полностью поддерживаются в последних версиях Safari и Firefox.

Example legend

100

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

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

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

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

Адрес

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

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

Цитата

Стандартный margin для blockquotes составляет 1em 40px, поэтому мы сбрасываем его к 0 0 1rem для большей согласованности с другими элементами.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

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

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

The HTML abbreviation element.

Сводка

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

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 атрибут [hidden]

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

<input type="text" hidden>

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

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