Bootstrap è un framework frontend che permette agli svi­lup­pa­to­ri di creare dei siti di varia natura, adatti per diversi di­spo­si­ti­vi. Per questo scopo il progetto open source offre diversi modelli di pro­get­ta­zio­ne basati su HTML e CSS, oltre che esten­sio­ni opzionali di Ja­va­Script. Ori­gi­na­ria­men­te Twitter ha ideato Bootstrap come strumento aziendale per l’uni­for­ma­zio­ne dei design, ma ha poi ri­la­scia­to il framework nell’agosto 2011 sulla piat­ta­for­ma 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ì in­te­res­san­te

Grazie ai modelli in HTML e CSS non c’è bisogno di co­min­cia­re da zero per svi­lup­pa­re un nuovo sito. Come nei siti già pronti, avete a di­spo­si­zio­ne dei contenuti già pre­con­fe­zio­na­ti da integrare nel vostro documento HTML. Così non dovete pre­oc­cu­par­vi delle in­nu­me­re­vo­li e stres­san­ti con­fi­gu­ra­zio­ni CSS e ciò vi farà ri­spar­mia­re tempo prezioso. Bootstrap si occupa, tra gli altri, dei seguenti elementi:

  • Pulsanti
  • Elementi di na­vi­ga­zio­ne
  • Thumbnail (la miniatura di un’immagine)
  • Menu a tendina
  • In­di­ca­zio­ni degli errori
  • Brea­d­crumb (in­di­ca­zio­ne della propria posizione sulla pagina)
  • In­te­gra­zio­ne di video re­spon­si­ve, cioè adatti per diversi di­spo­si­ti­vi

Un altro im­por­tan­te com­po­nen­te è il layout a griglia di Bootstrap (Bootstrap Grid Layout). Questo sistema permette di stabilire esat­ta­men­te le distanze e il po­si­zio­na­men­to di singoli elementi del sito, dividendo il layout in 12 colonne. Nella griglia del layout potete ordinare gli elementi e dividerli tra le diverse di­men­sio­ni degli schermi, in­di­pen­den­te­men­te che siano quelle del computer di casa, del cellulare, del tablet o di un netbook. Con Bootstrap avete tutto il ne­ces­sa­rio per svi­lup­pa­re un re­spon­si­ve web design.

Con i plug-in opzionali di Ja­va­Script, che si basano sul framework di Ja­va­Script jQuery, integrate al vostro progetto anche degli utili elementi per le in­ter­fac­ce utente come tooltip e finestre di dialogo o ampliate le funzioni degli elementi già di­spo­ni­bi­li, ad es. tramite la funzione di au­to­com­ple­ta­men­to per i campi di input. Per uti­liz­za­re Bootstrap con elementi Ja­va­Script, inserite sem­pli­ce­men­te la bi­blio­te­ca jQuery nel documento HTML.

Bootstrap: download e primi passi

Dato che Bootstrap è stato ri­la­scia­to da Twitter come framework libero, non ci sono costi per il download o per l’utilizzo. Grazie al codice di pro­gram­ma­zio­ne di­spo­ni­bi­le li­be­ra­men­te, gli svi­lup­pa­to­ri esperti hanno la pos­si­bi­li­tà di adattare il framework alle proprie esigenze. In questa guida scoprite quali passaggi sono necessari per poter uti­liz­za­re i modelli già pronti in CSS e Ja­va­Script di Bootstrap.

  1. Visitate la pagina ufficiale get­boo­tstrap.com e scaricate il pacchetto “Bootstrap” (nella versione standard o minimale) che comprende i file CSS e Ja­va­Script, i font e i temi opzionali di Bootstrap.
     
  2. Estraete i file e spostate la cartella Bootstrap nella directory de­si­de­ra­ta del vostro sistema. 

  3. Qui ci sono tre sot­to­car­tel­le “css“, “fonts“ e “js“. Nella cartella “font” si trovano più di 250 icone sotto forma di caratteri, pro­ve­nien­ti dal sito Gly­phi­cons Halflings e di­spo­ni­bi­li gra­tui­ta­men­te per Bootstrap. Per una maggiore com­pren­sio­ne vi spie­ghia­mo uno ad uno det­ta­glia­ta­men­te i file nelle cartelle “css” e “js”:

    • bootstrap.css: codice CSS leggibile in­te­ra­men­te
    • bootstrap.min.css: codice CSS ridotto; i contenuti ir­ri­le­van­ti come spazi vuoti vengono eliminati per per­met­te­re l’in­ter­pre­ta­zio­ne 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 mi­ni­miz­za­to del tema
    • bootstrap-theme.css.map: tema Source Maps
    • bootstrap.js: codice Ja­va­Script leggibile in­te­ra­men­te
    • bootstrap.min.js: codice Ja­va­Script mi­ni­miz­za­to

  4. Per uti­liz­za­re elementi Ja­va­Script, scaricate in aggiunta anche la ricca bi­blio­te­ca di Ja­va­Script jQuery su jquery.com.

  5. Quando tutti i com­po­nen­ti sono pronti, può iniziare il vero lavoro con il framework. Per esempio in questa guida creiamo una pagina HTML di benvenuto che poi tra­sfor­me­re­mo in un template di Bootstrap.

  6. 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 vi­sua­liz­za­zio­ne ottimale del sito su di­spo­si­ti­vi mobili.

  1. Salvate il progetto sul desktop come “basic.html”.

  2. Per rendere questo tipico file HTML un template di Bootstrap, dovete im­ple­men­ta­re nel codice HTML i file CSS e Ja­va­Script di Bootstrap. Qui inserite la directory in cui si trova la cartella. Si consiglia di integrare Ja­va­Script verso la fine nel body del documento per evitare di pro­lun­ga­re i tempi di ca­ri­ca­men­to 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>
  1. 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).

  2. Ora potete creare il vostro template a seconda dei vostri gusti. Sulla pagina ufficiale trovate anche i diversi codici per la ti­po­gra­fia, i pulsanti, il sistema di griglia Bootstrap, ecc.

Le co­no­scen­ze in­for­ma­ti­che sono un requisito im­por­tan­te

Anche se Bootstrap mette a di­spo­si­zio­ne dei contenuti già pronti, senza co­no­scen­ze HTML e CSS non riu­sci­re­te a sfruttare appieno il framework. Vale la pena mettere in conto un tempo di adat­ta­men­to, anche nel caso di esperti svi­lup­pa­to­ri. Al momento ci sono diversi template creati con Bootstrap da altri utenti, sca­ri­ca­bi­li gra­tui­ta­men­te o a pagamento e che vi tolgono una buona parte del lavoro. Chi lavora re­go­lar­men­te con HTML, CSS e Ja­va­Script, imparerà ve­lo­ce­men­te ad ap­prez­za­re i vantaggi del framework. Qui emergono so­prat­tut­to:

  • l’enorme risparmio di tempo,
  • le buone pos­si­bi­li­tà per svi­lup­pa­re un re­spon­si­ve web design,
  • ag­gior­na­men­ti regolari e supporto da parte della vasta community
  • e do­cu­men­ta­zio­ne di prima qualità pronta per l’uso.

Oltre al fatto che si tratta di un progetto open source, tutti questi fattori con­tri­bui­sco­no a rendere Bootstrap uno dei framework più popolari nell’ambito del web design.

Vai al menu prin­ci­pa­le