Как ограничить Bootstrap только областью действия div? Мне нужно вложить таблицу стилей Bootstrap внутри приложения ExtJS для специальных divs, и оба они сталкиваются, так как им нужно собственное тело, ul, li, a и т.д.
Я пытаюсь избежать редактирования bootstrap.css вручную (или свести его к минимуму), чтобы его можно было легко обновить.
Вы можете переделать bootstrap repo и изменить bootstrap.less, чтобы обернуть стили бутстрапа:
.bootstrap-scope {
//put bootstrap @includes in here
}
Затем в корневом каталоге проекта bootstrap запустите make, чтобы сгенерировать файл bootstrap.css.
Вы потеряете привязки bootstrap глобальных стилей к тегу body и html, но вы все равно не захотите их.
И затем, в вашем приложении, дайте контейнеру вы хотите класс .bootstrap-scope.
Поскольку результат изменения less/bootstrap.less был недостаточно хорош для меня (см. почему внизу сообщения), я закончил фильтрацию bootstrap.css:
var css = require('css'), fs = require('fs');
var prefix = '.bootstrap-scope';
var inFile = 'bootstrap.css';
var cssAst = css.parse(fs.readFileSync(inFile, 'utf8'));
prefixNode(cssAst);
console.log(css.stringify(cssAst));
function prefixSelector(sel){
if (sel.match(/^@/)) return sel;
var m = sel.match(/(^| )(body|html)($|\W.*)/i);
if (m)
return m[1] + prefix + m[3];
else
return prefix + ' ' + sel;
}
function prefixNode(node) {
if (node.selectors) {
node.selectors = node.selectors.map(prefixSelector);
} else if (node.stylesheet) {
node.stylesheet.rules.forEach(prefixNode);
} else if (node.rules) {
node.rules.forEach(prefixNode);
}
}
Поскольку создается bootstrap.css, можно также сделать это вслепую (решение похоже на Alexey's, но также обрабатывает несколько угловых случаев):
perl -lpe 'BEGIN { $prefix = ".bootstrap-scope" } if (($indent, $s, $sep) = /^(\s*)([^@\s].*?)(\s*[,{])$/) { $s =~ /^(from|to)*$/ or $s =~ s/(^| )(body|html)($|\W.*)/$1$prefix$3/i or $s = "$prefix $s"; $_ = "$indent$s$sep" }' bootstrap.css
Что касается изменения less/bootstrap.css и вызова grunt для генерации dist/css/bootstrap.css(решение Andrew Homeyer), кажется, что он не работает красиво (по крайней мере, в bootstrap 3):
различные микшины, такие как .make-grid-columns (из less/mixins.xml), заканчиваются плохо префиксом. Пример:
.bootstrap-scope .col-sm-1,
.col-sm-2,
.col-sm-3,
использование "&" в МЕНЬШЕ ограничено:
.caret {
.btn-default & {
становится
.btn-default .bootstrap-scope .caret {
вместо того, что мы хотим:
.bootstrap-scope .btn-default .caret {
Существует намного более простой способ достичь этого законного требования: замените NEWLINE и NEWLINE с предыдущим значением и областью вашего класса. Это очень легко, например, в Sublime:
Выберите}\r\n
Alt + F3 (для выбора всех вхождений)
Заменить с помощью}\r\n.bootstrap-scope
Выберите,\r\n
Alt + F3 (для выбора всех вхождений)
Заменить с помощью \r\n.bootstrap-scope
Что это! Будет довольно легко обновить его, поскольку замена занимает около минуты. Надеюсь, мой ответ помог.
Если у вас следующая файловая структура:
И вы хотите ограничить объем начальной загрузки, вы должны добавить mystyles.less(правильный путь):
.your-class-to-limit-bootstrap-scope{
@import (less) "bootstrap/bootstrap.css";
}
Мы должны импортировать файл bootstrap.css вместо bootstrap.less, но используя опцию (less) @import, чтобы рассматривать файл как файл Less, независимо от его расширения. Таким образом, вы получите правильный CSS, например:
.your-class-to-limit-bootstrap-scope .col-xs-1,
.your-class-to-limit-bootstrap-scope .col-sm-1,
.your-class-to-limit-bootstrap-scope ...
.your-class-to-limit-bootstrap-scope .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 7px;
padding-right: 7px;
}
Но если вы импортируете меньше файлов начальной загрузки, вы получите css с неверной областью действия (неверный путь):
.your-class-to-limit-bootstrap-scope{
@import "bootstrap/bootstrap.less";
}
Итак, вы получите неправильную CSS, например:
.your-class-to-limit-bootstrap-scope .col-xs-1,
.col-sm-1,
.col-md-1,
...
.col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
Расширяя ответ @Andrew Homeyer:
В моем приложении Reactjs я получил стилевое оформление boostrap, выполнив следующие действия:
Bootstrap использует Grunt для своей системы сборки, с удобными методами для работа с рамками. Это как мы компилируем наш код, запускаем тесты, и многое другое.
Установка Grunt: чтобы установить Grunt, вы должны сначала загрузить и установить node.js (который включает в себя npm). Npm обозначает узлы упакованных модулей и способ управления зависимостями разработки через node.js.
Затем из командной строки: Установите grunt-cli глобально с помощью
npm install -g grunt-cli. Перейдите в корневой каталог /bootstrap/, затем запуститеnpm install. npm посмотрит на файл package.json и автоматически установить необходимые локальные зависимости, перечисленные там. По завершении вы сможете запускать различные команды Grunt предоставляется из командной строки.
less/bootstrap.less из загруженного источника следующим образом:.bootstrap-scope {...pasted all @imports here...}
grunt dist и скопировал новую папку dist в мой проектimport './styling/bootstrap/css/bootstrap.min.css';.
Подобное обсуждение здесь
не нужно форк/редактировать оригинальный загрузчик. Просто поместите импорт в ваш файл следующим образом (sass в моем случае): Я создал файл "bootstrap-scope-limit.scss" (который я импортирую туда, где мне нужно, начальной загрузки):
.bootstrap-inside {
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/_theme.scss";
}
важные уведомления!
Пожалуйста, имейте в виду, что у bootstrap есть несколько стилей тела, которые не будут применяться при таком подходе. Но это дает вам возможность контролировать начальную загрузку с помощью JS, добавив класс "bootstrap-inside" к элементу, чтобы включить или отключить загрузочную загрузку для всей страницы, если какой-то динамический контент должен использовать начальную загрузку или нет.
Еще одна проблема, о которой вам следует знать: некоторые плагины, которые переопределяют стили начальной загрузки, могут иметь проблемы, поскольку стили начальной загрузки с новой оболочкой класса становятся более сильными (более конкретными) и не могут быть переопределены развернутыми плагинами.
для случая с веб-пакетом я бы порекомендовал использовать этот загрузчик: https://www.npmjs.com/package/wrap-css-loader, чтобы обернуть весь пакет, который вы можете использовать позже как часть вашего приложения (div?)
Расширение на ответ @jtlindsey. Если вы хотите использовать bootstrap 4, вам нужно внести небольшие изменения.
Вместо редактирования less/bootstrap.less вы должны отредактировать scss/bootstrap.scss
Затем вы должны выполнить эту команду в следующем порядке:
gem install bundler
bundle install
npm run dist
И новый bootstrap.min.css создается в папке dist.
Здесь вы можете получить больше информации:https://getbootstrap.com/docs/4.0/getting-started/build-tools/
Единственное, что я знаю об этом, наверняка хуже, чем этот скрипт, это сам начальный загрузчик, но это, вероятно, все еще будет лучшим ответом здесь на некоторое время:
prefix="#bs431"; cat bootstrap.css | while IFS='' read -r line; do if echo "$line" | egrep -i '(\{|,)$' | egrep -iv '\@media' | wc -l | egrep -iq '^0$'; then echo "$line"; else echo "$line" | perl -pe 's/^(\s+)?/\1'"$prefix"' /g' | perl -pe 's/, (\.|#|\[|[a-zA-Z]{1})/, '"$prefix"' \1/g'; fi; done | perl -pe 's/'"$prefix"' :root/'"$prefix"'/g' > bootstrap.scoped.css