Tutorial di base Bootstrap4

Modale Bootstrap4 Moduli Personalizzati Bootstrap4

Carrousel Bootstrap4

Un carosello (noto anche come presentazione a schermo intero o slider di immagini) è uno dei modi migliori per visualizzare una grande quantità di contenuti in uno spazio molto piccolo sul web. È una rappresentazione dinamica dei contenuti, dove, navigando tra diversi elementi, l'utente può vedere o accedere a testi e immagini.

Un carosello è una presentazione a schermo intero (indirizzo:https://it.oldtoolbag.com/run/html/bootstrap-carousel-example.html)

Come creare un carosello

Ecco un esempio di creazione di un semplice effetto di carosello di immagini :

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　/* Rendere l'immagine completamente responsive */
　　.carousel-inner img {
　　　　　　larghezza: 100%;
　　　　　　altezza: 100%;
　　}
　　</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
　
　　<!-- Indicatore -->
　　<ul class="carousel-indicators">
　　　　<li data-target="#demo" data-slide-to="0" class="active"></li>
　　　　<li data-target="#demo" data-slide-to="1"></li>
　　　　<li data-target="#demo" data-slide-to="2"></li>
　　</ul>
　
　　<!-- Immagini di rotazione -->
　　<div class="carousel-inner">
　　　　<div class="carousel-item active">
　　　　　　<img src="https://it.oldtoolbag.com/run/images/slide01.png">
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://it.oldtoolbag.com/run/images/slide02.png">
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://it.oldtoolbag.com/run/images/slide03.png">
　　　　</div>
　　</div>
　
　　<!-- Bottone di scorrimento sinistra-destra -->
　　<a class="carousel-control-prev" href="#demo" data-slide="prev">
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a class="carousel-control-next" href="#demo" data-slide="next">
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>

Testa per vedere ›/›

Aggiungi una descrizione alle immagini del carosello

Aggiungi una descrizione per ogni <div aggiungi <div> all'interno di <class="carousel-item"> per impostare il testo descrittivo delle immagini di carosello::

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　/* Rendere l'immagine completamente responsive */
　　.carousel-inner img {
　　　　　　larghezza: 100%;
　　　　　　altezza: 100%;
　　}
　　</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
　
　　<!-- Indicatore -->
　　<ul class="carousel-indicators">
　　　　<li data-target="#demo" data-slide-to="0" class="active"></li>
　　　　<li data-target="#demo" data-slide-to="1"></li>
　　　　<li data-target="#demo" data-slide-to="2"></li>
　　</ul>
　
　　<!-- Immagini di rotazione -->
　　<div class="carousel-inner">
　　　　<div class="carousel-item active">
　　　　　　<img src="https://it.oldtoolbag.com/run/images/slide01.png">
　　　　　　<div class="carousel-caption">
　　　　　　　　<h2>Titolo della descrizione dell'immagine prima</h2>
　　　　　　　　<p>Testo descrittivo!</p>
　　　　　　</div>
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://it.oldtoolbag.com/run/images/slide02.png">
　　　　　　<div class="carousel-caption">
　　　　　　　　<h2>Titolo della descrizione dell'immagine seconda</h2>
　　　　　　　　<p>Testo descrittivo!</p>
　　　　　　</div>
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://it.oldtoolbag.com/run/images/slide03.png">
　　　　　　<div class="carousel-caption">
　　　　　　　　<h2>Titolo della descrizione dell'immagine terza</h2>
　　　　　　　　<p>Testo descrittivo!</p>
　　　　　　</div>
　　　　</div>
　　</div>
　
　　<!-- Bottone di scorrimento sinistra-destra -->
　　<a class="carousel-control-prev" href="#demo" data-slide="prev">
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a class="carousel-control-next" href="#demo" data-slide="next">
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>

Testa per vedere ›/›

Descrizione della classe utilizzata nell'esempio sopra

Classe	Descrizione
.carousel	Crea un carrousel
.carousel-indicators	Aggiungi un indicatore di carrousel, sono i punti sotto il carrousel, che mostrano quale immagine è attualmente visibile.
.carousel-inner	Aggiungi l'immagine da passare
.carousel-item	Specificare il contenuto di ogni immagine
.carousel-control-prev	Aggiungi un pulsante di sinistra, facendo clic su cui torni all'immagine precedente.
.carousel-control-next	Aggiungi un pulsante di destra, facendo clic su cui passi alla prossima immagine.
.carousel-control-prev-icon	Usa insieme a .carousel-control-prev per impostare il pulsante di sinistra
.carousel-control-next-icon	Usa insieme a .carousel-control-next per impostare il pulsante di destra
.slide	Cambia l'effetto di transizione e animazione dell'immagine, se non ne hai bisogno, puoi rimuovere questa classe.

Modale Bootstrap4 Moduli Personalizzati Bootstrap4