Was ist Bootstrap?
Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Webanwendungen und Websites. Bootstrap basiert auf HTML, CSS und JavaScript.
Geschichte
Bootstrap wurde von Mark Otto und Jacob Thornton von Twitter entwickelt. Bootstrap ist ein Open -Source -Produkt, das im August 2011 auf GitHub veröffentlicht wurde.
Dieser Artikel konzentriert sich auf die Einführung von Bootstraps Zero-Basic-Einführungs-Tutorial (2). Die spezifischen Details sind wie folgt:
Websites, die Informationen während des Prozesses häufig überprüfen:
http://www.w3school.com.cn/ Dies ist eine von der W3C Alliance eingerichtete Website, um den W3C -Standard zu verbreiten. Auf der Webseite gibt es viele Technologien, und Sie können es als Enzyklopädie der Web -Technologie betrachten.
http://v3.bootcs.com/ natürlich das offizielle Bootstrap3 -Dokument
http://www.runoob.com/ Dies ähnelt eigentlich der W3School, aber es ist etwas komplizierter als W3school. Ein Großteil des Inhalts wird von der ursprünglichen W3C English -Website und den offiziellen englischen Dokumenten des ursprünglichen Bootstraps übersetzt, aber ich bin der Meinung, dass seine Übersetzungsqualität höher ist (da die ersten beiden Websites auch unverblümt übersetzt wurden) und einige Fälle leichter zu verstehen sind.
Lassen Sie uns ohne weiteres anfangen:
(1) die Ziele eindeutig erreichen
Wie in der Abbildung unten gezeigt, ist dies eine einfache Website, die wir implementieren möchten. Das Layout ist einfach und es gibt keinen schillernden Effekt. Es ist jedoch erforderlich, eine Funktion zu implementieren: Lesen Sie relevante Informationen aus der JSON -Datei (Sie können die oben genannte Website nach Kenntnissen über JSON überprüfen und auf der Website anzeigen.
JSON -Dateiinhalt:
{"Class 001": {"Xiao Wang": {"Gender": "Male","Age": "18","Interest": "Football","Hometown": "Shanghai"},"Xiao Li": {"Gender": "Male","Age": "20","Interest": "Basketball","Hometown": "Beijing"}},"Class 002 ". "Taibei"}}, "Klasse 005": {"Xiao Zhang": {"Geschlecht": "männlich", "Alter": "20", "Interesse": "Running", "Heimatstadt": "Guangzhou"}}}Im Augenblick:
Layout:
Es gibt drei Hauptblöcke: Die linke Seite der ersten Zeile ist die Klassenliste, die rechte Seite der ersten Zeile ist die Namensliste der Klassenkameraden, und die zweite Zeile ist die relevanten Informationen der Klassenkameraden.
Funktion:
1. Klicken Sie auf eine Klasse in der Klassenliste, um zu aktualisieren, welche Schüler in der Klasse in der Klassenliste dynamisch sind, und können die Klasse auswählen.
2. Klicken Sie in der Klassenkameralliste auf einen Klassenkameraden und zeigen Sie die Informationen des Klassenkameradens in der zweiten Zeile dynamisch an. Es können nur die Informationen eines Klassenkameraden gleichzeitig angezeigt werden.
(2) Für die Analyse erforderliche Techniken
Layout:
Bootstrap: Wird verwendet, um dieses einfache Zwei-Reihen-Layout sowie die Überprüfung von Klassenspalten und Scroll-Balken zu implementieren (einige sind einfach mit Bootstrap implementieren, während andere nicht können. Wie man es kann?
Funktion:
Verwenden Sie JavaScript und AJAX, um die Datenerfassung und dynamische Interaktion (in einer lokalen Aktualisierungsmethode) zu erreichen.
(3) Analyse der technischen Auswahl
1. Implementieren Sie Layout.
Durch die Suche nach der Dokumentation (http://www.runoob.com/bootstrap/bootstrap-grid-System-example3.html) stellte ich fest, dass Bootstrap mit einem Rastersystem angelegt wird. Durch das Festlegen bestimmter Klassenattribute für das DIV kann ich den gewünschten Layout -Effekt erreichen. Sie können unterschiedliche Effekte auf Mobiltelefone, Tablets und Desktop -Computer festlegen. Die Klassenattribute von HTML -Tags und welche HTML -Tags finden Sie auf der W3school.
Es ist erwähnenswert, dass die Klassenattribute des Elements mehrere Klassenattribute haben können.
EG: <div rollen = "Gruppe" aria-label = "..." id = "Btn-Gruppen-vertikale Klasse">
Verwenden Sie "Space" -Intervalle zwischen verschiedenen Attributen, glauben Sie mir, so können Sie JavaScript -Skripte problemlos schreiben und CSS anpassen.
2. Die vertikale Anordnung von Klassennummern und mehreren Auswahlmöglichkeiten erkennen.
Überprüfen Sie http://www.runoob.com/bootstrap/bootstrap-button-groups.html, um zu wissen, wie Sie vertikale Schaltflächengruppen einrichten. Setzen Sie die Klasse der Div, in der sich die Knopfgruppe auf BTN-Gruppen-Auvertikal befindet, so dass sie zum Container zum Speichern der Knopfgruppe wird.
Überprüfen Sie http://www.runoob.com/bootstrap/: Die Implementierung erfolgt durch Hinzufügen des Datenattributs Data-Toggle = "Buttons" zum Div des Klassenattributs zur BTN-Gruppe.
3. Implementieren Sie die Taste -Ecken, die von abgerundeten Ecken zu rechten Winkeln neu definiert werden sollen, fügen Sie der Schaltflächengruppe Scrollstangen hinzu und fügen Sie dem auf der Schaltfläche angezeigten Text Einschränkungen hinzu, damit sie die Taste nicht überschreitet. Der überschüssige Teil wird als "..." angezeigt, und wenn sich die Maus bewegt und auf der Schaltfläche stoppt, wird der gesamte Text angezeigt:
Ein kleiner Teil (abgerundete Ecken werden rechter Winkel, Maus, die zum Anzeigen von Text schweben) muss direkt in das HTML -Tag eingestellt werden.
Die meisten Implementierungen werden mit einem CSS geschrieben:
<style type = "text/css">#btn-gruppen-konvertische Klasse {Überlauf-y: auto; overflow-x: auto; Höhe: 150px;}#btn-gruppen-konvertische Klasse {Überlauf-y: Auto; Hidden; Border-Radius: 0px;} </style>Der Teil <Stil> Teil des Codes wird in den Kopf gelegt, dh zwischen <kopf> und </head>.
Die allgemeine Methode besteht darin, zuerst den CSS -Selektor zu verwenden, um das Tag zum Einstellen des CSS auszuwählen und dann den entsprechenden Stil in den lockigen Klammern einzustellen.
Der sogenannte CSS-Selektor ist die "#BTN-Gruppen-Overtikalklasse" und "Taste" im obigen Code, dh eine Codezeile auf den Curly-Klammern. Es gibt mehrere Methoden zur Verwendung des CSS -Selektors, und Sie können die relevanten Methoden über die W3school -Website finden.
Da CSS -Stilblätter drei Lademethoden haben (CSS -Datei; <Head> Tag, Style -Attribut im HTML -Element und die effektive Prioritätsreihenfolge lautet: "Stil auf dem Element"> "Style -Element auf dem Dateikopf"> "externe Stildatei". Die Grenze-Radius-Einstellung der Taste in der obigen <style> funktioniert nicht).
<1> Schreiben Sie das Style -Attribut direkt im Element -Tag. Dies ist am meisten bevorzugt, also wird es definitiv funktionieren.
<2> Ändern Sie die Bootstrap -CSS -Datei, mit der Sie sich ein für alle Mal verlinkt haben, und fügen Sie in Zukunft neue Elemente hinzu, ohne das Style -Attribut nacheinander neu schreiben zu müssen. Auf diese Weise müssen Sie die CSS -Datei herunterladen, anstatt sich auf den Link zu verweisen.
Da unsere Seite sehr klein ist, habe ich die Methode eins übernommen.
V.
Fragen Sie mich, wie ich Ajax benutzt? Suchen Sie nach Baidu oder fragen Sie Leute, die Front-End-Technologie kennen.
Die Kernsache an Ajax ist, dass es teilweise aktualisiert werden kann, ohne die gesamte Seite zu erfrischen. Hier sollten wir zunächst die relevanten Dokumente über die AJAX -Technologie (die oben genannten drei Websites sowie verschiedene Baidu) überprüfen. Da Sie Daten aus der JSON -Datei erhalten möchten, verweisen Sie auf das AJAX -Handbuch http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp In JQuery (weil Bootstraps JS auf JQuery basiert, und alle Jquery -Methoden sind Arbeiten und dieses Wissen, bei dem es sich auch um Informationen handelte). Die GetJson -Funktion wurde ausgewählt. Darüber hinaus finden Sie unter http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html Wählen Sie jede Funktion als Analysemethode aus.
Bei der Implementierung von Code umfasst er hauptsächlich Traversal (für Anweisung), Urteilsvermögen (wenn auch Anweisung), Operationen zu HTML -Elementen, Hinzufügen von untergeordneten Elementen, Änderungen von Attributwerten usw.
In Bezug auf das Schreiben der spezifischen Seite ist es langweilig, sie ausführlich zu schreiben. Daher habe ich den Code einfach eingefügt.
Einige Punkte, auf die beim Ausführen von Demo: Chrome die direkte Lektüre von Dateiinhalten lokal einschränken, müssen Sie das gesamte Projekt in den HTDOCS -Ordner von Apache platzieren. Dann rennen. In Bezug auf die Installation von Apache hat mein vorheriger Blog eine sehr detaillierte Einführung. Wie man es benutzt, bitte Baidu.
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>getClassmate</title><!-- Bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim und reagieren.js für IE8 Support von HTML5-Elementen und Medienfragen-> <! src = "// cdn.bootcs.com/html5shiv/3.7.2/html5shiv.min.js"></script><Script src =" // cdn.bootcs.com/respontrig.js/1.4.2/Reatt.Min.js"></script> & <escrict ><! type = "text/css">#btn-gruppen-vertikale Klasse {Überlauf-y: Auto; Überlauf-X: Auto; Höhe: 150px;}#Btn-Gruppen-vertikale Klasse {Überlauf-y: Auto; Überlauf-X: Auto; height:150px;}button{text-overflow: ellipsis;overflow: hidden;border-radius: 0px;}</style></head><body><div><br></br><div id="div1-classes-classmates"><div role="group" aria-label="..." id="btn-group-vertical-classes"><!-- where classes anzeigen-> </div> <div id = "btn-gruppen-konvertische Klasse" rollen = "Gruppe" aria-label = "..."> <!-wobei Klassenkameraden anzeigen-> <button type = "button" style = "Border-Radius: 0px; id = "context_div"> <p> Klicken Sie auf Klassenkameraden, um Details anzuzeigen. src = "js/bootstrap.min.js"> </script> <script> $ (document) .ready (function () {$. getJson ("Ressourcen/classmates.json", Funktion (Ergebnis) {$. ENDE. wählte_state = 0> </button> '). text (i); tmp_button.attr ("title", i); tmp_chosen = number ($ (this) .attr ("gewählt_state")^1; $ (this) .attr ("gewählt_state", String (tmp_chosen)); Array (); $ (". Btn.Btn-Default.BTN-Klasse"). Filter (function () {JudgeFlag = false; if ($ (this) .Attr ("gewählt") == "1") {JudgeFlag = true; gewählt.push.push ($ ($) ($) gewählt_List_x; for (wajoSlist_x in gewählt_list) {if (gewählt_list [waage_list_x] == i) {$. Jedes (Feld, Funktion (j, field2) {var tmp_button = $ ('<button type = "button" style = "border-radius: 0px;" " gewählt_state = 0> </button> '). text (j); tmp_button.attr ("title", j); selected_classmate = $ (this) .Text (); var classmate_context_item; $ ("#context_div"). leer (); $. Jeweils (Ergebnis, Funktion (i, field) {$. Jedes (Feld, Funktion (j, field2) {if (j == selected_classesmate) {$. $ + ":" + field3; var tmp_p = $ ('<p> </p>'). text (classmate_context_item);