Come personalizzare bootstrap css quando si utilizza bootstrap-sass

Question

Vorrei cambiare molte cose, ad esempio il colore dei pulsanti o, ad esempio, modificare il colore dell'immagine di sfondo sulla barra di navigazione (intestazione). Io uso gemma boostrap-Sass, quindi non posso usare boostrap sito' Customize page

Devo davvero ignorare tutto questo sul mio file custom.css.scss o posso cambiare questi un posto più basso livello? non trovo i file .css che mi permettono di farlo nel mio file di progetto (ho cercato tutte le librerie, app e vendor/assets ma ora trovo il css di boostrap. Sospetto sia perché non ci sono ma loro Sono direttamente nei file della gemma) Ho molti cambiamenti, quindi mi sento eccessivamente talmente tante cose che non sono l'opzione migliore.

Qual è il modo migliore per farlo? Grazie

Answer 1

Non modificare mai i file originali di Boostrap. L'opzione migliore è di ignorare le loro classi con i propri. Puoi farlo creando un file css nella cartella assets/stylesheets, che verrà inclusa automaticamente nella tua app.

Answer 2

Ho iniziato a utilizzare il sapore Sass di Twitter Bootstrap e ho appena trovato un modo ragionevole di strutturare i miei file in modo da poter eseguire le mie sovrascritture personalizzate senza fare casino con i file core E mantenere tutti i CSS in un file per caricamento più veloce.

In poche parole metto tutti i file sass in assets/sass e creo una sottodirectory chiamata bootstrap per i file core. Quindi creo una directory di pari livello chiamata tema per i miei file scss personalizzati.

Vai a /bootstrap e all'interno di questa directory si trova un file denominato bootstrap.scss che include tutti i componenti principali. Rinominare questo file theme.scss e metterlo nella directory principale in questo modo:

Come potete vedere ho già un po 'di abitudine sovrascrivendo sass include file già presente nella cartella del tema. Questi verranno aggiunti alla fine del CSS di bootstrap predefinito quando viene compilato.

La magia si verifica quando si entra in theme.scss e modificare i percorsi di inclusione like so. Guarda verso la parte inferiore dell'immagine per le sostituzioni e verso l'alto per il riferimento delle variabili personalizzate.

Nota: Se si desidera modificare le variabili nella bootstrap, è una buona idea per fare un tuo file _variables.scss nella directory theme e includerlo in cima del file theme.scss. In questo modo puoi sovrascrivere le variabili di bootstrap che rimarranno con gli aggiornamenti in futuro.

Quindi includere solo theme.css nelle tue pagine e voilà. Questo è come ho iniziato a farlo e non ho ancora incontrato alcun bug.

Trovo questo il meno complicato dei metodi che ho visto. E quando scendono i nuovi aggiornamenti aggiornerò semplicemente i file core di bootstrap e manterrò le mie modifiche!

Answer 3

Anche io ho questo stesso problema e mi piace la risposta di gillytech, ma vorrei aggiungere che non è necessario copiare tutto dalle _variabili.scss file nel proprio file delle variabili. Devi solo dichiarare e utilizzare le stesse variabili utilizzate da Bootstrap e assicurarti di caricare i file delle variabili prima che venga caricato il file _variables.scss di Bootstrap.

Si noterà che molte delle variabili Bootstrap hanno un "! Default" dopo aver assegnato un valore ad esso. Ciò significa che sass non lo sovrascriverà se è già definito.

Quindi il mio file theme.scss assomiglia a questo:

@import "superhero-variables"; 
@import "bootstrap"; 
@import "superhero-theme"; 

Abbiamo trovato questo qui sotto "Styling Bootstrap con le variabili": http://pivotallabs.com/sass-with-bootstrap/