Guida Bootstrap
- 18.924 lettori
Introduzione a Bootstrap
Premessa: questa guida si basa sulla versione 3 di Bootstrap rilasciata nell'Agosto del 2013. Se state utilizzando una versione precedente del fram...
- 18.791 lettori
Iniziare con Bootstrap: la struttura della pagina
Procurarsi Bootstrap Procurarsi il framework Bootstrap è molto semplice. Basta visitare il sito getbootstrap.com e fare clic sul pulsante download...
- 10.076 lettori
Compatibilità cross-browser e cross-devices: limiti e problemi di Bootstrap
Nella prima lezione abbiamo avuto modo di raccontare i grandi vantaggi offerti da Bootstrap, ma è bene dedicare qualche riflessione anche al suppor...
- 13.650 lettori
La griglia di Bootstrap
Dopo aver parlato in generale di Bootstrap, delle sue potenzialità e del supporto offerto dai vari dispositivi, è giunto il momento di “mette...
- 12.674 lettori
Immagini responsive con Bootstrap
Nella scorsa lezione abbiamo già visto che le “celle” delle colonne del layout (creato con l'ausilio della "griglia" di Boots...
- 16.654 lettori
La griglia: gestire l'offset
Dopo la digressione della scorsa lezione sulle immagini responsive, torniamo a parlare della griglia di Bootstrap per la creazione dei layout, parl...
- 9.120 lettori
La griglia: annidiare e riordinare le colonne
Annidiare le colonne Bootstrap permette di annidare le colonne, cioè di inserire una nuova griglia all'interno di un'altra griglia. Per farlo è su...
- 11.756 lettori
Le classi per le colonne e le diverse dimensioni della viewport
Nelle lezioni precedenti abbiamo sempre creato le colonne utilizzando la classe .col-md-N., dove N è il numero delle colonne strutturali della grig...
- 14.516 lettori
La barra di navigazione
Uno degli elementi comuni a tutti i siti web è la barra di navigazione (o navbar). La navbar è l'elemento strutturale che contiene i link che conse...
- 13.134 lettori
Perfezionare la barra di navigazione in Bootstrap
Continuiamo quanto introdotto nella precedente lezione proseguendo nel parlare di barre di navigazione o navbar. Innanzi tutto diciamo che tutti gl...
- 5.550 lettori
Disabilitare il layout responsivo
Negli esempi che abbiamo proposto fin qui, abbiamo sempre utilizzato delle pagine responsive (o, in italiano, adattive) cioè pagine i cui elementi ...
- 20.500 lettori
Creare un menu a discesa
Nelle barre di navigazione possono essere inseriti elementi più complessi rispetto a dei semplici collegamenti. Uno degli elementi più comuni sono ...
- 4.845 lettori
Gestire le thumbnail all'interno del Grid System
Il grid system di Bootstrap di cui abbiamo parlato nelle lezioni iniziali del corso può essere espanso con l’uso del componente thumbnail che...
- 5.008 lettori
I titoli delle pagine: page-header e jumbotron
Per creare l'header delle pagine (intesa come area di intestazione visibile all'utente), Bootstrap dispone di una apposita classe, page-header, che...
- 5.646 lettori
I pulsanti
Nelle lezioni precedenti ci è capitato di utilizzare dei pulsanti. Ora è giunto il momento di trattarli in modo più approfondito e capire, in modo ...
- 4.579 lettori
Creare pulsanti complessi
Bootstrap permette di usare i pulsanti in situazioni più complesse di quelle viste nella lezione precedente, ad esempio è possibile creare gruppi d...
- 4.199 lettori
Pulsanti per dropdown menu
Abbiamo già avuto modo di parlare di elenchi a discesa, ma nella loro versione più semplice. Torniamo sull’argomento per aggiungere qualche u...
- 3.989 lettori
Dinamizzare i pulsanti con Javascript
Fino ad ora abbiamo disegnato dei pulsanti che non fanno nulla, ovviamente si è trattato solo di esempi scolastici in quanto, per definzione, un pu...
- 6.620 lettori
Formattazione del testo
Il testo del corpo della pagina, per impostazione predefinita, in Boostrap, è reso con dimensione (font-size) 14px e una interlinea (line-height) d...
- 4.132 lettori
I gruppi di input
Bootstrap permette in modo molto semplice di creare e formattare opportunamente gli input di testo, cioè i campi in cui l'utente può digitare del t...
- 2.859 lettori
Le Labels (etichette)
Bootstrap dispone di diverse classi per la formattazione delle etichette (o label). La classe label viene aggiunta ad elementi di testo inline per ...
- 2.833 lettori
I Badges
I badges sono piccoli elementi che possono essere posti accanto ad altri elementi per mettere in evidenza la presenza quacosa "di nuovo" ...
- 3.367 lettori
Gestire la paginazione
Bootstrap permette di creare facilmente elementi utili per la paginazione dei contenuti. Tutto questo grazie all'uso della classe pagination applic...
- 5.004 lettori
Le progress bar (o barre di avanzamento)
Un altro elemento facilmente realizzabile con Bootstrap è la barra di progressione (o barra di avanzamento). Nella sua forma più semplice, la barra...
- 3.934 lettori
Alert ed Avvisi
Bootstrap permette di generare in modo molto semplici delle finestre di messaggio (alert) da utilizzare per comunicare agi utenti delle informazion...
- 4.095 lettori
I Popover
Un popover è una sorta di fumetto con delle informazioni aggiuntive che compare vicino ad un elemento, quando si fa clic su di esso. Un popover v...
- 4.024 lettori
Il plugin ScrollSpy
Vediamo come utilizzare il plugin ScrollSpy di Bootstrap per realizzare single page website dal look moderno e con effetti di sicuro impatto visivo...
- 8.716 lettori
Carousel
Questo plugin Bootstrap permette di creare una sequenza di immagini o altri elementi a scorrimento. Definire la struttura del Carousel La realizzaz...
- 4.951 lettori
Tabs e Pills
La classe nav applicata alle liste le identifica come un insieme di collegamenti che consentono di "navigare" tra i contenuti. Nello spec...
- 2.379 lettori
List Group
La classe list-group permette di modificare l'aspetto delle liste in modo da mostrare i contenuti in maniera più efficiente. Nella sua forma base ...
- 6.648 lettori
Accordion e Collapsible
L'accordion è uno strumento utile per presentare una grande quantità di contenuto nelle pagine occupando poco spazio. Il contenuto, in pratica, vie...
