Стили для отображения Контента с некоторыми из наиболее часто используемых HTML-элементов, включая нормализацию, типографика, Изображения, таблицы и более.
Роль Bootstrap работы - обеспечить элегантный, последовательные и простую базу для дальнейшего строительства. Мы используем Новую версию, набор отдельных элементов, CSS изменения в один файл, чтобы сделать кикстарт.
Новая версия основывается на нормализации, предоставляя множество элементов HTML с несколько самоуверенных типов с использованием только элементов селекторов. Дополнительный стайлинг делается только с классами. Например, мы перезагрузили некоторые <table> стили для базы и предоставили .table, .table-bordered, и многое другое.
Вот наши рекомендации и причины выбора того, что для переопределения в Новой версии:
rem-ы вместо em-ов для масштабируемых расстояний между компонентами.margin-top. Вертикальное отступы могут свернуться, приводя к непредсказуемым результатам. Более важно то, одном направлении margin более простой ментальной модели.remдля marginов.font-свойства, относящиеся к минимуму, используя inherit мере возможности.<html> и <body> элементы обновляются, чтобы обеспечить лучшую страницу по умолчанию. Более конкретно:
box-sizing глобально установливает на каждый элемент, в том числе *:before и *:after, до border-box. Это гарантирует, что заявленная Ширина элемента не превышал из-за внутреннего отступа или границы.font-size: 16px объявляется на <html> и font-size: 1rem на <body> легкий aдаптивный Тип масштабирования через медиа запросы.<body> также устанавливается глобальный font-family и line-height. Это унаследованный позднее некоторые элементы формы для предотвращения несоответствия шрифтов.<body> ближайшие 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 наносится <body> и автоматически наследуется глобально во Bootstrap. Для переключения глобального font-family обновление $font-family-base и перекомпилировать Bootstrap.
Всего в рубрике элементы—например, <h1>—и <p> будут сброшены, чтобы их margin-top удалены. Заголовки margin-bottom: .5rem добавлены и пункты margin-bottom: 1rem для легкого интервала.
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
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.
Проще для укладки, четкая иерархия, и лучше, интервалы, списки описание обновлено marginы. <dd>с сброс margin-left для 0 и добавить margin-bottom: .5rem. <dt> не жирным шрифтом.
<pre> элемент сброса, чтобы удалить его margin-top, а также rem единиц для margin-bottom.
.example-element {
margin-bottom: 1rem;
}
Таблицы корректируются в стиле <caption>, сворачивания границ, и обеспечить согласованность text-align на всей площади. Дополнительные изменения для границы, внутреннего отступа и более, перейдите в .table класс.
| Таблица Заголовок | Таблица Заголовок | Таблица Заголовок | Таблица Заголовок |
|---|---|---|---|
| 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>ы не имеют границ, внутренний отступ, или отступ поэтому они могут быть легко использованы в качестве обертки для отдельного входа или группы входов.<legend>ы, как fieldsets, также был рестайлинг отображались в рубрике сортов.<label>ы настроены на display: inline-block чтобы margin применяться.<input>, <select>, <textarea> и <button> являются в основном по нормализации, но Новая версия снимает их margin и наборы line-height: inherit, тоже.<textarea> изменяются только изменение размера по вертикали, а по горизонтали изменения размера часто “ломает” страницу разметка.Эти изменения, и многое другое, представлены ниже.
<address> элемент обновлен, чтобы сбросить браузер по умолчанию font-style из italic для normal. line-height также наследуется, и margin-bottom: 1rem была добавлена. <address> являются представления контактную информацию ближайшего предка (или всей работы). Сохранить форматирование, в конце строк с <br>.
По умолчанию margin на цитаты-это 1em 40px, Так мы сбрасываем, что 0 0 1rem Для чего-то более совместимым с другими элементами.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<abbr> элемент получает основной стиль, чтобы выделить его среди текста.
[hidden] атрибутHTML5 появилась новый глобальный атрибут с именем [hidden], который выполнен как display: none по умолчанию. Позаимствовав идею из PureCSS, мы по умолчанию, сделав [hidden] { display: none !important; } чтобы предотвратить его display от попадания случайно переопределить. В то время как [hidden] не поддерживается в IE9-10, четкого указания в нашей CSS получает вокруг этой проблемы.
<input type="text" hidden>[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мс задержки для взаимодействия с сенсорным экраном.