Quando si tratta di mettere mano al codice, usare un framework come Bootstrap comporta essenzialmente la definizione di specifici componenti nel codice HTML attraverso la corretta strutturazione del markup e l'associazione agli elementi HTML di classi e stili CSS. Prima, però, è opportuno crearsi una sorta di scheletro, una struttura HTML di partenza per tutte la pagine del sito. Potrà chiaramente variare in base alle richieste di questo o quel progetto, ma una base minima e condivisa si può trovare.
Nella documentazione di Bootstrap viene suggerito di utilizzare questo snippet di codice HTML come template di base:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>Con qualche lieve modifica rispetto all'originale, noi suggeriamo questo (i cambiamenti sono ispirati a soluzioni come l'HTML5 Boilerplate). È la base che abbiamo usato nelle pagine del nostro progetto.
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" ><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" ><!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Starter Template</title>
<!-- Fogli di stile -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/stili-custom.css" rel="stylesheet" media="screen">
<!-- Modernizr -->
<script src="js/modernizr.custom.js"></script>
<!-- respond.js per IE8 -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery e plugin JavaScript -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>Analizziamo i punti salienti:
- Il DOCTYPE deve essere quello HTML5.
- Rispetto all'originale sono state incluse le classi condizionali per Internet Explorer a livello del tag
<html>, tenendo come riferimento unicamente IE8. - Nella sezione
<head>, l'istruzione<meta http-equiv="X-UA-Compatible" content="IE=edge">forza il browser di Microsoft a usare la modalità di rendering più avanzata, dal momento che il framework non supporta la modalità di compatibilità. - L'uso del meta tag
viewportè fondamentale. Lavoriamo, lo ricordiamo, con un framework responsivo per default. - Passando ai fogli di stile, è opportuno sin dall'inizio collegare, oltre al CSS principale di Bootstrap, un CSS che ospiterà gli stili aggiuntivi, oltre che le regole con cui andremo a sovrascrivere e/o modificare gli stili predefiniti del framework.
- Al posto dell'HTML5 Shiv per Internet Explorer suggerito dagli sviluppatori, abbiamo preferito adottare direttamente Modernizr, che comprende questo script ed è un eccellente ausilio in svariati contesti.
- Della funzione di
respond.jsabbiamo già parlato nella lezione sul supporto dei browser. Basterà inserirlo all'interno di un commento condizionale per servirlo all'unico browser che ne ha bisogno, ovvero Internet Explorer 8. - In fondo, prima della chiusura del
<body>l'inserimento di jQuery e il collegamento al file con i plugin Javascript.
A questo punto, per ogni pagina che andremo a creare, sappiamo come e da dove iniziare. Procediamo.