Menu de tirage
Déclaration spéciale: Parce que l'effet d'interaction du composant de bootstrap est basé sur des plugins écrits par la bibliothèque jQuery, vous devez d'abord charger jQuery.min.js avant d'utiliser bootstrap.min.js pour produire des effets.
<div> <Button Type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> Menu DropDown <span> </span> </ Button> <Ul Role = "Menu" Aria-LabelledBy = "DropdownMenu1"> <li rôle = "Présentation"> <a rôle = "Menuitem" Tabindex = "- 1" Href = "# #"> Dropdown Menu role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> élément de menu de dropdown </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> Drop down menu item href = "#"> Éléments de menu déroulant </a> </li> </ul> </div> <! - JQuery doit être importé avant Bootstrap, ce dernier est implémenté sur la base de l'ancien -> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </cript> src = "// maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </ script>
Image de reproduction:
Principe de mise en œuvre:
Au début, il y avait un affichage: aucun dans la classe; Jetez un œil à CSS ci-dessous
.Dropdown-menu {position: absolue; / * définir le positionnement absolu, par rapport à l'élément parent div.dropdown * / top: 100%; / * Laissez l'élément de menu déroulant en bas de l'élément de menu parent. Si l'élément parent ne définit pas le positionnement relatif, l'élément est relatif à l'élément corporel * / à gauche: 0; z-index: 1000; / * définir l'élément de menu déroulant non être couvert par d'autres éléments * / affichage: Aucun; / * Masquer l'élément de menu déroulant par défaut * / float: Left; Min-Width: 160px; Aucun; fond-couleur: #fff; background-clip: padding-box; bordure: 1px solide #ccc; bordure: 1px solide rgba (0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba (0, 0,. .175);}Ensuite, utilisez l'événement de clic pour contrôler la suppression et l'ajout de la classe de balise pour atteindre l'affichage et masquer
Grâce à la technologie JS, ajoutez ou supprimez le nom de classe "ouvrir" au conteneur parent "div.dropdown" pour contrôler l'affichage ou la cachette du menu déroulant. C'est-à-dire par défaut,
"Div.Dropdown" n'a pas le nom de classe "Open". Lorsque l'utilisateur clique pour la première fois, le nom de classe "Open" sera ajouté au nom de classe "Open"; Lorsque l'utilisateur clique à nouveau, le nom de classe "Open" dans le conteneur "div.dropdown" sera à nouveau supprimé. Nous pouvons voir l'intégralité du processus à travers le Firebug du navigateur:
Défaut:
L'utilisateur clique pour la première fois:
L'utilisateur clique à nouveau:
CSS ouvert
.Open> .dropdown-menu {affichage: bloc;}Tirez la ligne de division du menu
Jetons un coup d'œil à l'exemple ci-dessus, puis collez le code! Regardez l'effet, vous devez toujours présenter le fichier JS! Il n'y a pas beaucoup de choses après!
<div> <Button Type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> Menu DropDown <span> </span> </ Button> <Ul Role = "Menu" Aria-LabelledBy = "DropdownMenu1"> <li rôle = "Présentation"> <a rôle = "Menuitem" Tabindex = "- 1" Href = "# #"> Dropdown Menu role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> élément de menu de dropdown </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> menu drop down menu élément </a> </li> <li role = "présentation"> </ li> role = "menutem" tabindex = "- 1" href = "#"> élément de menu déroulant </a> </li> </ul> </div>
Image de reproduction:
En fait, il y a une autre ligne de code
<li rôle = "présentation"> </li>
Titre du menu du menu déroulant
Téléchargez directement le code
<div> <Button Type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> Menu Dropdown <span> </span> </ Button> <Ul Role = "Menu" Aria-LabelledBy = "DropdownMenu1"> <li role = "présentation"> Part 1 Menu Header </li> <li role = "présentation"> <a role = "menuitem" tabindex = "1" href = "#"> Élément de menu déroulant </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> élément de menu de dropdown </a> </li> <li role = "présentation"> <a role = "Menuitem" role = "présentation"> </li> <li role = "présentation"> Part 2 En-tête de menu </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> élément de menu down </a> </li> <li role = "présentation"> <a role = "menuitem" tabindex = "- 1" href = "#> down down" menu menu tabindex = "- 1" href = "#> down down menu Item </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> élément de menu déroulant </a> </li> </ul> </div>
Image de reproduction:
En fait, il n'y a qu'un seul code ajouté:
<li rôle = "présentation"> En-tête du menu de partie 2 </li>
Alignement du menu déroulant
<h4> Utilisez la classe Pull-droite pour aligner le menu déroulant avec le côté droit du conteneur parent </h4> <div style = "Float: Left;"> <Button Type = "Button" id = "DropdownMenu1" Data-Toggle = "Dropdown">
Menu de tirage
<span> </span> </ bouton> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> menu down menu élément </a> </li> <li role = "présentation"> <a role = "Menuitem" tabinDEx = "- 1" Href = "# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #>" Item </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> élément de menu déroulant </a> </li> <li role = "présentation"> <a role = "Menuitem" Tabindex = "- 1" href = "#"> Menu down-down élément </a> </li> <li role = "Presentation"> <- li> <li> role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> Éléments de menu déroulant </a> </li> </ul> </div> <br /> <br /> <h4> Utilisez la classe Dropdown-Menu-droite pour aligner le menu Dropdown avec le côté droit du container parent </h4> <div style = "Float: Left;" id = "dropdownmenu1" data-toggle = "dropdown">
Menu de tirage
<span> </span> </ bouton> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> menu down menu élément </a> </li> <li role = "présentation"> <a role = "Menuitem" tabinDEx = "- 1" Href = "# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #>" Item </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> élément de menu déroulant </a> </li> <li role = "présentation"> <a role = "Menuitem" Tabindex = "- 1" href = "#"> Menu down-down élément </a> </li> <li role = "Presentation"> <- li> <li> role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> Éléments de menu déroulant </a> </li> </ul> </v> <br /> <br /> <h4> Le menu déroulant est aligné avec le côté gauche du conteneur parent </ h4> <div style = "float: left;> <Button Type =" Button "id =" Dropdownme1 "Float: Left;> <Button Type =" Button "ID =" Dropdownme1 " data-toggle = "dropdown">
Menu de tirage
<span> </span> </ bouton> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> menu down menu élément </a> </li> <li role = "présentation"> <a role = "Menuitem" tabinDEx = "- 1" Href = "# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #>" Item </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> élément de menu déroulant </a> </li> <li role = "présentation"> <a role = "Menuitem" Tabindex = "- 1" href = "#"> Menu down-down élément </a> </li> <li role = "Presentation"> <- li> <li> role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> élément de menu déroulant </a> </li> </ul> </div>
En fait, ajoutez un nom de classe "pull-droite" ou "dropdown-menu-right" sur "Dropdown-menu", où le code de style CSS
.Dropdown-menu.pull-right {droite: 0; gauche: auto;}. Dropdown-menu-right {droite: 0; gauche: auto;}Menu extrait (État de l'élément de menu)
L'état par défaut de l'élément de menu déroulant (aucun paramètre) a un état suspendu (: Hover) et un état de mise au point (: focus)
En plus des deux états ci-dessus, les éléments de menu déroulants ont également l'état actuel (.active) et l'état désactivé (.Disabled).
<div> <Button Type = "Button" id = "DropDownMenu1" Data-Toggle = "Dropdown"> Menu DropDown <span> </span> </ Button> <Ul Role = "Menu" Aria-LabelledBy = "DropdownMenu1"> <li rôle = "Présentation"> <a rôle = "Menuitem" Tabindex = "- 1" Href = "# #"> Dropdown Menu role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> élément de menu de dropdown </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> menu drop down menu élément </a> </li> <li role = "présentation"> </ li> role = "menutem" tabindex = "- 1" href = "#"> élément de menu déroulant </a> </li> </ul> </div>
Mettez la souris dessus et un panneau interdit sera affiché sur celui désactivé. La capture d'écran ne peut pas être insérée!
Boutons (groupe de boutons)
L'utilisation de boutons uniques dans les pages Web ne répond parfois pas aux besoins de nos activités. Nous voyons souvent plusieurs boutons combinés ensemble, comme un ensemble de petits boutons d'icône dans un éditeur de texte riche.
<v> <Button Type = "Button"> <span> </span> </ Button> <Button Type = "Button"> <span> </span> </ Button> <Button Type = "Button"> <span> </ span> </ bouton> <Button Type = "Button"> <span> </ Span> </ Button> <Button Type = "Button"> <panneuse> </span> </sponte> </ Button> Type = "Button"> <span> </ span> </ bouton> <fontière> <bouton type = "Button"> <span> </span> </ Button> <Fut-Button> <Button Type = "Button"> <span> </span> </ Button> <Fut-Button> <Button Type = "Button"> <pan> </ Spane </ </ Button> <Button> <Button = "Button"> <span> </panneuse> </panneuse Type = "Button"> <span> </ span> </ bouton> <Button Type = "Button"> <span> </span> </ Button> </div>
Image de reproduction:
Ici, vous pouvez générer différents boutons d'icônes en fonction de différentes icônes! Vous pouvez le consulter sur ce site: http://getbootstrap.com/components/#glyphicons
Boutons (barre d'outils de bouton)
Dans un éditeur de texte riche, les bouton de groupe se regroupent, tels que copier, couper et coller un groupe; ALIGNAGE GAUCHE, ALIGNE MIDE, ALIGNE DU REGET ET ALIGNE D'ADMINATION A, comme indiqué dans la figure ci-dessous:
Ensuite, la barre d'outils du frame Bootstrap fournit également une telle méthode de fabrication. Il vous suffit de mettre le groupe de bouton "BTN-Group" en groupes dans un grand conteneur "BTN-Toolbar", comme indiqué ci-dessous:
<div> <v> <Button Type = "Button"> <span> </span> </ Button> <Button Type = "Button"> <span> </span> </ Button> <Button Type = "Button"> <span> </span> </ Button> </ Div> <Iv> <Button Type = "Button"> <span> </span> </sponte> </v> <div> <Button "> <span> </span> </ Button> </ Div> <Iv> <Button"> <span> </span> </ Button> </div> <div> <Button "> <span> </span> </ Button> </div> <Div> <Bouton Type = "Button"> <span> </ span> </ Button> </ Div> <div> <Button Type = "Button"> <span> </ span> </ Button> </ Div> <div> <Button Type = "Button"> <span> </span> </ Button> </ Button> <div> </ Button> <Futton> </ Button> </ Button> </div> <vouton Type = "Button"> <span> </ span> </ bouton> <fontianale> </ bouton> <fontière> <Button Type = "Button"> <span> </span> </ Button> <Button Type = "Button"> <span> </span> </ Button> </div> <div> <Button Type = "Button"> <pan> </span> </ Button> </div>
Image de reproduction:
Le deuxième ensemble d'icônes sur la figure est ajouté avec une classe:
BTN-Group-LG: Groupe de boutons
BTN-Group-SM: petit groupe de bouton
BTN-Group-XS: groupe de bouton ultra-petit
Ajoutez simplement le nom de classe correspondant au nom de classe ".btn-group" pour obtenir des groupes de bouton de différentes tailles.
Boutons (groupement imbriqué)
Plusieurs fois, nous organisons souvent le menu déroulant et les groupes de boutons ordinaires pour obtenir un effet similaire au menu de navigation.
Lorsque vous l'utilisez, il vous suffit de remplacer le conteneur qui a fait la "liste déroulante" qui a initialement créé le menu déroulant par "BTN-Group" et le placer au même niveau que le bouton ordinaire.
<v> <Button Type = "Button"> Home </ Button> <Button Type = "Button"> Affichage du produit </frutton> <Button Type = "Button"> Analyse de cas </ Button> <Button Type = "Button"> Contactez-nous </ Button> <span> </span> </ponge-toggle> <ul> <li> <a href = "# #> COMPANY Profil </a> </li> <li> <a href = "##"> Culture d'entreprise </a> </li> <li> <a href = "##"> Structure organisationnelle </a> </li> <li> <a href = "##"> Service client </a> </li> </ul> </v> </v>
Image de reproduction:
Boutons (groupement vertical)
Dans l'exemple vu précédemment, le groupe de boutons s'affiche horizontalement. Mais en usage réel, l'effet d'affichage vertical sera toujours rencontré. Ce style est également fourni dans le framework bootstrap. Nous avons juste besoin de changer le nom de classe "BTN-Group" du regroupement horizontal à "BTN-Groupe-Vertical"
<v> <Button Type = "Button"> Home </ Button> <Button Type = "Button"> Affichage du produit </frutton> <Button Type = "Button"> Analyse de cas </ Button> <Button Type = "Button"> Contactez-nous </ Button> <span> </span> </ponge-toggle> <ul> <li> <a href = "# #> COMPANY Profil </a> </li> <li> <a href = "##"> Culture d'entreprise </a> </li> <li> <a href = "##"> Structure organisationnelle </a> </li> <li> <a href = "##"> Service client </a> </li> </ul> </v> </v>
Image de reproduction:
Bouton (bouton égal)
L'effet du bouton de segment égal est particulièrement pratique sur les terminaux mobiles. L'ensemble de la largeur du groupe de bouton est à 100% du conteneur, et chaque bouton du groupe de bouton divise toute la largeur du conteneur. Par exemple, si vous avez cinq boutons dans un groupe de bouton, chaque bouton est de 20% de largeur, s'il y a quatre boutons, chaque bouton est de 25% de largeur, etc.
Le bouton d'égalisation est également souvent appelé un bouton de regroupement adaptatif. La méthode d'implémentation est également très simple. Il vous suffit d'ajouter un "nom de classe justifié par le groupe BTN au groupe" BTN-Group "comme indiqué ci-dessous:
<div> <div> <a href = "#"> home </a> <a href = "#"> Affichage du produit </a> <a href = "#"> Analyse de cas </a> <a href = "#"> Contactez-nous </a> </div> </div>
Changer la largeur de l'écran
Déclaration spéciale: Lors de la fabrication du groupe de bouton Aliquot, veuillez essayer d'utiliser l'élément <a> TAG pour fabriquer des boutons, car lorsque vous utilisez l'élément de balise <Fut-bouton>, l'utilisation de l'affichage: la table n'est pas conviviale pour la prendre en charge dans certains navigateurs.
Le triangle vers le haut vers le bas du bouton
Le triangle vers le bas du bouton, nous ajoutons un élément d'étiquette "" à l'étiquette et le nommez "Caret":
Parfois, notre menu déroulant apparaîtra (la prochaine section le présentera). À l'heure actuelle, notre direction de triangle doit être affichée vers le haut. Méthode d'implémentation: vous devez ajouter le nom de classe "abandonner" à la classe ".btn-group" (c'est également le nom de classe à utiliser pour le menu déroulant Upward Pop-up).
<v> <Button Data-Toggle = "Dropdown" Type = "Button"> Button Menu Détal Article </a> </li> </ul> </div>
Image de reproduction:
Navigation (style de base)
La navigation n'est pas étrangère à une personne frontale. On peut dire que la navigation est l'un des éléments importants d'un site Web, qui peut faciliter les utilisateurs pour trouver les différents services fonctionnels fournis par le site Web. La méthode de navigation est également très diversifiée et diversifiée.
Les barres de navigation sont principalement fabriquées dans le framework bootstrap à travers le style ".nav". Le style par défaut ".nav" ne fournit pas le style de navigation par défaut. Un autre style doit y être attaché pour être efficace, tel que "Nav-tabs", "NAV-Pills", etc. Par exemple, il y a un exemple de barre de navigation d'onglet dans l'éditeur de code à droite. Sa méthode d'implémentation consiste à ajouter deux styles de classe au UL Tag.nav et Nav-tabs.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <a <a href = "##"> réactif </a> </li> </ul>
Navigation (TAB Navigation en forme de balise)
Navigation en forme de balise, également connue sous le nom de navigation TAB. Surtout lorsque de nombreux contenus sont affichés en morceaux, il est très adapté d'utiliser cet onglet pour les regrouper.
La navigation en forme de balise est implémentée via le style "NAV-TABS". Lors de la création de navigation en forme de balise, vous devez ajouter ce type de nom à la navigation d'origine "nav"
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <a <a href = "##"> réactif </a> </li> </ul>
En fait, l'effet de l'exemple ci-dessus n'est pas cohérent avec les effets d'onglet que nous voyons habituellement. Généralement, l'onglet enseigne une sélection actuelle. En fait, le cadre de bootstrap est également fourni en conséquence. Supposons que nous voulions que l'élément "Accueil" soit l'élément actuellement sélectionné, ajoutez simplement le nom de classe "class =" active "" à sa balise.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <a <a href = "##"> réactif </a> </li> </ul>
Image de reproduction:
En plus de l'élément actuel, certains onglets ont également un état désactivé. Pour réaliser cet effet, il vous suffit d'ajouter "class =" Disabled "" à l'élément de balise:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <a <a href = "##"> réactif </a> </li> </ul>
Image de reproduction:
Navigation (pilules) Navigation)
La navigation de forme de capsule (pilules) semble un peu maladroite car elle ressemble un peu à une forme de capsule. Mais cela ressemble plus à la navigation de masse que nous voyons habituellement. L'élément actuel est mis en évidence avec un effet d'angle arrondi. La méthode d'implémentation est similaire à "Nav-tabs". Avec la même structure, il vous suffit de remplacer le nom de classe "NAV-TABS" par "NAV-PILLS":
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <a <a href = "##"> réactif </a> </li> </ul>
Image de reproduction:
La même chose que celle mentionnée ci-dessus!
Navigation (navigation empilée verticale)
Dans une utilisation réelle, en plus de la navigation horizontale, il y a aussi une navigation verticale, tout comme les boutons de disposition verticale introduits plus tôt. Pour créer une navigation de pile verticale, il vous suffit d'ajouter un nom de classe "d'empilement de navigation" basé sur des "montagnes de navigation"
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <a <a href = "##"> réactif </a> </li> </ul>
Image de reproduction:
Dans la section de menu déroulant, il existe un diviseur entre le groupe de menu déroulant et le groupe. En fait, la navigation de pile verticale a également cet effet, il vous suffit d'ajouter "
" Juste:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> href = "##"> réactif </a> </li> </ul>
Image de reproduction:
Navigation adaptative (utilisation)
La navigation adaptative fait référence à la navigation occupant toute la largeur du conteneur, et les éléments du menu peuvent s'adapter à la largeur comme les cellules d'une table. La navigation adaptative est la même que le groupe de bouton adaptatif fabriqué à l'aide de "btn-group-justifié". C'est juste que lors de la navigation adaptative, un autre nom de classe "Nav-justifié". Bien sûr, il doit être utilisé avec "Nav-Tabs" ou "Nav-Pills". comme:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <a <a href = "##"> réactif </a> </li> </ul>
Image de reproduction:
Ceci est un écran différent
Menu de navigation plus éloignée (navigation secondaire)
Les exemples précédents consistent à utiliser le framework bootstrap pour créer une navigation de premier niveau, mais dans de nombreux cas, l'effet de la navigation de deuxième niveau est inséparable à partir de la page Web. Ensuite, il est plus facile de fabriquer une navigation secondaire dans le cadre de bootstrap. Traitez simplement Li comme le conteneur parent, utilisez le nom de classe "Dropdown" et nidisez une autre liste UL dans Li et utilisez la méthode introduite dans le menu déroulant précédent:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" data-toggle = "dropdown"> Tutoriel <span> </span> </a> <ul> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a href = "##"> Réactif </a> </li> </li> <li> <a href = "##"> À propos de nous </a> </li> </ul>
Image de reproduction:
Grâce à l'outil de débogage du navigateur, il n'est pas difficile de constater qu'en cliquant sur l'élément de menu avec navigation secondaire, le nom de classe "ouvert" sera automatiquement ajouté. Clicking à nouveau supprimera le nom de classe «ouvert» ajouté et le principe d'implémentation du menu déroulant est le même!
Ensuite, lorsque vous utilisez la ligne de division dans la navigation secondaire, il vous suffit d'ajouter une balise vide comme "<li class =" nav-divider "> </li>".
Navigation au an
La chapelure est généralement utilisée pour la navigation, et leur fonction principale est de dire à l'utilisateur l'emplacement actuel de la page (emplacement actuel)
<l> <li> <a href = "#"> Accueil </a> </li> <li> <a href = "#"> Mon livre </a> </li> <li> "Illustré CSS3" </li> </l>
Image de reproduction: