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.
Cet article se concentre sur l'introduction du tutoriel d'introduction à base de bootstrap (2). Les détails spécifiques sont les suivants:
Sites Web qui examinent fréquemment des informations pendant le processus:
http://www.w3school.com.cn/ Il s'agit d'un site Web établi par l'alliance W3C pour répartir la norme W3C. Il existe de nombreuses technologies du côté Web, et vous pouvez la considérer comme une encyclopédie de la technologie Web.
http://v3.bootcss.com/ il va sans dire que le document officiel de bootstrap3
http://www.runoob.com/ Ceci est en fait similaire à W3School, mais c'est un peu plus compliqué que W3School. Une grande partie du contenu est traduite du site Web d'anglais W3C d'origine et des documents anglais officiels du bootstrap d'origine, mais je pense que sa qualité de traduction est plus élevée (car les deux premiers sites Web ont également été traduits avec franchise), et certains cas sont plus faciles à comprendre.
Sans plus tarder, commençons:
(1) atteindre clairement les objectifs
Comme le montre la figure ci-dessous, il s'agit d'un site Web simple que nous voulons implémenter. La disposition est simple et il n'y a pas d'effet éblouissant. Cependant, il est nécessaire d'implémenter une fonction: lire les informations pertinentes du fichier JSON (vous pouvez consulter le site Web ci-dessus pour savoir sur JSON) et l'afficher sur le site Web.
Contenu du fichier JSON:
{"Classe 001": {"Xiao Wang": {"Gender": "Male", "Age": "18", "Interest": "Football", "Hometown": "Shanghai"}, "Xiao Li": {"Gender": "Male", "Age": "20", "Intérêt": "Basketball", "Homeown": "Age". 002 ": {" xiao cai ": {" Gender ":" Female "," Age ":" 19 "," Interest ":" Dance "," Hometown ":" Gaoxiong "}}," Class 003 ": {" Xiao Ma ": {" Gender ":" Male "," Age ":" 18 "," Interest ":" Reading "," Hometown ":" "Taibei"}}, "classe 005": {"Xiao Zhang": {"Gender": "Male", "Age": "20", "Interest": "Running", "Hometown": "Guangzhou"}}}Tout de suite:
mise en page:
Il y a trois blocs principaux: le côté gauche de la première ligne est la liste de classe, le côté droit de la première ligne est la liste des noms des camarades de classe et la deuxième ligne est les informations pertinentes des camarades de classe.
Fonction:
1. Cliquez sur une classe dans la liste des classes pour mettre à jour les élèves de la classe sont dynamiquement dans la liste des classes et peuvent sélectionner la classe.
2. Cliquez sur un camarade de classe dans la liste des camarades de classe et affichez dynamiquement les informations du camarade de classe sur la deuxième ligne. Les informations d'un camarade de classe peuvent être affichées à la fois.
(2) Techniques requises pour l'analyse
mise en page:
Bootstrap: utilisé pour implémenter cette simple mise en page à deux rangées, ainsi que la vérification des colonnes de classe, et des barres de défilement (certaines sont faciles à implémenter directement avec Bootstrap, tandis que d'autres ne peuvent pas. Comment savoir? Aller sur les trois sites Web ci-dessus pour trouver et vérifier)
Fonction:
Utilisez JavaScript et AJAX pour obtenir l'acquisition de données et l'interaction dynamique (dans une méthode de rafraîchissement locale).
(3) Analyse de sélection technique
1. Implémentez la mise en page.
En recherchant la documentation (http://www.runoob.com/bootstrap/bootstrap-grid-ystem-example3.html), j'ai trouvé que Bootstrap est disposé à l'aide d'un système raster. En définissant des attributs de classe spécifiques pour le div, je peux réaliser l'effet de mise en page que je veux. Et vous pouvez définir différents effets sur les téléphones mobiles, les tablettes et les ordinateurs de bureau. Les attributs de classe des balises HTML et les balises HTML peuvent être trouvées sur W3School.
Il convient de noter que les attributs de classe de l'élément peuvent avoir plusieurs attributs de classe.
Par exemple: <div role = "groupe" aria-label = "..." id = "btn-group-vertical-classes">
Utilisez des intervalles "espace" entre différents attributs, croyez-moi, cela vous permettra d'écrire facilement les scripts JavaScript et d'ajuster CSS.
2. Réalisez la disposition verticale des numéros de classe et plusieurs sélections.
Vérifiez http://www.runoob.com/bootstrap/bootstrap-button-groups.html pour savoir comment configurer des groupes de bouton verticaux. Autrement dit, définissez la classe de la div où le groupe de bouton est situé à BTN-Group-Vertical, afin qu'il devienne le conteneur pour stocker le groupe de boutons.
Vérifiez http://www.runoob.com/bootstrap/bootstrap-button-plugin.html et sachez comment faire vérifier le groupe de boutons. L'implémentation se fait en ajoutant l'attribut de données data-toggle = "boutons" à l'attribut de classe de classe au groupe BTN.
3. Implémentez les coins de bouton à redéfinir des coins arrondis aux angles droits, ajoutez des barres de défilement au groupe de bouton et ajoutez des restrictions au texte affiché sur le bouton afin qu'il ne dépasse pas le bouton. La pièce excessive s'affiche comme "...", et lorsque la souris se déplace et s'arrête sur le bouton, tout le texte s'affiche:
Une petite partie (les coins arrondis devient angle droit, planant de la souris pour afficher le texte) doit être réglé directement dans la balise HTML.
La plupart des implémentations sont écrites avec un CSS:
<style type = "Text / CSS"> # btn-group-vertical-classes {overflow-y: auto; overflow-x: auto; height: 150px;} # btn-group-vertical-classmates {overflow-y: auto; overflow-x: auto; high: 150px;} bouton {text-overflow:} bouton: bouton: bout de texte {text-overflow:} bouton: bouton: bouton {text-overflow:} bilithme: bouton de texte {Text-overflow:} Button: Bouton {Text-Overflow:} Button: Bouton} {Text-Overflow:} Hidden; Border-Radius: 0px;} </ Style>La partie <ystyle> du code est placée dans la tête, c'est-à-dire entre <adhead> et </adread>.
La méthode générale consiste à utiliser d'abord le sélecteur CSS pour sélectionner la balise pour définir le CSS, puis à définir le style correspondant dans les accolades bouclées.
Le soi-disant sélecteur CSS est le "# btn-group-vertical-classes" et "bouton" dans le code ci-dessus, c'est-à-dire une ligne de code sur les accolades bouclées. Il existe plusieurs méthodes d'utilisation du sélecteur CSS, et vous pouvez trouver les méthodes pertinentes via le site Web W3School.
Parce que les feuilles de style CSS ont trois méthodes de chargement (fichier CSS; <éad- head>, attribut de style dans l'élément HTML, et l'ordre de priorité efficace est: "style sur l'élément"> "Element de style sur l'en-tête de fichier"> "Fichier de style externe" Le paramètre Border-Radius du bouton dans le <style> ne fonctionne pas).
<1> Écrivez l'attribut de style directement dans la balise d'élément. C'est le plus préféré, donc cela fonctionnera certainement.
<2> Modifiez le fichier Bootstrap CSS auquel vous avez lié, une fois pour toutes, et ajoutez de nouveaux éléments à l'avenir, sans avoir à réécrire l'attribut de style un par un. Cela vous oblige à télécharger le fichier CSS au lieu de vous référer au lien.
Étant donné que notre page est très petite, j'ai pris la méthode.
4. Utilisez Ajax pour obtenir l'acquisition de données, l'interaction et le chargement dynamique.
Demandez-moi comment utiliser Ajax? Recherchez sur Baidu ou demandez aux personnes qui connaissent la technologie frontale.
La chose la plus fondamentale à propos de l'Ajax est qu'elle peut être actualisée partiellement sans rafraîchir la page entière. Ici, nous devons d'abord vérifier les documents pertinents sur la technologie Ajax (les trois sites Web ci-dessus, ainsi que divers Baidu). Étant donné que vous souhaitez obtenir des données du fichier JSON, vous vous référez au manuel Ajax http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp dans jQuery (parce que le travail de Bootstrap est basé sur JQUERY, et toutes les méthodes jQuery sont du travail, et ce point de connaissance a également été trouvé lorsque je cherchais des informations). La fonction Getjson a été sélectionnée. De plus, reportez-vous à http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html Sélectionnez chaque fonction comme méthode d'analyse.
Dans la mise en œuvre du code, il implique principalement la traversée (pour la déclaration), le jugement (instruction IF), les opérations sur les éléments HTML, l'ajout d'éléments enfants, la modification des valeurs d'attribut, etc.
En ce qui concerne la rédaction de la page spécifique, il est ennuyeux de l'écrire en détail, donc je viens de collier le code.
Certains points à faire attention lors de l'exécution de la démo: Chrome semble restreindre la lecture directe du contenu de fichier localement, vous devez donc placer l'intégralité du projet dans le dossier HTDOCS d'Apache. Puis courez. En ce qui concerne l'installation d'Apache, mon blog précédent a une introduction très détaillée. Comment l'utiliser, s'il vous plaît Baidu.
<! 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: 150px;} # btn-group-vertical-classmates {overflow-y: auto; Overflow-X: Auto; hauteur: 150px;} bouton {text-overflow: ellipsis; overflow: Hidden; border-radius: 0px;} </ style> </ head> <body> <div> <br> </br> <div id = "div1-classes-classmates"> <div role = "groupe" aria-label = "..." id = "btn-gerroup-vert-CASSE-CLASS = <! - <! où les classes affichent -> </ div> <div id = "btn-group-vertical-classmates" role = "group" aria-label = "..."> <! - où les camarades de classe affichent -> <bouton type = "bouton" style = "border-radius: 0px;"> cliquez sur la classe pour montrer le camarade de classe. id = "context_div"> <p> cliquez sur le camarade de classe pour afficher les détails. </p> </div> </div> <! - jQuery (nécessaire pour les plugins javascript de Bootstrap) -> <script src = "js / jQuery-3.0.0.min.js"> </script> <! - Inclut tous les plugins compilés (ci-dessous), ou inclut les fichiers individuels sous src = "js / bootstrap.min.js"> </ script> <cript> $ (document) .ready (function () {$. getjson ("Resource / Classmates.json", fonction (result) {$. chaque (résultat, fonction (i, champ) {var tmp_button = $ ('<bouton = "bouton" Style = " 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 ("choisi_state", string (tmp_chosen)); $ ("# btn-group-vertical-classmates"). 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;}); $. $. Chosen_list_x; pour (choisi_list_x dans Chosen_list) {if (Chosen_list [Chosen_list_x] == i) {$. Chaque (champ, fonction (j, field2) {var tmp_button = $ ('<bouton type = "Button" style = border-radius: 0px; " Chosen_state = 0> </ Button> '). Texte (j); tmp_button.attr ("title", j); $ ("# btn-group-vertical-classmates"). annex (tmp_button);});}}}); $ (".. selected_classmate = $ (this) .text (); var classe camarade tmp_p = $ ('<p> </p>'). text (classe camarade de classe_context_item); $ ("# context_div"). APPEND (tmp_p);});});});});});});});}) </cript> </ body> </html>