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.
Après avoir écrit cet article, je veux écrire le contenu suivant de cet article:
1. En fonction de ma compréhension de Bootstrap, je vais faire un petit résumé.
2. Je vais embellir et optimiserai l'interface utilisateur et le code pour les exemples d'apprentissage Bootstrap (2) à partir de zéro, principalement pour parler de la façon dont j'ai fait l'effet que je voulais.
3. Il est préférable d'enseigner aux gens comment pêcher que d'enseigner aux gens comment pêcher. Utilisez vos propres exemples (parce que vous êtes également novice, et ce que vous écrivez peut être plus adapté aux débutants) et parlez des pièges rencontrés pendant le processus d'écriture de code et des points à qui il faut prêter attention.
Sans plus tarder, commençons:
1. Un petit résumé de bootstrap
Sur la base de la description de la documentation officielle de Bootstrap (http://v3.bootcss.com/), Bootstrap est divisé en trois grands blocs: style CSS, composants et plug-in javascript.
Tout d'abord, il est clair que Bootstrap est un cadre, ce qui signifie que si les autres fabriquent des roues, vous pouvez les utiliser directement, afin de ne pas construire des roues par vous-même. Nous devons donc clarifier deux points: quel type de roues sont ces roues et comment les utiliser.
1. Style CSS: il introduit principalement le style global du système raster et de la bootstrap. Implémenté en définissant la valeur de la classe.
1.1 Système de grille:
Cela nous permet d'implémenter facilement la disposition des pages HTML (http://v3.bootcss.com/css/#grid).
Je pense que le système de grille est très important. Parce que la disposition des pages HTML est une tâche importante et encombrante (vous pouvez jeter un œil à l'introduction de la mise en page dans W3School http://www.w3school.com.cn/html/html_layout.asp, regardez le code dans l'exemple et que vous comprenez), et la compatibilité de différents navigateurs et devices doit être pris en compte.
Le système raster a considérablement simplifié cela. Ouvrez la connexion ci-dessus sur le système de grille, et vous constaterez que vous n'avez besoin que d'attribuer la valeur correspondante à l'attribut HTML Element Class en fonction de l'effet que vous souhaitez réaliser, et vous pouvez également définir différents effets sur des appareils de différentes tailles d'écran.
1.2 Bootstrap Global Style:
C'est ainsi que bootstrap embellit des éléments HTML couramment utilisés (par exemple: div, bouton, p, table, IMG, etc.). En attribuant la valeur correspondante à l'attribut de classe de l'élément HTML, vous pouvez obtenir l'effet souhaité.
Donnons l'exemple le plus simple:
Comme le montre la figure ci-dessus, Bootstrap vous permet de modifier la valeur de classe de l'élément de bouton pour modifier la taille du bouton sans avoir à diffuser le fichier CSS ou intégrer la valeur de style de l'élément.
2. Composant: Je pense que le composant est bootstrap qui combine certains éléments (éléments HTML et code JavaScript) en composants, et fournit de nombreuses icônes très belles et pratiques. Ces composants sont essentiellement couramment utilisés dans le développement de HTML. Implémenté en définissant la valeur de la classe. (http://v3.bootcss.com/components/)
Donnons l'exemple le plus simple:
Comme le montre la figure ci-dessus, lorsque nous devons implémenter la fonction de navigation. Trouvez les composants correspondants dans Boostrap et affectez les valeurs de classe, UL et Li correspondantes en fonction de vos propres besoins.
3. Plug-in JavaScript: Je pense que le plug-in JavaScript de Bootstrap est la "roue" qui résume les fonctions d'interaction Web communes. Il vous suffit de définir l'attribut de classe et l'attribut de données pour implémenter les fonctions d'interaction Web couramment utilisées sans avoir à écrire vous-même beaucoup de code JavaScript.
Tout d'abord, parlons d'un petit épisode. Les débutants peuvent penser à tort que «JavaScript» et «Java» ont un lien profond et peuvent même penser que JavaScript est une variante de Java. En fait, ce n'est pas le cas. JavaScript est un langage de script développé par Netscape pour Internet. En fait, son prénom est "Livescript". Plus tard, Netscape a atteint une coopération avec Sun (c'est-à-dire la société qui a inventé Java, qui a ensuite été acquise par Oracle). À cette époque, la langue Java était à son apogée et était très célèbre. Afin de faire le tour, il a changé son nom en JavaScript. À tel point que certaines personnes ont plaisanté: la différence entre "Java" et "Javascript" est la même que la différence entre "Lei Feng" et "Lei Feng Tower".
Retour au sujet, nous savons que JavaScript existe pour donner des capacités d'interaction de la page Web. Par conséquent, les riches plug-ins JavaScript sur bootsript peuvent vous faire implémenter facilement les fonctions d'interaction Web couramment utilisées sans avoir à vous concentrer sur la «fabrication des roues».
Comme le montre la figure ci-dessus, en utilisant le plug-in de carrousel de Bootstrap (http://www.runoob.com/bootstrap/bootstrap-carel-plugin.html, le document officiel de bootstrap n'est pas traduit en code en ligne pour soumettre l'effet d'observation très détaillé sur Runoob, et vous pouvez modifier le code en ligne pour soumettre l'effet d'observation, qui est fortement recommandé). Vous pouvez facilement implémenter la fonction de carrousel d'image que de nombreux sites Web utilisent désormais. Ici, vous n'avez qu'à affecter les valeurs SRC de classe et d'image correspondantes en fonction du tutoriel dans le lien ci-dessus, et vous n'avez même pas besoin de définir la valeur de données.
2. Embellir et optimiser l'interface utilisateur et le code pour les exemples d'apprentissage Bootstrap (2) à partir de zéro
La figure suivante montre les effets réalisés dans le tutoriel précédent:
Nous pouvons voir qu'il y a les lacunes suivantes qui doivent être corrigées:
(1) Cliquez sur le camarade de classe spécifique et affichez leurs informations, et elle n'est pas sélectionnée. (Lorsque vous cliquez au début, vous serez à l'état sélectionné, mais c'est juste l'effet de clic du bouton. Si vous cliquez sur l'espace vide, l'état sélectionné disparaîtra)
(2) Les couleurs sont monotones et pas très belles.
(3) La disposition doit être ajustée. La boîte d'information est l'endroit où nous avons besoin d'informations et devons être aussi grands que possible. Il est préférable de masquer la boîte inutile lorsqu'elle est affichée.
(4) Pour le code, le code JavaScript dans Bootstrap (2) à partir de zéro est écrit dans la page HTML, et il y a des segments de code en double. Les segments de code en double doivent être écrits en fonctions, ce qui peut réduire la taille du code. Lors de la modification du code, je peux simplement modifier directement la fonction correspondante, sans chercher un endroit à la fois. Le code JavaScript peut être écrit dans des fichiers JS pour séparer les pages HTML et le code JavaScript.
Sélection technique (incliniquement parlant, il s'agit de réfléchir à la façon d'utiliser ce qui se trouve déjà dans le cadre de bootstrap pour réaliser l'effet souhaité):
1. Ajustez d'abord la disposition, ajustez la zone d'information et la zone de classe ensemble et affichez la boîte de classe en haut.
De toute évidence, nous n'avons qu'à placer le div où se trouve la zone d'information et la div de la boîte de classe dans la même ligne dans le div, et modifier la valeur d'attribut de classe "Col-MD" liée au système de grille pour y parvenir. Par exemple, si nous voulons qu'ils affichent un rapport de 2: 1, l'attribut de classe de la zone d'information doit avoir COL-MD-8, tandis que la case de classe doit être COL-MD-4.
Il convient de noter que le front-end ne peut jamais être un développement en une étape. Souvent, le code initial n'est pas le résultat parfait que nous voulons et doit être soigneusement ajusté. Par exemple, tout le monde devrait apprendre à rechercher par lui-même, essayer de faire des ajustements continus (les ajustements suivants ne seront pas expliqués dans le processus spécifique):
Après avoir modifié le code, l'effet présenté est le suivant:
De toute évidence, une seule classe est affichée sur chaque ligne ci-dessus, ce qui est un peu un gaspillage d'espace. Les deux parties ci-dessous ne sont pas alignées.
Supprimez le "BTN-Group-Vertical" dans l'attribut de classe du composant DIV ci-dessus, et ajoutez Col-MD-6 à l'attribut de classe de TMP_BUTTON dans le code JS. De plus, il est observé qu'après avoir réglé ceci, la première ligne a une étrange indentation par rapport à la deuxième ligne:
Il ne fait aucun doute que ce type d'apparence et les changements de mise en page sont liés au CSS. Pour le moment, nous pouvons jeter un œil au CSS spécifique de l'élément.
Prenez Chrome comme exemple:
Cliquez avec le bouton droit sur cet élément et sélectionnez Inspecter, ce qui signifie une révision. Vous trouverez le code correspondant dans la case à droite. Grâce à la comparaison, nous avons constaté qu'il s'agit d'un problème de marge-gauche. Cette propriété est la valeur par défaut du framework bootstrap et est héritée de l'élément supérieur. Certains sont -1px et certains sont 0px. Nous avons juste besoin de le changer en même, par exemple, tous sont modifiés en 0px:
Dans le TMP_BUTTON dans le code JS, modifiez l'attribut de style et ajoutez "margin-left: 0px;". Certaines personnes pensent que la police n'est pas bonne à regarder au centre, afin qu'ils puissent ajouter du texte-alignement: à gauche et définir le texte sur le bouton pour démarrer de la gauche.
Effets corrigés:
2. Ajoutez un bouton de pliage afin que les utilisateurs puissent masquer / ouvrir la case de classe via ce bouton. Lorsque vous cliquez sur Class Camate pour afficher des informations détaillées, il le masquera automatiquement pour économiser beaucoup d'espace pour que la case d'information s'affiche.
Pour ajouter un bouton de pli, vous pouvez vous référer à http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html.
De plus, nous pouvons ajouter une belle icône au bouton de pliage, et il peut être facilement réalisé en se référant au tutoriel http://v3.bootcss.com/components/#glyphicons.
Lorsque vous cliquez sur Classmate pour afficher des informations détaillées, il sera automatiquement masqué. Vous devez modifier l'événement de clic du bouton de camarade de classe, c'est-à-dire le code JS correspondant.
Nous avons vérifié l'utilisation du plugin pliant bootstrap http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html (c'est mieux, la partie officielle n'a pas encore été traduite), et trouvé le contenu suivant:
Il s'avère que CLACKET et dans les valeurs de l'attribut de classe contrôlent les fonctions cachées et d'affichage. Ensuite, nous devons seulement modifier l'attribut de classe correspondant de l'élément HTML pour effectuer l'opération "Show / Mashe" dans le code JS Click Event du bouton. Ajoutez donc l'instruction suivante à la fonction de clic du bouton Class CamE:
$ ("# effondrement"). att ("class", "panneau-malapse effondrement");
3. Correction du bogue qui "clique sur des étudiants spécifiques et affichez leurs informations, et il n'y a pas d'état sélectionné".
En vérifiant le document, http://www.runoob.com/bootstrap/bootstrap-button-plugin.html, nous définissons la propriété de données du bouton sur le bouton sur "Bouton", qui peut automatiquement rendre l'état sélectionné après avoir cliqué.
Nous ajoutons donc l'attribut data-toggle = "bouton" au bouton de la camarade de classe.
Pour le moment, un autre problème s'est produit. Je pense que lorsque je clique sur d'autres camarades de classe ensuite, le clic d'origine était toujours à l'état actif. Que dois-je faire?
En vérifiant http://www.runoob.com/bootstrap/bootstrap-buttons.html, l'état sélectionné apparaîtra lorsque l'affectation de classe du bouton est active. C'est-à-dire que le paramètre ci-dessus, c'est-à-dire, Bootstrap fait quelque chose comme ceci: lorsque le bouton Data-Toggle = "du bouton" est cliqué sur, l'Actif est automatiquement ajouté à la classe et l'état sélectionné est présent. Lorsque vous cliquez à nouveau, l'actif est automatiquement supprimé de la classe et l'état non sélectionné est présenté.
En d'autres termes, nous avons juste besoin de faire cette opération nous-mêmes. Par exemple, lorsque vous cliquez sur Class Camate, je peux supprimer tous les boutons de camarade de classe actifs de l'attribut de classe. Une fois le clic terminé, seul le bouton que j'ai cliqué est à l'état actif.
Par conséquent, il vous suffit d'ajouter ces instructions à la fonction de clic du bouton Class CamE:
La copie de code est la suivante:
$ (". Btn-Classmate"). att ("class", "btn btn-default btn-cllassmate btn-info");
L'effet est le suivant:
4. Embellir l'apparence du bouton
Trouvez la section du bouton CSS dans Bootstrap:
http://www.runoob.com/bootstrap/bootstrap-buttons.html
Après le tutoriel pour le modifier, j'ai simplement modifié la couleur du bouton ici, et vous pouvez le changer vous-même en fonction de vos besoins. L'effet est le suivant:
5. Séparation des pages HTML et du code JavaScript
En fait, il est divisé en deux étapes:
Étape 1: Mettez le code JavaScript dans le fichier JS et liez-le dans le fichier html.
Étape 2: Écrivez des blocs de code avec JavaScript ou effacez les fonctions dans une fonction et appelez directement la fonction.
Étant donné que les deux étapes sont relativement simples, toute personne qui a appris un langage de programmation devrait le faire. Je ne développerai pas et n'écrirai pas.
Il convient de noter que lorsque vous liez les fichiers JS, faites attention à la commande.
Par exemple, le fichier JS dans bootstrap est basé sur jQuery et utilise de nombreuses fonctions jQuery, de sorte que le fichier jQuery JS doit déclarer le lien avant le fichier JS dans Bootstrap.
De même, notre fichier JS est basé sur Bootstrap, donc il doit être après bootstrap, sinon le code ne fonctionnera pas.
Enfin, publions le code pertinent:
GetClassmate.html:
<! Doctype html> <html lang = "zh-cn"> <éad> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta name = "wiewport" contenu = "width = device-width, initial-scale = 1"> <title> getclass <!! -> <link href = "css / bootstrap.min.css" rel = "Stylesheet"> <! - html5 shim and répond.js pour la prise en charge de IE8 des éléments html5 et des giseries médiatiques -> <! - Warning: répond.js ne fonctionne pas si vous visualisez la page via le fichier: // -> <! - [If lt ie 9] src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> type = "text / css"> # btn-group-vertical-classes {overflow-y: auto; Overflow-X: Auto; hauteur: 100px;} # btn-group-vertical-classmates {overflow-y: auto; Overflow-X: Auto; hauteur: 500px;} bouton {text-overflow: ellipsis; overflow: Hidden; border-radius: 0px;} # context_div {overflow-y: auto; Overflow-X: Auto; Hauteur: 500px;} </ style> </ head> <body> <div> <div> <div> <h4 style = "text-align: droit;"> <a id = "effondrement_a" data-toggle = "effondrement" data-Parent = "# accordéon" href = "# collapsetone"> <spandi-hidden = "true"> </sple> Cliquez sur ceci pour montrer / hide> CLASSE ARIA-HIDDEN = "True"> </spse </h4></div><div id="collapseOne"><div id="div1-classes-classmates"><div role="group" aria-label="..." id="btn-group-vertical-classes"><!-- where classes show--></div></div></div></div><br></br><div><div id = "btn-group-vertical-classmates" role = "groupe" aria-label = "..."> <! - où les camarades de classe affichent -> <bouton type = "bouton" style = "border-radius: 0px;"> cliquez sur la classe pour afficher le camarade Détails. </p> </div> </div> </div> <! - jQuery (nécessaire pour les plugins JavaScript de bootstrap) -> <script src = "js / jquery-3.0.0.min.js"> </cript> <! - Inclure tous les plugins compilés (ci-dessous), ou inclure des fichiers individuels -> <script> <! src = "js / bootstrap.min.js"> </ script> <script src = "js / script_getclassmate.js"> </ script> </ body> </html>script_getclassmate.js:
$ (document) .ready (function () {$. getjson ("Resource / classmates.json", fonction (result) {$. Chaque (résultat, fonction (i, champ) {var tmp_button = $ ('<bouton type = "bouton" style = "border-radius: 0px; bouton" choisi_state = 0> </ Button> '). Texte (i); tmp_button.attr ("title", i); $ ("# btn-group-vertical-classes"). annex (tmp_button);}); $ (". tmp_chosen = nombre ($ (this) .attr ("choisi_state")) ^ 1; $ (this) .attr ("choisis_state", string (tmp_chosen)); showcla ssmates (result); $ (". btn.btn-default.btn-classmate"). cliquez (function () {$ (". btn-cllassmate"). att ("class", "btn btn-default btn-cllassmate btn-info "); $ (" # collapseone "). att (" class "," panneau-rollapse effondrement "); var selected_classmate = $ (this) .text (); showClassMateDeTail (résultat, selected_classmate);});});});}) fonction de la fonction showClassmates (result) {$ ("# btn-group-vertical-classmates"). vide (); var choisis_list = new Array (); $ (". Btn.btn-default.btn-class"). Filter (function () {jugeflag = false; if ($ (this) .attr ("choisi_state") == "1") {jugeflag = true; chosen_list.push ($ (this) .text ());} retour jugeflag;}); $. $. choisi_list_x; pour (choisi_list_x dans choisi_list) {if (choisis_list [choisi_list_x] == i) {$. Chaque (champ, fonction (j, field2) {var tmp_button = $ ('<bouton type = "Button" style = "border-radius: 0px;" data-toggle = "bouton" choisi_state = 0> </ Button> '). text (j); tmp_button.attr ("title", j); $ ("# btn-group-vertical-classmates"). annex Classmate_Context_Item; $ ("# context_div"). vide (); $. Chaque (résultat, function (i, champ) {$. Chaque (champ, fonction (j, champ2) {if (j == selected_classmate) {$. chaque (champ2, fonction (k, field3) {// alert (k); // alert (field3); classe camarade tmp_p = $ ('<p> </p>'). text (classe camarade de classe_context_item); $ ("# context_div"). APPEND (tmp_p);});}});});});});});});});});});});Classesmates.json:
{"Classe 001": {"Xiao Wang": {"Gender": "Male", "Age": "18", "Intérêt": "Football", "Hometown": "Shanghai", "Chine "69", "Géographie": "92"}, "Xiao Li": {"Gender": "Male", "Age": "20", "Intérêt": "Basketball", "Hometown": "Beijing", "Chine "88", "Géographie": "81"}}, "classe 002": {"xiao cai": {"Gender": "Female", "Age": "19", "Intérêt": "Dance", "Hometown": "Gaoxiong", "Chine "77", "History": "89", "Géographie": "83"}}, "classe 003": {"Xiao Ma": {"Gender": "Male", "Age": "18", "Intérêt": "Math", "93", "Taibei", "96", "91", "Math": "93 "97", "Chemistry": "100", "History": "94", "Geography": "92"}}, "classe 005": {"Xiao Zhang": {"Gender": "Male", "Age": "20", "Interest": "Running", "HoMetown": "Guangzhou", "Chine "66", "Physics": "80", "Chemistry": 68, "History": "79", "Géographie": "93"}}}Ce qui précède est le didacticiel d'introduction pour Bootstrap Zero-Basic Introduction (III) vous a présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!