Sur le site officiel de Bootstrap, un composant de barre de navigation est fourni:
Mettez simplement JQ et bootstrap dans le dossier du site et entrez le code suivant:
<! 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"> <éread> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> navbar </ title> <meta name = "Viewport" Content = "width = Device-width, initial-scale = 1.0, utilisateur-échec = no"> <link href = "css / bootstrap.css" rel = "Stylesheet" media = "screen"> <script type = "text / javascrip src = "js / bootstrap.js"> </ script> </ head> <body> <div> <nav role = "navigation"> <div> <div> <Button type = "Button" Data-Toggle = "Collapse" Data-Tget = "# bs-exemple-Navbar-Collapse-1"> <spanne> Toggle Navigation </pank> <panprac <span> </span> </ bouton> <a href = "#"> marque </a> </div> <div id = "bs-example-navbar-colapse-1"> <ul> <li> <a href = "#"> lien </a> </li> <li> <a href = "#"> lien </a> </li> <li> <a href = "#"> </a> </li> <li> <a Href = "" " data-toggle = "Dropdown"> Dropdown <span> </span> </a> <ul> <a href = "#" "data-toggle =" dropdown "> Dropdown <span> </span> </a> <ul role =" menu "> <li> <a href =" # "> Action </a> </li> <li> <a href =" # "> href = "#"> autre chose ici </a> </li> <li> </li> <li> <a href = "#"> Lien séparé </a> </li> <li> </li> <li> <a href = "#"> Lien séparé </a> </li> <li> </li> <li> <a href = "#"> </ul> </ form role = "search"> <div> <entrée type = "text" placeholder = "search"> </ div> <button type = "soumi"> soumettre </ bouton> </form> <ul> <li> <a href = "#"> lien </a> </li> <li> <a href = "#" data-toggle = "dropdown"> dropdown <pander> </pandé> role = "menu"> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> Une autre action </a> </li> <li> </li> <li> <a href = "#" # " </ul> </div> </div> </ nav> asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
Vous pouvez obtenir une barre de navigation qui peut varier avec la taille de la fenêtre:
Vous pouvez également modifier la valeur de la classe dans <NAV Role = "Navigation"> en <NAV Role = "Navigation">, et la barre de navigation sera accrochée en haut de la page Web. Peu importe comment la fenêtre est glissée, si vous modifiez la valeur de classe en <NAV Role = "Navigation">, vous pouvez obtenir une barre de navigation noire.
Il a l'air très utile, mais ses inconvénients sont assez fatals. Quelles que soient les couleurs fournies par cette barre de navigation ne sont que du blanc et du noir, deux couleurs. La chose la plus terrifiante est que la barre de navigation s'affiche directement sur le téléphone dans IE8, mais elle est en dessous de la résolution de l'écran de 1440x900. Vous devez savoir que IE8 n'est pas IE6, mais le navigateur par défaut pour le système Win7.
Cela fait que l'utilisateur sélectionne l'élément de la barre de navigation à cliquer sur le bouton à droite, puis le menu déroulant devient:
Laissez le contenu de la page Web être abaissé directement sur une pièce entière. Il convient de noter que IE8 est le navigateur par défaut pour Win7 maintenant. Quelle que soit la position de base absolue d'IE6 en Chine, même dans le contexte de plus en plus d'utilisateurs qui choisissent Win7, la compatibilité d'IE8 est toujours une question à considérer.
Par conséquent, si vous ne pouvez choisir ce type de barre de navigation que la navigation du site Web, il existe deux types de bootstrap, qui peuvent être utilisés comme substitut, avec différents styles, l'un est la page d'onglet, et l'autre est le groupe de boutons. La barre de navigation dite de la naissance n'est pas une bonne solution, car le menu déroulant doit être présenté dans le bootstrap comme un bouton. S'il est écrit en texte, il est également ingrat dans IE8. Bien sûr, vous pouvez complètement choisir de mettre de côté Bootstrap, et les CSS des Masters sont manuscrits par eux-mêmes et regardent le cadre.
1. Page de balise
Le style de base de la balise est le suivant, et il existe un menu déroulant qui nécessite le support de bootstrap.js, bootstrap.css et jq.
Les pages de balises ne changent pas avec la taille du navigateur
Vous pouvez basculer dans une page Web ou passer à d'autres pages. Les liens de la page onglet que vous recommandez fortement de naviguer seront passés vers d'autres pages Web avec la même mise en page que cette page. Autrement dit, cette page d'onglet existe également et a le même emplacement.
Le code est le suivant:
<! 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"> <éread> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <tone> toggLableTabs </ title> <meta name = "Viewport" Content = "width = Device-width, initial-scale = 1.0, utilisateur-échec = no"> <link href = "css / bootstrap.css" rel = "Stylesheet" media = "screen"> <script type = "text / javascrip src = "js / bootstrap.js"> </ script> </ head> <body> <div> <ul role = "tablist"> <! - Une seule balise peut avoir un statut actif dans une balise -> <li rôle = "présentation"> <!! role = "tab" data-toggle = "tab"> home </a> </li> <li role = "présentation"> <a href = "# profil" role = "tab" data-toggle = "tab"> profil </a> </li> <li rôle = "présentation"> <a href = "# profil" role = "tab" tabgle = "tab"> le profil </a> </ li> role = "a-toggle =" tab "> le profil </a> </ li> role =" a-toggle = "tab"> Profil </a> </ li> <li role = "a" tab "> Profil </a> </ li> Role =" a-toggle = "tab"> href="#messages" role="tab" data-toggle="tab">Messages</a> </li> <li role="presentation"> <a href="#settings" role="tab" data-toggle="tab">Settings</a> </li> <!--Including the way to write the drop-down menu--> <li role="presentation"> <a data-toggle="dropdown" href="#"> <! - Ceci est le petit triangle du menu déroulant -> Dropdown <span> </span> </a> <ul role = "menu"> <li role = "présentation"> <a href = "# home" role = "tab" data-toggle = "tab"> home </a> </li> <li role = "présentation"> <a href = "# # Profil" role = "tab" data-toggle = "tab"> Profil </a> </li> <li role = "présentation"> <a href = "# messages" role = "tab" data-toggle = "tab"> messages </a> </li> <li role = "présentation"> <a href = "# seads" role = "tab" datoggle = tab "> </a> </ li> </ ul> <! à d'autres pages avec le même style, ce qui fait que les téléspectateurs sentent qu'il n'y a pas de saut. De cette façon, séparez le code afin que le code d'une page Web ne soit pas concentré dans une page -> <li role = "présentation"> <a href = "back.html" role = "tab"> Les autres pages </a> </li> </li> </ul> <! - Si la page onglet saute vers la couche sur cette page, écrivez le contenu de la couche ici. -> <div> <div role = "tabpanel" id = "home"> home </ div> <div role = "tabpanel" id = "profil"> profil </ div> <div role = "tabpanel" id = "messages"> Messages </ div> <div role = "tabpanel" id = "paramètres"> </ div> </v> </v> </v> </v> </v> </div> </ body>
2. Sélectionnez le groupe de bouton
Ce paragraphe a été changé encore et encore, principalement parce que ma compréhension de cette composante n'est pas suffisamment approfondie.
Le style de base d'un groupe de bouton de sélection qui couvre la page est le suivant:
Il changera avec la taille du navigateur. Bien sûr, lorsqu'il est comprimé à l'extrême, il ne sera pas fermé comme la barre de navigation Navbar qui est livré avec bootstrap et se trouvera tranquillement dans un bouton.
Ce groupe de bouton de sélection est sans aucun doute compatible avec IE8, mais le groupe de bouton sans menu déroulant est en fait un hyperlien, en utilisant la balise <a> au lieu de la balise <Fut>, mais par rapport à la balise générale <a>, voir le code pour le bouton de la classe de cette balise <a>, voir le code pour les détails. Le code de ce groupe de bouton est vraiment spécial.
Le code spécifique est le suivant:
<! 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"> <éadf> <méta http-equiv = "contenu-type" contenu = "Text / html; Charset = utf-8" /> <title> groupe de bouton de bouton </taptaire> <méta name = "Viewport" Content = "width = Device-width, initial-scale = 1.0, utilisateur-échec = no"> <link href = "css / bootstrap.css" rel = "Stylesheet" media = "screen"> <script type = "text / javascrip src = "js / bootstrap.js"> </ script> </ head> <body> <! - Besoin de bouton de requise pour remplir la page entière -> <div> <v> <! - Écrivez des boutons qui n'ont pas de menu déroulant pour écrire de cette façon, il est rare de définir des liens pour les boutons, s'il vous plaît noter -> <un bouton Href = "#"> gauche </a> </v> </div> <v> <Button Type = "Button"> Droite </ Button> </div> <! - Écrivez ce bouton avec un menu déroulant -> <div> <Button Type = "Button" Data-Toggle = "Dropdown"> Dropdown <span> </span> </sponte> <ul Role = "Menu"> <li> <a href = "#"> Dropdown Link </a> lien </a> </li> </ul> </div> </div> </ body> </html>
3. Ajoutez une table sur le panneau et intégrée avec un texte hyperlien ordinaire
Les choses les plus courantes et les plus simples sont souvent les choses les plus pratiques, mais les tables sont utilisées ici pour disposer au lieu de diviser la page en un système de grille de 12 pièces. Parce que 12 exemplaires ont rencontré certaines colonnes telles que 5 copies n'étaient pas faciles à distribuer uniformément.
Ce panneau utilise des éléments de panneau fournis par Bootstrap, qui peuvent également être ajustés automatiquement en fonction de la taille de la fenêtre.
Le code est beaucoup plus simple que les deux solutions ci-dessus, mais elle n'est pas si éblouissante en même temps. Mais c'est vraiment simple et pratique.
<! - Ce nœud peut être ignoré. Il est placé dans un conteneur de conteneur juste pour les captures d'écran et ne remplira pas la fenêtre entière -> <div> <! - Le panneau du corps uniquement, la modification du style ne change que la couleur de la bordure -> <div> <div style = "Text-Align: Center"> <Table> <Tr> <! - S'il s'agit de six éléments, vous pouvez utiliser le système raster Bootstrap, chaque colonne a 2 grilles. S'il s'agit de sept éléments, une cellule représentera 100/7 = 14% de la taille. -> <td> <a href = "#"> Projet 1 </a> </td> <td> <a href = "#"> Projet 2 </a> </td> <td> <a href = "#"> Project 3 </a> </td> <td> <a href = "#"> Projet 4 </a> </td> 5 </a> </td> </ table> </div> </div> </div>
Les trois solutions ci-dessus sont des solutions pour résoudre les défauts de la barre de navigation bootstrap Navbar dans IE8. Je pense personnellement que le premier type est un peu rare et alternatif, le deuxième type est le plus recommandé de l'auteur, et le troisième type est nécessaire pour être utilisé dans le formulaire. Si vous pouvez l'éviter, essayez de l'éviter. Vous pouvez placer le groupe de bouton de sélection dans un panneau pour remplacer le troisième type de texte et de contenu de table.
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.