Перезавантаження

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

На цій сторінці

Підхід

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

Нижче наведено наші вказівки та причини вибору того, що потрібно змінити в Reboot:

Оновіть деякі стандартні значення браузера, щоб використовувати rems замість ems для масштабованого інтервалу компонентів.
Уникайте margin-top. Вертикальні поля можуть згорнутися, що призведе до неочікуваних результатів. Що ще важливіше, єдиний напрямок margin— це простіша ментальна модель.
Для легшого масштабування за розмірами пристроїв блокові елементи повинні використовувати rems замість margins.
Зведіть fontдо мінімуму оголошення властивостей, пов'язаних з -, використовуючи, inheritколи це можливо.

Змінні CSS

Додано у v5.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};

На практиці ці змінні потім застосовуються у Reboot таким чином:

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 відображатимуться як різнокольорові піктограми. Їх вигляд змінюватиметься залежно від стилю, який використовується у рідному шрифті emoji браузера/платформи, і на них не впливатимуть colorстилі CSS.

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

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

Елемент <hr>спрощено. Подібно до параметрів за замовчуванням у браузері, <hr>s мають стиль через 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-lefton <ul>і .<ol>

У всіх списках верхнє поле видалено
І їх нижня межа нормалізувалася
Вкладені списки не мають нижнього поля
- Таким чином вони мають більш рівний вигляд
- Особливо, коли за ним іде більше елементів списку
Відступ зліва також скинуто

Ось упорядкований список
З кількома пунктами списку
Він має такий самий загальний вигляд
Як і попередній невпорядкований список

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

Списки опису: Список описів ідеально підходить для визначення термінів.
термін: Визначення терміна.; Друге визначення того самого терміна.
Інший термін: Визначення цього іншого терміна.

Вбудований код

Оберніть вбудовані фрагменти коду за допомогою <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>тег.

y = m x + b

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>s модифіковано, щоб мати можливість змінювати розмір лише вертикально, оскільки горизонтальна зміна розміру часто «ламає» макет сторінки.
<button>s і <input>елементи кнопки мають cursor: pointerколи :not(:disabled).

Ці та інші зміни наведено нижче.

Приклад легенди

Приклад введення

Приклад електронної пошти

Приклад телефону

Приклад url

Приклад числа

Приклад пошуку

Приклад діапазону

Приклад введення файлу

Вибір прикладу

Установіть цей прапорець

Варіант перший - те і те Варіант другий — це ще щось, що також наддовге, щоб продемонструвати упаковку цих химерних елементів керування формою. Третій варіант вимкнено

Приклад текстового поля

Приклад дати

Приклад часу

Приклад пароля

Приклад datetime-local

Прикладний тиждень

Приклад місяць

Приклад кольору

Приклад виведення 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
P: (123) 456-7890

Повне ім'я
[email protected]

Блок цитати

За замовчуванням marginдля блокових цитат є 1em 40px, тому ми скинули це значення 0 0 1remдля чогось більш узгодженого з іншими елементами.

Добре відома цитата, що міститься в елементі blockquote.

Хтось відомий у назві джерела

Вбудовані елементи

Елемент <abbr>отримує базовий стиль, щоб виділятися серед тексту абзацу.

Елемент абревіатури HTML .

Резюме

За замовчуванням cursorдля резюме є text, тому ми скидаємо це значення, pointerщоб передати, що з елементом можна взаємодіяти, клацнувши його.

Деякі деталі

Детальніше про деталі.

Ще більше деталей

Тут ще докладніше про деталі.

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

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

<input type="text" hidden>

Несумісність jQuery

[hidden]несумісний з $(...).hide()методами $(...).show()jQuery. Тому наразі ми особливо не схвалюємо [hidden]інші методи керування displayелементами.

Щоб просто перемкнути видимість елемента, тобто його displayне змінено, і елемент усе ще може впливати на потік документа, використовуйте натомість клас ..invisible

Перезавантаження

Підхід

Змінні CSS

Сторінка за замовчуванням

Нативний стек шрифтів

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

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

списки

Вбудований код

Кодові блоки

Змінні

Введення користувача

Вихідний зразок

Таблиці

Форми

Підтримка введення дати та кольору

Покажчики на кнопках

Різні елементи

Адреса

Блок цитати

Вбудовані елементи

Резюме

[hidden]атрибут HTML5

Несумісність jQuery

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