Bootstrap reboot что это

Обновление

Reboot — коллекция специфических изменений элементов CSS в едином файле, обеспечиваещая Bootstrap элегантную, простую и последовательную основу для быстрого начала работы.

Reboot — переводится как «перезагрузка», унифицирует отображение базовых стилей в браузерах (например переводит все единицы измерения в rem )

Подходы

Вот наши рекомендации и причины для использования Reboot:

Приведите настройки браузера по умолчанию к использованию единиц rem вместо em при масштабируемом расположении контента.
Избегайте margin-top ’a. Вертикальные отступы могут «рушиться», приводя к нежелательным результатам. Однако важнее тот факт, что одно направление margin «марджина» — это более простая «ментальная модель» (более просто использовать).
Для более удобного масштабирования на разных устройствах, в блочных элементах должны использоваться единицы rem для margin марджинов.
Старайтесь минимально объявлять свойства font , вместо чего используйте inherit , где только возможно.

Страницы по умолчанию

Элементы и обновлены чтобы обеспечить лучшие «глобальные» умолчания страниц. Подробнее:

Свойство box-sizing глобально объявлено как border-box для каждого элемента – включая *::before и *::after . Это гарантирует, что объявленная ширина элемента никогда не будет превышена из-за паддинга или границы.

font-size не объявлен по умолчанию в , но он предполагается как 16px (как в умолчаниях браузера). font-size: 1rem применяется к для легкого отзывчивого масштабирования печатания текста через медиа-запросы и одновременно учитывая предпочтения юзера, а также обеспечивая более гибкий подход.

«Родные шрифты» на ОС для ускорения загрузки

Веб-шрифты по умолчанию (Helvetica Neue, Helvetica, Arial) интегрированы в Bootstrap 4 и заменены «стаком (набором) нативных шрифтов» для оптимального рендеринга текста на любой машине или устройстве под любой ОС. Подробнее можно прочитайте о «родных шрифтах» в данной статье.

$font-family-sans-serif: // Safari for OS X and iOS (San Francisco) -apple-system, // Chrome < 56 for OS X (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 применен к и автоматически наследуется глобально во всем Bootstrap. Для изменения глобального font-family обновите карту $font-family-base и перекомпилируйте BS4.

Заголовки и параграфы

Из всех элементов заголовков: и

— удалены margin-top . Для удобного «спейсинга» заголовкам добавлен margin-bottom: margin-bottom: .5rem , а параграфам — margin-bottom: margin-bottom: 1rem .

Сброс CSS стилей Bootstrap Reboot

Изначально у каждого браузера предустановлены свои стили для стандартных элементов, и перед началом верстки их необходимо привести к одинаковому отображению во всех браузерах.

Если стили не сбросить к единым, то потом при проверке в разных браузерах натолкнемся на неприятные моменты, когда, к примеру, отступы у одних и тех же элементов разные и верстка ломается, потом исправляем отображение, например, в Firefox — а она ломается в Chrome и так далее.

Первое преимущество в начальных стилях. Так выглядит страница после подключения одного из самых популярных CSS сбросов Normalize.css

А после подключения Bootstrap Reboot, не написав еще ни строчки CSS, сразу же получаем эстетически приятный вид

Самое важное преимущество Bootstrap Reboot в том, что по-умолчанию для всех элементов(включая псевдо-элементы) установлено свойство box-sizing в значение border-box

*, *::before, *::after

Объясню на простом примере, что дает это свойство.

Например, нужно сверстать блок шириной 400px с текстом, рамкой 10px и внутренним отступом текста от рамки 25px

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ut itaque illo laudantium possimus incidunt veritatis hic ab, magnam nesciunt natus est nisi iste voluptatem aperiam. Ut nesciunt, voluptates earum aliquid ad culpa assumenda eum nemo. Recusandae eos neque, commodi ducimus molestiae ea quis velit laudantium asperiores, delectus quam fuga, et tempora illo dicta quia nisi? Quos possimus at ducimus eum, odio earum reiciendis distinctio ad consequuntur architecto provident soluta, ratione sapiente ex perferendis quas. Aspernatur reprehenderit earum ex iste aliquid facere, veniam accusantium repellendus delectus, eum in doloribus explicabo suscipit itaque odio soluta praesentium ipsa, commodi esse saepe cupiditate!

