Ограничьте область применения стилей начальной загрузки

Как мне ограничить Bootstrap только областью div? Мне нужно вложить таблицу стилей Bootstrap в приложение ExtJS для определенных div-ов, и оба они конфликтуют, поскольку им нужно свое собственное тело, ul, li, a и т. Д.

Я пытаюсь не редактировать bootstrap.css вручную (или сводить его к минимуму), чтобы его можно было легко обновить.

 Andres Ilich13 мая 2012 г., 23:03
Разве не проще было бы просто удалить нужные стили вместо того, чтобы включать полную таблицу стилей начальной загрузки?
 Andres Ilich14 мая 2012 г., 16:10
Вы можете загрузить настроенную версию загрузчика прямо на странице документации, все, что вам нужно сделать, это очистить то, что вам не нужно, и загрузить то, что вам нужно. Вы можете найти это здесь:twitter.github.com/bootstrap/download.html .. поэтому, когда есть обновление, вы можете просто сделать то же самое и повторно загрузить то, что вам нужно.
 ojosilva14 мая 2012 г., 14:07
Я согласен, что будет чище, но тогда будет сложнее обновить версии начальной загрузки, не так ли?

Ответы на вопрос(7)

Если у вас следующая файловая структура:

mystyles.less mystyles.css /bootstrap/ bootstrap.less bootstrap.css grid.less ... /mixins/

И вы хотите ограничить объем начальной загрузки, вы должны положить в mystyles.less (right way):

.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(wrong way):

.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;
}

не нужно форк / редактировать оригинальный загрузчик. Просто поместите импорт в ваш файл следующим образом (sass в моем случае): Я создал файл "bootstrap-scope-limit.scss" (что я импортирую туда, где мне нужен начальный загрузчик):

.bootstrap-inside {
  @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/_theme.scss";
}

important notices!

пожалуйста, имейте в виду, что у bootstrap есть несколько стилей тела, которые не будут применяться при использовании такого подхода. Но это дает вам возможность контролировать начальную загрузку с помощью JS, добавив & quot; bootstrap-inside & quot; Класс для элемента, чтобы включить или отключить загрузку для всей страницы, если некоторый динамический контент должен использовать загрузчик или нет.

Еще одна проблема, о которой вы должны знать: некоторые плагины, которые переопределяют стили начальной загрузки, могут иметь проблемы, поскольку стили начальной загрузки с новой оболочкой класса становятся более сильными (более конкретными) и не могут быть переопределены развернутыми плагинами.

Для случая с веб-пакетом я бы рекомендовал использовать этот загрузчик:https://www.npmjs.com/package/wrap-css-loader обернуть весь пакет, который вы можете использовать как часть вашего приложения (div?) позже

Расширяя ответ @Andrew Homeyer:

В моем приложении Reactjs я получил стилевое оформление boostrap, выполнив следующие действия:

Went here and downloaded bootstrap source Followed the guide here to install grunt. summary:

Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

Installing Grunt: To install Grunt, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.

Then, from the command line: Install grunt-cli globally with npm install -g grunt-cli. Navigate to the root /bootstrap/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there. When completed, you'll be able to run the various Grunt commands provided from the command line.

Edited the file less/bootstrap.less from the downloaded source to the following:

.bootstrap-scope {...pasted all @imports here...}

enter image description here

Ran grunt dist and copied the new dist folder into my project
in App.js import './styling/bootstrap/css/bootstrap.min.css';.

enter image description here

Подобное обсуждениеВот

 05 нояб. 2017 г., 20:09
Это правильный путь.

Так как результат изменения 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, можно также делать это вслепую (решение аналогично Алексею, но также обрабатывает несколько угловых случаев):

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 (решение Эндрю Хомейера), то в некоторых случаях оно работает не очень хорошо (по крайней мере, в bootstrap 3):

various mixins like .make-grid-columns (from less/mixins.xml) end up badly prefixed. Example:

.bootstrap-scope .col-sm-1,
  .col-sm-2,
  .col-sm-3,

the usage of "&" in LESS is limited:

.caret {
  .btn-default & {

becomes

 .btn-default .bootstrap-scope .caret {

instead of what we want:

 .bootstrap-scope .btn-default .caret {
 03 сент. 2017 г., 11:14
Спасибо! Работает с v4 тоже, но не идеально. Это нарушает модальный свиток. У вас есть список известных проблем & amp; исправления?
 21 мар. 2014 г., 12:06
Я использовал твойNode.js Сценарий и я подтверждаю, что результат намного лучше, чем метод менее оберточный. Все работает без нареканий, большое спасибо!

Расширение на ответ @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/

Существует гораздо более простой способ выполнить это законное требование: замените} NEWLINE и, NEWLINE на предыдущее значение и область видимости вашего класса. Это очень легко сделать, например, Sublime:

Select }\r\n

Alt + F3 (to select all occurrences)

Replace with }\r\n.bootstrap-scope

Select ,\r\n

Alt + F3 (to select all occurrences)

Replace with ,\r\n.bootstrap-scope

Вот и все! Это будет довольно легко обновить, так как замена занимает около минуты. Надеюсь, мой ответ помог.

 16 апр. 2015 г., 18:00
Наконец я заменил.bootstrap-scope}\n за}\n для всех @media
 29 окт. 2014 г., 19:44
Этот метод использовался для вложенных операторов @media, но в моей конкретной сборке это было всего около 8 экземпляров. Учитывая все обстоятельства, не слишком потрепанный! Спасибо.
 17 окт. 2014 г., 13:48
это работает для файла min?
Решение Вопроса

Вы можетераскошелиться репо и изменениеbootstrap.less обернуть стили начальной загрузки:

.bootstrap-scope {
    //put bootstrap @includes in here
}

Затем в корне проекта начальной загрузки запуститеmake генерироватьbootstrap.css файл.

Вы потеряете глобальные назначения начальной загрузки стилей для тегов body и html, но, возможно, вы их не захотите.

А затем, в вашем приложении, дайте контейнер, который вы хотите.bootstrap-scope учебный класс.

 22 янв. 2013 г., 20:07
@ Andrew Homeyer - есть ли шанс, что вы могли бы предложить предварительно скомпилированную загрузку пакета начальной загрузки? Я был бы очень признателен за это. Я не могу заставить себя создать целую среду Unix просто для того, чтобы создать немного CSS ...: |
 ojosilva10 янв. 2013 г., 17:28
Да, я закончил тем, что делал что-то подобное, но вместо этого с #id, так как использование .class, похоже, не работало на 100% в некоторых случаях:
 08 июн. 2016 г., 02:33
@VipulHadiya, вам нужно создатьmake.bat (при условии, что вы в Windows), я просто рекомендую этот репозиторийgithub.com/TheCopartnery/… и это работает хорошо. Надеюсь, поможет.
 28 янв. 2013 г., 06:50
 29 сент. 2013 г., 01:33
Чтобы упростить мою жизнь, я создал новый репозиторий, который загружает загрузчик как подмодуль, с простыми задачами для создания версии с определенными областями:github.com/homeyer/scoped-twbs

Ваш ответ на вопрос