Как создать пространство имен Twitter Bootstrap, чтобы стили не конфликтовали

Я хочу использовать Twitter Bootstrap, но только для определенных элементов, поэтому мне нужно найти способ добавить мой префикс ко всем классам Twitter Bootstrap или использовать меньше миксинов. У меня еще нет опыта в этом, поэтому я не совсем понимаю, как это сделать. Вот пример HTML, который я пытаюсь стилизовать:

<div class="normal-styles">
  <h1>dont style this with bootstrap</h1>
  <div class="bootstrap-styles">
    <h1>use bootstrap</h1>
  </div>
</div>

В этом примере Twitter Bootstrap будет использовать оба стиля h1, но я хочу быть более избирательным в отношении того, в каких областях я применяю стили Twitter Bootstrap.

Это оказалось проще, чем я думал. И Less, и Sass поддерживают пространство имен (даже используя один и тот же синтаксис). Когда вы включаете bootstrap, вы можете сделать это в селекторе для его пространства имен:

.bootstrap-styles {
  @import 'bootstrap';
}

Обновление: для более новых версий LESS, вот как это сделать:

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

Здесь был дан ответ на аналогичный вопрос.

@ Андрей отличный ответ. Вы также захотите отметить, что bootstrap изменяет тело {}, в основном для добавления шрифта. Итак, когда вы используете пространство имен через LESS / SASS, ваш выходной файл css выглядит так: (в начальной загрузке 3)

.bootstrap-styles body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;
}

но, очевидно, внутри вашего div не будет тега body, поэтому в вашем содержимом начальной загрузки не будет шрифта начальной загрузки (поскольку все начальной загрузки наследуют шрифт от родителя)

Чтобы исправить, ответ должен быть таким:

.bootstrap-styles {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;

    @import 'bootstrap';
}

Собрав ответы @Andrew, @Kevin и @adamj вместе (плюс несколько других стилей), если вы включите следующее в файл с именем "bootstrap-namespaced.less", вы можете просто импортировать 'bootstrap-namespaced.less' в любой less файл:

// bootstrap-namespaced.less

// This less file is intended to be imported from other less files. 
// Example usage:
// my-custom-namespace {
//  import 'bootstrap-namespaced.less';
// }

// Import bootstrap.css (but treat it as a less file) to avoid problems 
// with the way Bootstrap is using the parent operator (&).
@import (less) 'bootstrap.css';

// Manually include styles using selectors that will not work when namespaced.

@import 'variables.less';

& {
    // From normalize.less

    // Previously inside "html {"
    // font-family: sans-serif; // Overridden below
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    // Previously inside "body {"
    margin: 0;

    // From scaffolding.less

    // Previously inside "html {"
    // font-size: 10px; // Overridden below
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    // Previously inside "body {"
    font-family: @font-family-base;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @text-color;
    background-color: @body-bg;
}

Добавление пространства имен в начальный CSS нарушит модальную функциональность, поскольку начальная загрузка добавляет класс 'modal-backdrop' непосредственно в тело. Обходной путь - переместить этот элемент после открытия модального окна, например:

$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder); 

Вы можете удалить элемент в обработчике события hide.bs.modal.

Используйте версию файлов .less. Определите, сколько файлов вам нужно, а затем оберните эти файлы .less с помощью:

.bootstrap-styles {

    h1 { }

}

Это даст вам результат:

.bootstrap-styles h1 { }

Я сделал GIST с Bootstrap 3 внутри класса с именем .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

Я начал с этого инструмента: http://www.css-prefix.com/ А остальное исправил поиском и заменой в PHPstorm. Все шрифты @ font-face размещены на maxcdn.

Пример первой строки

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

Пространство имен нарушает div фона модального плагина, поскольку он всегда добавляется непосредственно в тег <body>, минуя ваш элемент пространства имен, к которому применены стили.

Вы можете исправить это, изменив ссылку на плагин до того, $bodyкак он покажет фон:

myDialog.modal({
    show: false
});

myDialog.data("bs.modal").$body = $(myNamespacingElement);

myDialog.modal("show");

$bodyСвойство определяет , где будет добавлен фон.

Чтобы лучше объяснить все шаги, о которых говорил Эндрю, для тех, кто не знает, что такое Less. Вот ссылка, которая довольно хорошо объясняет, как это делается, шаг за шагом Как изолировать Bootstrap или другие библиотеки CSS

Самое простое решение - начать использовать собственные сборочные изолированные классы css для Bootstrap.

Например, для Bootstrap 4.1 загрузите файлы из каталога css4.1 -

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

и оберните свой HTML в div с классом bootstrapiso:

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

Шаблон страницы с изолированным бутстрапом 4 будет

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <title>Page1</title>

    <!-- Isolated Bootstrap4 CSS - -->
    <link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">   

    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" crossorigin="anonymous"></script>

  </head>

  <body>

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

  </body>
</html>

Я столкнулся с той же проблемой, и метод, предложенный @Andrew, к сожалению, не помог в моем конкретном случае. Классы Bootstrap столкнулись с классами из другого фреймворка. Так был создан этот проект https://github.com/sneas/bootstrap-sass-namespace . Не стесняйтесь использовать.

В качестве дополнительной заметки для всех. Чтобы модальные окна работали с фоном, вы можете просто скопировать эти стили из bootstrap3.

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

Первый клон бутстрапа с github:

git clone https://github.com/twbs/bootstrap.git

Требования к установке:

npm install

Откройте scss / bootstrap.scss и добавьте свое пространство имен:

.your-namespace {
    @import "functions";
    ...
    @import "utilities/api";
}

Скомпилировать бутстрап:

npm run dist

Открыть dist/css/bootstrap.cssи удалить пространство имен из htmlи bodyтега.

Затем скопируйте содержимое папки dist в свой проект, и все готово.

Радоваться, веселиться!