.text

Без свойства box-sizing: border-box; получаем блок шириной большего размера(470px), чем была задана(400px).

Так как свойство box-sizing по-умолчанию имеет значение content-box заданная ширина применятся к контенту(а не к блоку), а потом к ширине контента 400px еще прибавляется padding по 25px слева и справа и ширина рамки по 10px слева и справа и итоговая ширина блока становится 400px(ширина контента) + 50px( padding слева и справа) + 20px( border слева и справа) = 470px

Если же свойству box-sizing поставить значение border-box , то указанная ширина будет применена к блоку(а не к контенту) с учетом размеров padding и border

В итоге мы контролируем внешние размеры блока независимо от установленных padding и border и на мой взгляд это логичней, и то что в Bootstrap Reboot по-умолчанию box-sizing: border-box; установлен на все элементы это для меня большой плюс.

В каждом проекте, которые верстаю с нуля, подключаю Bootstrap Reboot

Чтобы подключить Bootstrap Reboot, заходим на официальный сайт Bootstrap

Ищем кнопку Download

Под заголовком Compiled CSS and JS нажимаем на Download

В скачаном архиве заходим в папку css и находим файл bootstrap-reboot.min.css

Копируем его в папку проекта, где лежит основной файл стилей, у меня обычно это папка /css, где лежит основной файл main.css

Затем в HTML-файле, например, в index.html в блоке подключаем сначала bootstrap-reboot.min.css(этот файл всегда подключается первым) и только потом уже основной файл стилей, в моем случае это main.css

     Document

Подробности на официальном сайте — Bootstap Reboot

Reboot

Reboot — набор изменений для отдельных элементов CSS в едином файле, обеспечиваещий Bootstrap элегантную, простую и последовательную основу для для развития.

На этой странице

Подходы

Вот наши рекомендации и причины для использования Reboot:

Приведите настройки браузера по умолчанию к использованию единиц rem вместо em при масштабируемом расположении контента.
Избегайте margin-top ’a. Вертикальные отступы могут «рушиться», приводя к нежелательным результатам. Однако важнее тот факт, что одно направление margin «марджина» — это более простая «ментальная модель» (более просто использовать).
Для более удобного масштабирования на разных устройствах, в блочных элементах должны использоваться единицы rem для margin марджинов.
Старайтесь минимально объявлять свойства font , вместо чего используйте inherit , где только возможно.

Параметры страницы по умолчанию

Элементы и обновлены чтобы обеспечить лучшие «глобальные» умолчания страниц. Подробнее:

В не объявлен базовый размер шрифта font-size , но его значение предполагается равным 16px (по умолчанию в браузере). В размер шрифта font-size: 1rem для быстрого масштабирования с помощью медиа-запросов и для обеспечения большей совместимости. Это значение по умолчанию для браузера можно поменять, изменив значение переменной $font-size-root .

Стек собственных шрифтов («Родные шрифты»)

Bootstrap использует “стек собственных шрифтов” или “стек системных шрифтов” для оптимальной визуализации текста на любой машине или устройстве под любой ОС. Эти системные шрифты были разработаны специально для современных устройств с улучшенным рендерингом на экранах, поддержкой переменных шрифтов и многим другим. Подробнее можно прочитайте о «родных шрифтах» в данной статье Smashing Magazine.

$font-family-sans-serif: // Кросс-платформенное общее семейство шрифтов (шрифт пользовательского интерфейса по умолчанию) system-ui, // Safari для macOS и iOS (San Francisco) -apple-system, // Windows "Segoe UI", // Android Roboto, // Простой веб резерв "Helvetica Neue", Arial, // Linux "Noto Sans", "Liberation Sans", // Резервный вариант без засечек sans-serif, // Emoji шрифты "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Обратите внимание, что, поскольку стек шрифтов включает шрифты эмодзи (emoji), многие распространенные символы Unicode будут отображаться как разноцветные пиктограммы. Их внешний вид будет различаться в зависимости от стиля, используемого в собственном шрифте эмодзи браузера/платформы, и на них не повлияют никакие цветовые color стили CSS.

