In questa lezione parleremo di Bootstrap images e quindi di come Bootstrap tratta le immagini in maniera responsive.
Ricordiamo che con il termine responsive si intende che il contenuto è ridimensionato in maniera automatica alla dimensione del display.
Bootstrap images
Utilizzando il tag img e la classe img-fluid, l’immagine si visualizza correttamente su tutti i dispositivi.
Realizziamo dunque un esempio utilizzando il tag semantico figure e figcaption.
Inserite questo codice nella vostra pagina web, anche dopo il tag di chiusura nav. Chiaramente al posto di img/img-2.jpg inserite il nome della vostra immagine.
Esempio d’uso di Bootstrap images:
<div class="container pt-5">
<div class="row">
<div class="col-sm-6">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-6">
<figure class="figure">
<img src="img/img-2.jpg" class="figure-img img-fluid" alt="sfondo">
<figcaption class="figure-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
</div>
</div>
</div>Nella riga, all’interno dell’apposito container, abbiamo inserito due colonne, infatti utilizziamo la classe col-sm-6. Nella prima colonna inseriamo il testo segnaposto utilizzato come testo di esempio, mentre nella seconda inseriamo l’immagine scelta.
Ricordiamo che con col-sm le colonne si visualizzano una accanto all’altra a partire dai dispositivi small, come descritto nell’articolo sul grid system: Bootstrap grid system.
All’immagine diamo le classi figure-img e img-fluid, quest’ultima come abbiamo detto prima garantisce una corretta visualizzazione su tutti i dispositivi.
Per inserire un’immagine con bordi arrotondati basta inserire sempre all’interno di img la classe rounded.
Se poi desideriamo racchiudere l’immagine in un cerchio utilizziamo invece la classe rounded-circle.
La classe img-thumbnail serve a dare un bordo di 1px.
Facciamo dunque un esempio d’uso di Bootstrap images:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Template Bootstrap</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background:#3f675e">
<div class="container p-2">
<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 id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" >
<div class="carousel-item active" >
<img src="img/slide-1.jpg" class="d-block w-100" alt="coding" >
</div>
<div class="carousel-item">
<img src="img/slide-5.jpg" class="d-block w-100" alt="fare coding">
</div>
<div class="carousel-item">
<img src="img/slide-3.jpg" class="d-block w-100" alt="coding a scuola">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container pt-5">
<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 pt-5">
<div class="row">
<div class="col-sm-6">
<figure class="figure">
<img src="img/img-1.jpg" class="figure-img img-fluid rounded" alt="immagine di sfondo">
<figcaption class="figure-caption">Titolo immagine</figcaption>
</figure>
</div>
<div class="col-sm-6">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm-6">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-6">
<figure class="figure">
<img src="img/img-2.jpg" class="figure-img img-fluid img-thumbnail" alt="sfondo">
<figcaption class="figure-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
</div>
</div>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm-3">
<figure class="figure">
<img src="img/farfalla.jpg" class="figure-img img-fluid rounded-circle" alt="immagine di sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure class="figure">
<img src="img/img2.jpg" class="figure-img img-fluid rounded-circle" alt="sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure class="figure">
<img src="img/img3.jpg" class="figure-img img-fluid rounded-circle" alt="sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure class="figure">
<img src="img/img4.jpg" class="figure-img img-fluid rounded-circle" alt="sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</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>Potete provare l’esempio completo al seguente link: esempio Bootstrap images.
Nel vostro browser visualizzerete una serie di immagini distribuite su colonne che si adattano in maniera automatica a tutti i dispositivi. Provate dunque la pagina nelle diverse risoluzioni.
Nelle prossime lezioni parleremo ancora di come gestire le immagini in Bootstrap e di come inserire degli effetti.
Link utili
Indice argomenti tutorial Bootstrap
2 – Creazione del primo template
4 – Personalizzare la posizione del menù
5 – Come utilizzare il grid system
7 – Inserire lo slideshow di immagini con Carousel
8 – Come utilizzare le Bootstrap images