Legacy CSS conflitti con Bootstrap - come risolvere?

Question

Sono nuovo a Bootstrap, quindi questa potrebbe essere una domanda ingenua per tutti voi. Ma sono sicuro che altri hanno o avranno una domanda simile, quindi ecco qui.

Sto implementando il bootstrap in un sito che esiste da un po 'e si è evoluto nel corso degli anni. Non appena aggiungo il bootstrap css e js al mio html, molti elementi si incasinano. Per quanto posso dire, questo è attribuibile a me usando gli stessi nomi di classe di bootstrap. Ad esempio, ho una classe chiamata 'btn' e così fa bootstrap. Tutti i miei pulsanti hanno un aspetto brutto e/o strano. La lista potrebbe continuare all'infinito.

Questo è praticamente lo stesso per il corso quando le persone prima implementano Bootstrap su un sito esistente? È solo questione di passare attraverso i vecchi file CSS e rinominare le cose? Qualche soluzione elegante là fuori?

Answer 1

Penso che il modo più semplice sia utilizzare un pre-processore css nello spazio dei nomi di tutti i componenti CSS di bootstraps.

Se si arriva al loro repo github: https://github.com/twbs/bootstrap/ vedrete che hanno una distruzione MINORE del codice. Da lì, puoi assegnare uno spazio dei nomi a tutti i loro stili avvolgendo la libreria in una sorta di classe, ad esempio millimoose menzionata.

Da loro è possibile aggiungere lo spazio dei nomi di bootstrap a determinati elementi html e la libreria avrà effetto solo sul nodo dom e sui relativi figli.

Answer 2

Paul e Millimoose hanno entrambi fornito la soluzione che ha funzionato per me. Tuttavia, per i neofiti, la soluzione ha richiesto un po 'di scavo, quindi ecco una descrizione passo passo di ciò che ha funzionato per me (e quello che credo stessero raccomandando).

1. Fondamentalmente, è necessario modificare il file cst di avvio. Fondamentalmente avvolgere l'intero file di bootstrap css all'interno di questo:

   .bootstrap {// intero file di bootstrap css va qui }

2. Usa http://winless.org/online-less-compiler per generare un nuovo codice CSS. Dovrai superare il codice sopra nel lato sinistro del modulo nel link sopra.

3. Copia e incolla l'output dal collegamento precedente in un file css. Includi questo file css nel tuo html.

4. Quando è necessario utilizzare boostrap, è sufficiente posizionare gli elementi a cui si desidera applicare il bootstrap.

Grazie mille per l'aiuto nel trovare questa soluzione. Funziona bene.

Answer 3

ho fatto un GIST con Bootstrap 3 tutti 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 fissare il resto con la ricerca e sostituzione in PhpStorm. Tutti i font @ font-face sono ospitati su maxcdn.

Primo esempio linea

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