Come realizzare un sito web responsive con Bootstrap

bootstrap guida tutorial

Bootstrap e le sue origini

Se si parla di siti web responsive, non si può non includere nel discorso Bootstrap.

Bootstrap è una raccolta di strumenti liberi per la creazione di siti e applicazioni per il Web. Essa contiene modelli di progettazione basati su HTML e CSS, sia per la tipografia, che per le varie componenti dell’interfaccia, come moduli, pulsanti e navigazione, così come alcune estensioni opzionali di JavaScript.

Bootstrap è stato sviluppato da Mark Otto e Jacob Thornton presso Twitter come un framework che uniformasse i vari componenti che ne realizzavano l’interfaccia web, dato che la presenza di diverse librerie aveva portato ad incoerenze ed elevati oneri di manutenzione.

Nell’agosto 2011 Twitter ha rilasciato Bootstrap come open source, invitando tutti gli sviluppatori a partecipare al progetto e a dare il loro contributo alla piattaforma. Nel febbraio 2012, è stato il progetto di sviluppo che sulla piattaforma GitHub ha ricevuto il maggior numero di apprezzamenti, ottenendo, al febbraio 2018, 122.000 stelle e 58.000 fork.

Bootstrap è compatibile con le ultime versioni di tutti i principali browser.

Dalla versione 2.0 supporta anche il responsive web design. Ciò significa che il layout delle pagine web si regola dinamicamente, tenendo conto delle caratteristiche del dispositivo utilizzato, sia esso desktop, tablet o telefono cellulare. A partire dalla versione 3.0, Bootstrap ha adottato il responsive design come impostazione predefinita, sottolineando il suo essere nata come libreria multidispositivo e multipiattaforma. Con la versione 4.0 uscita recentemente, sono stati apportati notevoli miglioramenti al grid system (quello più usato da chi utilizza il Framework) e maggiore compatibilità cross-browser.

Bootstrap non è l’unico framework di questo tipo, vi sono altre valide alternative, quali BulmaFoundation, Milligram, Pure.css, SemanticUI, UIkit. In questa guida, e in quelle successive, come avrete però ben intuito, noi useremo Bootstrap. (fonte wikipedia)

Riassumento quindi, cos’è Bootstrap? Bootrap è un framework, gratuito, a disposizione di ogni sviluppatore, che mette a disposizione elementi grafici, stilistici, impaginazione e javascript, pronti all’uso, per iniziare fin da subito a costruire i nostri siti web responsive, senza dover scrivere tutto da zero.

 

Iniziare a utilizzare Bootstrap

Bene, dopo questa piccola presentazione di Bootstrap, vediamo come iniziare fare la nostra prima pagina HTML utilizzando questo framework.

Innanzitutto, se ancora non ce l’avete, vi suggerisco di usare scaricare questo editor per le vostre pagine HTML.

Bootstrap richiede che vengano incluse nella pagina un foglio di stile e alcune librerie JavaScript per il funzionamento di alcuni elementi (chiusura di alert, toggle su bottoni, carousel, collapse, dropdown, navbar, tooltip, popovers)

Nell’header della nostra pagina html copieremo quindi questo codice

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Mentre in fondo alla pagina, includeremo queste 3 librerie js

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Ed ecco quindi la nostra pagina HTML iniziale

<!doctype html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Ciao mondo!</title>
  </head>
  <body>
    

    <!-- jQuery, poi Popper.js, infine Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

 

I Container

Come accennato sopra, Bootstrap utilizza un sistema a griglia per gestire il fattore responsive. In pratica, nella pagina html viene inserito un contenitore, la cui larghezza varierà in base alla larghezza della viewport, permettendoci ci scalare gli elementi in esso contenuto, al cambiamento della viewport. Cosa significa? Significa che Bootstrap riconoscerà la larghezza della pagina web contenuta nel browser, e capirà se stiamo guardando il sito da un monitor grande, da un portatile, da un tablet o da un cellulare.

Di predefinito il Contenitore è pensato per un laytout su dispositivi mobile. Successivamente vi sono 4 scaglioni, all’aumentare della larghezza del monitor:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Questa parte di “teoria” che vi sto spiegando, vi servirà per capire le basi su cui si basa il responsive offerto da Bootstrap.

Se quindi ora noi andiamo a inserire nella nostra pagina html il seguente codice

<div class="container">
  <h1>Ciao mondo!</h1>
</div>

avremo creato questo Contenitore responsive, la cui larghezza varierà al variare della larghezza della viewport.

Per capire meglio i cambiamenti che avvengono all’interno della pagina, andiamo a impostare un paio di formattazioni alla pagina.

Aggiungiamo la classe h-100 al tag HTML, body e al container, così che tutti e 3 sfruttino l’altezza totale della pagina (equivale a scrivere height: 100%).

<html lang="it" class="h-100">

<body class="h-100 bg-secondary ">

<div class="container h-100 bg-white">

Inoltre, diamo un colore di sfondo grigio (bg-secondary) al body, e bianco (bg-white) al container.

Aprite ora la pagina HTML con un browser, provate ad allargare e restringere la larghezza della finestra, e vedrete “scattare” il Contenitore.

Nel caso vogliate fare un sito web full-width, così che vi occupi tutta la larghezza della pagina, dovrete inserire un container-fluid invece di un normale container

<div class="container-fluid">
  ...
</div>

 

Grid system

Prima vi ho accennato del sistema a griglia che utilizza Bootstrap. Veiamo nel dettaglio di cosa si tratta.

Il gryd system di Bootstrap utilizza contenitori, righe e colonne per impaginare e allineare i contenuti della pagina, in maniera totalmente responsive.

Il Contenitore, visto poco fa, va a centrarsi nella pagina. Successivamente si inserisce una Riga, e ognuna di queste verrà suddivisa in quante Colonne abbiate bisogno per quella porzione di pagina.

Queste righe qui andranno impostate per ognuno degli scaglioni di devices visto sopra, richiamandoli con dei prefissi: sm per small, md per medium, lg per large, xl per extra large.

Ogni Riga sarà, a prescindere, suddivisa in 12 Colonne. Utilizzando i prefissi delle Colonne potremo indicare quante di queste saranno utilizzate per ogni sezione.

 

bootstrap grid system

 

So che non avrete capito nulla e avrete più confusione che altro, quindi vediamo subito un esempio pratico.

Pensiamo di voler scrivere il Nome, Cognome, e l’indirizzo di un contatto.

Divideremo la Riga (12  colonne) in 3 <div>, uno da 3 colonne (per il nome), uno da 3 colonne (per il cognome), e uno da 6 colonne (per l’indirizzo).

<div class="row">
  <div class="col-3 p-3 border bg-success"><strong>Nome: </strong> Mario</div>
  <div class="col-3 p-3 border bg-danger"><strong>Cognome: </strong> Rossi</div>
  <div class="col-6 p-3 border bg-warning"><strong>Indirizzo: </strong> Via Roma, 34</div>
</div>

Il primo div, quello del Nome, sarà largo 3 colonne (col-3), avrà un padding medio (p-3), un bordo (border) e uno sfondo verde (bg-success)

Il secondo div, quello del Cognome, sarà largo 3 colonne (col-3), avrà un padding medio (p-3), un bordo (border) e uno sfondo rosso (bg-danger)

Il terzo div, quello dell’indirizzo, sarà largo 6 colonne (col-6), avrà un padding medio (p-3), un bordo (border) e uno sfondo giallo (bg-warning)

Se proverete ad aprire la pagina con il vostro browser, vedrete che, da un desktop, sarà visualizzata in questo modo

 

Mentre da cellulare, visto il monitor più stretto, i dati adranno a capo, rendendo illegibile le informazioni

 

Quello che andremo quindi ora a fare, sarà dare una regola aggiuntiva, in modo da far cambiare l’impaginazione tra cellulari (col, e col-sm) e tra tablet e successivi (col-md, col-lg, col-xl).

<div class="container h-100 bg-white">
  <div class="row">
    <div class="col-6  col-md-3  p-3 border bg-success"><strong>Nome: </strong> Mario</div>
    <div class="col-6  col-md-3  p-3 border bg-danger"><strong>Cognome: </strong> Rossi</div>
    <div class="col-12 col-md-6  p-3 border bg-warning"><strong>Indirizzo: </strong> Via Roma, 34</div>
  </div>
</div>

 

Cosa è cambiato?

Impostando i primi due div con col-6, abbiamo semplicemente detto che da cellulare, quei 2 div occuperanno 6 colonne ognuno (quindi una riga intera, dato che ogni riga è composta da 12 colonne), e che il terzo div, l’indirizzo, occuperà tutte e 12 le colonne di una nuova riga.

Poi abbiamo impostato che invece, da tablet (e successivi), con md-3 i primi due campi occuperanno 3 colonne ognuno, e il terzo campo con md-6 ne occuperà 6, per un totale di 12 colonne su una sola riga. Questa impostazione non mostrerà alcun cambiamento di impaginazione rispetto alla precedente per le pagine viste da tablet, portatili e desktop, in quanto già prima la suddivisione in colonne era 3, 3 e 6 per ogni dispositivo.

Quindi, da tablet, notebook, desktop, vedremo sempre

 

 

ma da un cellulare invece, ora vedremo i dati su due righe, nella prima ci saranno i due div del nome e cognome, entrambi da 6 colonne ognuno, e nella seconda riga l’indirizzo, da 12 colonne.

 

 

Riassumendo: Mentre per dispositivi larghi (monitor 1920p, notebook, ecc) si può tranquillamente mettere più componenti su una sola riga, invece per gli smartphone, bisogna sicuramente andare su più righe. Il div del Cognome, ad esempio, che su un monitor largo può occupare 3 delle 12 colonne, su cellulare invece avrà bisogno di essere largo 6 colonne delle 12 disponibili in ogni riga, perché solo 3 colonne di uno smartphone non sarebbero sufficienti.

Il codice finale della pagina è il seguente. Copia-incollatelo in una file vuoto, salvatelo, e apritelo con un browser. Allargate e restringete la finestra del browser per notare il cambiamento di impaginazione nel momento in cui restringerete abbastanza il browser come per simulare il monitor di un cellulare.

 

Trovate la pagina HTML pronta all’uso a questo indirizzo.

 

<!doctype html>
<html lang="it" class="h-100">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>Ciao mondo!</title>


</head>
<body class="h-100 bg-secondary ">
  <div class="container h-100 bg-white">
    <div class="row">
      <div class="col-6  col-md-3  p-3 border bg-success"><strong>Nome: </strong> Mario</div>
      <div class="col-6  col-md-3  p-3 border bg-danger"><strong>Cognome: </strong> Rossi</div>
      <div class="col-12 col-md-6  p-3 border bg-warning"><strong>Indirizzo: </strong> Via Roma, 34</div>
    </div>
  </div>

<!-- jQuery, poi Popper.js, infine Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

 

Nella prossima guida vedremo molti più esempi pratici di come sfruttare il sistema a griglia di Bootstrap per impaginare ogni elemento del nostro sito web.