Применение стилей CSS только к определенным элементам

для Bootstrap 3, это проще, если вы используете less:

загрузите исходный код Bootstrap и сделайте такой:

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

наконец, вы должны скомпилировать файл less; есть много альтернатив

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js

или использовать npm установить less затем скомпилировать до style.css:

npm install -g less
lessc style.less style.css

Я придумал решение CSS, если вы не можете использовать меньше/SASS из-за работы/других причин.

1. я использовал этот сайт,http://www.css-prefix.com/, и скопировать / вставить bootstrap.минута.css туда же. Я установил префикс ='.прихлоп' и прокладка =' '. Это будет префикс всего .бутстрэп разве что не идеально.
2. если вы делаете grep для '.bootstrap @media', вы обнаружите, что первый класс справа от открывающей скобки не имеет .загрузчик как родитель. Добавлять.бутстрэп ко всем этим происшествиям, около 68 для меня.
3. затем заменить все '.bootstrap @media ' с '@media'.
4. последний шаг-заменить все '.bootstrap @ ' С ' @ '(должно быть около 5 вхождений).

пример:

.bootstrap @media (min-width:768px){.lead{font-size:21px}}

нужно заменить на

@media (min-width:768px){.bootstrap .lead{font-size:21px}}

вид метода грубой силы, поэтому обязательно попробуйте метод LESS/SASS выше.

<div>
  No Bootstrap
</div>
<div class="bootstrap">
  Yes Bootstrap
</div>

Я не был удовлетворен ни одним из этих ответов. Использование меньшего объема правил создавало всевозможные дефекты. Clearfix, например, был весь испорчен. И правила вроде button.close стало button.bootstrap close вместо того, что я действительно хотел: .bootstrap button.close.

я взял другой подход. Я использую PostCSS для обработки готового CSS, поставляемого с Bootstrap. Я использую Scopify плагин для определения каждого правила с помощью .bootstrap.

этой в основном попадает туда. Конечно, есть html и body правила, которые становятся .bootstrap html и .bootstrap body которые становятся бессмысленными. Не волнуйся... Я могу просто написать преобразование PostCSS, чтобы очистить их:

var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) {
    return function(css, result) {
        css.walkRules(function(rule) {
            rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap');
            rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap');
        });
    }
});

теперь, я могу изолировать все Bootstrap стиль, добавив class="bootstrap" на верхнем уровне.

это жестко. Ты не можешь применить различные таблицы стилей css для различных частей одной и той же веб-страницы.

Я подозреваю, что единственный способ сделать это-сделать отдельный файл для вашего контента, чтобы взять стили начальной загрузки, и я-кадр его на страницу следующим образом:

<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>

затем в content-to-take-bootstrap-styles.html ссылка на таблицу стилей начальной загрузки в заголовке. Но тогда у вас есть все осложнения, например фреймы: элемент iframe не будет расти, чтобы вместить длина вашего контента.

У меня есть простое решение.

1. скопируйте содержимое css bootstrap к этому (http://css2sass.herokuapp.com/) онлайн-конвертер css в scss/sass.

2. добавить информацию о теге (например,div.bootstrap{) до начала содержимого scss и закройте тег в конце.

3. скопируйте все содержимое scss в этот конвертер scss to css (https://www.sassmeister.com/) и преобразовать его :)

вы можете использовать готовый к использованию изолированный css для Bootstrap 4.1 (скомпилированный с меньшим количеством) -

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

у него есть изолированный css Для тем -

• bootstrapcustom.минута.css-по умолчанию bootstrap 4.1 изолированный стиль
• https://bootswatch.com/cerulean/ мрачно.минута.css-изолированный css
• https://bootswatch.com/darkly/ категорически.минута.css-изолированный css
• https://bootswatch.com/flatly/ литера.минута.css-изолированный css
• https://bootswatch.com/litera/ люкс.минута.css-изолированный css
• https://bootswatch.com/lux/ Минти.минута.css-изолированный css
• ...

чтобы использовать Bootstrap CSS, просто оберните HTML в div с классом bootstrapiso, например:

<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

и используйте любой стиль css из папки css4. 1 Вот так:

<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>

// https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

готово!