Come fare lo spazio dei nomi su Twitter Bootstrap in modo che gli stili non siano in conflitto

Voglio usare Twitter Bootstrap, ma solo su elementi specifici, quindi ho bisogno di capire un modo per prefisso tutte le classi di Bootstrap di Twitter con il mio prefisso, o usare il minor mixin. Non ho ancora esperienza con questo, quindi non capisco come farlo. Ecco un esempio dell’HTML che sto cercando di definire:

dont style this with bootstrap

use bootstrap

In questo esempio, Twitter Bootstrap sarebbe normale sia in h1 s, ma voglio essere più selettivo su quali aree applicare gli stili di Bootstrap di Twitter.

    Questo si è rivelato più facile di quanto pensassi. Sia Less che Sass supportano il namespacing (usando la stessa syntax anche). Quando includi bootstrap, puoi farlo all’interno di un selettore per creare uno 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 data qui.

    @Andrew ottima risposta. Dovrai anche notare che bootstrap modifica il corpo {}, principalmente per aggiungere font. Quindi, quando lo spazio dei nomi via LESS / SASS il file css di output appare come questo: (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 (dal momento che tutto il bootstrap eredita font dal genitore)

    Per risolvere il problema, 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 @Andrew, @Kevin e @adamj (più alcuni altri stili), se si include quanto segue in un file chiamato “bootstrap-namespaced.less”, si può semplicemente importare “bootstrap-namespaced.less” in qualsiasi meno 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 al bootstrap CSS interromperà la funzionalità modale mentre il bootstrap aggiunge una class ‘modal-backdrop’ direttamente al corpo. Una soluzione alternativa è spostare questo elemento dopo aver aperto la modale, ad esempio:

     $('#myModal').modal(); var modalHolder = $('
    '); $('body').append(modalHolder); $('.modal-backdrop').first().appendTo(modalHolder);

    È ansible rimuovere l’elemento in un gestore per l’evento “hide.bs.modal”.

    Usa la versione .less dei file. Determina quali meno file hai bisogno, quindi avvolgi quei file .less con:

     .bootstrap-styles { h1 { } } 

    Questo ti darà l’output di:

     .bootstrap-styles h1 { } 

    Ho fatto un GIST con Bootstrap 3 all’interno di una class chiamata .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

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

    Primo esempio di riga

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

    Namespacing interrompe il div di sfondo del plug-in Modal, poiché viene sempre aggiunto direttamente al tag , ignorando l’elemento namespacing a cui sono applicati gli stili.

    Puoi sistemarlo modificando il riferimento del plugin su $body prima di mostrare lo sfondo:

     myDialog.modal({ show: false }); myDialog.data("bs.modal").$body = $(myNamespacingElement); myDialog.modal("show"); 

    La proprietà $body decide dove verrà aggiunto lo sfondo.

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

    Ho affrontato lo stesso problema e il metodo proposto da @Andrew purtroppo non ha aiutato nel mio caso specifico. Le classi Bootstrap sono entrate in collisione con le classi di un altro framework. Questo è il modo in cui questo progetto è stato intercettato https://github.com/sneas/bootstrap-sass-namespace . Sentiti libero di usare.

    Soluzione più semplice: inizia a utilizzare le classi di css isolate per la creazione personalizzata per Bootstrap.

    Ad esempio, per i file di download di Bootstrap 4.1 dalla directory css4.1 –

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

    e avvolgi il tuo codice HTML in un div con la class bootstrapiso:

     

    Il modello di pagina con il bootstrap isolato 4 sarà

     < !DOCTYPE html>       Page1