1: Introduction à bootstrap
Boostrap est un cadre de développement frontal très populaire qui améliore considérablement l'efficacité de développement des équipes frontales. Bootstrap complète les composants de disposition CSS courants et les plugins JavaScript, ce qui permet aux développeurs de l'utiliser facilement. Utilisez Bootstrap pour créer rapidement des pages magnifiquement réactives et compatibles avec les appareils mobiles.
Deux: fonctionnalités bootstrap
Fournissez un ensemble complet de plug-ins CSS, riches feuilles de style prédéfinies, un ensemble de tables de plug-in JS à base de jQuery. Système de suppression de grille réactif flexible. Développement mobile basé sur la base basée sur moins et SASS.
Trois: Utilisez Bootstrap
1. Étape 1:
Téléchargez le dernier bootstrap à http://www.bootcss.com/. Après décompression, il y a trois dossiers, qui placent respectivement CSS, JS et les polices. Il existe une version compressée des fichiers CSS et JavaScript, et vous pouvez choisir une version en fonction de vos besoins. La version non compressée est utilisée pendant le développement et la version compressée est utilisée lors de la version.
2. Affichage du code de modèle fixe
<! Doctype html> <html lang = "zh-cn"> <éad> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge, chrome = 1"> <! - ie = edge tels name = "Viewport" Content = "width = Device-width, initial-scale = 1"> <! - Les trois balises de méta ci-dessus * doivent * être placées à l'avant, et tout autre contenu * doit les suivre! -> <itTitle> Style de modèle bootstrap </title> <! - Présentation de bootstrap -> <link href = "css / bootstrap.min.css" rel = "Stylesheet"> <! - Présentation du framework html5 et répond.js pour soutenir IE8 et IE9. IE 8 nécessite la coopération de répond.js pour obtenir un soutien aux requêtes médiatiques. Répond.js ne peut plus s'exécuter sous le fichier: // fichier de chemin: // -> <! - [Si lt ie 9] signifie qu'il prend effet dans les navigateurs ci-dessous ie9 -> <! - [si lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script src = "// cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </ script> <! [endif] -> </ad> </ body> <h1> Bonjour, monde! </h1> <! - Citez le plugin jQuery en bas pour réaliser des effets dynamiques bootstrap -> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> src = "js / bootstrap.min.js"> </ script> </ body> </html>
3. Utilisation de base:
3.1 Système global de grille Framework-12
Le noyau de bootstrap est un système 12-raster. Le système 12 Grid divise la zone de contenu de la page Web en 12 copies en fonction de la largeur. Les développeurs Web peuvent le combiner librement en portions, ce qui facilite la disposition de la page Web et rend la mise en page soignée et standardisée.
BootStarp fournit un conteneur de style appelé conteneur. Le conteneur est un style auto-centré et très adaptatif. L'utilisation de .Container comme style div le plus extérieur du contenu de la page Web peut facilement implémenter la disposition de la page Web de la grille. De plus, ce système à 12 grilles est adaptatif à la taille de l'écran, et le container ajustera automatiquement la largeur totale et la largeur moyenne de la grille en fonction de la taille de l'écran.
COL-LG-N Largeur de colonne maximale 95px dans le cas de> = 1200px pixels, divisez .Container12 également avec une largeur 95px par portion. La largeur du reste est à 100%
COL-MD-N Largeur maximale 78px; diviser .Container12 également avec> = 992px pixels restant à 100%
COL-SM-N Largeur de colonne maximale 60px en cas de pixels> = 768px, divisez .Container12 également avec le reste des cas à 100%
La largeur de la colonne COL-XS-N est égale à la taille de la fenêtre 12. conteneur 12 égal à l'écran de toute taille
3.2 Styles de base
(1) Le style H1-H6 de Bootstrap a été annulé en gras, et les marges supérieures et inférieures sont redéfinies en marge H1-H3: 20px; marge-fond-10px; Marge H3-H6: 10px; marge-fond-10px;
(2) Définir quatre styles d'alignement, à savoir .Text-left, .Text-center, .Text-droite, .Text-justify .Text-Justiftiftify les deux extrémités des lettres anglaises
(3) Bootstrap fournit cinq styles de couleurs par défaut, -Primaire Key Blue, -Success Success vert, -info Information Blue Warning Warning Orange, -Danger dangereux rouge
Composant 3.3BTN + groupe BTN
<Button Type = "Button" class = "BTN BTN-Primary"> Button de touche </ Button> Component alerte <div class = "alert" class = "alert alert-danger"> Danger avertissement </div>
Les composants généraux ont quatre tailles: XS ultra-petit, petit SM, ordinaire et grand LG. Utiliser la méthode est le composant nom-size <bouton type = "bouton" class = "btn btn-lg"> bouton ultra-large </fontissage> différents types de boutons du même composant peuvent être utilisés en combinaison.
<Button Type = "Button" class = "btn btn-primary btn-lg"> Button de clé ultra-large </futton> <! Liste <span> </span> </ bouton> <ul> <li> Lenovo </li> <li> Asus </li> <li> Apple </li> </ul> </div>
3.4 Tableau de table Table:
Ajoutez un élément parent div à l'élément de table, ajoutez class = "Table-Responsive" à cette div Créez une table correspondante. Lorsque le pixel de la fenêtre est inférieur à 768px, une barre de défilement horizontale apparaîtra.
<! - Tableau, il y a des couleurs espacées entre les listes à rayures de table, la table sensible à la table Adaptif -> <div> <s table </td> <td> 2 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr> </ table> </ div>
Badge de 3,5 badge
<! - Badges Badges -> <br/> <a href = "#"> Special Care <span> 42 </span> </a> <br/>
3.6 Bar de navigation
(1) barre de navigation capsule
<ul> <li> <a href = "#"> dynamique <span> 42 </span> </a> </li> <li> <a href = "#"> Profil </a> </li> <li> <a href = "#"> Message privé <span> 3 </pan> </a> </li> </ul>
(2) étiqueter la barre de navigation
<! - Tag Navigation Menu -> <ul> <li> <a href = "# news1" data-toggle = "tab"> News News </a> </li> <li> <a href = "# news2" data-toggle = "tab"> industrie actualités </a> </li> <li> <a href = "# news3" data-toggle = "tab"> notices </a> </li> </ul> <div> <div id = "news1"> <ul> <li> News News </li> </ul> </div> <div id = "news2"> <ul> <li> Industrie News </li> <li> Industrie News </li> </ul> </v> <div id = "news3"> <ul> Annonce </li> <li> Annonce de préavis </li> <li> Annonce d'avis </li> </ul> </div> </div>
3,7 groupe d'entrée
<! - Entrée + Button Combination -> <div> <entrée type = "Text"> <span> <Fut-Button> Recherche </futton> </span> </div>
3,8 Carrousel
<! Doctype html> <html lang = "zh-cn"> <éad> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge, chrome = 1"> <meta name = "visualible" teleppert Style </ title> <link href = "../ CSS / bootstrap.min.css" rel = "Stylesheet"> <style> Body {background: #eee} .item {position: relative; hauteur: 400px} .item img {position: relative; Largeur: 100%; hauteur: 400px} .item p {position: absolue; en haut: 40%; Largeur: 100%; Couleur: #FFF; } .item h1 {position: absolu; TOP: 20%; Largeur: 100%; Couleur: #FFF; Text-Align: Center} @media (max-width: 768px) {.slide {width: 100%}} </ style> <! - [if lt ie 9]> <script src = "../ js / html5shiv.min.js"> </ script> <script src = "../ js / répond.min.js"> </ script> <! [endif] -> <script src = "../ js / jquery.min.js"> </ script> <script src = "../ js / bootstrap.min.js"> </cript> </ad> <ody> <v> <v id = "MyCarousel" Data-Ride = "Carouse> <v> <v id =" MyCarousel "Data-Ride =" Carouse> <v> <v Id = "MyCarousel" Data-Ride = "Carouse> <v> <v Id =" MyCarousel "Data-Ride =" Tody> <Div> <v Id = "MyCarousE > <! - Navigation de diapositives -> <l> <li data-target = "# mycarel" data-slide-to = "0"> </li> <li data-target = "# mycarel" data-slide-to = "1"> </li> <lis data-target = "# mycarel Data-Slide-to = "2"> </li> </l> <div style = "height: 400px"> <! - First Slide -> <div style = "height: 400px"> <img data-holder rendered = "true" src = "../ images / icon1.png"> <h1> Titre Contenu </h1> <p> 1 </div> </ div> <! - Deuxième diapositive -> <div> <img data-holder-rendered = "true" src = "../ images / icon2.png"> <div> title2 </div> </div> <! - troisième diapositive -> <div> <img Data-Holder-Rendered = "true" " src = "../ images / icon3.png"> <div> title3 </div> </div> <! - Navigation en direct-droite -> <a href = "# mycarel" data-slide = "prev"> <span aria-hidden = "true"> </ span> <span> précédente </span> </a> <a href = "# # mycarousel" data-spor aria-hidden = "true"> </span> <span> suivant </span> </a> </div> </div> <script> $ (function () {$ ('# myCaRousel'). On ('Slide.bs.carel', function () {// alert ("function de rappel");});}); </cript>3,9 groupe de panneaux
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> bootstrap instance- tab page (tab) plugin </ title> <link = "stylesheet" href = "../ css / bootstrap.min.css"> <script src = "/ js / js / jQuery.min. src = "../ js / bootstrap.min.js"> </ script> <body> <div id = "Panel-Group"> <! - Contenu du panneau Close -> <div> <div> <h4> <a data-toggle = "effondrement" Data-Parent = "# Panel-group" Href = "# # #> Title de panneau </a> </h4> id = "CollapseOne"> <div> Contenu du panneau </div> </div> <! - Contenu du panneau Open -> <div> <div> <h4> <a data-toggle = "effondrement" Data-Parent = "# Panel-group" href = "# collapsetwo"> titre de panneau </a> </h4> </v> <div id = "collapsetwo"> </v> Panel Contenu </div> </div> </div> </body>
3.10 Requête médiatique
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <meta name = "Viewport" contenu = "maximum-scale = 1.0, minimum-échelle = 1.0, user-scalable = 0, width = width, div {width: 1.0" /> <title> Quéry </ title> 100%; hauteur: 200px; fond-couleur: rouge;} / * lorsque la largeur maximale palatibles est de 980px, c'est-à-dire le style interne appéteur <= 980px prend effet * / @ média (max-width: 320px) Query </div> </ body> <script> window.onresize = function () {var myDiv = document.getElementsByTagName ("div") [0]; mydiv.innerhtml = document.DocumentElement.ClientWidth;} </ script> </html>Quatre: choses à noter
1. Le conteneur, col - - (raster), doit être enveloppé dans un div distinct, puis définir d'autres contenus.
2. Si vous souhaitez définir la classe ou l'ID qui ne peut pas être défini pour la requête multimédia ne peut pas être définie pour l'élément et écrire la classe ou l'identifiant de la définition col - - (raster) dans un div,
Medio est le moyen d'écrire des erreurs de classe pour définir les requêtes multimédias <v> aa </div>
La bonne façon de l'écrire est
<div> <div> aa </div> </div>
3. Si vous utilisez un conteneur pour obtenir une adaptation de hauteur, vous ne pouvez pas ajouter de hauteur à l'élément et vous devez définir le débordement pour son élément parent.
4. Lors de la définition du positionnement de position pour l'élément, la largeur de l'élément est 0. Si vous voulez que l'élément soit centré, vous devez ajouter la largeur: 100%; Texte-aligne: Centre;
5. Lorsque vous utilisez la balise d'entrée, si Col - - (Raster) est défini pour sa classe parent, vous pouvez ajouter du format de formulaire pour entrée pour définir la taille de l'entrée aussi grande que la classe parent.