L'article précédent a déjà parlé de certaines étapes et de certaines utilisations de base du bootstrap. Cliquez pour voir
Ce blog continue de vous présenter des effets communs, y compris principalement les composants suivants
1. Menu de tirage
2. Bar de navigation
3. Bar de progression
4. Objets multimédias
5. Pagination
6. Liste
Tout d'abord, importez le CSS et le JS de Bootstrap
<link rel = "Stylesheet" href = "css / bootstrap.min.css"> <! - Il est préférable de citer les css CSS, certains fichiers de style ne sont pas -> <lin src = "js / jQuery-3.1.0.min.js"> </ script> <script src = "js / bootstrap.min.js"> </ script>
1. Menu de tirage
Il se compose principalement de bouton et UL, et peut ajouter des sous-titres et des lignes fendues
<div> <Button Type = "Button" Data-Toggle = "Dropdown" Aria-Expanded = "FALST"> Ligne de métro <! - Ceci est un symbole de triangle vers le bas -> <span> </span> </ Button> <ul Role = "Menu"> <! - Ceci est un sous-titre -> <li> Subway </li> <li> <a href = "#"> ligne 1 </a> href = "#"> ligne 2 </a> </li> <li> <a href = "#"> Ligne 3 </a> </li> <li> <a href = "#"> Ligne 4 </a> </li> <! - Ceci est une ligne de division -> <li> </li> <li> <a href = "#"> Line 5 </a>
2. Bar de navigation
La barre de navigation est la norme pour presque toutes les pages Web, il est donc absolument juste d'apprendre à l'utiliser.
Ceci est la barre de navigation en haut de la page
<! - Définissez la classe NAV pour être plus haut de gamme, réglé sur Navbar-static-top pour supprimer les coins arrondis de la barre navale et le réparer en haut -> <nav role = "Navigation"> <div> <! - Le début de la barre de navigation, généralement du texte ou de l'image -> <div> <! - Ce bouton peut cliquer sur le menu "où la position n'est pas suffisante -> <bouton type =" Button "Button" Data-toggle = Colllaying " Data-Target = "# bs-exemple-Navbar-Collapse-1"> <span> Toggle Navigation </span> <span> </span> <span> </span> <span> </span> <span> </span> </sponte> <! - Swap Brand vers IMG -> <a href = "#"> Brand </a> </v> <! rétracté et cliqué sur -> <div id = "bs-example-navbar-caflapse-1"> <ul> <li> <a href = "#"> Management des membres </a> </li> <li> <a href = "#"> Management des membres </a> </li> <li> <a href = "#"> Membre Management </a> </li> <li> Gestion </a> </li> <li> <a href = "#"> Gestion des membres </a> </li> <li> <a href = "#"> Gestion des membres </a> </li> <li> <a href = "#"> Management des membres </a> </li> <li> <a href = "#"> Management aux membres </a> </li> <! <li> <a href = "#" data-toggle = "dropdown" role = "Button" aria-expanded = "false"> maintenance du système <span> </span> </a> <ul role = "menu"> <li> <a href = "#"> Restaurer le système </a> </li> <li> <a href = "#"> System Backup </a> href = "#"> déconnecter </a> </li> <li> <a href = "#"> Supprimer l'utilisateur </a> </li> </li> </li> </ul> <! - Écrivez d'abord Navbar-right et de droite -> <! <input type = "text" placeholder = "Entrer le contenu de la recherche"> </ div> <Button type = "Summit"> Recherche </ Button> </ Form> </div> </div> </AV> </ Nav>
Lorsque nous utilisons des pages Web pour parcourir des blogs ou des fichiers, nous avons un niveau. Pour le moment, si nous voulons revenir au niveau précédent ou à plusieurs niveaux, nous avons besoin de la barre de navigation de localisation.
<! - Bar de navigation -> <l> <li> <a href = "#"> Mon backend </a> </li> <li> <a href = "#"> Analyse du système </a> </li> <! - L'emplacement actuel ne peut pas être cliqué pour sauter -> <li> Statistiques d'accès </li> </l>
3. Bar de progression
<div> <! - Progress-barred sets les rayures et l'animation des ensembles actifs -> <! - Montrez le pourcentage de la barre de progrès en fonction du pourcentage de largeur de style -> <div role = "Progressbar" aria-Valuenow = "60" aria-valuemin = "0" Aria-Valulemax = "100"> <pan> 30% bar -> 30% </div> </div>
4. Objets multimédias
C'est fondamentalement le même message sur Weibo ou Twitter
L'avatar à gauche, le titre et le texte à droite
<div> <div> <img src = "Images / 1.jpg"> </div> <div> <h4> Media Heading </h4> <p> CRAS Sit Amet Nibh Libero, dans Gravida nulla. Nulla ve metus sclerisque ante sollicitudin commodo. CRAS purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec Lacinia Congue Felis dans Faucibus. </p> </div> </div>
5. Pagination
C'est plusieurs pages
<ul> <li> <a href = "#" Aria-Label = "Précédent"> <! - Double flèches à gauche -> <span aria-hidden = "true"> «</span> </a> </li> <! - La première option est activée -> <li> <a href =" # "> 1 </a> </li> <li> <a href =" #> 2 <horège <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 6 </a> </li> <li> <a href = "#"> 7 </a> href = "#"> 7 </a> </li> <li> <a href = "#"> aria-label = "Next"> <! - Double flèches vers la droite -> <span aria-hidden = "true"> »</span> </a> </li> </ul>
Ce n'est que la page précédente et la page suivante
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> page précédente </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> page suivante </a> </li> </ul>
Ce qui précède est écrit avec deux boutons connectés ensemble
Ce qui suit est écrit car deux boutons sont distribués des deux côtés
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> page précédente </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> page suivante </a> </li> </ul>
6. Liste
L'effet de la liste est très courant et très simple à utiliser
<div> <! - Le premier élément a été sélectionné -> <a href = "#"> Statistiques d'accès </a> <a href = "#"> Statistiques d'information </a> <a href = "#"> Statistiques logarithmiques </a> <a href = "#"> Statistiques d'information </a> <"Href =" # "> statistiques d'information </a> href = "#"> Statistiques d'information </a> <a href = "#"> Statistiques d'information </a> </div>
J'ai utilisé le composant ci-dessus pour créer une page Web statique backend
L'effet est comme indiqué dans l'image
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.