Vous devez d'abord présenter Bootstrap et JQuery
Recommander un CDN: http://cdn.gbtags.com/index.html
Ensuite, commencez à écrire du code HTML. Si vous ne voulez pas modifier l'effet d'affichage, en fait, CSS n'est pas autorisé à écrire 2333.
Parce qu'il existe de nombreux codes HTML, ici sont divisés en trois parties, puis le code HTML global est le dernier
Tout d'abord, comme le montre la figure ci-dessus, vous devez comprendre les composants suivants de Bootstrap
• barre de navigation
•Bouton
•Formulaire
• Menu déroulant
En fait, il existe de nombreux styles des composants ci-dessus. Nous n'avons qu'à en connaître une partie. Si vous souhaitez en savoir plus, veuillez vous référer à http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.html pour plus d'informations.
PS: classe {} Voici juste des commentaires, pas du code HTML
PS2: fournit des fichiers HTML avec un débogage de cas en ligne
Barre de navigation et mise en page du logo de la barre de navigation
<! - Créez une barre de navigation BootStarp et la disposition du logo de navigation -> <Antend> <div> // Do sth </div> </ nav>
Boutons de navigation
<! - Créez un bouton -> <! - Classe {Navbar-Toggle: Passer ce bouton à JS est cliquable. aria-expanded = "false": fonction de lecture assistée..settings pour les groupes spéciaux -> <bouton type = "bouton" data-toggle = "effondrement" data-target = "# navbar-gbtag" aria-exed = "false"> <! essayez} -> <span> cliquez sur moi </span> <span> </span> <span> </span> <span> </span> <span> </span> </futton>Formulaire
<div> <! - Classe {formulaire de formulaire: définissez la largeur sur% mais nous définissons la forme de navbar dans le formulaire de l'élément parent afin que la largeur soit contrôlée par un certain montant} -> <input type = "Text" placeholder = "search" /> </iv> <! - Form Group -> <Button Type = "soumi"> Search </Form> </ Form> <! - Form - Form ->Menu de tirage
<li> <! - Classe {Dropdown-toggle: déclarez qu'il s'agit d'une liste qui peut être supprimée. En fait, je n'ai pas trouvé le but spécifique de cette classe. Annuler et n'a trouvé aucun style de bugspan.caret {icône pour un petit triangle}} data-toggle = "Dropdown": introduire un attribut nécessaire du composant de menu déroulant Role = "Button": agit comme une déclaration auxiliaire. DÉCLARIEZ CECI EST UN BOUTON -> <a href = "#" Data-Toggle = "Dropdown" Role = "Button" Aria-Haspopup = "True" Aria-Expanded = "FALST"> Nom du menu Dropdown <span> </span> </a> <ul> <li> <a href = ""> Bootstrap </a> </li> <! élément en tant que diviseur -> <li rôle = "séparateur"> </li> <li> <a href = ""> Veuillez suivre l'étiquette geek </a> </li> </ul> <! - Menu déroulant ->Mise en œuvre globale de HTML
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> Bar de navigation réactive </ title> <link rel = "Stylesheet" type = "text / css" href = "../ css / bootstrap.min.min.js" /> <script src = "jquery-1.9.1. type = "text / javascript" charset = "utf-8"> </ script> <script src = "../ js / bootstrap.min.js" type = "text / javascript" charset = "utf-8"> </ script> </ head> </ body> <! - Créer une couches de navigation BootStarp -> <AV> <! <! - Créez une disposition bootstraplogo -> <! - Remarque: Vous devez créer un chef Navbar, envelopper le logo et des boutons réactifs. Un cliquable effondré: si vous ne combinez pas Navbar-Collapse, c'est une classe par défaut. Il semble qu'aucun bogue ne soit trouvé sans l'ajouter. } data-toggle = "effondrement": introduire l'effondrement du plug-in data-target = "# navbar-gbtag": lors de la cliquetis sur le bouton, quelle balise est redirigé / ouvrir aria-expanded = "false": fonction de lecture assistée..settings pour les groupes spéciaux -> <bouton-bouton = "bouton" Data-toggle = "False" Icônes et instructions sur la classe de bouton {SR-Only: Masquez cette balise Inconnu: Modifiez le style d'icône et modifiez le style d'icône en Glyphicon-Star Try} -> <span> Cliquez sur moi </span> <pan> </span> <pan> </span> <span> </span> </sponse> </vr> <! - Créez une mise en page de la barre par défaut. Si l'effondrement est annulé, le bouton est élargi par défaut. NAVBAR-Collapse: la classe requise pour la mise en page de l'élément de barre de navigation} ID: cohérent avec la prise de données du bouton -> <div id = "Navbar-gbtag"> <! - Créer une classe de navigation de navigation Classe d'éléments internes {NAV: Créez une classe de base nécessaire pour les éléments internes de la barre de navigation. Navbar-Nav: Ce n'est pas facile à expliquer. Parce que j'ai parcouru la documentation officielle et que je ne l'ai pas dit en détail. Ici, je vais l'expliquer brièvement: faire le UL centré horizontalement et horizontalement. En même temps, la largeur est la largeur du contenu et ne serrera pas les éléments derrière lui, comme la forme; Et enfin, vous pouvez supprimer cette classe et essayer de savoir qu'elle est utilisée. Navbar-droite: la classe qui est organisée par barre de navigation} -> <ul> <! - Classe {active: par défaut Click, Dropdown: la classe de base requise pour créer un menu déroulant} -> <li> <a href = ""> reSoul </a> </li> <li> <a href = ""> gbtag </a> </li> <li> <! liste qui peut être supprimée. En fait, je n'ai pas trouvé le but spécifique de cette classe. Je l'ai annulé et je n'ai trouvé aucun bug. Span .Caret {Icône Style d'image d'un petit triangle}} data-toggle = "Dropdown": introduire un attribut nécessaire du composant de menu déroulant Role = "Button": sert de déclaration auxiliaire. DÉCLARIEZ CECI EST UN BOUTON -> <a href = "#" Data-Toggle = "Dropdown" Role = "Button" Aria-Haspopup = "True" Aria-Expanded = "FALST"> Nom du menu Dropdown <span> </span> </a> <ul> <li> <a href = ""> Bootstrap </a> </li> <! élément en tant que diviseur -> <li role = "séparateur"> </li> <li> <a href = ""> Veuillez faire attention à la balise geek </a> </li> </ul> <! - Menu déroulant -> </li> <! - Navigation sous-élément -> </ul> <! http://v3.bootcss.com/components/#navbar-forms navbar-left: Utilisé pour spécifier l'alignement des éléments dans la barre de navigation http://v3.bootcss.com/components/#navbar-ccomponent-alignment} -> <form role = "Search"> <! BTN: Le style de bouton est basé sur la référence spécifique de la classe de base BTN http://v3.bootcss.com/css/#buttons form-group: une classe de base pour la liste des éléments simples de référence spécifique http://v3.bootcss.com/css/#forms} -> <v> <! - Class {Form-Control: Set the wabdth to 100%, mais nous définirons dans la classe {Form-Control: Le formulaire de l'élément parent afin que la largeur soit contrôlée par un certain montant} -> <input type = "text" placeholder = "search" /> </ div> <! - Form Group -> <Button type = "soumi"> Search </ Button> </Form> <! - Form -> <ul> <li> <a href = ""> Soul </a> </li> <li> <a href = "# # # # #>" role = "Button" aria-haspopup = "true" aria-expande href = ""> Veuillez suivre la balise geek </a> </li> </ul> <! - Menu déroulant -> </li> <! - Navigation Sub-Element 2 -> </ul> <! - Element de navigation 2 -> </ div> <! - Layout de navigation -> </v> <!Le contenu ci-dessus est l'exemple de code pour la création de barres de navigation réactives par l'éditeur. J'espère que cela vous sera utile. Si vous souhaitez en savoir plus, veuillez faire attention au site Web de Wulin.com. Merci!