2012-01-08 12 views
34

Nel mio progetto Play 2.0 ho già integrato Bootstrap (con meno file, Play può compilarli al volo) ma ora ho trovato Boilerplate e penso che sarebbe una buona idea farne uso anche.Come integrare correttamente il Boiler in HTML5 con Twitter Bootstrap?

Dopo un po 'di googling ho trovato questo: http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa

Quindi, si presenta come l'integrazione dovrebbe essere possibile, e ci sono anche 2 progetti che cercano di farlo. L'unico problema è che fanno cose completamente diverse e non sono sicuro quale sia corretto.

https://gist.github.com/1422879 allo stato attuale sembra ignorare il file styles.css proveniente da Boilerplate. È stato rinominato in h5bp.css, ma non vedo h5bp.css incluso ovunque.

https://github.com/elgreg/html5-boilerstrap d'altra parte utilizza entrambi, basta dividere file di styles.css in due parti (h5bp_normalize.css e styles.css, bootstrap.css è incluso tra di loro). Ma non ci sono conflitti tra Boilerplate e Bootstrap in questo modo?

Quindi sono un po 'perso. Qual è il modo corretto di fare le cose in questo caso?

+0

Quale parte del html5Boilerplate esattamente stai cercando di integrare? –

risposta

62

Basta usare Initializr, è la soluzione semi-ufficiale e ha anche un enorme set di opzioni. Bootstrap + H5BP è supportato immediatamente!

http://www.initializr.com/

3

ho rimosso gli stili di reset da Twitter bootstrap (rimuovendo meno@import economico) e incollato in HTML5-boilerplate (nella sezione stili utente). Ha funzionato bene

+0

Sembra bello :) Ma quello che mi preoccupa è uno dei commenti sotto lo snippet di codice (link nel primo post): "Non credo che la combinazione del CSS funzionerà così bene perché Bootstrap ha bisogno del suo reset per rimuovere l'intestazione predefinita margini e list padding: questa è un'ipotesi nel resto del codice (poiché era l'ultima volta che ho controllato), che può influenzare cose come la barra superiore e le schede/pillole. " Quanto stavi usando Bootstrap con la tua modifica? –

+0

Ho usato topbar, intestazioni e moduli, messaggi di avviso. Hai ragione, ho appena guardato al foglio di stile e ho scoperto che in realtà ho aggiunto la regola '.alert-message p {margin-top: 0}'. Quindi alcuni hacking con reset saranno necessari con tale integrazione. – welldan97

Problemi correlati