De nombreuses entreprises utilisent désormais le cadre de Bootstrap en développement. Bootstrap est le travail d'une équipe de Twitter, ce qui simplifie considérablement notre développement frontal. (Je vais résumer un peu moins d'utilisation plus tard)
Apprendre à utiliser l'API Je vous suggère de visualiser directement l'API du site officiel, adresse: http://www.bootcss.com/
Voici quelques rendus cibles:
Ci-dessous, je résumerai les techniques et les principes dans une petite démo:
La première étape consiste à télécharger le package compressé de bootstrap à http://www.bootcss.com/, créer un nouvel index.html, utiliser sublime ou autre éditeur pour ouvrir la page d'index, et le répertoire après décompression est
Étape 2 : Copiez un modèle de base du site officiel http://v3.bootcss.com/getting-started/ pour faciliter le développement ultérieur.
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta name = "Viewport" contenu = "width = device-width, premier, et 1"> <! - Le bilan de device ci-dessus? Tout autre contenu * doit * les suivre! -> <itTitle> Template Bootstrap 101 </Title> <! - Bootstrap -> <link href = "css / bootstrap.min.css" rel = "Stylesheet"> <! - Html5 shim and répond.js pour IE8 Support de Html5 Elements and Media Queries -> <! <! - [If lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </ script> <script src = "// cdn.bootcss.com/respond.js/1.4.2/Resquis.Min.js"> </ Script] - EndIFIC </-head> <body> <h1> Bonjour, monde! </h1> <! - jQuery (nécessaire pour les plugins javascript de bootstrap) -> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </ script> <! - Inclure tous les plugins compilés (ci-dessous), ou inclure des fichiers individuels -> <script src = "js / bootstrap.min.js"> </ script> </ body> </html>
1) Remarque: La référence à jQuery.js doit être en face de bootstrap.min.js, et il est préférable de télécharger manuellement un jQuery.js et de le placer dans le chemin JS, <script src = "js / jQuery.min.js"> </ script>
Parce que plus tard, lorsque j'émuais, j'ai trouvé que les effets d'animation déroulants et de carrousel avaient disparu, et j'ai constaté que le fichier jQuery du modèle de base était téléchargé et peut ne pas être connecté à Internet, donc je ne l'ai pas téléchargé. Il est préférable de citer le local par moi-même.
2) Remarque: La référence CSS est placée au-dessus de la page et la référence JS est placée sous la page, car CSS doit d'abord charger la page rendue, et JS doit charger et exécuter une fois le rendu de la page terminé; et les instructions de méta pour les appareils mobiles sont adaptées à: <meta name = "Viewport" contenu = "width = device-width, initial-scale = 1">
Étape 3, barre de navigation
1) Effet de centrage: le conteneur-fluent doit être changé en conteneur
2) Changer de blanc en noir avec un effet de contraste: <AV>
3) La barre de navigation est fixée en haut et ajouter des attributs de classe de temps: le toit-fixe de Navbar
<Nav> <! - Marque et basculature sont regroupées pour un meilleur affichage mobile -> <v> <Button type = "Button" Data-Toggle = "Collapse" Data-Target = "# BS-Example-Navbar-Collapse-1" Aria-expanded = "False"> <span> Togle Navigation </pan> <pander> </span> <pander> </pan> <pander> href = "#"> zootopia </a> </div> <! - Collectez les liens, les formulaires et autres contenus de navigation de navigation -> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> homepage <pan> (actuel) </span> </a> </li> <li> <a href = "" " Description </a> </li> <li> <a href = "#"> Fonctionnalités </a> </li> <li> <a href = "#"> À propos de </a> </li> </ div> <! - /.navbar-clapet -> </div> <! - /.Container-fluid -> </AV>
4) La barre de navigation couvrira le haut du corps, alors ajoutez le style
<style type = "text / css"> corps {padding-top: 50px; } </ style>5) Les éléments de navigation en vedette ajoutent des menus déroulants
<li> <a href = "#" data-toggle = "dropdown"> fonctionnalités </a> <ul> <li> <a href = "#"> Animal 1 </a> </li> <li> <a href = "#"> Animal 2 </a> </li> <li> <a href = "#"> Animal 3 </a> </li> 4 </a> </li> </li> </li>
Notez que le contenu du sous-menu est imbriqué dans l'étiquette LI la plus externe, et la balise Li a une liste déroulante de classe, et le sous-menu est également une balise UL, et la classe est Dropdown-Menu. Voir ci-dessus pour la relation de cartographie spécifique.
Étape 4: Augmentez l'effet de rotation et copiez et modifiez le module de carrousel du composant bootstrap:
<div id = "Carousel-Example-Generic" Data-ride = "Carousel"> <! - Indicateurs -> <Ol> <li Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "0"> </li> <li Data-Target = "# Caousesel-Example-Generic" Data-Slide-to = "1"> </li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div role="listbox"> <div> <img src="image/1.jpg"> <div> <h1>Zootopia 1</h1> <p>The visiting of the female house viewing position that expands the female house viewing position that expands the Expérience de la position de visualisation de la maison féminine qui ouvre les deux nombres qui se produisent dans le pays </p> </div> </div> <div> <img src = "Image / 2.jpg"> <div> <div> <img src = "Image / 2.jpg"> <div> <h1> ZOOTOPIA 1 </h1> <p> Le poste de visite de la maison féminin Les deux nombres qui se produisent dans le pays </p> </div> </div> <div> <img src = "image / 3.jpg"> <div> <h1> zootopia 1 </h1> <p> La visite de la maison de la maison féminine qui étend l'expérience de la position de la maison féminine qui ouvre les deux numéros qui se produisent dans le pays </p> </v> href = "# Carousel-Example-Generic" role = "Button" Data-Slide = "PREV"> <span aria-hidden = "true"> </span> <span> page précédente </span> </a> <a href = "# carousel-example-générique" role = "Button" Data-Slide = "Next"> <span Aria-Hidden = "true"> </ Spander> Suivant> </ Span Aria-Hidden = "True"> </ Spander> Spank <pander> </pander> <pan Aria-Hidden = "True"> </ Spander> </a> </ div>
1) Afin de ne plus avoir d'espace ni de lacunes en rotation lors de la rotation de l'image, ajoutez le style
.Caresel {hauteur: 500px; Color d'arrière-plan: # 000; } .carel .item {height: 500px; Color d'arrière-plan: # 000; } .carel img {largeur: 100%; }2) Réglez le style pour le texte pour le rendre plus beau
.Cassel-Caption P {marge-fond: 20px; taille de police: 20px; hauteur de ligne: 1,8; }Les effets actuels sont les suivants
Continuons: (le codage est mis à jour ...)
La deuxième partie a été mise à jour, démo dans le cas de développement frontal basé sur Bootstrap (II)
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.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher un sujet merveilleux: Tutoriel d'apprentissage bootstrap