English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Plugins Bootstrap
Ce chapitre explique les miniatures Bootstrap. La plupart des sites nécessitent de disposer d'images, de vidéos, de textes, etc. en grille. Bootstrap offre une solution simple pour cela via les miniatures. Voici les étapes pour créer une miniature avec Bootstrap : .thumbnail Ajoutez une classe autour de l'image avec class
de l'étiquette <a>.
Cela ajoute un padding intérieur de quatre pixels et une bordure grise.
Lorsque le curseur de la souris est au-dessus de l'image, le contour de l'image apparaît en animation.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap - L'exemple suivant démontre la miniature par défaut :/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"> Miniature< <img src="/course/images/kittens.jpg" alt="Généralisez l'image de place-holder miniature"> </a> </div> <div class="col-sm-6 col-md-3"> Miniature< <img src="/course/images/kittens.jpg" alt="Généralisez l'image de place-holder miniature"> </a> </div> <div class="col-sm-6 col-md-3"> Miniature< <img src="/course/images/kittens.jpg" alt="Généralisez l'image de place-holder miniature"> </a> </div> <div class="col-sm-6 col-md-3"> Miniature< <img src="/course/images/kittens.jpg" alt="Généralisez l'image de place-holder miniature"> </a> </div> </div> </body> </html>Testez et voyez ‹/›
Les résultats sont affichés comme suit :
Ajouter du contenu personnalisé
Nous avons maintenant une miniature de base, nous pouvons ajouter divers contenus HTML à la miniature, comme des titres, des paragraphes ou des boutons. Voici les étapes spécifiques : .thumbnail de l'étiquette <a> en <div>.
Dans ce <div>, vous pouvez ajouter ce que vous souhaitez. Comme c'est un <div>, nous pouvons utiliser les règles de nommage par défaut basées sur span pour ajuster la taille.
Si vous souhaitez regrouper plusieurs images, placez-les dans une liste non ordonnée et chaque élément de liste flotte à gauche.
L'exemple suivant démontre ce point :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap - Custom thumbnail</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="/course/images/kittens.jpg" alt="Généralisez l'image de place-holder miniature"> <div class="caption"> <h2>Étiquette d'aperçu</h2> <p>Des textes d'exemple. Des textes d'exemple.</p> <p> <a href="#" class="btn btn-primary" role="bouton"> bouton </a> <a href="#" class="btn btn-default" role="bouton"> bouton </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/course/images/kittens.jpg" alt="Généralisez l'image de place-holder miniature"> <div class="caption"> <h2>Étiquette d'aperçu</h2> <p>Des textes d'exemple. Des textes d'exemple.</p> <p> <a href="#" class="btn btn-primary" role="bouton"> bouton </a> <a href="#" class="btn btn-default" role="bouton"> bouton </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/course/images/kittens.jpg" alt="Généralisez l'image de place-holder miniature"> <div class="caption"> <h2>Étiquette d'aperçu</h2> <p>Des textes d'exemple. Des textes d'exemple.</p> <p> <a href="#" class="btn btn-primary" role="bouton"> bouton </a> <a href="#" class="btn btn-default" role="bouton"> bouton </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/course/images/kittens.jpg" alt="Généralisez l'image de place-holder miniature"> <div class="caption"> <h2>Étiquette d'aperçu</h2> <p>Des textes d'exemple. Des textes d'exemple.</p> <p> <a href="#" class="btn btn-primary" role="bouton"> bouton </a> <a href="#" class="btn btn-default" role="bouton"> bouton </a> </p> </div> </div> </div> </div> </body> </html>Testez et voyez ‹/›
Les résultats sont affichés comme suit :