Bootstrap Reboot (сброс стилей)

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

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

Подход

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

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

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

Переменные CSS

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

Начиная с версии 5.1.1 стандартизированы требуемые параметры @import для всех пакетов CSS (включая bootstrap.css, bootstrap-reboot.css и bootstrap-grid.css), чтобы включить _root.scss. Это добавляет переменные :root уровня CSS ко всем пакетам, независимо от того, сколько из них используется в этом пакете. В конечном итоге в 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)};

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

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;

Обратите внимание, что, поскольку набор шрифтов включает шрифты emoji, многие распространенные символы Unicode будут отображаться в виде разноцветных пиктограмм. Их внешний вид будет отличаться в зависимости от стиля, используемого в родном шрифте emoji браузера / платформы, и на них не будут влиять никакие стили 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
`<h2></h2>`	заголовок h2. Bootstrap
`<h3></h3>`	заголовок h3. Bootstrap
`<h4></h4>`	h4. Заголовок Bootstrap
`<h5></h5>`	заголовок h5. Bootstrap
`<h6></h6>`	h6. Заголовок Bootstrap

Параграфы

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

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

Результат:

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

Ссылки

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

<a href="#">Это пример ссылки</a>

Результат:

Это пример ссылки

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

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

Результат:

Пример ссылки

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

<a>Это ссылка-заполнитель</a>

Результат:

Это ссылка-заполнитель

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

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

<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 удаленные и a margin-bottom: 1rem. У вложенных списков их нет margin-bottom. Мы также сбросили элементы padding-left on <ul> и <ol>.

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

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

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

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

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

Заключайте встроенные фрагменты кода в <code>. Не забудьте экранировать угловые скобки HTML.

Например, <code>&lt;section&gt;</code> должно быть обернуто как встроенное.

Результат:

Например, <section> должно быть обернуто как встроенное.

Блоки кода

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

<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>

Результат:

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

Переменные

Для обозначения переменных используйте тег <var>.

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

Результат:

y = mx + b

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

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

Для переключения каталогов введите <kbd>cd</kbd>, за которым следует название каталога.<br>
Для редактирования настроек нажмите <kbd><kbd>Ctrl</kbd> + <kbd>,</kbd></kbd>

Результат:

Для переключения каталогов введите cd, за которым следует название каталога.
Для редактирования настроек нажмите Ctrl + ,

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

Для указания образца выходных данных программы используйте тег <samp>.

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

Результат:

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

Таблицы

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

<table>
  <caption>
    Это пример таблицы и ее заголовок, описывающий содержимое.
  </caption>
  <thead>
    <tr>
      <th>Заголовок таблицы</th>
      <th>Заголовок таблицы</th>
      <th>Заголовок таблицы</th>
      <th>Заголовок таблицы</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ячейка таблицы</td>
      <td>Ячейка таблицы</td>
      <td>Ячейка таблицы</td>
      <td>Ячейка таблицы</td>
    </tr>
    <tr>
      <td>Ячейка таблицы</td>
      <td>Ячейка таблицы</td>
      <td>Ячейка таблицы</td>
      <td>Ячейка таблицы</td>
    </tr>
    <tr>
      <td>Ячейка таблицы</td>
      <td>Ячейка таблицы</td>
      <td>Ячейка таблицы</td>
      <td>Ячейка таблицы</td>
    </tr>
  </tbody>
</table>

Результат:

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

Формы

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

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

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

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

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

Пример ввода

Пример электронного письма

Пример телефона

Пример URL

Номер примера

Пример поиска

Пример диапазона

Пример ввода файла

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

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

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

Пример текстовой области

Пример даты

Примерное время

Пример пароля

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

Примерная неделя

Пример месяца

Пример цвета

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

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

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

<span role="button" tabindex="0">Элемент, не являющийся кнопкой button</span>

Результат:

Элемент, не являющийся кнопкой button

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

Адрес

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

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Цитата из блокировки

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

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

Кто-то известный в исходном названии

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

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

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

Краткие сведения

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

Некоторые детали

Еще больше подробностей

Вот еще более подробная информация о деталях.

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

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

<input type="text" hidden>

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

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

Bootstrap Reboot (сброс стилей)

Подход

Переменные CSS

Страница по умолчанию

Собственный стек шрифтов

Заголовки

Параграфы

Ссылки

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

Списки

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

Блоки кода

Переменные

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

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

Таблицы

Формы

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

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

Адрес

Цитата из блокировки

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

Краткие сведения

Атрибут HTML5 [hidden]

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