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

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

Підхід

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

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

Оновіть деякі стандартні значення браузера, щоб використовувати rems замість ems для масштабованого інтервалу компонентів.
Уникайте margin-top. Вертикальні поля можуть згорнутися, що призведе до неочікуваних результатів. Що ще важливіше, єдиний напрямок margin— це простіша ментальна модель.
Для легшого масштабування за розмірами пристроїв блокові елементи повинні використовувати rems замість margins.
Зведіть 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).

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

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

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

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

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

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

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

Приклад дати

Приклад часу

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

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

Перезавантаження включає вдосконалення, 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>.

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>отримує базовий стиль, щоб виділятися серед тексту абзацу.

Nulla attr vitae elit libero, a pharetra augue.

Резюме

За замовчуванням 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