Bootstrap - Miniature
Questo capitolo tratta delle miniature di Bootstrap. Molti siti hanno bisogno di un modo per disporre immagini, video, testo, ecc. In una griglia e Bootstrap ha un modo semplice per farlo con le miniature. Per creare miniature utilizzando Bootstrap -
Aggiungi un tag <a> con la classe di .thumbnail intorno a un'immagine.
Ciò aggiunge quattro pixel di riempimento e un bordo grigio.
Al passaggio del mouse, un bagliore animato delinea l'immagine.
L'esempio seguente mostra una miniatura predefinita:
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
</div>
Aggiunta di contenuti personalizzati
Ora che abbiamo una miniatura di base, è possibile aggiungere qualsiasi tipo di contenuto HTML come intestazioni, paragrafi o pulsanti nelle miniature. Segui i passaggi seguenti:
Cambia il tag <a> che ha una classe di .thumbnail a un <div>.
All'interno di quel <div>, puoi aggiungere tutto ciò di cui hai bisogno. Poiché si tratta di un <div>, possiamo utilizzare la convenzione di denominazione basata su span predefinita per il dimensionamento.
Se desideri raggruppare più immagini, inseriscile in un elenco non ordinato e ogni elemento dell'elenco verrà spostato a sinistra.
Il seguente esempio lo dimostra:
<div class = "row">
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role =" button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
</div>