Reboot
Reboot - коллекция специфических изменений элементов CSS в едином файле, обеспечиваещая Bootstrap элегантную, простую и последовательную основу для быстрого начала работы.
Reboot - «перезагрузка», унифицирует отображение базовых стилей в браузерах (например переводит все единицы измерения в rem
)
Подходы
Reboot основан на файле normalize.css (для лучшего отображения унифицирует стили которые в этом нуждаются), который позволяет обеспечить многие элементы HTML некоторым набором стилей, используя только селекторы элемента. Дополнительная стилизация реализуется только посредством классов. Например, мы «перезагружаем» стили некоего элемента <table>
для более простого вертикального выравнивания (baseline – вертикальный «ритм» контента, или иной), а потом применяем классы .table
, .table-bordered
и т.д.
Вот наши рекомендации и причины для использования Reboot:
- Приведите настройки браузера по умолчанию к использованию единиц
rem
вместоem
при масштабируемом расположении контента. - Избегайте
margin-top
’a. Вертикальные отступы могут «рушиться», приводя к нежелательным результатам. Однако важнее тот факт, что одно направлениеmargin
«марджина» - это более простая «ментальная модель» (более просто использовать). - Для более удобного масштабирования на разных устройствах, в блочных элементах должны использоваться единицы
rem
дляmargin
марджинов. - Старайтесь минимально объявлять свойства
font
, вместо чего используйтеinherit
, где только возможно.
Страницы по умолчанию
Элементы <html>
и <body>
обновлены чтобы обеспечить лучшие «глобальные» умолчания страниц. Подробнее:
- Свойство
box-sizing
глобально объявлено какborder-box
для каждого элемента – включая*::before
и*::after
. Это гарантирует, что объявленная ширина элемента никогда не будет превышена из-за паддинга или границы. 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 и заменены «стаком (набором) нативных шрифтов» для оптимального рендеринга текста на любой машине или устройстве под любой ОС. Подробнее можно прочитайте о «родных шрифтах» в данной статье.
Этот font-family
применен к <body>
и автоматически наследуется глобально во всем Bootstrap. Для изменения глобального font-family
обновите карту $font-family-base
и перекомпилируйте BS4.
Заголовки и параграфы
Из всех элементов заголовков: <h1>
и <p>
- удалены margin-top
. Для удобных «отступов» заголовкам добавлен margin-bottom: margin-bottom: .5rem
, а параграфам - margin-bottom: margin-bottom: 1rem
.
Заголовок | Пример |
---|---|
|
h1. Заголовок Bootstrap |
|
h2. Заголовок Bootstrap |
|
h3. Заголовок Bootstrap |
|
h4. Заголовок Bootstrap |
|
h5. Заголовок Bootstrap |
|
h6. Заголовок Bootstrap |
Списки
Из всех списков <ul>
, <ol>
и <dl>
— удален margin-top
, а margin-bottom
установлен в 1rem
. Вложенные списки без margin-bottom
.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie 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
- Integer molestie 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
Для более легкой стилизации, удобной иерархии и красивых отступов, у списков описания (<dl>
) обновлены марджины margin
. У <dd>
значение margin-left
стало 0
, а margin-bottom: .5rem
. <dt>
стали жирными.
<dl>
прекрасно подходит для определений терминов:
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Пре-форматированный текст
У элемента <pre>
удален margin-top
, а единицами измерения его margin-bottom
стали rem
.
.example-element { margin-bottom: 1rem; }
Таблицы
Таблицы слегка адаптированы - изменен <caption>
, сдвинуты границы, и теперь таблицы имеют последовательное выравнивание text-align
. Дополнительные изменения для границ, паддинга и еще кое-чего – в классе .table
.
Заголовок | Заголовок | Заголовок | Заголовок |
---|---|---|---|
Ячейка | Ячейка | Ячейка | Ячейка |
Ячейка | Ячейка | Ячейка | Ячейка |
Ячейка | Ячейка | Ячейка | Ячейка |
Формы
Различные элементы форм «перезагружены» для приобретения ими более простых «базовых» стилей. Вот несколько самых заметных изменений:
- У
<fieldset>
убраны границы, паддинги и марджины; так что теперь они могут быть легко использованы как «обертки» для отдельных форм ввода или групп форм ввода. - Элементы
<legend>
, как и<fieldsets>
, тоже изменены, и теперь отображаются как сортируемый заголовок. - Элементы
<label>
получили значениеdisplay: inline-block
для возможности применения марджинаmargin
. - К элементам
<input>
,<select>
,<textarea>
и<button>
по большому счету, адресуется лишь normalize.css, но Reboot также удаляет их марджинmargin
и устанавливаетline-height: inherit
. - Элементы
<textarea>
изменены – теперь их можно изменять в размере лишь вертикально, потому что горизонтальное изменение часто «ломает» разметку страницы.
Эти изменения (и еще) показаны внизу.
Указатели на кнопки
Reboot включает в себя расширение для role="button"
для изменения курсора по умолчанию на указатель pointer
. Добавьте этот атрибут к элементам, чтобы указать, что элементы являются интерактивными. Эта роль не требуется для элементов <button>
которые получают свои собственные изменения cursor
.
Элементы misc
Адрес
Элемент <address>
обновлен – теперь вместо дефолтного браузерного font-style
: italic
стоит normal
. line-height
теперь наследуется и добавлен margin-bottom: 1rem
. Элемент <address>
добавлены для контактной информации ближайшего «наследника» (или описания работы в целом). Сохраняйте форматирование добавлением <br>
в конец строк.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
first.last@example.com
Цитата
По умолчанию, марджин margin
элемента blockquotes составляет 1em 40px
, так что мы «скинули» его до 0 0 1rem
для большей «кучности» при работе с другими элементами.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Строчные элементы
Базовые стили элемента <abbr>
созданы так, что они «заставляют» его выделяться среди параграфа текста.
Резюме
Курсор cursor
по умолчанию всегда стремится к курсору текста text
, так что мы переназначили его на "указатель" pointer
для обозначения возможности взаимодействия с объектом по клику.
Некоторые детали
Подробнее о деталях.
Еще подробности
Вот еще подробности о деталях.
Атрибут HTML5 [hidden]
HTML5 добавляет новый глобальный атрибут - [hidden]
, который не отображается по умолчанию имеет значение display: none
. Позаимствовав эту идею из PureCSS, мы добавили в нее !important ([hidden] { display: none !important; }
), чтобы избежать случайного «перекрытия» этого свойства и показа скрытого [hidden]
. Хотя [hidden]
не имеет встроенной поддержки в IE10, явное объявление его в вашем CSS решает эту проблему для данного браузера.
Частичная несовместимость [hidden] с jQuery
[hidden]
несовместим с методами $(...).hide()
и $(...).show()
jQuery. Поэтому мы пока не особенно одобряем использование [hidden]
с другими методами управления свойством элементов display
.
Чтобы лишь скрыть видимость элемента без его «исчезания» из разметки, т.е. без изменения свойства display
, используйте вместо [hidden]
класс .invisible
.