Bootstrap 101:
Bootstrap è uno tra i framework front end più popolari; oltre ad essere intuitivo, ci permette di creare velocemente portali responsive e mobile first. Tramite l'uso di semplici pagine HTML, CSS e Javascript vedremo come ci sarà possibile creare agilmente il vostro progetto.
Il primo passo è configurare il nostro ambiente Bootstrap. Per farlo, è necessario che scarichiate il pacchetto precompilato disponibile sul
portale ufficiale. Al momento l'ultima versione ufficiale disponibile è la
3.3.7, la quale verrà utilizzata per lo svolgimento delle lezioni di questo tutorato. Trovate
qui il link diretto per scaricare la versione compilata del framework.
Una volta decompresso l'archivio vi trovere la seguente struttura:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2"
Questa è la forma base del framework. Come potete vedere sono presenti numerosi file CSS e Javascript
bootstrap.* oltre che alle versioni minified (ridotte) degli stessi, contrassegnati come
bootstrap.min*.
A questo punto possiamo creare la nostra prima pagina web del sito. Come avrete notato, al momento non è presente nessuna pagina all'interno della directory di Bootstrap. Generalmente, come visto a lezione, una pagina web è definita attraverso l'utilizzo di diversi
tag:
- "DOCTYPE" che definisce il tipo di documento che verrà interpretato dal browser
- il tag <html> che delimita tutti gli elementi della nostra pagina
- il tag <head> che delimita l'area di definizione dei riferimenti della pagina, come il titolo, l'autore, i fogli di stile ecc
- ed il tag <body> che conterrà tutto il contenuto effettivamente visualizzato nella pagina web
esempio:
Aprite Brackets e posizionatevi nella directory di Bootstrap, create un nuovo file
test.html ed incollate al suo interno il codice sottostante. Salvate le modifiche al file e avviate l'anteprima live attraverso il comando a
'saetta' in alto a destra (alternativamente è possibile usare la shortcut
Ctrl + Alt + P)
<!DOCTYPE html>
<html lang="it">
<head>
<title>Tutorato Web Design</title>
</head>
<body>
<h1>Questo testo viene visualizzato nella pagina</h1>
</body>
</html>
Complimenti! Abbiamo appena realizzato la nostra prima pagina di prova. Vediamo cosa dobbiamo aggiungere per poter integrare Bootstrap.
Ricordate cosa abbiamo detto all'inizio? Per poter utilizzare Bootstrap avremo bisogno di aggiungere oltre all'HTML anche i relativi CSS - i cosidetti fogli di stile - ed i necessari script in Javascript. Per farlo dobbiamo lavorare all'interno dell'head della pagina ed aggiungere i tag mancanti.
Mobile first:
Dal momento che Bootstrap supporta il paradigma mobile first, dobbiamo tener conto che all'interno del file CSS di definizione avremo diverse possibilità di dimensionamento per gli elementi. Per essere certi del correto rendering degli stessi e delle funzionalità di zoom, utilizzeremo dunque il meta-tag
viewpoint. Per maggiori informazioni sull'utilizzo di questo particolare tag, potete consultare questo
approfondimento oppure direttamente la
documentazione di Bootstrap. Per quanto riguarda i nostri esempi, sarà sufficiente inserire il seguente comando:
<meta name="viewport" content="width=device-width, initial-scale=1">
Mediante l'utilizzo di questo comando, comunichiamo al browser di impostare la larghezza della viewport in base alla dimensione del dispositivo (responsive) e di basare lo stesso come inizio della scala di zoom. Per farlo possiamo ad esempio utilizzare i comandi
minimum-scale, maximum-scale o direttamente disabilitare le funzioni di zoom attraverso il comando
user-scalable=no.
Fogli di stile:
A questo punto possiamo importare o definire delle proprietà dette "di stile" per la pagina. Queste vengono utilizzate dal browser per arricchire la pagina con gli elementi grafici definiti nei vari tag. Torneremo su questo argomento nelle prossime lezioni, al momento ci occuperemo solo di inserire il foglio predefinito di Bootstrap attraverso il seguente comando:
<link rel="stylesheet" href="css/bootstrap.css">
Una proprietà interessante dei fogli di stile è l'importazione multipla di fogli per facilitare la distrubizione dei temi. Ad esempio, vedremo nelle prossime lezioni come modificare alcuni comportamenti definiti all'interno di
bootstrap.css.
Informazioni sulla pagina:
Abbiamo già avuto modo di vedere un comando appartenente a questo gruppo di proprietà, si tratta del comando <title> che ci permette di definire un titolo da visualizzare sulla scheda della pagina. Queste informazioni fanno parte dei comandi
Meta, che si compongono di una coppia nome/valore da inserire all'interno dei tag head. Ad esempio, possiamo specificare l'autore e una descrizione per ogni pagina, attraverso l'uso dei seguenti comandi:
<title>Tutorato Web Design</title>
<meta name="description" content="Descrizione della pagina">
<meta name="author" content="Nome Cognome">
Per ulteriori approfondimenti sui comandi Meta potete consultare il seguente
indirizzo e la documentazione della
w3schools.
Script:
Con l'aumento delle prestazioni e delle risorse di computazione a disposizione dei moderni browser, oggi possiamo integrare degli script all'interno delle nostre pagine web. Questi ci permettono di caricare ed utilizzare in modo dinamico delle applicazioni all'interno delle pagine (embed). Un esempio? Possiamo utilizzare degli highliter di sintassi web come
hightlitht.js. Ovviamente anche Bootstrap ha integrati dei suoi script, contenuti all'interno della directory
js del pacchetto. Per importarli correttamente all'interno della pagina è necessario inserirli dopo la chiusare del tag <head> attraverso il tag <script> come indicato qui sotto:
<script src="js/bootstrap.js"></script>
Ulteriori informazioni disponibili
qui.
In breve
A questo punto abbiamo tutto il necessario per creare la nostra pagina web in Bootstrap che sarà simile a questo codice:
<!DOCTYPE html>
<html lang="it">
<head>
<!-- Viewport -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tag META -->
<title>Tutorato Web Design</title>
<meta name="description" content="Descrizione della pagina">
<meta name="author" content="Nome Cognome">
...
<!-- CSS -->
...
<link href="css/bootstrap.css" rel="stylesheet">
...
</head>
<body>
<!-- Inserite qui i contenuti della pagina web -->
...
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>