Как переопределить родные стили 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
- Вопрос задан более трёх лет назад
- 3588 просмотров
1 комментарий
Простой 1 комментарий
Как переопределять системные стили Bootstrap?
Нужна помощь. Возьмем частный случай. Bootstrap v4.0.0-beta.
Подключил я значит navbar:
В стилях по-умолчанию у класса .navbar идут отступы padding: .5rem 1rem; которые находятся в _navbar.scss:18 .
Собственно вопрос: как мне добавить / изменить / удалить эти отступы, не используя в созданном мною style.css правило !important? Можно как для чайника объяснить, так как в Saas и подобных вещах абсолютно не силен )
P.S. Не скачивать же исходники CSS и в них делать правки, как-то это не комильфо же совсем.
- Вопрос задан более трёх лет назад
- 13457 просмотров
Комментировать
Решения вопроса 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 и через него колдовать?
Theming Bootstrap
Настройте Bootstrap 4 с помощью наших новых встроенных переменных Sass по глобальным настройкам стиля для простых тем и изменений компонентов.
Введение
В BS3 оформление тем в большой степени управлялось переменными LESS, обычным CSS и отдельными файлами тем CSS, включенными в папку dist . Приложив некоторые усилия, можно было полностью изменить стиль BS3 без изменения исходных файлов. В BS4 это делается немного по-другому.
В BS4 настройка тем происходит через переменные Sass, карты Sass и обычное CSS. Тут больше нет специальных CSS-файлов для тем; вместо этого можно включать встроенные темы для добавления градиентов, теней и др.
Sass
Использование наших исходников Sass даст вам инструменты переменных, карт, миксинов и прочего.
Структура файлов
По возможности старайтесь избегать изменения «коренных» файлов BS4. Для Sass это значит, что вам следует создать собственную таблицу стилей, импортировать в нее Bootstrap, и уже там изменять и дополнять его стили.
your-project/ ├── scss │ └── custom.scss └── node_modules/ └── bootstrap ├── js └── scssЕсли вы загрузили исходные файлы и не используете диспетчер пакетов, вам нужно вручную настроить что-то похожее на эту структуру, сохраняя исходные файлы Bootstrap отдельно от ваших собственных.
your-project/ ├── scss │ └── custom.scss └── bootstrap/ ├── js └── scssИмпорт
В своем custom.scss вы импортируете исходники Sass. Тут есть две опции: включить весь Bootstrap или части, вам нужные. Мы советуем делать второе, хотя тут надо знать, что в наших компонентах есть некоторые зависимости и требования. Вам также понадобится включить некоторые скрипты JS для наших плагинов.
// Custom.scss // Option A: Подключите весь Bootstrap @import "node_modules/bootstrap/scss/bootstrap";// Custom.scss // Option B: Подключите Bootstrap частями // Требуемое @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; // Опциональное @import "node_modules/bootstrap/scss/reboot"; @import "node_modules/bootstrap/scss/type"; @import "node_modules/bootstrap/scss/images"; @import "node_modules/bootstrap/scss/code"; @import "node_modules/bootstrap/scss/grid";Так вы можете изменять любую переменную и карту Sass в вашем файле custom.scss . Также вы можете добавлять части Bootstrap в секции // Опциональное .
Значения переменных по умолчанию
Каждая переменная Sass в Bootstrap имеет флаг (т.е. предварительно заданную последовательность битов, содержащую значение в двоичном исчислении) !default , что позволяет переопределить значение этой переменной Sass, заданное по умолчанию, в ваших собственных файлах Sass без необходимости копаться в исходниках Bootstrap. «Копипастируйте» переменные как вам необходимо, изменяйте значения, удаляйте !default flag. Если переменная уже была назначена, ее значение не будет переназначено значениями Bootstrap по умолчанию.
Переназначение переменных (когда переменные потом можно переназначать в файлах, или из командной строки, или просто переназначение — непонятно) внутри одного файла Sass может идти в коде до или после переменных по умолчанию. Однако, переназначая переменные в файлах Sass, ваши новые значения должны быть назначены до того как вы импортируете файлы Sass Bootstrap.
Вот пример кода, изменяющего background-color и color для , при импорте и компиляции Bootstrap через npm:
// Ваши переназначения $body-bg: #000; $body-color: #111; // BS4 и его переменные по умолчанию @import "node_modules/bootstrap/scss/bootstrap";Повторяйте это сколько надо для любой переменной в Bootstrap, включая глобальные настройки ниже.
Карты и циклы
Bootstrap 4 включает «карты Sass» – массивы парных значений, которые предназначены для облегчения генерации родственных «семейств» CSS. Мы пользуемся картами Sass при работе с цветами, брейкпойнтами сетки и т.д. Как и переменные Sass, все карты Sass включают « !default flag» и могут быть переназначены и расширены.
Некоторые из карт Sass «слиты» с пустыми картами. Это сделано для возможности легкого расширения данной карты, но слегка усложняет удаление элементов из данной карты.
Изменение карты
К примеру, для изменения существующего в нашей карте $theme-colors цвета, добавьте следующий код в ваш стандартный Sass файл:
$theme-colors: ( "primary": #0074d9, "danger": #ff4136 );Добавление в карту
Чтобы добавить новый цвет в $theme-colors , добавьте новый ключ и значение:
$theme-colors: ( "custom-color": #900 );Удаление из карты
Для удаления цветов из карты $theme-colors или любой другой — map-remove :
$theme-colors: map-remove($theme-colors, "success", "info", "danger");Требуемые ключи
В BS4 наличествуют некие уникальные ключи внутри карт Sass, т.к. мы сами создали и расширяем их. По мере вашей настройки включенных карт вы можете обнаружить ошибки там, где используете специальный ключ карты Sass.
Например, мы используем ключи primary , success и danger из карты $theme-colors для ссылок, кнопок и состояний форм. Изменение значений этих ключей не должно в теории вызвать проблем, но их удаление может вызвать проблемы при компиляции Sass. В таких случаях вам потребуется модифицировать код Sass, который использует эти значения.
Отдельные переменные для цветов — это хорошо, но, когда их становится большое количество, работа с цветами может стать проблематичной. Имея map только для цветов, можно разделить ее на sub-maps для различных тем.
Map идеально подходит для конфигурации проекта. Идея проста: вы связываете значения с ключами, и потом имеете доступ к ним в любой точке проекта с помощью map-get($map, $key).
Функции
Bootstrap использует несколько функций Sass, но лишь эти могут использоваться в изменении тем. Мы включили эти 3 функции для получения значения из карт цветов:
@function color($key: "blue") @return map-get($colors, $key); > @function theme-color($key: "primary") @return map-get($theme-colors, $key); > @function gray($key: "100") @return map-get($grays, $key); >Эти функции позволяют выбрать один цвет из карты Sass, как если бы вы использовали переменную цвета в BS3.
.custom-element color: gray("100"); background-color: theme-color("dark"); >Также есть функция для получения уровня цвета из карты $theme-colors . Отрицательные значения уровня осветлит цвет, и наоборот – больше значение – темнее цвет.
@function theme-color-level($color-name: "primary", $level: 0) $color: theme-color($color-name); $color-base: if($level > 0, #000, #fff); $level: abs($level); @return mix($color-base, $color, $level * $theme-color-interval); >На практике лучше вызвать функцию и передать ей два значения: название цвета из $theme-colors (т.е. primary или danger) и числовое значение уровня.
.custom-element color: theme-color-level(primary, -10); >Для создания функций уровней для дополнительных карт Sass или даже общую карту, если вы хотите большей подробности, дополнительные функции можно добавить в ваш Sass.
Контраст цветов
Мы добавили одну дополнительную функцию в Bootstrap – функцию контраста цвета, color-yiq . Она использует YIQ color space для автоматического возврата цвета светлого ( #fff ) или темного ( #111 ) контраста, базируясь на определенном базовом цвете. Эта функция особенно полезна для миксинов или циклов, когда вы создаете множественные классы.
Например, генерация образцов цветов из нашей карты $theme-colors :
@each $color, $value in $theme-colors .swatch-#$color> color: color-yiq($value); > >Она также может применяться для единовременных нужд при работе с контрастами:
.custom-element color: color-yiq(#000); // returns `color: #fff` >Вы также можете задать базовый цвет с помощью наших функций карт цвета:
.custom-element color: color-yiq(theme-color("dark")); // returns `color: #fff` >Параметры Sass
Настраивайте BS4 с помощью наших файлов, содержащих встроенные переменные, и с легкостью «преодолевайте» глобальные предпочтения CSS с помощью новых переменных Sass $enable-* . Переопределите переменную и перекомпилируйте с npm run test .
Вы можете найти и настроить эти переменные ключевых глобальных настроек в нашем файле _variables.scss .
| Переменная | Значения | Описание |
|---|---|---|
| $spacer | 1rem (default), или любое значение > 0 | Определяет значение пустого пространства по вертикали или горизонтали, для создания наших классов спейсинга. |
| $enable-rounded | true (default) or false | Задействует предопределенные стили border-radius разным компонентам. |
| $enable-shadows | true or false (default) | Задействует предопределенные стили box-shadow разным компонентам. |
| $enable-gradients | true or false (default) | Задействует предопределенные стили background-image разным компонентам. |
| $enable-transitions | true (default) or false | Задействует предопределенные стили transition разным компонентам. |
| $enable-hover-media-query | true or false (default) | . |
| $enable-grid-classes | true (default) or false | Задействует генерацию классов CSS для «сеточной» системы (т.е. .container , .row , .col-md-1 , т.д.). |
| $enable-caret | true (default) or false | Enables pseudo element caret on .dropdown-toggle . |
| $enable-print-styles | true (default) or false | Задействует стили для оптимизации печати. |
Цвет
Многие из компонентов и утилит Bootstrap созданы с помощью серий цветов, заданных в карте Sass. Эта карта может быть использована в цикле для быстрой генерации серий блоков кода CSS.
Все цвета
Все цвета, существующие в BS4, доступны в виде переменных и карт Sass в нашем файле scss/_variables.scss . В последующих малых релизах BS4 добавим дополнительные цветовые возможности, подобных серой палитре, которая уже добавлена.
Переопределение стилей Bootstrap CSS
В работе с веб-разработкой часто возникают ситуации, когда необходимо изменить стили, предоставляемые фреймворком Bootstrap. Допустим, есть стандартные стили для определенного элемента или класса, которые необходимо изменить или даже полностью удалить. Например, может потребоваться удалить все стили для элемента legend .
legend
Однако вместо того, чтобы удалять эти стили из основного файла bootstrap.css , рекомендуется создать отдельный файл custom.css и внести в него все изменения. Это позволяет избежать потери изменений при обновлении версии Bootstrap.
Переопределение стилей
Для переопределения стилей Bootstrap можно использовать ключевое слово !important . Оно указывает браузеру, что это свойство должно иметь наивысший приоритет, и оно переопределяет любые другие объявления. Например, чтобы удалить все стили для элемента legend и использовать значения стилей родительского элемента, можно написать следующее:
legend
Однако следует использовать !important с осторожностью, так как это может привести к сложностям в обслуживании кода в будущем.
В некоторых случаях можно использовать более специфичные селекторы для переопределения стилей. Более специфичные селекторы имеют приоритет над менее специфичными. Например, можно использовать селектор класса вместо селектора элемента:
.container legend
В этом примере стили будут применяться только к элементам legend , которые находятся внутри элементов с классом container .
Заключение
Переопределение стилей Bootstrap – это распространенная задача в веб-разработке. Лучше всего это делать, создавая отдельный файл стилей, и использовать !important или более специфичные селекторы для переопределения стилей. Это поможет сохранить изменения при обновлениях и упростит обслуживание кода в будущем.