Как ограничить действия стилей Bootstrap?
Всем привет.
Имеется сайт на wp. Шорткодом подключаю vue компонент на одну из страниц, в компоненте используется Bootstrap vue для стилей. Все бы ничего, но стили бутстрап перекрывают общие стили верстки футера сайта, где бутстрап вообще не используется, как можно ограничить действие бутстрап стилей только на сам компонент vue? ограничивал через Style scoped не работает
- Вопрос задан более трёх лет назад
- 157 просмотров
8 комментариев
Простой 8 комментариев
Отключение стилей bootstrap
Доброго утра! Возможно ли отключать стили Twitter Bootstrap через, например, какой-либо класс? Например, даем объекту
Отслеживать
задан 1 июл 2013 в 4:45
49 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
Зачем сначала добавлять стили bootstarp, а потом убирать?
25 мая 2017 в 14:39
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Нет, класса для reset(сброса), к сожалению не существует, так как это просто противоречит концепции CSS (о том что все свойства прописанные к объекту складываются и перекрываются при совпадении в зависимости от приоритета). Поэтому для решения вашей задачи нужно будет описывать стили тэга form в ручную, но обязательно либо в конце css файла bootstrp, либо в файле который подключается после него.
Отслеживать
ответ дан 1 июл 2013 в 4:49
Artur Panteleev Artur Panteleev
1,455 12 12 серебряных знаков 23 23 бронзовых знака
Спасибо, как сбрасывать я знаю, думал может это можно упростить.
1 июл 2013 в 4:54
- bootstrap
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как переопределить CSS по умолчанию в Bootstrap
Разработчики часто переопределяют или настраивают стили css Bootstrap по умолчанию при работе над проектами веб-разработки. Большинство разработчиков делают это, чтобы внести изменения в шрифты Bootstrap, границы, цвета или другие стили Bootstrap. Кроме того, стили CSS Bootstrap по умолчанию также настраиваются для расширения классов Bootstrap новыми пользовательскими классами и изменения макетов сетки Bootstrap.
Есть два простых и эффективных способа, с помощью которых вы можете настроить Bootstrap. Использование CSS — это самый простой и надежный способ сделать это, в то время как использование SASS для настройки Bootstrap на самом деле является продвинутым методом. Здесь вы можете найти пошаговое руководство по настройке Bootstrap с помощью обоих вышеперечисленных методов.
Использование переопределения CSS
Настройки CSS должны быть добавлены в отдельный пользовательский custom.css файл для обеспечения удобства сопровождения. Это гарантирует, что исходные файлы стиля Bootstrap останутся неизменными.Вы должны помнить, что порядок имеет значение в CSS. Таким образом, окончательное определение конкретного правила CSS будет переопределять ранее определенные правила, когда CSS-селекторы и свойства совпадают. Именно поэтому таков custom.css ссылка должна следовать после bootstrap.css
Пример
Компонент Bootstrap card по умолчанию отображается с границей. В этом примере мы удалим границу и включим box-shadow в компонент Bootstrap card с помощью custom.css Там будет код который перекроет значения.На следующем рисунке показана загрузочная карта по умолчанию.
Добавьте следующие строки кода в пользовательский custom.css файл
/* удаляет border для карты и добавляет свойство box-shadow */ .card
Вот изображение и результат данного способа кастомизации компонента bootstrap карты
Специфика CSS
Еще один важный момент, который следует иметь в виду при переопределении стилей bootstrap — это специфика CSS. Нам нужно будет использовать селекторы, которые столь же специфичны, как и те, что находятся в bootstrap.css . Использование селекторов, которые не являются конкретными, не даст вам желаемых результатов, так как компонент в конечном итоге будет принимать стили начальной загрузки по умолчанию, даже если мы написали пользовательские стили в custom.css Лучше всего использовать переопределения CSS для простых настроек Bootstrap, но мы рекомендуем вам попробовать метод SASS, когда речь заходит о создании обширных настроек.
Использование SASS
SASS-это наиболее рекомендуемый метод настройки Bootstrap. Это происходит главным образом потому, что язык SASS используется для написания всего исходного кода CSS Bootstrap 4.Структура проекта будет выглядеть примерно так.
Ваш проект/ ├── scss │ └── custom.scss └── node_modules/ └── bootstrap/ └── scss/ └── mixins/ └── utilities/ └── _functions.scss └── _mixins.scss └── _variables.scss └── (. другие bootstrap scss файлы) └── bootstrap-grid.scss └── bootstrap-reboot.scss └── bootstrap.scss
В исходном файле Bootstrap SASS вы можете найти bootstrap.scss файл, содержащий файлы Bootstrap SASS. Там же есть и variables.scss файл, содержащий все переменные SASS. Вы можете использовать свой custom.scss файл, чтобы переопределить эти переменные.
Пример
Первое, что делает большинство разработчиков, — это вносит коррективы в цветовую палитру при настройке стилей начальной загрузки по умолчанию. Вам нужно будет использовать $theme-colors SASS map, чтобы изменить цвета по умолчанию. Вот как вы можете изменить цвета в теме Bootstrap по цвета умолчанию.
По умолчанию цвета кнопок выглядят следующим образом
Теперь импортируйте переменные и функции bootstrap в пользовательский custom.scss . Теперь добавьте код для изменения цвета темы bootstrap по умолчанию, а затем добавьте bootstrap.scss . Весь код в custom.scss приведен ниже.
/* === Import Bootstrap functions and variables === */ @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; /*--------------------------------------------------------------------*/ /* Change theme-colors */ $theme-colors: ( primary: #234d7b, secondary: #3b3c3e, success: #1e6111, info: #64c3d2, warning: #f5e74a, danger: #820410 ); /*--------------------------------------------------------------------*/ /* === Bootstrap Main SCSS === */ @import "bootstrap/scss/bootstrap"; /*--------------------------------------------------------------------*/>
Кнопки по умолчанию будет выглядеть следующим образом.
Таким образом мы переопределили цвета по умолчанию. Этот способ также учтет новые цвета при наведении когда задается процент затемнения, который также можно переопределить. Но об этом уже в других статьях
Также у начинающего может возникнуть вопрос. А что со всем этим делать, после того как изменю sass файлы, где взять в итоге css?Если вы умеете работать с командной строкой, то можно посмотреть это видео:
Если с командной строкой есть сложности, то можно посмотреть видео с другим способом как собрать css
Каталог документации:
San4 ответил на статью
Всем привет. А почему нет новых тем? неужели bootstrap на самом деле неактуален? Ради интереса, зашел на npmjs.com — там за последнюю неделю, 5 589 822 скачиваний, просто вдумайтесь — почти 6 млн. в НЕДЕЛЮ. и это только с одного сервиса, а еще ведь устанавливают локально, просто файлами. да и CDN еще.Вобщем что хочу сказать, статье более 2х лет. Интересно мнение как самого автора, так и читателей, почему использовать bootstrap считается неактуальным? Какие причины? Как по мне, это крутая технология. которая актуально по всему миру, разобраться в которой требует много времени, но по итогу думаю, те знания. которые получишь — точно пригодяться. Некоторые используют только сетку, но думаю просто не хотят морочиться и углубиться в технологию с головой. Сколько у вас уходит на адаптацию под мобилки и прочих девайсов, каждого сайта. А сколько потраченного времени в сумме на адаптацию в месяц или год. А тут все из коробки. Кто нибудь может объяснить чем адаптив от Bootstrap хуже «самописного»? Конечно. при верстке «боевого проекта» на Bootstrap сложно добиться идеального совпадения, но опять же думаю, это просто от неполного знания технологий. все что видел в (ru)нете, это поверхностные описания которые мягко говоря ни о чем. Как просто установить, как стартануть, как сделать адаптивное меню, как переопределить цвет. На этом все… более никто ничего не пишет. В общем, пишут то, что сами разобрали за пару часов, самые азы. Если кто то знает «годный современный ресурс» киньте ссылку пожалуйста, мне очень интересно. В заключеннии скажу. кому так же как и мне интересна данная тема в 2023 году, пишите в лс.У меня много вопросов, по Bootstrap, на которые пока не знаю ответов, и пока это мое хобби, которое хочу со временем успешно использовать в верстке.
| № | Вопрос | Пользователи |
|---|---|---|
| #19 | Несколько загрузочных файлов, переопределяющих друг друга |
- Начало работы/Настройка темы (1)
- Создать вопрос
| Тема | Посты | Автор |
|---|---|---|
| Компиляция и отслеживание Sass | 2 Поста |
- Начало работы/Настройка темы (1)
- Создать обсуждение
43% пользователей на сайте используют блокировщик рекламы
Помогите проекту стать лучше Отключите Adblock!
Реклама будет только в этом месте
Дайте возможность сайту получать доход или поддержите нас ��
Переопределение стилей Bootstrap CSS
В работе с веб-разработкой часто возникают ситуации, когда необходимо изменить стили, предоставляемые фреймворком Bootstrap. Допустим, есть стандартные стили для определенного элемента или класса, которые необходимо изменить или даже полностью удалить. Например, может потребоваться удалить все стили для элемента legend .
legend
Однако вместо того, чтобы удалять эти стили из основного файла bootstrap.css , рекомендуется создать отдельный файл custom.css и внести в него все изменения. Это позволяет избежать потери изменений при обновлении версии Bootstrap.
Переопределение стилей
Для переопределения стилей Bootstrap можно использовать ключевое слово !important . Оно указывает браузеру, что это свойство должно иметь наивысший приоритет, и оно переопределяет любые другие объявления. Например, чтобы удалить все стили для элемента legend и использовать значения стилей родительского элемента, можно написать следующее:
legend
Однако следует использовать !important с осторожностью, так как это может привести к сложностям в обслуживании кода в будущем.
В некоторых случаях можно использовать более специфичные селекторы для переопределения стилей. Более специфичные селекторы имеют приоритет над менее специфичными. Например, можно использовать селектор класса вместо селектора элемента:
.container legend
В этом примере стили будут применяться только к элементам legend , которые находятся внутри элементов с классом container .
Заключение
Переопределение стилей Bootstrap – это распространенная задача в веб-разработке. Лучше всего это делать, создавая отдельный файл стилей, и использовать !important или более специфичные селекторы для переопределения стилей. Это поможет сохранить изменения при обновлениях и упростит обслуживание кода в будущем.