Контент

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

Сброс параметров

Часть работы 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
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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.

This is an example table, and this is its caption to describe the contents.
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 в основном адресуются Нормализацией, но Сброс параметров удаляет их margin and sets line-height: inherit, тоже.
  • <textarea>s изменяются так, чтобы их можно было изменять только по вертикали, так как при горизонтальном изменении размеров часто "разрывается" макет страницы.

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

Example legend

100

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

Адрес

Элемент <address> обновлен, чтобы сбросить font-style браузера по умолчанию от italic к normal. line-height также теперь унаследована, а margin-bottom: 1rem добавлена. <address>s предназначены для представления контактной информации для ближайшего предка (или всей работы). Сохраняйте форматирование, заканчивая строки с помощью <br>.

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

Встроенные элементы

Элемент <abbr> получает базовый стиль, чтобы выделить его среди текста абзаца.

Nulla attr vitae elit libero, a pharetra augue.

Атрибут 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 мс для взаимодействия с сенсорным экраном..

Комментарии

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Поддержать проект

x