Перезавантаження
Reboot, набір змін CSS для окремих елементів в одному файлі, запускає Bootstrap, щоб забезпечити елегантну, узгоджену та просту базову лінію для створення.
Підхід
Reboot будується на Normalize, надаючи багатьом елементам HTML дещо самовпевнені стилі, використовуючи лише селектори елементів. Додаткова укладка робиться тільки заняттями. Наприклад, ми перезавантажуємо деякі <table>
стилі для простішої базової лінії, а пізніше надаємо .table
, .table-bordered
та багато іншого.
Нижче наведено наші вказівки та причини вибору того, що потрібно змінити в Reboot:
- Оновіть деякі стандартні значення браузера, щоб використовувати
rem
s замістьem
s для масштабованого інтервалу компонентів. - Уникайте
margin-top
. Вертикальні поля можуть згорнутися, що призведе до неочікуваних результатів. Що ще важливіше, єдиний напрямокmargin
— це простіша ментальна модель. - Для легшого масштабування за розмірами пристроїв блокові елементи повинні використовувати
rem
s замістьmargin
s. - Зведіть
font
до мінімуму оголошення властивостей, пов'язаних з -, використовуючи,inherit
коли це можливо.
Змінні CSS
Додано у v5.2.0У версії 5.1.1 ми стандартизували наші необхідні @import
s для всіх наших пакетів 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
встановлено через батьківський елемент. Їх можна змінювати за допомогою утиліт для тексту, рамки та непрозорості.
<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
on <ul>
і .<ol>
- У всіх списках верхнє поле видалено
- І їх нижня межа нормалізувалася
- Вкладені списки не мають нижнього поля
- Таким чином вони мають більш рівний вигляд
- Особливо, коли за ним іде більше елементів списку
- Відступ зліва також скинуто
- Ось упорядкований список
- З кількома пунктами списку
- Він має такий самий загальний вигляд
- Як і попередній невпорядкований список
Для спрощення стилю, чіткої ієрархії та кращого інтервалу списки описів оновлено margin
. <dd>
s скинути margin-left
та 0
додати margin-bottom: .5rem
. <dt>
s виділені жирним шрифтом .
- Списки опису
- Список описів ідеально підходить для визначення термінів.
- термін
- Визначення терміна.
- Друге визначення того самого терміна.
- Інший термін
- Визначення цього іншого терміна.
Вбудований код
Оберніть вбудовані фрагменти коду за допомогою <code>
. Обов’язково екрануйте кутові дужки HTML.
<section>
слід загорнути як вбудований.
For example, <code><section></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>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Змінні
Для позначення змінних використовуйте <var>
тег.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Введення користувача
Використовуйте <kbd>
для позначення введення, яке зазвичай вводиться за допомогою клавіатури.
Щоб змінити налаштування, натисніть ctrl + ,
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>
тег.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Таблиці
Таблиці дещо налаштовані відповідно до стилів <caption>
, згортають межі та забезпечують узгодженість text-align
у всьому. Додаткові зміни для меж, відступів тощо входять у .table
клас .
Заголовок таблиці | Заголовок таблиці | Заголовок таблиці | Заголовок таблиці |
---|---|---|---|
Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці |
Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці |
Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці |
<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)
.
Ці та інші зміни наведено нижче.
Підтримка введення дати та кольору
Майте на увазі, що введення дати не повністю підтримується всіма браузерами, а саме Safari.
Покажчики на кнопках
Перезавантаження включає вдосконалення, 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Повне ім'я
[email protected]
Блок цитати
За замовчуванням margin
для блокових цитат є 1em 40px
, тому ми скинули це значення 0 0 1rem
для чогось більш узгодженого з іншими елементами.
Добре відома цитата, що міститься в елементі blockquote.
Хтось відомий у назві джерела
Вбудовані елементи
Елемент <abbr>
отримує базовий стиль, щоб виділятися серед тексту абзацу.
Резюме
За замовчуванням 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