Progettare un Blog con Bootstrap
Come molti di voi sapranno, Bootstrap è un frontend toolkit sviluppato dal team di Twitter. Bootstrap è nato inizialmente come progetto interno, per sopperire agli ovvi problemi di scalabilità e manutenibilità che l’utilizzo di differenti librerie esterne comporta. Solo in seguito è stato deciso di rendere disponibile pubblicamente il progetto.
Bootstrap mette a disposizione tre tipologie di pacchetti:
- Un pacchetto completo compilato e minimizzato pronto per essere incluso nei nostri progetti;
- Un pacchetto completo con i sorgenti da compilare e la documentazione per chi vuole studiare, modificare o integrare con nuovi strumenti il core;
- Uno strumento Customize con cui è possibile selezionare solo le componenti di cui si ha bisogno. Comodissima quest’ultima opzione poiché consente di essere utilizzata in fase di produzione occupando meno spazio e, soprattutto, facendo risparmiare banda agli utenti.
Vediamo nel dettaglio la struttura del pacchetto base, nel caso volessimo realizzare un semplice blog.
Bootstrap CSS
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap-responsive.css
Esempio di utilizzo nel codice HTML
Titolo Blog // layout del blog.
Bootstrap JavaScript
Questi sono i file javascript disponibili:
Grids
Questo è il Grid System usato da Twitter Bootstrap, supporta il 940px x 12 colonne.
La classe span1 ha un'ampiezza di 40px.
Layout La pagina ha un div container principale, suddiviso in 2 parti: un'area principale delimitata dallo span8 e da una colonna laterale o sidebar, span4.
Nell'esempio abbiamo applicato una classe row-fluid, propria del responsive design che permette l'auto re-sizing dei div e delle immagini.
Con il seguente codice,
// Main Part// Sidebar Part
otterremo:
Parte principale
Nel codice seguente mostreremo come realizzare la lista degli articoli del blog, ciascuno con titolo, immagine, descricionr ed un bottone.
// Main// Articoli// Articles Loop End
