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.
Nachdem ich diesen Artikel geschrieben habe, möchte ich den folgenden Inhalt dieses Artikels schreiben:
1. Aufgrund meines Verständnisses von Bootstrap werde ich eine kleine Zusammenfassung machen.
2. Ich werde die Benutzeroberfläche und den Code für die Beispiele des Lernens Bootstrap (2) von Grund auf neu verschönern und optimieren, hauptsächlich, um darüber zu sprechen, wie ich den Effekt gewünscht habe.
3. Es ist besser, den Menschen beizubringen, wie man fischt, als den Menschen beizubringen, wie man fischt. Verwenden Sie Ihre eigenen Beispiele (weil Sie auch ein Anfänger sind und das, was Sie schreiben, für Anfänger besser geeignet sind) und sprechen Sie über die Fallstricke, die während des Code -Schreibprozesses auftreten, und Punkte, auf die geachtet werden müssen.
Lassen Sie uns ohne weiteres anfangen:
1. Eine kleine Zusammenfassung von Bootstrap
Basierend auf der Beschreibung der offiziellen Dokumentation von Bootstrap (http://v3.bootcss.com/) ist Bootstrap in drei große Blöcke unterteilt: CSS-Stil, Komponenten und JavaScript-Plug-In.
Zunächst ist klar, dass Bootstrap ein Rahmen ist. Wenn andere Räder machen, können Sie sie direkt verwenden, um keine Räder selbst zu bauen. Wir müssen also zwei Punkte klären: Welche Art von Rädern sind diese Räder und wie man sie benutzt.
1. CSS -Stil: Es wird hauptsächlich den globalen Stil des Rastersystems und des Bootstraps eingeführt. Implementiert durch Festlegen des Wertes der Klasse.
1.1 Gittersystem:
Auf diese Weise können wir das Layout von HTML -Seiten einfach implementieren (http://v3.bootcss.com/css/#grid).
Ich denke, das Netzsystem ist sehr wichtig. Da das Layout von HTML -Seiten eine wichtige und umständliche Aufgabe ist (Sie können sich die Einführung in das Layout in W3school ansehen http://www.w3school.com.cn/html/html_layout.asp.
Das Rastersystem hat dies stark vereinfacht. Öffnen Sie die obige Verbindung zum Gittersystem und Sie werden feststellen, dass Sie dem entsprechenden Wert des HTML -Elementklassenattributs nur den gewünschten Effekt zuweisen müssen, und Sie können auch unterschiedliche Effekte auf Geräte unterschiedlicher Bildschirmgrößen festlegen.
1.2 Bootstrap Globaler Stil:
So verschönert Bootstrap häufig verwendete HTML -Elemente (z. B. Div, Taste, P, Tabelle, IMG usw.). Durch die Zuweisung des entsprechenden Wertes dem Klassenattribut des HTML -Elements können Sie den gewünschten Effekt erzielen.
Lassen Sie uns das einfachste Beispiel geben:
Wie in der obigen Abbildung gezeigt, können Sie mit Bootstrap den Klassenwert des Schaltflächenelements ändern, um die Größe der Taste zu ändern, ohne die CSS -Datei zu ändern oder den Stilwert des Elements einzubetten.
2. Komponente: Ich denke, die Komponente ist Bootstrap, die einige Elemente (HTML-Elemente und JavaScript-Code) in Komponenten kombiniert und viele sehr gut aussehende und praktische Symbole bietet. Diese Komponenten werden im Wesentlichen in der HTML -Entwicklung verwendet. Implementiert durch Festlegen des Wertes der Klasse. (http://v3.bootcs.com/components/)
Lassen Sie uns das einfachste Beispiel geben:
Wie in der obigen Abbildung gezeigt, müssen wir die Navigationsfunktion implementieren. Suchen Sie die entsprechenden Komponenten in Boostrap und weisen Sie die entsprechenden Klasse-, UL- und Li -Werte nach Ihren eigenen Bedürfnissen zu.
3. JavaScript-Plug-In: Ich denke, das JavaScript-Plug-In von Bootstrap ist das "Rad", das gemeinsame Web-Interaktionsfunktionen zusammenfasst. Sie müssen das Klassenattribut und das Datenattribut nur so festlegen, dass häufig verwendete Webinteraktionsfunktionen implementiert werden, ohne selbst viel JavaScript -Code schreiben zu müssen.
Lassen Sie uns zunächst über eine kleine Folge sprechen. Neulinge denken möglicherweise fälschlicherweise, dass „JavaScript“ und „Java“ eine tiefe Verbindung haben und sogar glauben, dass JavaScript eine Variante von Java ist. Tatsächlich ist dies nicht der Fall. JavaScript ist eine von Netscape für das Internet entwickelte Skriptsprache. Tatsächlich lautet sein Vorname "Livescript". Später erreichte Netscape eine Zusammenarbeit mit der Sonne (das Unternehmen, das Java erfand, das später von Oracle erworben wurde). Zu dieser Zeit war die Java -Sprache auf ihrem Höhepunkt und war sehr berühmt. Um die Fahrt zu fahren, änderte es seinen Namen in JavaScript. So sehr, dass einige Leute scherzten: Der Unterschied zwischen "Java" und "JavaScript" ist der Unterschied zwischen "Lei Feng" und "Lei Feng Tower".
Zurück zum Thema wissen wir, dass JavaScript vorhanden ist, um Webseiten -Interaktionsfunktionen zu geben. Daher können die reichen JavaScript-Plug-Ins auf Bootript dazu führen, dass Sie häufig verwendete Web-Interaktionsfunktionen implementieren, ohne sich auf "Räder machen" zu konzentrieren.
Wie in der obigen Abbildung gezeigt, wird das offizielle Bootstrap-Dokument nicht in Chinesisch übersetzt, aber es gibt eine sehr detaillierte Übersetzung, die auf Runoob und den Code, um die Beobachtung zu unterbreiten, und es kann sich um das Bestimmungsvolumen wechseln. Sie können die Bild -Karussell -Funktion, die viele Websites jetzt verwenden, einfach implementieren. Hier müssen Sie nur die entsprechenden Klassen- und Image -SRC -Werte gemäß dem Tutorial im obigen Link zuweisen, und Sie müssen den Datenwert nicht einmal festlegen.
2. Verschönern und optimieren Sie die Benutzeroberfläche und den Code für die Beispiele für Lernbootstrap (2) von Grund auf neu
Die folgende Abbildung zeigt die im vorherigen Tutorial erzielten Effekte:
Wir können sehen, dass es die folgenden Mängel gibt, die korrigiert werden müssen:
(1) Klicken Sie auf den spezifischen Klassenkamerad und zeigen Sie deren Informationen an und wird nicht ausgewählt. (Wenn Sie am Anfang klicken, befinden Sie sich im Status, aber das ist nur der Schaltfläche Klicken Sie auf den leeren Speicherplatz, der ausgewählte Status verschwindet.)
(2) Die Farben sind monoton und nicht sehr schön.
(3) Das Layout muss angepasst werden. Das Informationsfeld ist der Ort, an dem wir Informationen benötigen und so groß wie möglich sein sollten. Es ist am besten, die unnötige Box zu verbergen, wenn sie angezeigt wird.
(4) Für den Code ist der JavaScript -Code in Bootstrap (2) von Grund auf die HTML -Seite geschrieben, und es gibt doppelte Codesegmente. Die doppelten Codesegmente sollten in Funktionen geschrieben werden, die die Codegröße verringern können. Wenn ich den Code ändern kann, kann ich die entsprechende Funktion nur direkt ändern, ohne nach einem Ort zu suchen. JavaScript -Code kann in JS -Dateien geschrieben werden, um HTML -Seiten und JavaScript -Code zu trennen.
Technische Auswahl (innötig ist es, darüber nachzudenken, wie man das verwendete, was sich bereits im Bootstrap -Framework befindet, um den gewünschten Effekt zu erzielen):
1. Passen Sie zunächst das Layout an, passen Sie das Informationsfeld und das Klassenfeld zusammen an und zeigen Sie das Klassenfeld oben an.
Offensichtlich müssen wir nur das DIV, in dem sich das Informationsfeld befindet, und das Div des Klassenfelds in derselben Zeile im DIV platzieren und den Klassenattributwert "Col-MD" im Zusammenhang mit dem Gittersystem ändern, um es zu erreichen. Wenn wir beispielsweise ein Verhältnis von 2: 1 anzeigen möchten, sollte das Klassenattribut des Informationsfelds Col-MD-8 haben, während die Klassenbox Col-MD-4 sein sollte.
Es ist erwähnenswert, dass das Front-End niemals eine einstufige Entwicklung sein kann. Oft ist der anfängliche Code nicht das perfekte Ergebnis, das wir wollen, und muss sorgfältig angepasst werden. Als Beispiel sollte jeder lernen, selbst zu suchen, versuchen, kontinuierliche Anpassungen vorzunehmen (die nachfolgenden Anpassungen werden im spezifischen Prozess nicht erläutert):
Nachdem wir den Code geändert haben, ist der dargestellte Effekt wie folgt:
Offensichtlich wird in jeder Zeile oben nur eine Klasse angezeigt, was ein bisschen Platzverschwendung ist. Die beiden folgenden Teile sind nicht ausgerichtet.
Löschen Sie das "Btn-Gruppen-Auvertical" im Klassenattribut der obigen Div-Komponente und fügen Sie Col-MD-6 zum Klassenattribut von TMP_Button im JS-Code hinzu. Darüber hinaus wird beobachtet, dass nach der Einstellung die erste Zeile im Vergleich zur zweiten Zeile eine seltsame Einkerbung hat:
Es besteht kein Zweifel, dass diese Art von Aussehen und Layoutänderungen mit CSS zusammenhängen. Zu diesem Zeitpunkt können wir uns die spezifischen CSS des Elements ansehen.
Nehmen Sie Chrom als Beispiel:
Klicken Sie mit der rechten Maustaste auf dieses Element und wählen Sie inspizieren, dh Überprüfung. Sie finden den entsprechenden Code im Feld rechts. Im Vergleich fanden wir, dass es sich um ein Problem mit dem Randlinks handelt. Diese Eigenschaft ist die Standardeinstellung im Bootstrap -Framework und wird aus dem oberen Element geerbt. Einige sind -1px und einige sind 0px. Wir müssen es nur in das gleiche ändern. Zum Beispiel werden alle in 0PX geändert:
Ändern Sie im TMP_Button im JS-Code das Style-Attribut und fügen Sie "Margin-Links: 0px;" hinzu. Einige Leute denken, dass die Schriftart nicht gut in die Mitte schauen kann, damit sie Textausrichtung hinzufügen können: links und den Text auf der Schaltfläche einstellen, um von links zu beginnen.
Korrigierte Effekte:
2. Fügen Sie eine Faltenschaltfläche hinzu, damit Benutzer das Kästchen Klassen über diese Schaltfläche ausblenden/öffnen können. Wenn Sie auf Klassenkameraden klicken, um detaillierte Informationen anzuzeigen, wird sie automatisch ausblenden, um viel Speicherplatz für das zum Anzeigen von Informationen angezeigte Informationen zu speichern.
Um eine Faltenschaltfläche hinzuzufügen, können Sie sich unter http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html beziehen.
Darüber hinaus können wir der Faltschaltfläche ein gut aussehendes Symbol hinzufügen, und es kann leicht erreicht werden, indem wir auf das Tutorial http://v3.bootcss.com/components/#glyphicons verweisen.
Wenn Sie auf Klassenkameraden klicken, um detaillierte Informationen anzuzeigen, wird diese automatisch versteckt. Sie müssen den Klickereignis der Schaltfläche Klassenkamerad ändern, dh den entsprechenden JS -Code.
Wir haben die Verwendung des Bootstrap-Folding-Plugin http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html überprüft (dies ist besser, das offizielle Teil wurde noch nicht übersetzt) und fand den folgenden Inhalt:
Es stellt sich heraus, dass dieser Klatsch und in Werten im Klassenattribut die verborgenen und Anzeigefunktionen steuern. Anschließend müssen wir nur das entsprechende Klassenattribut des HTML -Elements ändern, um die Operation "anzeigen/ausblenden" im Klick -Ereignis -JS -Code der Schaltfläche zu erstellen. Fügen Sie also die folgende Anweisung zur Klickfunktion der Schaltfläche Klassenkamerad hinzu:
$ ("#collapseone"). attr ("Klasse", "Panel-Collapse Collapse");
3.. Behoben den Fehler, der "auf bestimmte Schüler klicken und ihre Informationen anzeigen, und es gibt keinen ausgewählten Zustand."
Durch Überprüfen des Dokuments http://www.runoob.com/bootstrap/bootstrap-button-plugin.html haben wir die Data-Toggle-Eigenschaft der Schaltfläche auf "Taste" festgelegt, die nach dem Klicken automatisch den ausgewählten Status rendern kann.
Daher fügen wir der Schaltfläche "Attributdaten-Toggle =" "der Schaltfläche von Klassenkameraden hinzu.
Zu diesem Zeitpunkt trat ein weiteres Problem auf. Ich denke, wenn ich als nächstes auf andere Klassenkameraden klicke, war der ursprüngliche Klick noch im aktiven Zustand. Was soll ich tun?
Durch Überprüfen von http://www.runoob.com/bootstrap/bootstrap-buttons.html wird der ausgewählte Status angezeigt, wenn die Klassenzuweisung der Schaltfläche aktiv ist. Das heißt, die obige Einstellung, dh Bootstrap, macht so etwas: Wenn die Schaltfläche Taste data toggle = ”geklickt wird, wird die Aktivität automatisch zur Klasse hinzugefügt und der ausgewählte Zustand ist vorhanden. Wenn Sie erneut angeklickt werden, wird die Aktivität automatisch aus der Klasse entfernt und der nicht ausgewählte Zustand wird angezeigt.
Mit anderen Worten, wir müssen diese Operation nur selbst durchführen. Zum Beispiel kann ich beim Klicken auf Klassenkameraden alle aktiven Klassenkameraden aus dem Klassenattribut entfernen. Nach Abschluss des Klicks befindet sich nur die Schaltfläche, auf die ich geklickt habe, im aktiven Status.
Daher müssen Sie der Klickfunktion der Klassenkamerad -Schaltfläche nur solche Aussagen hinzufügen:
Die Codekopie lautet wie folgt:
$ (". Btn-Klasse"). Attr ("Klasse", "Btn Btn-Default Btn-Klasse Btn-info");
Der Effekt ist wie folgt:
4. Verschönern Sie das Erscheinungsbild des Knopfes
Suchen Sie den Abschnitt CSS -Taste in Bootstrap:
http://www.runoob.com/bootstrap/bootstrap-buttons.html
Nach dem Tutorial, um es zu ändern, habe ich einfach die Farbe der Schaltfläche hier geändert und Sie können sie selbst nach Ihren Anforderungen ändern. Der Effekt ist wie folgt:
5. Trennung von HTML -Seiten und JavaScript -Code
Tatsächlich ist es in zwei Schritte unterteilt:
Schritt 1: Legen Sie den JavaScript -Code in die JS -Datei ein und verknüpfen Sie ihn in der HTML -Datei.
Schritt 2: Schreiben Sie Codeblöcke mit JavaScript oder Löschen von Funktionen in eine Funktion und rufen Sie die Funktion direkt auf.
Da beide Schritte relativ einfach sind, sollte jeder, der eine Programmiersprache gelernt hat, dies tun. Ich werde nicht erweitern und schreiben.
Es ist erwähnenswert, dass beim Verknüpfen von JS -Dateien die Bestellung achten.
Beispielsweise basiert die JS -Datei in Bootstrap auf JQuery und verwendet viele JQuery -Funktionen, sodass die Jquery JS -Datei den Link vor der JS -Datei in Bootstrap deklarieren muss.
In ähnlicher Weise basiert unsere JS -Datei auf Bootstrap, daher muss sie nach Bootstrap sein, andernfalls funktioniert der Code nicht.
Lassen Sie uns schließlich den entsprechenden Code veröffentlichen:
GetClassmate.html:
<!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: 100px;}#Btn-Gruppen-vertikale Klasse {Überlauf-y: Auto; Überlauf-X: Auto; Höhe: 500px;} Schaltfläche {Text-Overflow: Ellipsis; Überlauf: Hidden; Border-Radius: 0px;}#context_div {Überlauf-y: auto; Überlauf-X: Auto; Höhe: 500px;} </style> </head> <body> <div> <div> <div> <h4 style = "text-align: rechts;"> <a id = "collapse_a" data-toggle = "collapse" collapse "data-parent ="##ornion "href ="#collapseone "> <span-hidden =" true "," span), zu deren Klassen-klassen-hidden = "true". </h4> </div> <div id = "collapseone"> <div id = "div1-classes-classmates"> <div rollen = "Gruppe" aria-label = "..." id = "btn-gruppe-konvertische Klasse"> <! id = "btn-gruppen-konvertische Klasse" rollen = "Gruppe" aria-label = "..."> <!-Wo Klassenkameraden anzeigen-> <Button Typ = "Button" style = "border-radius: 0px;"> Klicken Sie Klicken, um Klassenkameraden anzuzeigen. Einzelheiten. src = "js/bootstrap.min.js"> </script> <script src = "js/script_getClassmate.js"> </script> </body> </html>script_getClassmate.js:
$ (document) .ready (function () {$. getJson ("Ressourcen/classmates.json", Funktion (Ergebnis) {$. Jedes (Ergebnis, Funktion (i, field) {var tmp_button = $ ('<button type = "button" style = "border-radius: 0px; 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)); Showcla ssmates (result); Btn-Default Btn-Classmate Btn-info "); showCassmates (result) {$ ("#btn-gruppen-vertikale Klasse"). leer (); var wasiert_list = new 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); classmate_context_item; $ ("#context_div"). leer (); $. Jeweils (Ergebnis, Funktion (i, field) {$. jeweils (field, function (j, field2) {if (j == selected_classmate) {$. jeweils (field2, field3) {// alert (k); // alert (k); // alert (k); // allert (k); ":" + field3; var tmp_p = $ ('<p> </p>'). text (classmate_context_item);Klassenmitglieder.json:
{"Klasse 001": {"Xiao Wang": {"Geschlecht": "männlich", "Alter": "18", "Interesse": "Fußball", "Heimatstadt": "Shanghai", "Chinesisch": "78", "Mathematik": "90", "Englisch": "66 "69", "Geographie": "92"}, "Xiao li": {"Geschlecht": "männlich", "Alter": "20", "Interesse": "Basketball", "Heimatstadt": "Peking", "Chinesisch": "98", "Mathematik": "77), 73": ":": ":": ": "88","Geography": "81"}},"Class 002": {"Xiao Cai": {"Gender": "Female","Age": "19","Interest": "Dance","Hometown": "Gaoxiong","Chinese": "93","Math": "80","English": "92","Physics": "82","Chemistry": "77","History": "89","Geography": "83"}},"Class 003": {"Xiao Ma": {"Gender": "Male","Age": "18","Interest": "Reading","Hometown": "Taibei","Chinese": "91","Math": "93","English": "96","Physics": "97","Chemistry": "100","History": "94","Geography": "92"}},"Class 005": {"Xiao Zhang": {"Gender": "Male","Age": "20","Interest": "Running","Hometown": "Guangzhou","Chinese": "67","Math": "70","English": "66", "Physik": "80", "Chemie": 68, "Geschichte": "79", "Geographie": "93"}}}Das obige ist das Einführungs-Tutorial für Bootstrap Zero-Basic Einführung (iii), das Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!