Reboot (перезагрузка)
Reboot, набор изменений CSS для конкретных элементов в одном файле, запускает Bootstrap, чтобы обеспечить элегантную, последовательную и простую основу для развития.
Содержание
Approach
Вот наши рекомендации и причины выбора того, что следует переопределить в Reboot:
- Обновите некоторые значения браузера по умолчанию, чтобы использовать rem вместо em для масштабируемого расстояния между компонентами.
- Избегайте margin-top . Вертикальные поля могут исчезнуть, что приведет к неожиданным результатам. Что еще более важно, одно направление margin — это более простая ментальная модель.
- Для упрощения масштабирования по размеру устройства блочные элементы должны использовать rem вместо margin .
- font cведите к минимуму декларации связанных свойств, по возможности используйте inherit .
Параметры страницы по умолчанию
и элементы будут обновлены , чтобы обеспечить лучшие страницы в масштабе по умолчанию. Более конкретно:
- box-sizing Глобально установлен на каждом элементе, в том числе *::before и *::after к border-box . Это гарантирует, что заявленная ширина элемента никогда не будет превышена из-за заполнения или границы.
- База font-size не объявлена , но 16px предполагается (по умолчанию браузер). font-size: 1rem применяется для легкого масштабирования типов с помощью медиа-запросов с учетом пользовательских предпочтений и обеспечения более доступного подхода. Это значение по умолчанию для браузера можно изменить, изменив $font-size-root переменную.
Стек собственных шрифтов
Bootstrap использует «стек собственных шрифтов» или «стек системных шрифтов» для оптимального рендеринга текста на всех устройствах и ОС. Эти системные шрифты были разработаны специально для современных устройств с улучшенным отображением на экранах, поддержкой переменных шрифтов и многим другим. Узнайте больше о стеках собственных шрифтов в этой статье 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", // Sans serif fallback sans-serif, // Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;Это font-family применяется к файлу Bootstrap и автоматически наследуется во всем мире. Чтобы переключить глобальный font-family , обновите $font-family-base и перекомпилируйте Bootstrap.
Заголовки и абзацы
Все элементы заголовка — например, —
сбрасываются, чтобы их можно было margin-top удалить. Добавлены margin-bottom: .5rem заголовки и абзацы margin-bottom: 1rem для удобного размещения.
Заголовок пример h1. Заголовок Bootstrap h2. Заголовок Bootstrap h3. Заголовок Bootstrap h4. Заголовок Bootstrap h5. Заголовок Bootstrap h6. Заголовок Bootstrap Списки
-
—
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Целочисленный molestie lorem at massa
- Facilisis в аликвоте pretium nisl
- Нулла волутпат аликвам велит
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat в
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Целочисленный molestie lorem at massa
- Facilisis в аликвоте pretium nisl
- Нулла волутпат аликвам велит
- Faucibus porta lacus fringilla vel
- Энеан сижу амет эрат нунк
- Эгет-порттитор лорем
Для упрощения стиля, четкой иерархии и лучшего интервала в списках описаний были обновлены символы margin . сбросить margin-left на 0 и добавить margin-bottom: .5rem . выделены жирным шрифтом.
Списки описаний Список описаний идеально подходит для определения терминов. 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.
Встроенный код
Оберните встроенные фрагменты кода в . Обязательно избегайте угловых скобок HTML.
Например,
следует обернуть как встроенный. For example, code><section>code> should be wrapped as inline.Блоки кода
Используйте для нескольких строк кода. Еще раз, не забудьте снять угловые скобки в коде для правильного рендеринга. Элемент сбрасывается , чтобы удалить его 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>Пользовательский ввод
Используйте для обозначения ввода, который обычно вводится с клавиатуры.
Чтобы переключить каталоги, введите, cd а затем имя каталога.
Для редактирования настроек нажмите 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>Пример вывода
Для обозначения вывода образца из программы используйте тег.
Этот текст следует рассматривать как образец вывода компьютерной программы.
samp>This text is meant to be treated as sample output from a computer program.samp>Таблицы
Таблицы немного скорректированы по стилям , сворачивают границы и обеспечивают единообразие text-align во всем. Дополнительные изменения границ, отступов и прочего идут вместе с классом .table .
Это примерная таблица, и это ее заголовок для описания содержимого.
Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Формы
Для упрощения базовых стилей были перезагружены различные элементы формы. Вот некоторые из наиболее заметных изменений:
- не имеют границ, отступов или полей, поэтому их можно легко использовать в качестве оберток для отдельных входов или групп входов.
- , как и наборы полей, также были изменены, чтобы отображать их как своего рода заголовки.
- установлены, чтобы display: inline-block разрешить применение margin .
- , s, и в основном адресованы Normalize, но Reboot также удаляет их margin и устанавливает line-height: inherit .
- изменены так, чтобы их размер можно было изменять только по вертикали, поскольку изменение размера по горизонтали часто «ломает» макет страницы.
- и элементы кнопки имеют cursor: pointer when :not(:disabled) .
Эти и другие изменения показаны ниже.
Поддержка ввода даты и цвета
Имейте в виду, что ввод даты полностью поддерживается не всеми браузерами, а именно Safari.
Указатели на кнопках
Перезагрузка включает усовершенствование для role=»button» изменения курсора по умолчанию на pointer . Добавьте этот атрибут к элементам, чтобы указать, что элементы интерактивны. Эта роль не обязательна для элементов, которые претерпевают собственные изменения cursor .
Разные элементы
Адрес
Элемент обновляется , чтобы сбросить браузер по умолчанию font-style от italic до normal . line-height также теперь унаследован и margin-bottom: 1rem был добавлен. предназначены для представления контактной информации ближайшего предка (или всей работы). Сохраните форматирование, завершив строки символом
.Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Полное имя
first.last@example.comBlockquote (цитата)
По умолчанию margin для цитат установлено значение 1em 40px , поэтому мы сбрасываем это значение 0 0 1rem для большего соответствия другим элементам.
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число посуере эрат анте.
Кто-то известный в названии источника
Inline элементы
Элемент получает базовый стиль , чтобы сделать его выделиться среди абзаца текста.
Nulla attr vitae elit libero, pharetra augue.
Summary
По умолчанию cursor для сводки установлено значение text , поэтому мы сбрасываем это значение, pointer чтобы указать, что с элементом можно взаимодействовать, щелкнув по нему.
Некоторые детали
Подробнее о деталях.
Еще больше деталей
Вот еще более подробная информация о деталях.
Атрибут HTML5 [hidden]
HTML5 добавляет новый глобальный атрибут с именем [hidden] , который стилизован display: none по умолчанию. Заимствуя идею PureCSS , мы улучшаем это значение по умолчанию, [hidden] < display: none !important; >помогая предотвратить его display случайное изменение.
input type="text" hidden>несовместимость jQuery
[hidden] не совместим с jQuery $(. ).hide() и $(. ).show() методами. Поэтому в настоящее время мы не особо одобряем [hidden] другие методы управления display элементами.
Для того, чтобы просто переключить видимость элемента, то есть его display не изменяется , а элемент все еще может повлиять на поток документа, использовать в .invisible класс вместо этого.
Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.
В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.
Недорогие домены, регистрация + продление: nadomen.ru
Перевод документации: Голягин Алексей
Новая версия
Роль 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 для легкого интервала.
h1 heading
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
h2 heading
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
h3 heading
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
h4 heading
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
h5 heading
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
h6 heading
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Списки
-
,
, и у 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
- 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
Проще для укладки, четкая иерархия, и лучше, интервалы, списки описание обновлено margin ы. с сброс margin-left для 0 и добавить margin-bottom: .5rem . не жирным шрифтом.
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.
Предварительно отформатированный текст
элемент сброса, чтобы удалить его margin-top , а также rem единиц для margin-bottom .
.example-element
Таблицы
Таблицы корректируются в стиле , сворачивания границ, и обеспечить согласованность text-align на всей площади. Дополнительные изменения для границы, внутреннего отступа и более, перейдите в .table класс.
This is an example table, and this is its caption to describe the contents.
Таблица Заголовок Таблица Заголовок Таблица Заголовок Таблица Заголовок Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Формы
Различные элементы формы были обновлены для более простого выбора стилей. Вот некоторые из наиболее заметных изменений:
- ы не имеют границ, внутренний отступ, или отступ поэтому они могут быть легко использованы в качестве обертки для отдельного входа или группы входов.
- ы, как fieldsets, также был рестайлинг отображались в рубрике сортов.
- ы настроены на display: inline-block чтобы margin применяться.
- , , и являются в основном по нормализации, но Новая версия снимает их margin и наборы line-height: inherit , тоже.
- изменяются только изменение размера по вертикали, а по горизонтали изменения размера часто “ломает” страницу разметка.
Эти изменения, и многое другое, представлены ниже.
Разные элементы
Адрес
элемент обновлен, чтобы сбросить браузер по умолчанию 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 на цитаты-это 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.
В HTML5 [hidden] атрибут
HTML5 появилась новый глобальный атрибут с именем [hidden] , который выполнен как display: none по умолчанию. Позаимствовав идею из PureCSS, мы по умолчанию, сделав [hidden] < display: none !important; >чтобы предотвратить его display от попадания случайно переопределить. В то время как [hidden] не поддерживается в IE9-10, четкого указания в нашей CSS получает вокруг этой проблемы.
type="text" hidden>несовместимость с jQuery
[hidden] не совместим с jQuery по $(. ).hide() и $(. ).show() методы. Это может меняться в jQuery 3, но мы не держим наше дыхание. Поэтому мы не в настоящее время особенно поддерживаю [hidden] по сравнению с другими методами управления display элементов.
Для того, чтобы просто переключить видимость элемента, т. е. display не изменялся, а элемент еще может влиять на подачу документов, вместо этого используйте .invisible класс.
Нажмите кнопку задержка оптимизация для сенсорных
Традиционно в браузерах на устройствах с сенсорными экранами имеют задержку порядка 300мс между окончанием “активный” – тот момент, когда палец/стилус убирается с экрана – и click событие уволили. Эта задержка необходима для этих браузеров для корректной обработки “дважды нажмите, чтобы увеличить” жесты без преждевременного срабатывания действия или одной после первого “тук”, но это может сделать ваш сайт чувствовать себя немного вялым и неотзывчивым.
Большинство мобильных браузеров автоматически оптимизировать этот 300мс задержки для сайтов, которые используют width=device-width собственность как часть их aдаптивный Мета-тег (а также для сайтов, отключить масштабирование, например, с user-scalable=no , хотя это не рекомендуется для доступности и удобства в использовании). Самый большой исключений здесь ie11 в Windows Phone 8.1 и iOS Safari (и любой другой прошивкой объект webview-браузер) до iOS 9.3.
На сенсорных настоящее время ноутбук/настольных устройств, ie11 и Microsoft Edge только браузеры с “дважды нажмите, чтобы увеличить” функциональность. Как aдаптивный Мета-тег игнорируется на всех браузерах, используя width=device-width будет иметь никакого эффекта на 300мс задержки здесь.
Для решения этой проблемы в ie11 и Microsoft Edge на рабочем столе, а также ie11 в Windows Phone 8.1, Bootstrap явно использует touch-action:manipulation CSS собственность на всех интерактивных элементов (таких как кнопки и ссылки). Это свойство принципиально запрещает двойное нажатие функции на этих элементах, избавляя от 300мс задержки.
В случае старых версий iOS (до версии 9.3), рекомендуется использовать дополнительные скрипты, такие как Элементы fastclick, чтобы однозначно обойти задержку.
Для получения дополнительной информации, см. Совместимость таблица Для подавление 300мс задержки для взаимодействия с сенсорным экраном.
Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.
Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.
Сброс 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
Перезагрузка — это набор изменений CSS для конкретных элементов в одном файле, запускает Bootstrap, чтобы обеспечить элегантную, последовательную и простую основу для построения.
На этой странице
Подход
Вот наши рекомендации и причины выбора того, что следует переопределить в Перезагрузке:
- Обновите некоторые значения браузера по умолчанию, чтобы использовать rem вместо em для масштабируемого интервала между компонентами.
- Избегайте margin-top . Вертикальные поля могут исчезнуть, что приведет к неожиданным результатам. Что еще более важно, одно направление margin это более простая ментальная модель.
- Для упрощения масштабирования по размеру устройства в элементах блока следует использовать rem для margin .
- Сведите к минимуму объявления свойств, связанных с font , по возможности используйте inherit .
Параметры страницы по умолчанию
Элементы и обновлены, чтобы обеспечить лучшие значения по умолчанию для всей страницы. Более конкретно:
- box-sizing устанавливается глобально для каждого элемента, включая *::before и *::after , для border-box . Это гарантирует, что заявленная ширина элемента никогда не будет превышена из-за заполнения или границы.
- Базовый размер 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;Обратите внимание: поскольку стек шрифтов включает шрифты эмодзи, многие распространенные символы Unicode символов/дингбатов будут отображаться как разноцветные пиктограммы. Их внешний вид будет варьироваться в зависимости от стиля, используемого в собственном шрифте emoji браузера/платформы, и на них не будут влиять никакие color стили CSS.
font-family применяется к и автоматически наследуется глобально через Bootstrap. Чтобы переключить глобально font-family , обновите $font-family-base и перекомпилируйте Bootstrap.
Заголовки и абзацы
Все элементы заголовка — например, и
сбрасываются, чтобы удалить их margin-top . В заголовки добавлены margin-bottom: .5rem и параграфы margin-bottom: 1rem для удобного размещения.
Заголовок Пример h1. Заголовок Bootstrap h2. Заголовок Bootstrap h3. Заголовок Bootstrap h4. Заголовок Bootstrap h5. Заголовок Bootstrap h6. Заголовок Bootstrap Списки
-
,
- 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><раздел>code> должен быть заключен в оболочку как строчный.Блоки кода
Используйте для нескольких строк кода. Еще раз, не забудьте снять угловые скобки в коде для правильного рендеринга. Элемент сбрасывается, чтобы удалить его margin-top и использовать единицы rem для его margin-bottom .
Образец текста здесь.
И еще одна строка образца текста здесь.
pre>code><p>Образец текста здесь. </p> <p>И еще одна строка образца текста здесь. </p> code>pre>Переменные
Для обозначения переменных используйте тег .
var>yvar> = var>mvar>var>xvar> + var>bvar>Пользовательский ввод
Используйте для обозначения ввода, который обычно вводится с клавиатуры.
Чтобы сменить каталог, введите cd , а затем имя каталога.
Для редактирования настроек нажмите ctrl + ,Чтобы сменить каталог, введите kbd>cdkbd>, а затем имя каталога.br> Для редактирования настроек нажмите kbd>kbd>ctrlkbd> + kbd>,kbd>kbd>Пример вывода
Для указания образца вывода из программы используйте тег .
Этот текст следует рассматривать как образец вывода компьютерной программы.
samp>Этот текст следует рассматривать как образец вывода компьютерной программы.samp>Таблицы
Таблицы немного скорректированы для стиля , сворачивания границ и обеспечения единообразия text-align повсюду. Дополнительные изменения границ, отступов и прочего связаны с классом .table .
Это примерная таблица, и это ее заголовок для описания содержимого.
Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Формы
Различные элементы формы были перезагружены для упрощения базовых стилей. Вот некоторые из наиболее заметных изменений:
- не имеют границ, отступов или полей, поэтому их можно легко использовать в качестве оберток для отдельных полей ввода или групп полей ввода.
- как и наборы полей, также были переработаны, чтобы отображаться как своего рода заголовки.
- установлены в display: inline-block , чтобы разрешить применение margin .
- Элементы , , и в основном обрабатываются Normalize, но Reboot удаляет их margin и устанавливает line-height: inherit , тоже.
- изменены так, чтобы их размер можно было изменять только по вертикали, поскольку изменение размера по горизонтали часто “ломает” макет страницы.
- Элементы кнопки и имеют cursor: pointer когда :not(:disabled) .
Эти и другие изменения показаны ниже.
Поддержка ввода даты и цвета
Имейте в виду, что ввод даты не полностью поддерживается всеми браузерами, а именно Safari.
Указатели на кнопках
Reboot включает усовершенствование для role=»button» , позволяющее изменить курсор по умолчанию на pointer . Добавьте этот атрибут к элементам, чтобы указать, что элементы интерактивны. Эта роль не обязательна для элементов , у которых есть собственное изменение cursor .
Элемент не кнопка как кнопка
span role="button" tabindex="0">Элемент не кнопка как кнопкаspan>Разные элементы
Адрес
Элемент обновлен, чтобы сбросить стиль шрифта браузера по умолчанию с 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
[email protected]Цитата
По умолчанию margin для цитат составляет 1em 40px , поэтому мы сбрасываем ее на 0 0 1rem для большей согласованности с другими элементами.
A well-known quote, contained in a blockquote element.
Someone famous in Source Title
Строчные элементы
Элемент получает базовый стиль, чтобы выделить его среди текста абзаца.
Nulla attr vitae elit libero, a pharetra augue.
Резюме
По умолчанию cursor в сводке является text , поэтому мы сбрасываем его на pointer , чтобы указать, что с элементом можно взаимодействовать, щелкнув по нему.
Некоторые детали
Подробнее о деталях.
Еще больше деталей
Вот еще более подробная информация о деталях.
HTML5 атрибут [hidden]
HTML5 добавляет новый глобальный атрибут с именем [hidden] , который имеет стиль display: none по умолчанию. Заимствуя идею из PureCSS, мы улучшаем это значение по умолчанию, сделав [hidden] < display: none !important; >, чтобы предотвратить случайное переопределение его свойства display .
input type="text" hidden>Несовместимость jQuery
[hidden] несовместим с методами jQuery $(. ).hide() и $(. ).show() . Поэтому в настоящее время мы не особо поддерживаем [hidden] по сравнению с другими методами управления элементами display .
Чтобы просто переключить видимость элемента, то есть его display не изменяется, и элемент все еще может влиять на поток документа, используйте класс .invisible вместо этого.
- Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
- Код под лицензией MIT, документация CC BY 3.0.
- Текущая версия v5.0.2.
и удалены их margin-top и margin-bottom: 1rem . Вложенные списки не имеют margin-bottom . Мы также сбросили padding-left для элементов-
и
.
, и — margin-top удалены и a margin-bottom: 1rem . Вложенных списков нет margin-bottom . Мы также сброс padding-left-
и
элементов.