Como usar o namespace do Twitter Bootstrap para que os estilos não entrem em conflito

Quero usar o Twitter Bootstrap, mas apenas em elementos específicos, então preciso descobrir uma maneira de prefixar todas as classes do Twitter Bootstrap com meu prefixo ou usar menos mixins. Não tenho experiência com isso ainda, então não entendo muito bem como fazer isso. Aqui está um exemplo do HTML que estou tentando estilizar:

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

Neste exemplo, o Twitter Bootstrap normalizaria ambos os estilos h1, mas quero ser mais seletivo sobre as áreas em que aplico os estilos do Twitter Bootstrap.

Isso acabou sendo mais fácil do que eu pensava. Tanto Less quanto Sass suportam namespacing (usando a mesma sintaxe até). Ao incluir bootstrap, você pode fazer isso em um seletor para atribuir um nome a ele:

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

Atualização: para versões mais recentes do LESS, veja como fazer:

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

Uma pergunta semelhante foi respondida aqui.

@Andrew ótima resposta. Você também deve notar que o bootstrap modifica o corpo {}, principalmente para adicionar fonte. Então, quando você atribui um namespace via LESS / SASS, seu arquivo css de saída fica assim: (no bootstrap 3)

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

mas obviamente não haverá uma tag body dentro de sua div, então seu conteúdo bootstrap não terá a fonte bootstrap (já que todo bootstrap herda a fonte do pai)

Para corrigir, a resposta deve ser:

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

    @import 'bootstrap';
}

Colocando as respostas de @Andrew, @Kevin e @adamj juntas (mais alguns outros estilos), se você incluir o seguinte em um arquivo chamado "bootstrap-namespaced.less", você pode simplesmente importar 'bootstrap-namespaced.less' para qualquer menos Arquivo:

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

Adicionar um namespace ao CSS de bootstrap interromperá a funcionalidade modal, pois o bootstrap adiciona uma classe de 'pano de fundo modal' diretamente ao corpo. Uma solução alternativa é mover este elemento após abrir o modal, por exemplo:

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

Você pode remover o elemento em um manipulador para o evento 'hide.bs.modal'.

Use a versão .less dos arquivos. Determine quais menos arquivos você precisa e agrupe esses arquivos .less com:

.bootstrap-styles {

    h1 { }

}

Isso lhe dará a saída de:

.bootstrap-styles h1 { }

Fiz um GIST com Bootstrap 3 dentro de uma classe chamada .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

Comecei com esta ferramenta: http://www.css-prefix.com/ E conserte o resto com pesquisar e substituir no PHPstorm. Todas as fontes @ font-face são hospedadas no maxcdn.

Exemplo de primeira linha

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

O namespacing quebra o div de pano de fundo do plugin Modal, uma vez que ele sempre é adicionado diretamente à tag <body>, ignorando o seu elemento de namespacing que tem os estilos aplicados a ele.

Você pode corrigir isso alterando a referência do plug-in para $bodyantes de mostrar o pano de fundo:

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

A $bodypropriedade decide onde o cenário será adicionado.

Para explicar melhor todos os passos de que Andrew falava para quem não sabe o que é Less. Aqui está um link que explica muito bem como isso é feito passo a passo. Como isolar Bootstrap ou outras bibliotecas CSS

Solução mais simples - comece a usar classes css isoladas de construção personalizadas para Bootstrap.

Por exemplo, para Bootstrap 4.1 baixe arquivos do diretório css4.1 -

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

e envolva seu HTML em um div com a classe bootstrapiso:

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

O modelo de página com bootstrap 4 isolado será

<!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>

Eu enfrentei o mesmo problema e método proposto por @Andrew infelizmente não ajudou no meu caso específico. As classes de bootstrap colidiram com as classes de outro framework. É assim que este projeto foi iniciado https://github.com/sneas/bootstrap-sass-namespace . Sinta-se à vontade para usar.

Como uma nota adicional para todos. Para fazer os modais funcionarem com um pano de fundo, você pode simplesmente copiar esses estilos do 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;
}

Primeiro clone bootstrap do github:

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

Requisitos de instalação:

npm install

Abra scss / bootstrap.scss e adicione seu namespace:

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

Compilar bootstrap:

npm run dist

Abra dist/css/bootstrap.csse remova o namespace da tag htmle body.

Depois copie o conteúdo da pasta dist para o seu projeto e está tudo pronto.

Diverta-se!