Lezione 2: Struttura della pagina

In questa lezione vedremo insieme quali sono i componenti e le dinamiche definite all'interno del framework. Tramite queste nozioni primitive, vedremo come creare lo scheletro di una pagina in Bootstrap.

La Griglia:

Prima di procedere oltre, dobbiamo formalizzare in che modo le informazioni sono organizzate all'interno di una pagina web Bootstrap. Infatti, per poter gestire correttamente la rimodellazione della pagina in modo da mantenere il paradigma mobile first, Bootstrap si avvale di una struttura a griglia. Maggiori informazioni sono disponibili nella documentazione ufficiale. In dettaglio, attraverso una griglia, sia fissa che fluida possiamo inserire fino a 12 colonne, che saranno automaticamente gestite nelle fasi di adattamento alla risoluzione utilizzata.
La differenza tra le due tipologie di griglia sta nella disposizione degli elementi a video: fissa nel primo caso e a pieno schermo nella seconda. A disposizione del programmatore abbiamo tre oggetti primiti da utilizzare:

container: questi sono gli elementi aggreganti della finestra. In particolare ci permettono di definire una stuttura di tipo div che conterrà gli elementi in modo centralizzato
row: identifica una riga all'interno della pagina
col: identifica una singola colonna all'interno della pagina

Attraverso questi oggetti possiamo "disegnare" la nostra interfaccia. È importante notare l'ordine gerarchico intriseco di questi elementi; in particolare è necessario inscatolare la struttura in modo tale che definiamo il container, che conterrà una riga che a sua volta è formata da colonne.

Attenzione

Nel caso in cui siano definite più di 12 colonne per riga, le colonne in eccesso verranno automaticamente scalate alla riga successiva. Il che ci porterà ad una visualizzazione errata rispetto a quanto voluto.

Una tabella per la giusta taglia:

Come vedremo tra poco negli esempi, Bootstrap ci permette di definire diversi elementi a seconda della risoluzione che vogliamo affrontare. A seconda della dimensione della viewport abbiamo a disposizione i seguenti gruppi:

Per dispositivi con bassa risoluzione (< 768px) il comando col-xs-*
Per dispositivi più larghi (≥ 768px) il comando col-sm-*
Per dispositivi di media risoluzione (≥ 992px) il comando col-md-*
Per dispositivi con alte risoluzioni (≥ 1200px) il comando col-lg-*

La scelta per una corretta risoluzione per una tabella è dettata dalla volontà di linearizzare la stessa o meno a seconda della risoluzione. Ad esempio, utilizzando il comando col-sm-*, le colonne saranno linearizzate su tutti i dispositivi con risoluzione inferiore ai 768px. Viceversa, se si vogliono linearizzere le colonne con risoluzioni al di sotto dei 992px useremo il comando col-md-*; oppure, se si desidera linearizzere le colonne con risoluzioni al di sotto dei 1200px si userà il comando col-lg-*.

esempio:

Aprite Brackets e posizionatevi nella directory di Bootstrap, create un nuovo file e provate a creare delle griglie al suo interno seguendo gli esempi disponbili qui e qui. Per provare gli esempi con il codice disponibile nella pagina utilizzate il seguente scheletro:

<!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">
        <link href="https://getbootstrap.com/docs/3.3/examples/grid/grid.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>

Avete notato qualcosa di diverso rispetto al codice presentato nella precedente lezione? In questo caso vediamo un primo esempio di fogli di stile CSS multipli. Potete visualizzare il contenuto del file css aggiuntivo andando qui. Per una rapida comparazione delle varie tabelle, troverete a questo indirizzo una pagina riassuntiva di comparazione.

Esercizio

Prova a capire cosa cambia se rimuovi l'importazione del fogli di grid.css. Confronta le proprietà aggiunte dal nuovo foglie di stile rispetto al solo foglio di Bootstrap.

Puoi aggiungere porzioni singole di file CSS direttamente all'interno della pagina HTML seguendo il codice indicato di seguito:

    <!-- CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom CSS -->
    <style>
        inserisci le formule CSS qui!
    </style>
</head>