Bootstrap reboot что это
Перейти к содержимому

Bootstrap reboot что это

  • автор:

Reboot

Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.

Approach

Here are our guidelines and reasons for choosing what to override in Reboot:

  • Update some browser default values to use rem s instead of em s for scalable component spacing.
  • Avoid margin-top . Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of margin is a simpler mental model.
  • For easier scaling across device sizes, block elements should use rem s for margin s.
  • Keep declarations of font -related properties to a minimum, using inherit whenever possible.

Page defaults

The and elements are updated to provide better page-wide defaults. More specifically:

  • The box-sizing is globally set on every element—including *::before and *::after , to border-box . This ensures that the declared width of element is never exceeded due to padding or border.
    • No base font-size is declared on the , but 16px is assumed (the browser default). font-size: 1rem is applied on the for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.

    Native font stack

    The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a “native font stack” for optimum text rendering on every device and OS. Read more about native font stacks in this Smashing Magazine article.

    $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;

    This font-family is applied to the and automatically inherited globally throughout Bootstrap. To switch the global font-family , update $font-family-base and recompile Bootstrap.

    Headings and paragraphs

    All heading elements—e.g., —and

    are reset to have their margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.

    Обновление

    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

      Использование файла bootstrap-reboot.min.css

      Мне кажется, что файл bootstrap-reboot.min.css только мешает верстке. Постоянно приходится переопределять стили, такие как margin, padding, line-height. По-моему, это переопределение не только сказывается на скорости работы, но и на времени отрисовки браузером.

      Не эффективнее ли использовать просто normalize.css, как в прошлых уроках?

      Sergey Melnikov
      3 years ago

      Добрый день. Вы можете спокойно использовать любой из вариантов, тот, который считаете удобнее)

      Иван Петриченко
      3 years ago
      Sergey Melnikov
      3 years ago

      2 ответов

      JavaScript — полный курс с нуля до результата!

      Полный курс Python для начинающих – с нуля до специалиста

      Photoshop для начинающих Веб-дизайнеров

      Adobe Illustrator с нуля – основы дизайна для начинающих

      Программирование на Java с нуля

      React JS для начинающих + Redux

      Django 3 — Full Stack разработка веб сайтов на Python

      WordPress – с нуля до Профи!

      Основы HTML/CSS — верстка сайтов с нуля

      WordPress – Быстрый старт!

      Шаблонизатор Pug/jade — современный ускоритель для HTML

      ВЕБ-разработчик — с нуля до результата!

      Посадка верстки и создание тем на CMS WordPress

      Настройка рекламы Яндекс Директ — продвижение сайтов

      Настройка рекламы Google — продвижение сайтов

      Настройка таргетированной рекламы и продвижение ВКонтакте

      Настройка рекламы и продвижение Facebook+Instagram

      МЕГАКУРС по рекламе: Яндекс Директ, Google Реклама, ВКонтакте, Facebook+Instagram

      Полный курс Android + Java для начинающих

      Kotlin — Быстрый старт!

      Программирование на C# – от новичка до специалиста

      Верстальщик сайтов — HTML, CSS, Bootstrap, JavaScript

      SQL и PostgreSQL для начинающих

      Создание административной панели на React JS + PHP

      Практический JavaScript — продвинутый уровень

      GIT. Управление версиями для разработчиков

      Программирование на Java с нуля — Уровень 2 + 10 собеседований

      Полный курс Python – продвинутый уровень + SQL

      Figma для Веб дизайнера — с нуля до профессионала

      React с нуля для начинающих + 3 проекта в портфолио!

      Веб Дизайн в Figma. Основы Ui Ux дизайна на практике

      Алгоритмы и структуры данных от А до Я

      Adobe Illustrator с нуля – Уровень 2 – продвинутая практика

      Android разработчик – профессиональный уровень (Kotlin)

      Веб Дизайн в Figma 2022 Продвинутый уровень. Создание Ui Kit

      Шаблоны проектирования на Python

      Похожие публикации:
      1. Objective c что это
      2. Как назвать файл в питоне
      3. Как подключить wpf к mysql workbench
      4. Что лучше mhdd или victoria

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *