L'utilisation de bootstrap pour écrire un carrousel carrousel peut gagner beaucoup de temps. Image Carrousel est une technologie courante dans les pages Web, mais si elle est écrite directement, elle nécessite un long codage JavaScript, et il n'est pas facile de contrôler la taille.
Permettez-moi également de dire que la signification originale du mot carrousel est un cheval de manège.
1. Objectifs de base
Carrousel pour écrire plusieurs images sur la page Web, la souris y est placée et la description de l'image est fournie sous chaque image.
Étant donné que le logiciel d'enregistrement vidéo informatique de l'auteur est assez mauvais, il estime également qu'il n'est pas nécessaire de tirer trop de temps dessus. Il pense que tant qu'il peut expliquer le problème, le GIF ci-dessous est plus de perte de couleurs, mais l'effet de base est toujours montré.
Carousel, le composant de carrousel d'image de Bootstrap, n'est pas compatible avec IE6 et 7. Si la prise en charge IE6 est requise, vous devez télécharger la prise en charge du composant IE6 de Bootstrap à partir de ce site Web (cliquez pour ouvrir le lien). Dans le même temps, la description du fichier image dans Google Chrome s'infiltrera un peu, mais cela n'affectera pas la navigation:
Les situations de présentation dans différents navigateurs sont différentes. L'effet d'IE8 est comme ceci:
2. Idées de base
Voir la disposition de la page de l'image suivante:
3. Processus de production
1. La première étape de la précédente "bootstrap pour écrire une boîte de dialogue qui peut être fermée sur la page Web actuelle" (cliquez pour ouvrir le lien)
Parce que vous devez utiliser Bootstrap, vous pouvez télécharger les composants sur le site officiel (cliquez pour ouvrir le lien). La version bootstrap utilisée dans l'environnement de production n'est pas compatible avec 2. Il est recommandé d'utiliser Bootstrap3 directement en fonction de ses documents de développement. Cet article est également réalisé sur la base de Bootstrap3. Dans le même temps, l'effet JavaScript fourni par Bootstrap3 doit être pris en charge dans jQuery 1.11 (cliquez pour ouvrir le lien). Vous pouvez télécharger JQuery 1.11 compatible avec l'ancien navigateur IE6 à partir du site officiel de jQuery, plutôt que jQuery2 incompatible avec l'ancien navigateur IE6. Après le téléchargement, configurez le répertoire du site. Décompressez Bootstrap3 directement dans le répertoire du site et placez jQuery-1.11.1.js dans le répertoire JS, c'est-à-dire le même répertoire que bootstrap.js. La structure du dossier du site est à peu près la suivante:
2. Ce qui suit est le code complet de la page Web, et la partie suivante sera expliquée:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <meta name = "visulport" contenu = "width = device-width, initial-sable = 1.0, user-scal = no link = <link href = "css / bootstrap.css" rel = "Stylesheet" media = "screen"> <script type = "text / javascript" src = "js / jQuery-1.11.1.js"> </ script> <script type = "text / javascript" src = "js / bootstrap.js"> </ script> <body> <div> <div> <h1> Picture Carousel </h1> </div> <div> <div id = "Carousel" Data-ride = "Carousel" Data-Interval = "1000"> <Ol> <li Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "0"> </li> <li Data-target = "# carouselamp Data-Slide-to = "1"> </li> <lis data-target = "# carousel-example-générique" data-slide-to = "2"> </li> </l> <div role = "listbox"> <v> <a href = "images / img0.jpg"> <img src = "images / img0.jpg"> </a> <h3> imgg0.jpg "> </a> <h3> imgg0. </h3> <p> Description de l'image de I Am img0 </p> </ div> </div> <div> <a href = "images / img10.jpg"> <img src = "images / img10.jpg"> </a> <div> <h3> img10 </h3> <p> Description de l'image de I Amg10 </p> href = "images / img2.jpg"> <img src = "images / img2.jpg"> </a> <div> <h3> img2 </h3> <p> Description de l'image de I Am Img2 </p> </div> </div> <a href = "# carousel-example-generic" role = "Button" Button "Data-Slide =" prev " <a href = "# carrousel-example-générique" role = "bouton" data-slide = "net"> <span> </span> </a> </div> </div> </div> </ body> </html>
(1) <A-tête> partie
<A-Head> <! - Déclarez l'encodage Web, s'adaptez automatiquement à la taille du navigateur. Pour utiliser CSS de Bootstrap, le support JQuery est requis. Pour utiliser le js de bootstrap, title -> <meta http-equiv = "content-type" contenu = "text / html; charset = utf-8" /> <meta name = "Viewport" contenu = "width = device-width, initial-sale = 1.0, user-scalable = no"> <link href = "css / bootstrap.css" Rel "> <link href =" css / bootstra Media = "Screen"> <Script Type = "Text / JavaScript" Src = "JS / JQuery-1.11.1.js"> </ script> <script type = "Text / Javascrip
(2) <body> partie
Déclarez d'abord un conteneur de conteneur, qui peut automatiquement faire appartenir tous les éléments de la page Web au centre de la page Web, puis écrire des éléments dans ce conteneur.
Écrivez d'abord l'en-tête, déclarez un en-tête, puis écrivez un morceau de texte à l'intérieur.
<div> <h1> Carrousel d'image </h1> </div>
Définissez ensuite une couche DIV sans nom, qui est principalement utilisée pour normaliser les composants du carrousel d'image. La taille du composant du carrousel d'image bootstrap ne peut pas être spécifiée pour les éléments à l'intérieur, et des paramètres de largeur et de hauteur sont ajoutés. De cette façon, la composante du carrousel d'image sera déformée. En même temps, pour centrer ce composant, vous devez utiliser la marge-droite: auto; marge-gauche: auto; dans l'attribut de style du div à la contrainte. L'align = "Centre" supplémentaire n'a aucun effet du tout.
Enfin, il existe des descriptions détaillées de chaque partie du composant d'image:
<div> <! - Le nom du composant du carrousel d'image est le carrousel et l'élément de ride de données est requis par Bootstrap. La valeur de l'intervalle de données est de modifier l'image toutes les 1000 millisecondes, c'est-à-dire 1 seconde. Si cette valeur est trop, le composant sera déformé -> <div id = "carrousel" data-ride = "carrousel" data-interval = "1000"> <! - Il y a plusieurs images définies ici. S'il y a une image de plus, ajoutez un autre élément ci-dessous. La valeur de la diapositive de données est ajoutée une. La première image, c'est-à-dire que la 0e image doit avoir class = "active" sinon le composant ne fonctionnera pas -> <lo ol> <li data-target = "# carousel-example générique" data-slide-to = "0"> </li> <li data-target = "# Carousel-Example-Generic" Data-Slide-to = "1"> </li> <li data-target = "# carouselamp" data-slide-to = "2"> </li> </l> <div role = "listbox"> <! - Voici les modifications détaillées de chaque image. La valeur de classe de la première image doit être active de l'élément, et le reste est un élément -> <div> <! - Cela signifie que cliquez sur l'image img0.jpg pour ouvrir l'hyperlien d'img0.jpg. S'il n'y a pas d'hyperlien, supprimez la balise <a> -> <a href = "images / img0.jpg"> <img src = "images / img0.jpg"> </a> <v> <! - Description du texte sous l'image -> <h3> img0 </h3> <p> Description de l'image de je suis img0 </p> </v> href = "images / img10.jpg"> <img src = "images / img10.jpg"> </a> <div> <h3> img10 </h3> <p> Description de l'image de I Am Img10 </p> </div> </iv> <v> <a href = "images / img2.jpg"> </ img src = "images / img2.jpg"> </a> <div> <h3> img2 </h3> <p> Description de l'image de I Am Img2 </p> </div> </div> </ div> <! - Voici deux boutons dans le composant qui pensent à gauche et à droite, à cadre fixe -> <a href = "# CaUnel-Example-Generic" Role = "Button" Données = "# CAURESEL-EXAME-GEN-GENER <span> </span> </a> <a href = "# Carousel-Example-Generic" Role = "Button" Data-Slide = "Suivant"> <span> </span> </div> </div>
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.