Qu'est-ce que Bootstrap?
Bootstrap est un cadre frontal pour le développement rapide d'applications Web et de sites Web. Bootstrap est basé sur HTML, CSS et JavaScript.
histoire
Bootstrap a été développé par Mark Otto de Twitter et Jacob Thornton. Bootstrap est un produit open source publié sur GitHub en août 2011.
J'ai beaucoup de temps libre récemment. Aujourd'hui, je vais vous présenter un framework "Style" frontal - Bootstrap.
1. Architecture globale bootstrap
Pourquoi, dans l'introduction, j'appelle Bootstrap en tant que cadre de style frontal? Peut-être qu'un tel titre n'est pas très précis, mais je pense qu'un tel titre peut permettre à certains débutants de comprendre et de comprendre ce que Bootstrap est plus rapidement. Je n'aime pas utiliser des mots haut de gamme pour approfondir la compréhension d'une certaine connaissance, mais préfère plutôt utiliser des mots faciles à comprendre pour décrire les points de connaissance. Bien qu'une telle description puisse être un peu inexacte, je pense que ce n'est pas grave, car de telles descriptions peuvent en effet permettre aux débutants de comprendre ces connaissances plus rapidement. Parce que j'étais confus lorsque j'apprenais des points de connaissances, certains documents de connaissance officiels étaient si haut de gamme. En fait, pour le dire franchement, ce n'était que quelques choses du passé, puis encapsulées pour rendre le développement plus facile et plus rapide. Ici, je partage ici que le framework bootstrap est le même. De plus, l'organisation de contenu est également destinée à permettre aux débutants de mieux le maîtriser. Parce que lorsque j'ai commencé à entrer en contact avec cela, j'étais aussi un débutant. Je pense que cette façon d'organiser peut vous aider à comprendre les connaissances plus rapidement et mieux.
Pour Bootstrap, nous devons d'abord introduire son architecture globale - de quoi consiste exactement. Je crois que vous pouvez rapidement comprendre ce qui est composé exactement dans Bootstrap en regardant l'image ci-dessous.
D'après la figure ci-dessus, nous pouvons clairement voir que Bootstrap se compose principalement des parties suivantes:
12 Système de grille - doit diviser l'écran en 12 copies (colonnes).
Utilisez des lignes pour organiser des éléments (chaque ligne comprend 12 colonnes), puis placez le contenu dans la colonne.
Décalage de la colonne de contrôle par col-md-offset- *.
Composants de mise en page de base - Bootstrap fournit une variété de composants de mise en page de base. Comme la composition, le code, les formulaires, les boutons, les formulaires, etc.
JQuery - Bootstrap tous les plugins JavaScript reposent sur jQuery. Si vous souhaitez utiliser ces plugins JS, vous devez vous référer à la bibliothèque JQuery. C'est également la raison pour laquelle nous devons faire référence à la bibliothèque JQuery en plus de nous référer au fichier JS de bootstrap et au fichier CSS, qui sont tous deux des dépendances.
Composants CSS - Bootstrap a pré-implémenté de nombreux composants CSS pour nous. Assemblez la boîte, le groupe de boutons, la navigation, etc. En d'autres termes, le contenu bootstrap nous a aidés à définir beaucoup de styles CSS, et vous pouvez directement appliquer ces styles à des éléments tels que les boîtes déroulantes précédentes.
JavaScript Plug-In - Bootstrap implémente également certains plug-ins JS pour nous. Nous pouvons utiliser les plug-ins fournis par celui-ci pour remplir certaines fonctions communes, sans nous obliger à réécrire le code JS pour obtenir des effets tels que des boîtes d'invite et des fenêtres modales.
Conception réactive - Il s'agit d'un concept de conception. Réactif signifie qu'il ajustera automatiquement la page en fonction de la taille de l'écran, afin que la page frontale puisse bien fonctionner sur les écrans de différentes tailles.
Bootstrap est composé des parties ci-dessus. Ce qui précède a donné une brève introduction à chaque composant, et le contenu suivant n'est rien de plus qu'une introduction détaillée à chaque composant à travers certains exemples.
2. 12 Système de grille
Bootstrap définit un système de grille 12 pour une meilleure mise en page. La première chose à définir est le système de mise en page pour chaque cadre frontal. Dans Bootstrap, il utilise des lignes et des colonnes pour créer la disposition des pages. Il existe plusieurs principes pour sa mise en page:
La ligne doit être incluse dans .Container (largeur fixe) ou .Container-fluid (100% largeur)
Chaque ligne contient 12 colonnes
Placer le contenu dans chaque colonne
Dans le système raster de bootstrap, les navigateurs sont divisés en 4 types en fonction de leur largeur. Les valeurs sont: automatique (100%), 750px, 970px et 1170px.
Les styles correspondants sont ultra-petits (XS), petits (SM), écran de taille moyenne (MD) et grand (LG)
Il est initialement mis en œuvre en définissant la largeur minimale via la requête multimédia. Par conséquent, les pages Web fabriquées par bootstrap sont compatibles avec les grandes et les petites!
Dans le cadre de bootstrap, la valeur de délimitation de la taille de l'écran a été prédéfinie et la valeur de délimitation est définie par des requêtes multimédias. Sa définition est la suivante:
/ * Écran ultra-petit (mobile, moins de 768px) * // * Il n'y a pas de code lié à la requête multimédia, car il s'agit de la valeur par défaut de Bootstrap (n'oubliez pas que Bootstrap est mobile-premier?) * // * Small Screen (plat, supérieur à ou égal à 768px) * / @ media (Min-Width: @ Screen-Sm-Min) {...} / * Écran médial (Deboutht Display, supérieur, 992px) * / @ media (min-width: @ screen-md-min) {...} / * grand écran (grand écran de bureau, supérieur ou égal à 1200px) * / @ media (min-width: @ screen-lg-min) {...}En fait, les requêtes multimédias sont également utilisées dans le développement d'applications Win8 pour réaliser des applications réactives. Donc, si vous entendez le système réactif à l'avenir, ne pensez pas que c'est très profond. En fait, le cadre définit les requêtes multimédias pour nous. Si la largeur minimale définie dans les requêtes multimédias dépasse la largeur minimale définie dans les requêtes multimédias, de cette manière, vous pouvez réduire la taille de l'élément entre différents écrans pour s'adapter à l'écran. Cependant, le concept proposé par Bootstrap est préféré pour les appareils mobiles, de sorte que les pages conçues par bootstrap ne peuvent être compatibles qu'avec les grandes et petites incompatibles avec les petites.
3. Composants de mise en page de base
Le composant de mise en page de base est que le framework bootstrap définit certains styles unifiés pour certaines étiquettes de mise en page de base. Comme la table, le bouton, le formulaire, etc. Regardons un exemple de table:
<! 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! -> <itle> Bootstrap 101 Template </Title> <! - Parce qu'il n'y a pas de plugin JS pour bootstrap, il n'y a aucune référence au composant jQuery -> <! - Bootstrap -> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </ head> <body> <h3> Tableau de style par défaut </h3> <band> <EPPTION> Titre de la table. </ Tennesse> <! Table -> <Thead> <Tr> <th> id </ th> <th> prénom </ th> <th> nom de famille </th> </tr> </thead> <tbody> <tr> <thated = "row"> 1 </th> <td> Tommy </td> <td> li </td> </tr> <tr> <th> scope = "row"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th Scope = "row"> 3 </th> <Td> Sam </td> <td> wang </td> </tbody> <h3> Tableau de la table à bord </h3> <table t + tête, t représente la signification de la table -> <thead> <tr> <th> id </ th> <th> prénom </ th> <th> nom de famille </th> </ tr> </thead> <tbody> <tr> <thcate = "row"> 1 </th> <td> tommy </td> <td> li </td> </tr> <tr> scope = "row"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th Scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </tr> </body> <! - Pour plus de références de style de table: http://v3.bootcss.com/css/#tables--><!-- jQuery (nécessaire pour les plugins JavaScript de bootstrap) -> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </cript> <! -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </cript> </ body> </html>
L'exemple de code pour le bouton et le formulaire ne sera pas publié ici. Vous pouvez utiliser le lien ci-dessous pour afficher l'effet en cours d'exécution et le code source. Vous pouvez également télécharger tous les codes source de ce sujet via le dernier fichier de téléchargement.
Iv. Composants CSS
Les composants CSS sont similaires aux composants de mise en page de base, c'est-à-dire que Bootstrap définit certains styles existants pour certaines balises, et l'effet de ces styles est très beau, de sorte que chaque entreprise ou développeur n'a pas besoin d'écrire un autre style, accélérant ainsi l'efficacité de développement. Jetons un coup d'œil à un exemple de navigation ici. Pour le dire franchement, si vous utilisez trop cette chose, vous vous familiarisez naturellement avec cela.
<! 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> Bootstrap 101 Modèle </ Title> <! - Bootstrap -> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </ head> <corps <h3> Navigation Bar </H3> Soyez groupé pour un meilleur affichage mobile -> <v> <Button Type = "Button" Data-Toggle = "Collapse" Data-Target = "# BS-Example-Navbar-Collapse-1" Aria-Expanded = "False"> <span> Toggle Navigation </span> <span> </ span> <span> </span> <pander> </span> </sponse> <A href = "#"> home </a> </div> <! - Collectez les liens, les formulaires et autres contenus de navigation de navigation -> <div id = "bs-example-navbar-caflapse-1"> <ul> <li> <a href = "#"> home <span> (actuel) </pan> </a> </li> <li> <A href = "#"> À propos de </a> </li></ul> <ul> <li> <a href = "#"> lien </a> </li> <li> <a href = "#" "data-toggle =" dropdown "role =" Button "aria-haspopup =" true "aria-expanded =" false "> dropdown <pan> </pannet> href = "#"> Action 1 </a> </li> <li> <a href = "#"> Action 2 </a> </li> <li> <a href = "#"> Action 3 </a> </li> <li> <a href = "#"> Action séparée </a> </li> </li> </ul> </v> <! - /. -> </ div> <! - /.Container-Fluid -> </ Nav> <! - JQuery (nécessaire pour les plugins JavaScript de bootstrap) -> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </cript> <! -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </cript> </ body> </html>
Les effets de fonctionnement des autres composants sont les suivants:
5. plug-in javascript
Par défaut, tous les plugins JS peuvent être implémentés en définissant le code HTML spécifique et les propriétés correspondantes sans écrire une ligne de code JavaScript. L'essence de son implémentation est que Bootstrap implémente le code JavaScript correspondant pour ces propriétés.
Jetons un coup d'œil à un exemple de fenêtre modale:
<! 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! -> <Title> Bootstrap 101 Modèle </ Title> <! - Bootstrap -> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </-head> <corps <h3> Modal Windows </h3> type = "Button" data-toggle = "modal" data-target = "# myModal"> Cliquez sur moi </futton> <div id = "myModal"> <div> <div> <div> <Button type = "Button" Data-Dismiss = "Modal" Aria-Label = "Close"> <span Aria-Hidden = "true"> × </pan> </ponte> Titre </h4> </div> <div> <p> Test Body… </p> </div> <v> <Button Type = "Button" Data-Dismiss = "Modal"> Close </ Button> <Button Type = "Button"> Enregistrer les modifications </ Button> </div> <! - /. jQuery (nécessaire pour les plugins javascript de bootstrap) -> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </cript> <! - Inclure tous les plugins compilés (ci-dessous), ou inclure des fichiers individuels -> <script> <! - src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </cript> </ body> </html>
Après avoir lu tout le contenu précédent, pensez-vous instantanément que Bootstrap n'est en fait qu'un cadre de style? Avec cela, nous pouvons créer rapidement et facilement des pages Web. De plus, après avoir lu le contenu précédent, vous ne serez pas confondu pourquoi le document officiel de bootstrap est le suivant:
Les entrées de la barre de navigation du document officiel de bootstrap ne sont-elles pas les principales composantes de notre introduction ci-dessus?
6. Résumé
À ce stade, tout le contenu de cet article est terminé. J'espère que grâce à cet article, les débutants peuvent rapidement comprendre et maîtriser Bootstrap. De plus, cet article équivaut aux points clés de Bootstrap. Pour un contenu plus détaillé, vous pouvez vous référer au site officiel chinois de Bootstrap. Mais je ne pense pas que je n'en veux plus. Il vaut mieux le pratiquer directement si vous avez ce temps. L'application Web VS2013 prend déjà en charge le framework bootstrap par défaut. Vous pouvez immédiatement créer une application Web via VS2013 pour vivre l'application de bootstrap sous ASP.NET MVC avant de le lire.