Come creare lo spazio dei nomi per Twitter Bootstrap in modo che gli stili non siano in conflitto

Voglio usare Twitter Bootstrap, ma solo su elementi specifici, quindi devo trovare un modo per prefissare tutte le classi di Twitter Bootstrap con il mio prefisso, o usare meno mixin. Non ho ancora esperienza con questo, quindi non capisco come farlo. Ecco un esempio dell'HTML che sto cercando di modellare:

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

In questo esempio, Twitter Bootstrap userebbe uno stile normale per entrambi h1, ma voglio essere più selettivo su quali aree applico gli stili Twitter Bootstrap.

Questo si è rivelato più facile di quanto pensassi. Sia Less che Sass supportano lo spazio dei nomi (utilizzando anche la stessa sintassi). Quando includi bootstrap, puoi farlo all'interno di un selettore nello spazio dei nomi:

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

Aggiornamento: per le versioni più recenti di LESS, ecco come farlo:

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

Una domanda simile è stata risolta qui.

@Andrew ottima risposta. Dovrai anche notare che bootstrap modifica il corpo {}, principalmente per aggiungere il carattere. Quindi, quando lo spazi dei nomi tramite LESS / SASS il tuo file css di output ha questo aspetto: (in 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;
}

ma ovviamente non ci sarà un tag body all'interno del tuo div, quindi il tuo contenuto bootstrap non avrà il font bootstrap (poiché tutto il bootstrap eredita il font dal genitore)

Per risolvere, la risposta dovrebbe essere:

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

    @import 'bootstrap';
}

Mettendo insieme le risposte di @Andrew, @Kevin e @ adamj (più alcuni altri stili), se includi quanto segue in un file chiamato "bootstrap-namespaced.less", puoi semplicemente importare 'bootstrap-namespaced.less' in qualsiasi less file:

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

L'aggiunta di uno spazio dei nomi a bootstrap CSS interromperà la funzionalità modale poiché il bootstrap aggiunge una classe 'modal-background' direttamente al corpo. Una soluzione alternativa è spostare questo elemento dopo aver aperto il modale, ad esempio:

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

Puoi rimuovere l'elemento in un gestore per l'evento "hide.bs.modal".

Usa la versione .less dei file. Determina quali file meno ti servono, quindi racchiudi quei file .less con:

.bootstrap-styles {

    h1 { }

}

Questo ti darà l'output di:

.bootstrap-styles h1 { }

Ho fatto un GIST con Bootstrap 3 tutto all'interno di una classe denominata .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

Ho iniziato con questo strumento: http://www.css-prefix.com/ E aggiusta il resto con la ricerca e la sostituzione in PHPstorm. Tutti i caratteri @ font-face sono ospitati su maxcdn.

Prima riga di esempio

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

La spaziatura dei nomi interrompe il div di sfondo del plug-in Modal, poiché viene sempre aggiunto direttamente al tag <body>, ignorando l'elemento di spaziatura dei nomi a cui sono applicati gli stili.

Puoi risolvere questo problema modificando il riferimento del plug-in $bodyprima che mostri lo sfondo:

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

La $bodyproprietà decide dove verrà aggiunto lo sfondo.

Per spiegare meglio tutti i passaggi di cui parlava Andrew per chi non sa cosa sia Less. Ecco un collegamento che spiega abbastanza bene come è fatto passo dopo passo Come isolare Bootstrap o altre librerie CSS

Soluzione più semplice: inizia a utilizzare classi CSS isolate di build personalizzate per Bootstrap.

Ad esempio, per Bootstrap 4.1 scaricare i file dalla directory css4.1 -

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

e racchiudi il tuo HTML in un div con la classe bootstrapiso:

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

Il modello di pagina con bootstrap 4 isolato sarà

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

Ho affrontato lo stesso problema e il metodo proposto da @Andrew purtroppo non ha aiutato nel mio caso specifico. Le classi bootstrap si sono scontrate con le classi di un altro framework. È così che è stato avviato questo progetto https://github.com/sneas/bootstrap-sass-namespace . Sentiti libero di usare.

Come ulteriore nota per tutti. Per far funzionare le modali con uno sfondo puoi semplicemente copiare questi stili da 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;
}

Primo bootstrap clone da github:

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

Requisiti di installazione:

npm install

Apri scss / bootstrap.scss e aggiungi il tuo spazio dei nomi:

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

Compila bootstrap:

npm run dist

Apri dist/css/bootstrap.csse rimuovi lo spazio dei nomi dal tag htmle body.

Successivamente copia il contenuto della cartella dist nel tuo progetto e sei pronto.

Divertiti!