miniature bootstrap
Questo capitolo spiegherà le miniature Bootstrap. immagine di layout, video, testo, ecc nella griglia maggior parte dei siti richiedono. Bootstrap anteprima per questo fornisce un modo semplice. Per usare Bootstrap creare le miniature come segue:
- Aggiungere <a> intorno al tag immagine con la .thumbnaildi classe.
- Questo aggiungerà padding (padding) quattro pixel e un bordo grigio.
- Quando il mouse passa sopra l'immagine, l'animazione mostrerà il contorno di un'immagine.
L'esempio seguente illustra la miniatura di default:
Esempi
<div class = "riga">
<div class = "col-sm-6 col-md-3">
<A href = "#" class = "anteprima">
<IMG src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generico segnaposto miniatura">
</ A>
</ Div>
<div class = "col-sm-6 col-md-3">
<A href = "#" class = "anteprima">
<IMG src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generico segnaposto miniatura">
</ A>
</ Div>
<div class = "col-sm-6 col-md-3">
<A href = "#" class = "anteprima">
<IMG src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generico segnaposto miniatura">
</ A>
</ Div>
<div class = "col-sm-6 col-md-3">
<A href = "#" class = "anteprima">
<IMG src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generico segnaposto miniatura">
</ A>
</ Div>
</ Div>
Prova »
I risultati sono i seguenti:
Aggiungere contenuto personalizzato
Ora che abbiamo una miniatura di base, possiamo aggiungere una varietà di contenuti alle miniature HTML, come intestazioni, paragrafi, o pulsanti. I punti specifici sono i seguenti:
- L'etichetta <a> conclasse .thumbnail cambiato <div>.
- Nel <div> all'interno, è possibile aggiungere qualsiasi cosa che si desidera aggiungere. Poiché questo è un <div>, possiamo utilizzare la denominazione predefinito regole basate sulla durata per regolare la dimensione.
- Se si desidera raggruppare più immagini, si prega di metterli in una lista non ordinata, e ogni elemento della lista lasciato flottante.
L'esempio che segue illustra questo punto:
Esempi
<div class = "riga">
<div class = "col-sm-6 col-md-3">
<div class = "anteprima">
<IMG src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generico segnaposto miniatura">
<div class = "caption">
scheda <h3> Miniature </ h3>
<P> Alcuni testo di esempio. Alcuni testo di esempio. </ P>
<P>
<A href = "#" class = "btn btn-primario" 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 = "anteprima">
<IMG src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generico segnaposto miniatura">
<div class = "caption">
scheda <h3> Miniature </ h3>
<P> Alcuni testo di esempio. Alcuni testo di esempio. </ P>
<P>
<A href = "#" class = "btn btn-primario" 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 = "anteprima">
<IMG src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generico segnaposto miniatura">
<div class = "caption">
scheda <h3> Miniature </ h3>
<P> Alcuni testo di esempio. Alcuni testo di esempio. </ P>
<P>
<A href = "#" class = "btn btn-primario" 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 = "anteprima">
<IMG src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "generico segnaposto miniatura">
<div class = "caption">
scheda <h3> Miniature </ h3>
<P> Alcuni testo di esempio. Alcuni testo di esempio. </ P>
<P>
<A href = "#" class = "btn btn-primario" role = "button"> pulsante </ a>
<A href = "#" class = "btn btn-default" role = "button"> pulsante </ a>
</ P>
</ Div>
</ Div>
</ Div>
</ Div>
Prova »
I risultati sono i seguenti:
