Как во Vue переопределять стили Bootstrap?
, то стили не применяются, если я прописываю этот класс в кнопке в template. Срабатывает только с !important, но это не вариант. Есть вариант как это переопределять?
Отслеживать
задан 26 июл 2021 в 20:16
Black Fire Black Fire
479 1 1 золотой знак 3 3 серебряных знака 17 17 бронзовых знаков
Можно попробовать использовать атрибут scoped у тега — это включит автодобавление data-атрибута со случайным значением, и оно несколько повысит специфичность селекторов (которую конечно надо повышать и самому, по ситуации) //оффтоп: вообще, я не рекомендую стили в компонентах (чисто по опыту, отдельный файл стилей в поддержке значительно проще когда приложение разрастается)
Настройка
Узнайте, как создавать темы, настраивать и расширять Bootstrap с помощью Sass, множества глобальных опций, обширной цветовой системы и многого другого.
Обзор
Есть несколько способов настроить Bootstrap. Ваш лучший путь может зависеть от Вашего проекта, сложности Ваших инструментов сборки, версии Bootstrap, которую Вы используете, поддержки браузера и многого другого.
Два наших предпочтительных метода:
- Использование Bootstrap через менеджер пакетов, чтобы Вы могли использовать и расширять наши исходные файлы.
- Использование скомпилированных файлов дистрибутива Bootstrap или jsDelivr, чтобы Вы могли добавлять или переопределять стили Bootstrap.
Хотя мы не можем здесь подробно описывать, как использовать каждый менеджер пакетов, мы можем дать некоторые рекомендации по использованию Bootstrap с Вашим собственным компилятором Sass.
Для тех, кто хочет использовать файлы распространения, просмотрите страницу начала работы, чтобы узнать, как включить эти файлы и пример HTML-страницы. Оттуда обратитесь к документации по макету, компонентам и поведению, которые Вы хотите использовать.
По мере знакомства с Bootstrap продолжайте изучать этот раздел, чтобы получить более подробную информацию о том, как использовать наши глобальные параметры, использование и изменение нашей цветовой системы, как мы создаем наши компоненты, как использовать наш растущий список настраиваемых свойств CSS и как для оптимизации Вашего кода при сборке с помощью Bootstrap.
CSP и встроенные SVG
Некоторые компоненты Bootstrap включают встроенные SVG-файлы в наш CSS, чтобы согласованно и легко стилизовать компоненты в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP , мы задокументировали все экземпляры наших встроенных SVG (все из которых применяются через background-image ), поэтому Вы можете более тщательно изучить свои варианты.
- Accordion
- Close button (используется в уведомлениях и модальных окнах)
- Form checkboxes and radio buttons
- Form switches
- Form validation icons
- Select menus
- Carousel controls
- Navbar toggle buttons
На основе обсуждения сообщества, некоторые варианты решения этой проблемы в вашей собственной кодовой базе включают замену URL-адресов локально размещенными ресурсами, удаление изображений и использование встроенных изображений (невозможно во всех компонентах) и изменение вашего CSP. Наша рекомендация — внимательно изучить свои собственные политики безопасности и при необходимости выбрать лучший путь для дальнейшего развития.
- Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
- Код под лицензией MIT, документация CC BY 3.0.
- Текущая версия v5.0.2.
Как переопределить родные стили bootstrap через свой класс?
Находил подобные ответы в интернете однако доконца не могу понять как переопределить все элементы в структуре через свой класс.
Не используя свойство !important и не модифицировать сам файл стилей бутстрапа. Удаляя свой класс .stats_table все изменения должны вернуться к стандартным, прописанные самим фреймворком
С подобной проблемой встречаюсь повсеместно в бутстрапе, не только в таблицах.
Объясню на примере
Есть стандартная таблица bootstrap я хочу через свой класс .stats_table управлять отступами у элементов таблицы (tr td).
1 500 * < рублей вложений 90 000 постриженных волос 7 200 секунд времени мастера 500 000 * лайков и комплиментов
.stats_table < display:flex; flex-grow: 1; padding:0; >.stats_table tbody < display:flex; flex-direction: row; flex-wrap: wrap; >.stats_table tr < width:50%; display:block; padding-left:37px; padding-top:32px; padding-bottom:31px; border: 3px solid red; >.stats_table td
Описание
Мой класс .stats_table полностью переопределил tr — все хорошо
Мой класс .stats_table никак (если только через !important) непереопределяет td-ячейки.
Из панели разработчика вижу следующее;
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th < padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; >/*------- Перечеркнуто все что касается падингов и бордера*/ .stats_table td
- Вопрос задан более трёх лет назад
- 3566 просмотров
1 комментарий
Простой 1 комментарий
Как переопределять системные стили Bootstrap?
Нужна помощь. Возьмем частный случай. Bootstrap v4.0.0-beta.
Подключил я значит navbar:
В стилях по-умолчанию у класса .navbar идут отступы padding: .5rem 1rem; которые находятся в _navbar.scss:18 .
Собственно вопрос: как мне добавить / изменить / удалить эти отступы, не используя в созданном мною style.css правило !important? Можно как для чайника объяснить, так как в Saas и подобных вещах абсолютно не силен )
P.S. Не скачивать же исходники CSS и в них делать правки, как-то это не комильфо же совсем.
- Вопрос задан более трёх лет назад
- 13275 просмотров
Комментировать
Решения вопроса 1
finishhim.ru
Файлы бутстрапа не трогать.
Переопределить одиним из 2 методов:
1) Подключить свой css ниже бутстрапа, в нём написать например
.navbar
Это переопределит отступы во всём бутстрапе
2) Добавить свой класс в конце:
Дальше делаете то же самое, в свой css ниже бутстрапа добавляете:
.myclass
Это переопределит родные бутстраповские стили стили только в одном месте.
Ответ написан более трёх лет назад
Нравится 4 3 комментария
Илья Савельев @floydman-89 Автор вопроса
Чувак, благодаря тебе я понял, что дико тупил и файл со своими стилями разместил выше файлов бутстрэпа
Илья Савельев: это значит бустрап потом опять переопределил на дефолт у вас все классы для которых имена, id совпадали.
Метод хорош для простых ситуаций. Но в ситуациях посложнее, вероятно, всё-таки придется править и пересобирать SASS-исходники.
Пример из жизни: я хочу изменить цветовую гамму бутстрапа — ну вот эти все кнопочки и всё такое. Переопределить все цвета поверх — задолбаешься! Дело в том, что самих-то цветов там хоть и немного, но используются они в нескольких сотнях мест. И это не гипербола, реально несколько сотен. Разные элементы, да помножить на типы (primary, secondary, danger. ), да помножить на кучу состояний (hover, active, disabled, readonly. ) — это чокнуться можно.
Ответы на вопрос 4
ну, как бы, никто ж не запрещал добавить элементу класс px-0, вообще-то
так он даст нулевой паддинг по иксу вполне себе стандарным способом.
но если менять глобально, то у меня например есть файлик bs4custom.css, где переопределяются дефолтные стили, которые есть в БС4, и файл custom.css для остальных своих стилей
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Junior PHP
Можете на самой странице, где появляется эта навигация, написать своё CSS правило. Думаю переопределяться свойства.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Начинающий
Ай, не будет колдунства, у тебя не православный бутстрап, а шайтановский 4й. Не получится его собрать из того что было на сайте.
Лезь в sass файл и подставляй свое значение, sass отличается только тем что там нет скобочек и точек с запятой.
Получается что как раз таки скачивать исходники только не css, а что там у них scss? %)
Ответ написан более трёх лет назад
Илья Савельев @floydman-89 Автор вопроса
а я тебе уже написал вот такой ответ:
МАХ(г)ИЯ — МАХ(г)ИЕЙ, но 404 Not Found никто не отменял.
Но у меня было в качестве магии Forbidden 🙁 от местного редактора )
То есть мне нужно скачивать Source files и через него колдовать?