Перезавантаження
Reboot, набір змін CSS для окремих елементів в одному файлі, запускає Bootstrap, щоб забезпечити елегантну, узгоджену та просту базову лінію для створення.
Підхід
Reboot будується на Normalize, надаючи багатьом елементам HTML дещо самовпевнені стилі, використовуючи лише селектори елементів. Додаткова укладка робиться тільки заняттями. Наприклад, ми перезавантажуємо деякі <table>
стилі для простішої базової лінії, а пізніше надаємо .table
, .table-bordered
та багато іншого.
Нижче наведено наші вказівки та причини вибору того, що потрібно змінити в Reboot:
- Оновіть деякі стандартні значення браузера, щоб використовувати
rem
s замістьem
s для масштабованого інтервалу компонентів. - Уникайте
margin-top
. Вертикальні поля можуть згорнутися, що призведе до неочікуваних результатів. Що ще важливіше, єдиний напрямокmargin
— це простіша ментальна модель. - Для легшого масштабування за розмірами пристроїв блокові елементи повинні використовувати
rem
s замістьmargin
s. - Зведіть
font
до мінімуму оголошення властивостей, пов'язаних з -, використовуючи,inherit
коли це можливо.
Сторінка за замовчуванням
Елементи <html>
та <body>
оновлено, щоб забезпечити кращі стандартні значення для всієї сторінки. Більш конкретно:
- Глобально
box-sizing
встановлюється для кожного елемента, включаючи*::before
та*::after
, доborder-box
. Це гарантує, що оголошена ширина елемента ніколи не буде перевищена через відступ або рамку. - База
font-size
не оголошена на<html>
, але16px
передбачається (браузер за замовчуванням).font-size: 1rem
застосовано<body>
для легкого адаптивного масштабування типу за допомогою медіа-запитів, дотримуючись уподобань користувача та забезпечуючи більш доступний підхід. - Також
<body>
встановлює глобальніfont-family
,line-height
іtext-align
. Це пізніше успадковується деякими елементами форми, щоб запобігти невідповідності шрифтів. - Для безпеки
<body>
оголошеноbackground-color
, за замовчуванням#fff
.
Нативний стек шрифтів
Веб-шрифти за замовчуванням (Helvetica Neue, Helvetica та Arial) вилучено з Bootstrap 4 і замінено на «власний стек шрифтів» для оптимального відтворення тексту на кожному пристрої та ОС. Дізнайтеся більше про набори нативних шрифтів у цій статті журналу Smashing Magazine .
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// 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 |
списки
Усі списки <ul>
— , <ol>
, і <dl>
— margin-top
видалено, а margin-bottom: 1rem
. Вкладені списки не мають margin-bottom
.
- У всіх списках верхнє поле видалено
- І їх нижня межа нормалізувалася
- Вкладені списки не мають нижнього поля
- Таким чином вони мають більш рівний вигляд
- Особливо, коли за ним іде більше елементів списку
- Відступ зліва також скинуто
- Ось упорядкований список
- З кількома пунктами списку
- Він має такий самий загальний вигляд
- Як і попередній невпорядкований список
Для спрощення стилю, чіткої ієрархії та кращого інтервалу списки описів оновлено margin
. <dd>
s скинути margin-left
та 0
додати margin-bottom: .5rem
. <dt>
s виділені жирним шрифтом .
- Списки опису
- Список описів ідеально підходить для визначення термінів.
- термін
- Визначення терміна.
- Друге визначення того самого терміна.
- Інший термін
- Визначення цього іншого терміна.
Попередньо відформатований текст
Елемент <pre>
скидається, щоб видалити його margin-top
та використовувати rem
одиниці для свого margin-bottom
.
.example-element { margin-bottom: 1rem; }
Таблиці
Таблиці дещо налаштовані відповідно до стилів <caption>
, згортають межі та забезпечують узгодженість text-align
у всьому. Додаткові зміни для меж, відступів тощо входять у .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)
.
Ці та інші зміни наведено нижче.
Покажчики на кнопках
Перезавантаження включає вдосконалення, 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
випадковому перевизначенню. Хоча [hidden]
це не підтримується IE10, явне оголошення в нашому CSS дозволяє вирішити цю проблему.
<input type="text" hidden>
Несумісність jQuery
[hidden]
несумісний з $(...).hide()
методами $(...).show()
jQuery. Тому наразі ми особливо не схвалюємо [hidden]
інші методи керування display
елементами.
Щоб просто перемкнути видимість елемента, тобто його display
не змінено, і елемент усе ще може впливати на потік документа, використовуйте натомість клас ..invisible