Сброс параметров
Часть работы Bootstrap заключается в том, чтобы создать изящную, последовательную и простую базовую основу для развития. Мы используем Reboot (Сброс параметров), коллекцию изменений CSS для отдельных элементов в одном файле, чтобы начать это.
Сброс параметров основывается на нормализации, предоставляя многие элементы HTML с несколько упрямым стилем, используя только селектор элементов. Дополнительное моделирование выполняется только с классами. Например, мы перезагружаем некоторые стили <table> для более простого базового уровня, а позже предоставляем .table, .table-bordered и многое другое.
Содержание
- Содержание
- Подход
- Настройки по умолчанию для страницы
- Собственный набор шрифтов
- Заголовки и абзацы
- Списки
- Предварительный форматированный текст
- Таблицы
- Формы
- Разные элементы
- Оптимизация задержки кликов для сенсорного экрана
Подход
Ниже приведены наши рекомендации и причины для выбора того, что нужно переопределить в Сбросе параметров:
- Обновите некоторые значения браузеров по умолчанию, чтобы использовать
rems вместоems для масштабируемого разнесения компонентов. - Избегайте
margin-top. Вертикальные поля могут разрушаться, приводя к неожиданным результатам. Более важно то, что одно направлениеmargin- более простая ментальная модель. - Для упрощения масштабирования по размерам устройств блочные элементы должны использовать
rems дляmargins. - Сведите объявления свойств, связанных с
fontдо минимума, по возможности используяinherit.
Настройки по умолчанию для страницы
Элементы <html> и <body> обновляются, чтобы обеспечить лучшие значения по умолчанию для всех страниц. Более конкретно:
- Размер
box-sizingустанавливается глобально для каждого элемента, включая*:beforeи*:after, доborder-box. Это гарантирует, что заявленная ширина элемента никогда не будет превышена из-за заполнения или границы. - Основной
font-size: 16pxобъявлен в<html>иfont-size: 1remна<body>для легкого адаптивного масштабирования типа с помощью медиа-запросов. <body>также устанавливает глобальноеfont-familyиline-height. Это наследуется позже некоторыми элементами формы, чтобы предотвратить несогласованность шрифта.- Для безопасности
<body>имеет объявленныйbackground-color, по умолчанию равный#fff.
Собственный набор шрифтов
Веб-шрифты по умолчанию (Helvetica Neue, Helvetica, и Arial) были сброшены в Bootstrap 4 и заменены «родным стеком шрифтов» для оптимального отображения текста на каждом устройстве и ОС. Подробнее о встроенных стеках шрифтов читайте в этой статье Smashing Magazine.
$font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android
system-ui,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif !default;Это font-family применяется к <body> и автоматически унаследовано глобально через Bootstrap. Чтобы переключить глобальное font-family, обновите $font-family-base и перекомпилируйте Bootstrap.
Заголовки и абзацы
Все элементы заголовка, например, <h1>- и <p> сбрасываются, чтобы удалить их 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.
Списки
У всех списков - <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
Для упрощения стиля, четкой иерархии и лучшего интервала в списках описаний есть обновленные margins. <dd>s сбрасывает margin-left до 0 и добавляет margin-bottom: .5rem. <dt>s выделены жирным шрифтом..
- 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 и использовать единицы rem для его margin-bottom.
.example-element {
margin-bottom: 1rem;
}
Таблицы
Таблицы слегка подгоняются под стиль <caption>s, сжимают границы и обеспечивают согласованное text-align по всему тексту. Дополнительные изменения для границ, отступов и т. д. поставляются с классом the .table.
| Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|
| Table cell | Table cell | Table cell | Table cell |
| Table cell | Table cell | Table cell | Table cell |
| Table cell | Table cell | Table cell | Table cell |
Формы
Для упрощения базовых стилей были перезагружены различные элементы формы. Вот некоторые из самых заметных изменений:
<fieldset>s не имеют границ, отступов или полей, поэтому их можно легко использовать в качестве оберток для отдельных входов или групп входов.<legend>s, подобно наборам полей, также были переустановлены, чтобы отображаться как заголовок сорта.<label>s устанавливаются дляdisplay: inline-blockдля примененияmargin.<input>s,<select>s,<textarea>s, и<button>s в основном адресуются Нормализацией, но Сброс параметров удаляет ихmarginand setsline-height: inherit, тоже.<textarea>s изменяются так, чтобы их можно было изменять только по вертикали, так как при горизонтальном изменении размеров часто "разрывается" макет страницы.
Эти изменения и многое другое продемонстрированы ниже.
Разные элементы
Адрес
Элемент <address> обновлен, чтобы сбросить font-style браузера по умолчанию от italic к normal. line-height также теперь унаследована, а margin-bottom: 1rem добавлена. <address>s предназначены для представления контактной информации для ближайшего предка (или всей работы). Сохраняйте форматирование, заканчивая строки с помощью <br>.
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.
Встроенные элементы
Элемент <abbr> получает базовый стиль, чтобы выделить его среди текста абзаца.
Атрибут HTML5 [hidden]
HTML5 добавляет новый глобальный атрибут с именем [hidden], который оформлен как display: none по умолчанию. Заимствуя идею от PureCSS, мы улучшаем это умолчание, делая [hidden] { display: none !important; } чтобы предотвратить display от случайного переопределения. Хотя [hidden] не поддерживается изначально IE10, явное объявление в нашем CSS обходит эту проблему.
<input type="text" hidden>Несовместимость jQuery
[hidden] несовместим с методами $(...).hide() и $(...).show() в jQuery. Это может измениться в jQuery 3, но мы не задерживаем дыхание. Поэтому мы в настоящее время особо не поддерживаем [hidden] над другими методами управления отображением display элементов.
Чтобы просто переключить видимость элемента, то есть чтобы display не изменялся, а элемент мог все еще влиять на поток документа, вместо этого используйте класс the .invisible.
Оптимизация задержки кликов для сенсорного экрана
Традиционно браузеры на сенсорных устройствах имеют задержку примерно в 300 мс между концом «касания» - моментом, когда палец / стилус снимается с экрана, - и вызывается click event (событие щелчка). Эта задержка необходима, чтобы эти браузеры правильно обрабатывали жесты с двойным касанием для увеличения, без преждевременного запуска действий или ссылок после первого «касания», но это может сделать ваш сайт слегка медлительным и не отвечающим на запросы.
Большинство мобильных браузеров автоматически оптимизируют эту задержку в 300 мс для сайтов, которые используют свойство width=device-width как часть своего responsive meta tag (а также для сайтов, которые отключают масштабирование, например, с user-scalable=no, хотя эта практика Категорически не рекомендуется для обеспечения доступности и удобства использования). Самые большие исключения в IE11 на Windows Phone 8.1, и iOS Safari (и любой другой браузер на основе iOS на основе Web-браузера) до iOS 9.3.
На ноутбуках / настольных устройствах с сенсорным экраном IE11 и Microsoft Edge в настоящее время являются единственными браузерами с функциональностью «двойное нажатие для увеличения». Поскольку responsive meta tag игнорируется всеми десктопными браузерами, использование width=device-width не повлияет на задержку в 300 мс.
Чтобы решить эту проблему в десктопных IE11 и Microsoft Edge, а также в IE11 на Windows Phone 8.1, Bootstrap явно использует свойство touch-action:manipulation CSS property для всех интерактивных элементов (таких как кнопки и ссылки). Это свойство существенно отключает функциональность двойного нажатия на эти элементы, устраняя задержку 300 мс.
В случае старых версий iOS (до 9.3) предлагаемый подход заключается в использовании дополнительных сценариев, таких как FastClick для явной работы с задержкой.
Для получения дополнительной информации смотрите таблицу совместимости для подавления задержки 300 мс для взаимодействия с сенсорным экраном..