Source

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

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ціле число molesteie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ціле число molesteie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Списки опису: Список описів ідеально підходить для визначення термінів.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Порта Малесуада: Etiam porta sem malesuada magna mollis euismod.

Попередньо відформатований текст

Елемент <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

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

Адреса

Елемент <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для чогось більш узгодженого з іншими елементами.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.

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

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

Елемент <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