Bootstrap css меняет стиль

Содержание

Reboot
Подход
Переменные CSS
Параметры страницы по умолчанию
Стек собственных шрифтов
Переменные CSS
Заголовки и абзацы
Списки
Строчный код
Блоки кода
Переменные
Пользовательский ввод
Пример вывода
Таблицы
Формы
Указатели на кнопках
Разные элементы
Адрес
Цитата
Строчные элементы
Резюме
HTML5 атрибут [hidden]

Reboot

Перезагрузка — это набор изменений CSS для конкретных элементов в одном файле, запускает Bootstrap, чтобы обеспечить элегантную, последовательную и простую основу для построения.

Подход

Вот наши рекомендации и причины выбора того, что следует переопределить в Перезагрузке:

Обновите некоторые значения браузера по умолчанию, чтобы использовать rem вместо em для масштабируемого интервала между компонентами.
Избегайте margin-top . Вертикальные поля могут исчезнуть, что приведет к неожиданным результатам. Что еще более важно, одно направление margin это более простая ментальная модель.
Для упрощения масштабирования по размеру устройства в элементах блока следует использовать rem для margin .
Сведите к минимуму объявления свойств, связанных с font , по возможности используйте inherit .

Переменные CSS

В v5.1.1 мы стандартизировали наш требуемый @import для всех наших пакетов CSS (включая bootstrap.css , bootstrap-reboot.css и bootstrap-grid.css , чтобы включить _root.scss . Это добавляет переменные CSS уровня :root ко всем пакетам, независимо от того, сколько из них используется в этом пакете. В конечном итоге Bootstrap 5 будет продолжать видеть больше переменных CSS, добавляемых с течением времени.

Параметры страницы по умолчанию

Элементы и обновлены, чтобы обеспечить лучшие значения по умолчанию для всей страницы. Более конкретно:

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.

Переменные CSS

По мере того, как Bootstrap 5 продолжает развиваться, все больше и больше стилей будет создаваться с использованием переменных CSS в качестве средства для обеспечения большей настройки в реальном времени без необходимости всегда перекомпилируйте Sass. Наш подход состоит в том, чтобы взять исходные переменные Sass и преобразовать их в переменные CSS. Таким образом, даже если вы не используете переменные CSS, у вас по-прежнему есть все возможности Sass. Это все еще выполняется, и для полной реализации потребуется время.

Например, рассмотрите эти переменные CSS :root для общих стилей :

 @if $font-size-root != null  --#root-font-size: #$font-size-root>; > --#body-font-family: #$font-family-base>; --#body-font-size: #$font-size-base>; --#body-font-weight: #$font-weight-base>; --#body-line-height: #$line-height-base>; --#body-color: #$body-color>; @if $body-text-align != null  --#body-text-align: #$body-text-align>; > --#body-bg: #$body-bg>;

На практике эти переменные затем применяются в Reboot следующим образом:

body  margin: 0; // 1 font-family: var(--#$variable-prefix>body-font-family); @include font-size(var(--#$variable-prefix>body-font-size)); font-weight: var(--#$variable-prefix>body-font-weight); line-height: var(--#$variable-prefix>body-line-height); color: var(--#$variable-prefix>body-color); text-align: var(--#$variable-prefix>body-text-align); background-color: var(--#$variable-prefix>body-bg); // 2 -webkit-text-size-adjust: 100%; // 3 -webkit-tap-highlight-color: rgba($black, 0); // 4 >

Что позволяет вам делать настройки в реальном времени, как вам нравится:

body style="--bs-body-color: #333;"> body>

Заголовки и абзацы

Все элементы заголовка — например, и

сбрасываются, чтобы удалить их 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
first.last@example.com

Цитата

По умолчанию margin для цитат составляет 1em 40px , поэтому мы сбрасываем ее на 0 0 1rem для большей согласованности с другими элементами.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

Строчные элементы

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

Резюме

По умолчанию cursor в сводке является text , поэтому мы сбрасываем его на pointer , чтобы указать, что с элементом можно взаимодействовать, щелкнув по нему.

Вот еще более подробная информация о деталях.

HTML5 атрибут [hidden]

HTML5 добавляет новый глобальный атрибут с именем [hidden] , который имеет стиль display: none по умолчанию. Заимствуя идею из PureCSS, мы улучшаем это значение по умолчанию, сделав [hidden] < display: none !important; >, чтобы предотвратить случайное переопределение его свойства display .

Несовместимость jQuery

[hidden] несовместим с методами jQuery $(. ).hide() и $(. ).show() . Поэтому в настоящее время мы не особо поддерживаем [hidden] по сравнению с другими методами управления элементами display .

Чтобы просто переключить видимость элемента, то есть его display не изменяется, и элемент все еще может влиять на поток документа, используйте класс .invisible вместо этого.

Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
Код под лицензией MIT, документация CC BY 3.0.
Текущая версия v5.1.3.

Источник