Tutorial di base di Bootstrap

Plugin di Bootstrap

Avvisi Bootstrap Titolo di Pagina Bootstrap

Anteprime Bootstrap

Questo capitolo spiega Bootstrap Thumbnail. La maggior parte dei siti deve disporre di immagini, video, testi e altri elementi in una griglia. Bootstrap offre un modo semplice per farlo. Ecco come creare thumbnail con Bootstrap:

Aggiungi una classe intorno all'immagine .thumbnail l'etichetta <a>.
Questo aggiunge un margine interno (padding) di quattro pixel e un bordo grigio.
Quando il mouse è sopra l'immagine, viene visualizzato l'animazione del contorno dell'immagine.

Ecco un esempio che dimostra l'anteprima predefinita:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Esempio Bootstrap - Anteprima</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
　　　　<div class="col-sm-6 col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Anteprima di segnaposto universale">
　　　　　　　　</a>
　　　　</div>
　　　　<div class="col-sm-6 col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Anteprima di segnaposto universale">
　　　　　　　　</a>
　　　　</div>
　　　　<div class="col-sm-6 col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Anteprima di segnaposto universale">
　　　　　　　　</a>
　　　　</div>
　　　　<div class="col-sm-6 col-md-3">
　　　　　　　　<a href="#" class="thumbnail">
　　　　　　　　　　　　<img src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Anteprima di segnaposto universale">
　　　　　　　　</a>
　　　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

I risultati sono come segue:

Aggiungi contenuti personalizzati

Ora abbiamo una anteprima di base, possiamo aggiungere vari contenuti HTML alla anteprima, come titoli, paragrafi o pulsanti. I passaggi specifici sono i seguenti:

con la classe .thumbnail l'etichetta <a> viene sostituita con <div>.
All'interno di questo <div>, è possibile aggiungere qualsiasi cosa si desideri. Poiché questo è un <div>, possiamo utilizzare le regole di nomina di base basate su span per regolare la dimensione.
Se si desidera raggruppare più immagini, posizionarle in un elenco non ordinato e ogni elemento deve essere flottante a sinistra.

Ecco un esempio che dimostra questo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Esempio Bootstrap - Anteprima personalizzata</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
　　　　<div class="col-sm-6 col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Anteprima di segnaposto universale">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Etichetta di anteprima</h2>
　　　　　　　　　　　　　　　　<p>Alcuni esempi di testo. Alcuni esempi di testo.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a href="#" class="btn btn-primary" role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Pulsante
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a href="#" class="btn btn-default" role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Pulsante
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div class="col-sm-6 col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Anteprima di segnaposto universale">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Etichetta di anteprima</h2>
　　　　　　　　　　　　　　　　<p>Alcuni esempi di testo. Alcuni esempi di testo.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a href="#" class="btn btn-primary" role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Pulsante
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a href="#" class="btn btn-default" role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Pulsante
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div class="col-sm-6 col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Anteprima di segnaposto universale">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Etichetta di anteprima</h2>
　　　　　　　　　　　　　　　　<p>Alcuni esempi di testo. Alcuni esempi di testo.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a href="#" class="btn btn-primary" role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Pulsante
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a href="#" class="btn btn-default" role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Pulsante
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　　　<div class="col-sm-6 col-md-3">
　　　　　　　　<div class="thumbnail">
　　　　　　　　　　　　<img src="/run/images/kittens.jpg"
　　　　　　　　　　　　　　　　　alt="Anteprima di segnaposto universale">
　　　　　　　　　　　　<div class="caption">
　　　　　　　　　　　　　　　　<h2>Etichetta di anteprima</h2>
　　　　　　　　　　　　　　　　<p>Alcuni esempi di testo. Alcuni esempi di testo.</p>
　　　　　　　　　　　　　　　　<p>
　　　　　　　　　　　　　　　　　　　　<a href="#" class="btn btn-primary" role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Pulsante
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　　　　　<a href="#" class="btn btn-default" role="button">
　　　　　　　　　　　　　　　　　　　　　　　　Pulsante
　　　　　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

I risultati sono come segue:

Avvisi Bootstrap Titolo di Pagina Bootstrap