Écrire devant
Dans cet article, je parlerai de l'utilisation de bootstrap basé sur une page Web de paysage que j'ai faite. Les captures d'écran de la page Web sont les suivantes:
Les effets et le code de la page Web complète peuvent être consultés ici ou visualisés sur Codepen. Les principaux effets que les pages Web doivent réaliser comprennent les éléments suivants:
1. Les boutons de connexion et d'enregistrement dans la barre de navigation apparaissent après avoir cliqué sur les cases modales de connexion et d'enregistrement, et les fenêtres de connexion et d'enregistrement peuvent être commutées. La barre de menu est réactive
2. Les options de paysage de la barre de navigation peuvent être abaissées. Cliquez sur la grotte de rideaux d'eau de Jiuzhaigou Lijiang dans la liste déroulante pour localiser l'onglet correspondant.
3. Carrousel de diaporama à grand écran
4. Cliquez pour activer la page onglet
Maintenant, nous commençons à embrasser Bootstrap.
Je crois que des amis ont entendu parler de bootstrap ou de l'utiliser. Dans cette page Web, j'utilise CDN Bootstrap v3.3.4. Cliquez ici pour télécharger la dernière version de Bootstrap v3.3.5 ou cliquez ici pour le télécharger sur le site officiel. Je crois qu'il y en a toujours un qui vous convient ~~~~~~
Dans cet article, parlons d'abord de la barre de navigation.
Barre de navigation
Avant d'utiliser BS, vous devez d'abord vous référer à BS, y compris CSS et JS. La méthode de référence est très simple, la même que la référence des fichiers externes ordinaires. Vous pouvez utiliser des liens CDN ou les placer dans des références locales. Le code est donné ci-dessous.
<html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "Viewport" contenu = "width = device-width, initial-scale = 1"> <title> MyVin's Landscape </ title> href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <! 9]> <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </ script> <script src = "http://cdn.bootcss.com/respond.js/1.4 <! [endif] -> </ head> <! - jQuery (nécessaire pour les plugins JavaScript de bootstrap) -> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </priss> <! - Inclut tous les plugins compilés (ci-dessous), ou inclut les fichiers individuels comme besoin -> </cript src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </ script>
Dans cet exemple de page Web de paysage, j'utilise le lien CDN.
Dans le même temps, car le plugin BS est basé sur JQ, JQ doit également être introduit.
Donnez d'abord le code complet de la barre de navigation
<Nav> <div> <! - La marque et la bascule sont regroupées pour un meilleur affichage mobile -> <div> <Button type = "Button" Data-Toggle = "ENCHAPPEM href = "#"> Définissez une marque vous-même </a> </div> <! - Navigation dans le coin supérieur gauche -> <div id = "BS-Example-Navbar-Collapse-1"> <ul> <li> <a href = "#"> homepage <span> (actuel) </pan> </a> </li> <li> <a href = "# #" Data-toggle = "role =" rôde " aria-expanded = "false"> scénario <span> </span> </a> <ul role = "menu"> <li> <a href = "# jiuzhaigou"> jiuzhaigou </a> </li> <li> <a href = "# lijiang"> lijiang </a> </li> <li> <a href = "# shuilianong"> grotte de shijian </a> </li> <li> </li> <li> <a href = "# shuilianandong"> Shijian Cave </a> </li> <li> </li> <li> <a href = "#"> Plus .. </a> </li> </li> </ li> Data-Target = "# About"> <a href = "#"> À propos de </a> </li> </ul> <formulaire de formulaire = "Search"> <div> <entrée Type = "Text" Paceholder = "Rechercher des attractions .."> <Button Type = "Button"> MODAL "Data-Target =" # Signin-Sinpip " id = "Signin-Button"> <a href = "#"> Login </a> </li> <li data-toggle = "modal" data-target = "# Signin-SignUp-Tab" id = "Signup-buutton"> <a href = "#"> Registre </a> </li> </ul> </v> </v> </varin>
Les composants de navigation de BS reposent tous sur la même classe .nav et le code est expliqué séparément. Regardons d'abord ce paragraphe:
<Button Type = "Button" Data-Toggle = "Collapse" Data-Target = "# BS-Example-Navbar-Collapse-1"> <span> Toggle Navigation </span> <span> </span> <span> </span> <pan> </span> </ Button>
Le but de ce code est de réduire la fenêtre, les options de menu de la barre de navigation s'effondreront, de cliquer sur l'icône d'effondrement et les options de menu de la barre de navigation seront organisées verticalement. La classe .Navbar-inverse dans le NAV est de couleur inverse. Les amis peuvent supprimer la classe .Navbar-inverse pour observer l'effet. Parce que je suis un contrôle noir, j'utilise la couleur inversée ici. Si vous voulez utiliser d'autres couleurs, Rich Gold, les amis peuvent les égaler en fonction de leur propre goût. La classe .Navbar-Brand peut être utilisée pour définir la marque de votre propre site Web. J'utiliserai le texte pour définir une marque moi-même ici. Les amis intéressés peuvent ajouter leur propre logo. La classe .Dropdown-Toggle peut implémenter un tir-down, et la classe .divider peut implémenter une ligne de division claire et sombre.
Comme son nom l'indique , la classe .navbar-droite dans la zone de recherche et la connexion et l'enregistrement sont à droite.
attributs de données
Ici, il est nécessaire de parler de l'attribut de données de BS. Dans BS, les développeurs peuvent utiliser tous les plugins JS dans BS uniquement via les attributs de données. Il s'agit d'une API de première classe dans BS et est souvent notre façon préférée d'utiliser des plugins JS. Par exemple, le data-toggle = "effondrement" et data-toggle = "dropdown" dans le code ci-dessus sont les moyens d'utiliser les plug-ins JS dans BS.
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 concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la barre de navigation bootstrap.