Заголовки и параграфы

Из всех элементов заголовков: и

— удалены margin-top . Для удобных «отступов» заголовкам добавлен margin-bottom: margin-bottom: .5rem , а параграфам — margin-bottom: margin-bottom: 1rem .

Заголовок	Пример
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading

Списки

All lists have their top margin removed
And their bottom margin normalized

Nested lists have no bottom margin

This way they have a more even appearance
Particularly when followed by more list items

Here’s an ordered list
With a few list items
It has the same overall look
As the previous unordered list

Для более легкой стилизации, удобной иерархии и красивых отступов, у списков описания ( ) обновлены марджины margin . У значение margin-left стало 0 , а margin-bottom: .5rem . стали жирными.

Description lists A description list is perfect for defining terms. Term Definition for the term. A second definition for the same term. Another term Definition for this other term.

Строчный код

Оборачивайте «блочные» куски кода тэгом . Удостоверьтесь в отсутствии закрывающих угловых скобок HTML.

К примеру,

надо обертывать как блочный элемент.

К примеру, code><section>code> надо обертывать как блочный элемент.

Блоки кода

Используйте для длинных строк кода. Убедитесь, что в коде не указаны угловые скобки для правильного рендеринга. Элемент сбрасывается для удаления его значения margin-top и используются единицы rem для margin-bottom .

Sample text here.
 And another line of sample text here.

pre>code><p>Sample text here. </p> <p>And another line of sample text here. </p> code>pre>

Переменные

Для указания переменных используйте тег .

var>yvar> = var>mvar>var>xvar> + var>bvar>

Пользовательский ввод

Используйте для обозначения значений, которые обычно вводятся с клавиатуры.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

To switch directories, type kbd>cdkbd> followed by the name of the directory.br> To edit settings, press kbd>kbd>ctrlkbd> + kbd>,kbd>kbd>

Образец вывода

Для указания выходных данных программы используйте тег .

This text is meant to be treated as sample output from a computer program.

samp>This text is meant to be treated as sample output from a computer program.samp>

Таблицы

Таблицы слегка адаптированы — изменен , сдвинуты границы, и теперь таблицы имеют последовательное выравнивание text-align . Дополнительные изменения для границ, паддинга и еще кое-чего – в классе .table .

Это пример таблицы, и это ее заголовок для описания содержимого.

Заголовок	Заголовок	Заголовок	Заголовок
Ячейка	Ячейка	Ячейка	Ячейка
Ячейка	Ячейка	Ячейка	Ячейка
Ячейка	Ячейка	Ячейка	Ячейка

Формы

Различные элементы форм «перезагружены» для приобретения ими более простых «базовых» стилей. Вот несколько самых заметных изменений:

У убраны границы, паддинги и марджины; так что теперь они могут быть легко использованы как «обертки» для отдельных форм ввода или групп форм ввода.
, как и , тоже изменены, и теперь отображаются как сортируемый заголовок.
Элементы получили значение display: inline-block ля возможности применения марджина margin .
К элементам , , и по большому счету, адресуется лишь normalize.css, но Reboot также удаляет их марджин margin и устанавливает line-height: inherit .
Элементы изменены – теперь их можно изменять в размере лишь вертикально, потому что горизонтальное изменение часто «ломает» разметку страницы.
Элементы кнопок и имеют cursor: pointer когда :not(:disabled) .

Эти и другие изменения смотрите ниже.

Поддержка ввода даты и цвета

Имейте в виду, что ввод данных не полностью поддерживается всеми браузерами, а именно Safari.

Указатели на кнопки

Reboot включает в себя расширение для role=»button» для изменения курсора по умолчанию на указатель pointer . Добавьте этот атрибут к элементам, чтобы указать, что элементы являются интерактивными. Эта роль не требуется для элементов которые получают свои собственные изменения cursor .

Non-button element button

span role="button" tabindex="0">Non-button element buttonspan>

Разные элементы

Адрес

