Inizializzazione

Introduzione

Prima di poter utilizzare Bootstrap è necessario includerne il codice.

In aggiunta al nostro CSS main.css aggiungiamo anche il CSS di Bootstrap.

Il tag HTML link viene inserito nella sezione <head> della pagina come segue.

<head>
  ... 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  ...
</head>

L'attributo href fa riferimento all'URL della rete da cui recuperare la risorsa https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css.

Aprite la pagina web così come è, ridimensionatela e notate quanto segue:

Gli elementi della barra di navigazione non cambiano posizione cambiando le dimensioni della pagina.
Il testo "Homemade Gods" compare sempre sul lato piu' a sinistra della pagina.
Le immagini aumentano di dimensione quando la finestra viene ampliata.
Le icone dei social networks ai piedi della pagina sono disorganizzate.

Ora includiamo Bootstrap e vediamo come cambia il layout della pagina.

Nel file HTML individuate il tag head. Al suo interno create un tag link per puntare al CSS di Bootstrap:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

Provate ora a cambiare la dimensione della finestra del browser, noterete i seguenti cambiamenti:

Gli elementi della barra di navigazione cambiano posizione in funzione della dimensione della finestra.
Il testo "Homemade Goods" è ora centrato
Le immagini sono organizzate due per riga quando la finestra supera una certa larghezza.
Le icone dei social media sono ben organizzate e cambiano posizione.

Il sistema a griglia di Bootstrap è ciò che permette questo cambiamento di layout al variare delle dimensioni della finestra, è responsivo.