Guida a Bootstrap: i primi passi con il framework di Twitter
Bootstrap è un framework frontend che permette agli sviluppatori di creare dei siti di varia natura, adatti per diversi dispositivi. Per questo scopo il progetto open source offre diversi modelli di progettazione basati su HTML e CSS, oltre che estensioni opzionali di JavaScript. Originariamente Twitter ha ideato Bootstrap come strumento aziendale per l’uniformazione dei design, ma ha poi rilasciato il framework nell’agosto 2011 sulla piattaforma open source GitHub, dove, nel giro di poco tempo, ha subito diverse modifiche (ulteriori sviluppi) che l’hanno portato ad essere uno dei progetti più popolari.
Cosa rende Bootstrap così interessante
Grazie ai modelli in HTML e CSS non c’è bisogno di cominciare da zero per sviluppare un nuovo sito. Come nei siti già pronti, avete a disposizione dei contenuti già preconfezionati da integrare nel vostro documento HTML. Così non dovete preoccuparvi delle innumerevoli e stressanti configurazioni CSS e ciò vi farà risparmiare tempo prezioso. Bootstrap si occupa, tra gli altri, dei seguenti elementi:
- Pulsanti
- Elementi di navigazione
- Thumbnail (la miniatura di un’immagine)
- Menu a tendina
- Indicazioni degli errori
- Breadcrumb (indicazione della propria posizione sulla pagina)
- Integrazione di video responsive, cioè adatti per diversi dispositivi
Un altro importante componente è il layout a griglia di Bootstrap (Bootstrap Grid Layout). Questo sistema permette di stabilire esattamente le distanze e il posizionamento di singoli elementi del sito, dividendo il layout in 12 colonne. Nella griglia del layout potete ordinare gli elementi e dividerli tra le diverse dimensioni degli schermi, indipendentemente che siano quelle del computer di casa, del cellulare, del tablet o di un netbook. Con Bootstrap avete tutto il necessario per sviluppare un responsive web design.
Con i plug-in opzionali di JavaScript, che si basano sul framework di JavaScript jQuery, integrate al vostro progetto anche degli utili elementi per le interfacce utente come tooltip e finestre di dialogo o ampliate le funzioni degli elementi già disponibili, ad es. tramite la funzione di autocompletamento per i campi di input. Per utilizzare Bootstrap con elementi JavaScript, inserite semplicemente la biblioteca jQuery nel documento HTML.
Bootstrap: download e primi passi
Dato che Bootstrap è stato rilasciato da Twitter come framework libero, non ci sono costi per il download o per l’utilizzo. Grazie al codice di programmazione disponibile liberamente, gli sviluppatori esperti hanno la possibilità di adattare il framework alle proprie esigenze. In questa guida scoprite quali passaggi sono necessari per poter utilizzare i modelli già pronti in CSS e JavaScript di Bootstrap.
- Visitate la pagina ufficiale getbootstrap.com e scaricate il pacchetto “Bootstrap” (nella versione standard o minimale) che comprende i file CSS e JavaScript, i font e i temi opzionali di Bootstrap.
- Estraete i file e spostate la cartella Bootstrap nella directory desiderata del vostro sistema.
- Qui ci sono tre sottocartelle “css“, “fonts“ e “js“. Nella cartella “font” si trovano più di 250 icone sotto forma di caratteri, provenienti dal sito Glyphicons Halflings e disponibili gratuitamente per Bootstrap. Per una maggiore comprensione vi spieghiamo uno ad uno dettagliatamente i file nelle cartelle “css” e “js”:
- bootstrap.css: codice CSS leggibile interamente
- bootstrap.min.css: codice CSS ridotto; i contenuti irrilevanti come spazi vuoti vengono eliminati per permettere l’interpretazione del codice
- bootstrap.css.map: comprende CSS Source Maps grazie al quale in fase di sviluppo trovate i file sorgente originali in formato LESS
- bootstrap-theme.css: file CSS dei temi opzionali già pronti
- bootstrap-theme.min.css: codice minimizzato del tema
- bootstrap-theme.css.map: tema Source Maps
- bootstrap.js: codice JavaScript leggibile interamente
- bootstrap.min.js: codice JavaScript minimizzato
- Per utilizzare elementi JavaScript, scaricate in aggiunta anche la ricca biblioteca di JavaScript jQuery su jquery.com.
- Quando tutti i componenti sono pronti, può iniziare il vero lavoro con il framework. Per esempio in questa guida creiamo una pagina HTML di benvenuto che poi trasformeremo in un template di Bootstrap.
- Aprite il vostro editor preferito, come Notepad++, e inserite nella finestra vuota il seguente codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Ciao, questo è il mio primo template Bootstrap</h1>
</body>
</html>Il meta tag “viewport” nella sezione head assicura una visualizzazione ottimale del sito su dispositivi mobili.
- Salvate il progetto sul desktop come “basic.html”.
- Per rendere questo tipico file HTML un template di Bootstrap, dovete implementare nel codice HTML i file CSS e JavaScript di Bootstrap. Qui inserite la directory in cui si trova la cartella. Si consiglia di integrare JavaScript verso la fine nel body del documento per evitare di prolungare i tempi di caricamento del sito. Il vostro codice dovrebbe risultare così:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css">
</head>
<body>
<h1>Ciao, questo è il mio primo template Bootstrap</h1>
<script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
- Infine salvate il documento come “template-bootstrap.html”. Con un doppio clic potete aprire il file Bootstrap HTML sul vostro browser preferito e vedere il messaggio inserito come titolo (h1).
- Ora potete creare il vostro template a seconda dei vostri gusti. Sulla pagina ufficiale trovate anche i diversi codici per la tipografia, i pulsanti, il sistema di griglia Bootstrap, ecc.
Le conoscenze informatiche sono un requisito importante
Anche se Bootstrap mette a disposizione dei contenuti già pronti, senza conoscenze HTML e CSS non riuscirete a sfruttare appieno il framework. Vale la pena mettere in conto un tempo di adattamento, anche nel caso di esperti sviluppatori. Al momento ci sono diversi template creati con Bootstrap da altri utenti, scaricabili gratuitamente o a pagamento e che vi tolgono una buona parte del lavoro. Chi lavora regolarmente con HTML, CSS e JavaScript, imparerà velocemente ad apprezzare i vantaggi del framework. Qui emergono soprattutto:
- l’enorme risparmio di tempo,
- le buone possibilità per sviluppare un responsive web design,
- aggiornamenti regolari e supporto da parte della vasta community
- e documentazione di prima qualità pronta per l’uso.
Oltre al fatto che si tratta di un progetto open source, tutti questi fattori contribuiscono a rendere Bootstrap uno dei framework più popolari nell’ambito del web design.
Articoli simili
Come utilizzare JSON-LD per il vostro sito
JSON-LD offre la possibilità ai programmatori di integrare i metadati in formato JSON come script indipendente dal resto dei contenuti del sito. La separazione del markup HTML e dell’annotazione semantica garantisce una migliore leggibilità del codice sorgente, consentendo un markup pratico dei metadati per i contenuti dinamici. Per questo JSON-LD è un formato che non ha niente da invidiare ai…
Introduzione all’HTML5
L’HTML5 è il nuovo linguaggio principale di internet, però gli sviluppatori ricorrono ancora a linguaggi di markup antiquati come l’HTML 4.01 o l’XHTML. Con questi sono spesso necessari per il funzionamento di un sito moderno molti plug-in esterni che mettono a rischio la compatibilità e la sicurezza di un sito. Invece l’HTML5 consente un’integrazione diretta degli elementi multimediali e delle…
WCAG: le linee guida del W3C per contenuti online facilmente accessibili
Le Web Content Accessibilty Guidelines (WCAG) del W3C raccomanda ai gestori di siti web di creare un sito internet accessibile. Inoltre, le WCAG si basano su quattro principi: percepibilità, utilizzabilità, comprensibilità e robustezza. A queste vengono assegnate dodici linee guida fondamentali, per offrire in maniera migliore contenuti web a persone con limitazioni sensoriali, motorie o…
Alternative a Bootstrap: una panoramica dei migliori framework per front end
Bootstrap è conosciuto per essere la soluzione framework più amata per la concezione e la creazione di superfici web altamente funzionali. La raccolta costituita da componenti HTML, CSS e JavaScript, pubblicata da Twitter nel 2011 sotto licenza libera MIT, può vantare senza dubbio di avere una grande community come anche un grande numero di estensioni, interfacce per sistemi di content management,…
Bootstrap 5: le novità più importanti
Quali sono le novità? Bootstrap 5 è stato progettato per rendere ancora più facile la creazione di siti web moderni ed eleganti. Gli sviluppatori promettono tempi di caricamento più rapidi, una migliore esperienza utente e un codice migliore: niente più jQuery, niente più supporto per Internet Explorer e ancora più flessibilità nella progettazione.
Dominio omaggio per un anno