Элемент обновлен – теперь вместо дефолтного браузерного font-style : italic стоит normal . line-height теперь наследуется и добавлен margin-bottom: 1rem . Элемент добавлены для контактной информации ближайшего «наследника» (или описания работы в целом). Сохраняйте форматирование добавлением
в конец строк.

Twitter, Inc.
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.

Someone famous in Source Title

Строчные элементы

Базовые стили элемента созданы так, что они «заставляют» его выделяться среди параграфа текста.

Nulla attr vitae elit libero, a pharetra augue.

Резюме

Курсор cursor по умолчанию всегда стремится к курсору текста text , так что мы переназначили его на «указатель» pointer для обозначения возможности взаимодействия с объектом по клику.

Some details

More info about the details.

Even more details

Here are even more details about the details.

Атрибут HTML5 [hidden]

HTML5 добавляет новый глобальный атрибут — [hidden] , который не отображается по умолчанию имеет значение display: none . Позаимствовав эту идею из PureCSS, мы добавили в нее !important ( [hidden] < display: none !important; >), чтобы избежать случайного «перекрытия» свойства display .

input type="text" hidden>

jQuery несовместимость

[hidden] несовместим с методами jQuery’s $(. ).hide() и $(. ).show() . Поэтому мы пока не особенно одобряем использование [hidden] с другими методами управления свойством элементов display .

Чтобы лишь скрыть видимость элемента без его «исчезания» из разметки, т.е. без изменения свойства display , используйте вместо [hidden] класс .invisible .

Новая версия

Роль Bootstrap работы — обеспечить элегантный, последовательные и простую базу для дальнейшего строительства. Мы используем Новую версию, набор отдельных элементов, CSS изменения в один файл, чтобы сделать кикстарт.

Подход

Вот наши рекомендации и причины выбора того, что для переопределения в Новой версии:

Обновить некоторые значения по умолчанию браузере, чтобы использовали rem -ы вместо em -ов для масштабируемых расстояний между компонентами.
Избежать margin-top . Вертикальное отступы могут свернуться, приводя к непредсказуемым результатам. Более важно то, одном направлении margin более простой ментальной модели.
Для облегчения масштабирования размеров устройства, элементы блока должны использовать rem для margin ов.
Сохранить Объявления font -свойства, относящиеся к минимуму, используя inherit мере возможности.

По умолчанию страницы

и элементы обновляются, чтобы обеспечить лучшую страницу по умолчанию. Более конкретно:

box-sizing глобально установливает на каждый элемент, в том числе *:before и *:after , до border-box . Это гарантирует, что заявленная Ширина элемента не превышал из-за внутреннего отступа или границы.
База font-size: 16px объявляется на и font-size: 1rem на легкий aдаптивный Тип масштабирования через медиа запросы.
На также устанавливается глобальный font-family и line-height . Это унаследованный позднее некоторые элементы формы для предотвращения несоответствия шрифтов.
Для безопасности ближайшие background-color , по умолчанию #fff .

Местный стек шрифтов

Веб-шрифты по умолчанию (Helvetica Neue, Helvetica, и Arial) были сняты в Bootstrap 4 и заменить “родной стек шрифт” для оптимального отображения текста на любом устройстве и ОС. Подробнее о собственные стеки шрифт в этом Smashing Magazine статьи.

$font-family-sans-serif: // В Safari для OS X и iOS (Сан-Франциско) -apple-system, // Chrome для ОС х (Сан-Франциско) BlinkMacSystemFont, // Windows "Segoe UI", // Android "Roboto", // Linux "Oxygen", // KDE "Ubuntu", "Cantarell", // GNOME // ОС Firefox [R.I.P.] "Fira Sans", // старые Android "Droid Sans", // Базовой веб-резервный "Helvetica Neue", Arial, sans-serif !default;

Этот font-family наносится и автоматически наследуется глобально во Bootstrap. Для переключения глобального font-family обновление $font-family-base и перекомпилировать Bootstrap.

Заголовки и абзацы

Всего в рубрике элементы—например, —и

будут сброшены, чтобы их margin-top удалены. Заголовки margin-bottom: .5rem добавлены и пункты margin-bottom: 1rem для легкого интервала.