thumbnail Bootstrap
Ce chapitre explique les vignettes bootstrap. La plupart des sites exigent l'image de mise en page, vidéo, texte, etc. dans la grille. thumbnail Bootstrap pour cette offre un moyen facile. Pour utiliser Bootstrap créer des vignettes comme suit:
- Ajouter <a> autour de la balise d'image avec le .thumbnailde classe.
- Cela va ajouter un rembourrage (padding) quatre pixels et une bordure grise.
- Lorsque la souris survole l'image, l'animation affiche le contour d'une image.
L'exemple suivant illustre la vignette par défaut:
Exemples
<Div class = "ligne">
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "thumbnail">
<Img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "générique miniature de l' espace réservé">
</ A>
</ Div>
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "thumbnail">
<Img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "générique miniature de l' espace réservé">
</ A>
</ Div>
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "thumbnail">
<Img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "générique miniature de l' espace réservé">
</ A>
</ Div>
<Div class = "col-sm-6 col-md-3">
<A href = "#" class = "thumbnail">
<Img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "générique miniature de l' espace réservé">
</ A>
</ Div>
</ Div>
Essayez »
Les résultats sont les suivants:
Ajouter du contenu personnalisé
Maintenant que nous avons une vignette de base, nous pouvons ajouter une variété de contenu aux vignettes HTML, tels que les titres, les paragraphes, ou des boutons. les étapes spécifiques sont les suivantes:
- L'étiquette de <a> avec .thumbnailde classe changé <div>.
- Dans le <div> à l'intérieur, vous pouvez ajouter tout ce que vous voulez ajouter. Puisque c'est un <div>, nous pouvons utiliser le nom par défaut de règles basées sur la durée pour ajuster la taille.
- Si vous voulez regrouper plusieurs images, s'il vous plaît mettez-les dans une liste à puces, et chaque élément de la liste laissée flottante.
L'exemple suivant illustre ce point:
Exemples
<Div class = "ligne">
<Div class = "col-sm-6 col-md-3">
<Div class = "thumbnail">
<Img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "générique miniature de l' espace réservé">
<Div class = "caption">
onglet <H3> Vignettes </ h3>
<P> Du texte de l' échantillon. Certains textes de l' échantillon. </ P>
<P>
<A href = "#" class = "btn btn-primaire" role = "button"> bouton </ a>
<A href = "#" class = "btn btn-default" role = "button"> bouton </ a>
</ P>
</ Div>
</ Div>
</ Div>
<Div class = "col-sm-6 col-md-3">
<Div class = "thumbnail">
<Img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "générique miniature de l' espace réservé">
<Div class = "caption">
onglet <H3> Vignettes </ h3>
<P> Du texte de l' échantillon. Certains textes de l' échantillon. </ P>
<P>
<A href = "#" class = "btn btn-primaire" role = "button"> bouton </ a>
<A href = "#" class = "btn btn-default" role = "button"> bouton </ a>
</ P>
</ Div>
</ Div>
</ Div>
<Div class = "col-sm-6 col-md-3">
<Div class = "thumbnail">
<Img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "générique miniature de l' espace réservé">
<Div class = "caption">
onglet <H3> Vignettes </ h3>
<P> Du texte de l' échantillon. Certains textes de l' échantillon. </ P>
<P>
<A href = "#" class = "btn btn-primaire" role = "button"> bouton </ a>
<A href = "#" class = "btn btn-default" role = "button"> bouton </ a>
</ P>
</ Div>
</ Div>
</ Div>
<Div class = "col-sm-6 col-md-3">
<Div class = "thumbnail">
<Img src = "/wp-content/uploads/2014/06/kittens.jpg"
alt = "générique miniature de l' espace réservé">
<Div class = "caption">
onglet <H3> Vignettes </ h3>
<P> Du texte de l' échantillon. Certains textes de l' échantillon. </ P>
<P>
<A href = "#" class = "btn btn-primaire" role = "button"> bouton </ a>
<A href = "#" class = "btn btn-default" role = "button"> bouton </ a>
</ P>
</ Div>
</ Div>
</ Div>
</ Div>
Essayez »
Les résultats sont les suivants:
