In questa lezione approfondiremo l’argomento Bootstrap Container che abbiamo accennato nella lezione precedente.
Abbiamo quindi capito che Bootstrap ha un elemento contenitore che racchiude gli elementi di un sito web.
Bootstrap Container
Dunque possiamo adesso distinguere due classi.
Container fluid
La classe container-fluid fornisce un contenitore a larghezza intera, cioè che ricopre l’intera larghezza della finestra a prescindere dalla risoluzione.
Container
La classe container restituisce un contenitore a larghezza fissa.
Questa larghezza cambia a seconda delle dimensioni dello schermo.
Nella scorsa lezione abbiamo parlato di dispositivi con risoluzione extra small, small, medium, large ed extra large.
Dunque la max-width dei container nei dispositivi extra small è comunque del 100%.
Mentre la max-width dei container nei dispositivi smallè di 540px.
Invece la max-widthdei container nei dispositivi mediumè di 720px.
La max-width dei container nei dispositivi largeè di 960px.
La max-width dei container nei dispositivi extra largeè di 1140px.
Container Responsive
Possiamo anche utilizzare le seguenti classi:
La classe container-sm visualizza il contenuto all’interno del container al 100% sui dispositivi extra-small per gli altri dispositivi permangono le stesse proprietà elencate sopra.
Invece la classe container-md visualizza il contenuto all’interno del container al 100%sui dispositivi small e inferiori mentre per gli altri dispositivi permangono le stesse proprietà elencate sopra.
La classe container-lg visualizza il contenuto all’interno del container al 100% sui dispositivi medium e inferiori mentre per gli altri dispositivi permangono le stesse proprietà elencate sopra.
Infine la classe container-xl visualizza il contenuto all’interno del container al 100% sui dispositivi large e inferiori mentre sui dispositivi extra-large permane la stessa proprietà elencata sopra.
Provate ad inserire questi contenitori con le 4 classi diverse e con il bordo in modo da capire il loro comportamento.
Dopo provate ad allargare e restringere la finestra del browser.
<div class="container-md border">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<div class="container-lg border">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<div class="container-xl border">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
Esempio
Facciamo un esempio pratico realizzando una semplice pagina web di esempio.
Notate la disposizione del logo testuale e del menù rispetto alla dimensione della pagina nelle varie risoluzioni.
<!doctype html>
<html lang="it">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Template Bootstrap</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary ">
<div class="container">
<a class="navbar-brand" href="#">Coding Creativo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove siamo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Link utili
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Contatti</a>
<a class="dropdown-item" href="#">Form</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Padding del container
Di default il padding del container impostato è di 15px sia a destra sia a sinistra, senza padding superiore o inferiore.
Per migliorare la leggibilità del testo allora aggiungiamo un padding superiore ed inferiore di 0.5rem (p-2) al primo container mentre al secondo container aggiungiamo un padding superiore di 3rem (pt-5), in questo modo:
Ricordiamo che rem è un’unità di misura relativa che ha il vantaggio di riferirsi alla misura del root e quindi di rendere proporzionali le dimensioni di font, padding e di tanti altri elementi.
In base al valore impostato nel root di Bootstrap 1rem equivale a 16px e così via.
In questa lezione parleremo del Bootstrap grid system.
Infatti quando creiamo una pagina web utilizzando Bootstrap, utilizziamo una struttura a griglia, chiamata grid system. All’interno del grid system sono posizionati i contenuti, chiamati components, suddivisi per colonne.
Questa guida fa riferimento a Bootstrap 4 e la differenza fondamentale è che Bootstrap4 utilizza la flexbox, anziché i float come nella versione 3.
Bootstrap grid system
Gli elementi base del layout di Bootstrap sono i containers.
Questi componenti sono fondamentali per organizzare lo spazio nel sistema a griglie.
Il sistema a griglia di Bootstrap può contenere fino a 12 colonne al massimo.
Quindi immaginiamo una pagina divisa in 12 colonne, dove ciascuna colonna può avere una dimensione che va da 1/12 fino a 12/12. Ovviamente in quest’ultimo caso si avrà una sola colonna che occupa tutto lo spazio disponibile.
Il sistema a griglia di Bootstrap come abbiamo già detto è responsive e le colonne si riorganizzeranno in base alle dimensioni dello schermo.
Quindi su un grande schermo potrebbe apparire migliore con il contenuto organizzato ad esempio in tre colonne, ma su un piccolo schermo sarebbe meglio se gli elementi di contenuto fossero impilati uno sopra l’altro.
Esempio grid system
Dunque, per iniziare creiamo semplicemente un contenitore con una classe container e utilizziamo le righe per creare gruppi orizzontali dove inserire un numero variabile di colonne.
Quindi ogni riga deve essere posizionata all’interno del container. Nel nostro esempio utilizziamo la classe predefinita row per ciascuna riga.
Inoltre ciascun contenuto deve essere posizionato all’interno delle colonne e solo le colonne possono essere figlie immediate delle righe.
Facciamo subito un esempio inserendo dopo nav questo codice:
<div class="container">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
Il vantaggio nell’uso delle flexbox è che le colonne della griglia senza una larghezza specificata avranno automaticamente uguale larghezza e altezza.
Quindi se ad esempio impostiamo tre colonne con col-sm saranno larghe automaticamente ciascuna il 33,33% della larghezza del dispositivo fino a schermi a partire da 576px.
Il risultato sarà dunque un layout con tre colonne di uguale larghezza nella versione desktop mentre nella versione su schermo ridotto le colonne saranno impilate una sotto l’altra.
Le larghezze delle colonne sono espresse in percentuale, quindi sono sempre fluide e dimensionate rispetto al loro elemento padre.
Prefissi delle classi
Ci sono dei prefissi che stabiliscono la modalità di visualizzazione delle colonne basate sulle media query. Ho trattato l’argomento sulle media query in questo link: https://www.codingcreativo.it/css-responsive/.
Questi prefissi stabiliscono i breakpoint ovvero la dimensione minima che crea il cambiamento delle colonne.
Dispositivi extra small dimensione in pixel minori di 576px. Smartphone con visualizzazione verticale (portrait).
Dispositivi smalldimensione in pixel maggiore o uguale di 576pxma minore di 768px. Smartphone con visualizzazione orizzontale (landscape).
Dispositivi medium dimensione in pixel maggiore o uguale di 768pxma minore di 992px. Tablet.
Dispositivi large dimensione in pixel maggiore o uguale di 992pxma minore di 1200px. Laptop.
Dispositivi extra large dimensione in pixel maggiore o uguale di 1200px. Laptop e desktop.
Quindi se consideriamo le classi:
.col-le colonne sono sempre impostate le une accanto alle altre, si va a capo in maniera automatica.
.col-smle colonne si visualizzano una accanto all’altra a partire dai dispositivi small, dunque solo negli extra-small le colonne sono impilate una sull’altra.
.col-md le colonne si visualizzano una accanto all’altra a partire dai dispositivi medium, dunque nei dispositivi inferiori le colonne sono impilate una sull’altra.
.col-lg le colonne si visualizzano una accanto all’altra a partire dai dispositivi large, mentre nei dispositivi inferiori le colonne sono impilate una sull’altra.
.col-xl le colonne si visualizzano una accanto all’altra a partire dai dispositivi extra-large, invece nei dispositivi inferiori le colonne sono impilate una sull’altra.
Si può indicare anche il numero delle colonne. Ad esempio:
.col-md-3
In questo caso si possono sistemare 4 colonne (12/3=4) su una stessa riga.
In questa lezione abbiamo parlato di Bootstrap grid system nella prossima lezione approfondiremo i containers.
Si può allineare il menù anche partendo dal lato opposto, ovvero dall’ultima voce, basterà dunque assegnare la classe flex-row-reverse ad ul in questo modo:
Abbiamo personalizzato il Bootstrap Nav esaminando alcune classi utili a posizionare gli elementi del nostro menù, nella prossima lezione studieremo ancora altre classi per personalizzare la nostra nav.
In questa lezione parliamo di Bootstrap navbar, ovvero in definitiva aggiungiamo al template di Bootstrap una navbar, cioè un menù di navigazione.
Perciò analizziamo i vari componenti che abbiamo a disposizione con il nostro framework.
Andiamo sul sito https://getbootstrap.com, scegliamo Documentation e poi Components, come da figura sotto:
Noterete quindi che i componenti sono suddivisi in categorie e per poterli utilizzare occorre semplicemente cliccare sulle categorie desiderate e copiare il codice che ci interessa.
Bootstrap navbar
Per inserire il menù di Bootstrap quindi selezioniamo il componente Navbar e scegliamo la configurazione che vogliamo. Io ad esempio ho scelto questa della figura sotto, senza la casella di ricerca:
Per ragioni di accessibilità si utilizza il tag semantico nav, al fine di contraddistinguere la barra di navigazione al posto del generico tag div.
A questo tag e agli altri ad esso dipendenti sono associati delle classi e queste classi stabiliscono dunque il comportamento e l’aspetto della nostra navbar.
navbar
Il tag nav di bootstrap è caratterizzato da alcune classi tra cui navbar, che rappresenta quindi la classe di default.
navbar-expand-lg
La barra dei menù è chiaramente responsive e può essere estesa o compressa in base alla dimensione dello schermo.
Con la classe navbar-expand-lg il menù diventa compresso su schermi inferiori a 992px, utilizzando invece navbar-expand-md il menù diventa compresso su schermi inferiori a 768px e con navbar-expand-sm il menù diventa compresso su schermi inferiori a 576px. Infine si può utilizzare anche navbar-expand-xl dove il menù diventa compresso su schermi inferiori a 1200px ma questa classe è meno utilizzata.
navbar-light
Con questa classe otteniamo il testo di colore nero, analogamente per ottenere il testo bianco si utilizza navbar-dark.
bg-ligth
Questa classe serve per impostare il colore di sfondo di un grigio chiaro, ma possiamo impostare anche altri valori.
Elenco dunque alcune classi che possono essere assegnate alla Bootstrap navbar nella tabella sotto:
Proprietà
Effetto
bg-dark
sfondo nero
bg-primary
sfondo blu
bg-secondary
sfondo grigio scuro
bg-success
sfondo verde
bg-warning
sfondo arancione
bg-danger
sfondo rosso
bg-info
sfondo azzurro
bg-white
sfondo bianco
Chiaramente si può anche impostare uno sfondo personalizzato, ad esempio in questo modo:
Il bottone con le tre linee è di tipo toggle (viene anche detto comunemente hamburger), l’immagine del bottone si chiama toggle icon.
Le voci dei menù sono aggiunte come punti elenco, usando i tag ul ed li.
Al tag ul è assegnata la classe Bootstrap navbar-nav mentre al tag il la classe nav-item. Infine, al tag per il collegamento ipertestuale a è assegnata la classe nav-link.
Usando queste classi si ha l’effetto hover sul testo, il padding tra le varie voci del menù e anche la disposizione automatica in verticale del menù se si riduce la finestra. Chiaramente è possibile cambiare queste proprietà dal foglio di stile.
Nella prossima lezione studieremo come personalizzare la Bootstrap navbar che abbiamo creato.
In questa lezione realizzeremo il nostro primo semplice Bootstrap template.
Nella lezione precedente abbiamo scaricato la cartella con i sorgenti e abbiamo rinominato la cartella bootstrap per comodità.
Lavoriamo dunque all’interno di questa cartella.
Chiaramente quando andremo a creare un sito web rinomineremo questa cartella in maniera opportuna.
Ad esempio se dovessi realizzare il sito web di coding creativo allora rinominerei la cartella codingcreativo e all’interno avrei la cartella css e js con i relativi file.
Come da figura sotto:
Bootstrap template
Dunque creiamo il primo semplice template andando ad utilizzare anche notepad o qualsiasi web-editor a voi più comodo.
Digitando dunque il codice html necessario per creare la struttura di base di una pagina web.
Quindi tra i tag head inseriamo il collegamento al nostro file bootstrap CSS scegliendo la versione minimizzata.
Mentre prima della chiusura di body inseriamo il collegamento al file bootstrap js sempre scegliendo la versione minimizzata.
Ora salviamo il file con il nome di index.html e per vedere se abbiamo installato correttamente bootstrap andiamo ad inserire due paragrafi all’interno del body dove scriveremo del testo qualsiasi.
Al primo paragrafo non assegniamo nessuna classe, mentre al secondo assegniamo le classi di bootstrap bg-primary e text-white che servono ad impostare rispettivamente il colore del paragrafo blu ed il colore del testo bianco.
Provate la pagina index.html nel vostro browser per testare il corretto funzionamento del framework.
In questa lezione abbiamo dato le basi per la creazione del bootstrap template, nella prossima lezione lo andremo a personalizzare aggiungendo i vari componenti.
