select personalizzata con bootstrap

Select con Bootstrap, il CSS e l’HTML

Per questo articolo sono disponibili Demo Download Script

In questa guida voglio spiegare come realizzare una select con Bootstrap ed assegnargli uno stile CSS ; infatti nativamente la select apparirebbe in questo modo :

default select bootstrap

se siete un pò esigenti come me e pensate che anche l’occhio voglia la sua parte, allora è necessario trovare una soluzione, ed esiste, per la gioia di entrambi 🙂

Come personalizzare una select con Bootstrap

Bootstrap a mio parere è stata una rivoluzione nel campo dei framework CSS, l’unico neo è che nativamente non vengono stilizzate le select, in questo articolo invece spiego come utilizzare la libreria bootstrap-select.js realizzata da Silvio Moreto, qui trovate il link a Github http://silviomoreto.github.io/bootstrap-select/ .

Lo script in sostanza si occupa di “trasformare” la select in un menu dropdown Bootstrap, idea geniale a mio parere!

L’utilizzo è davvero molto semplice, vediamo subito come fare.

Codice HTML per select Bootstrap

L’importante è assegnare le classi selectpicker e show-menu-arrow al tag select, la prima classe è definita nel file bootstrap-select.js e la seconda permette semplicemente di mostrare la freccia in alto a sinistra all’apertura della select.

Ora all’interno del tag <head> e prima della sua chiusura, non ci resta che richiamare il file .js ed il relativo foglio di stile .css, quindi

Il risultato è fantastico 🙂

codice select bootstrapE con un pò di fantasia e conoscenza di CSS si possono realizzare anche delle varianti di select colorate, per esempio :

select colorata con bootstrapBuon lavoro e alla prossima !

http://ad.zanox.com/ppc/?43729199C765911427T

Commenta l'articolo

Bisogno di postare codice ? Usa un servizio gratuito come Codeshare altrimenti WordPress formatta male il codice!

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?