Die Verwendung des Bootstrap -Frameworks für Design und Entwicklung ist ein relativ beliebter Trend in der Welt. Bei der Optimierung neuer Produkte wählen viele Softwareunternehmen diesen Entwicklungsrahmen aufgrund ihrer umfassenden Vorteile bei JS und Kontrollen.
Das Bootstrap-Framework ist ein Front-End-UI-Design-Framework. Es bietet eine einheitliche UI -Schnittstelle und vereinfacht den Prozess der Konstruktion der Schnittstellen -Benutzeroberfläche (der Nachteil besteht darin, dass die Schnittstelle angepasst wird, sodass nicht viel Raum für die Anpassung vorhanden ist). Insbesondere das aktuelle Layout der Reaktionszeit (mein Verständnis ist, dass die Seite das Layout verschiedener Seitenelemente nach verschiedenen Auflösungen annimmt), das in Bootstrap gut unterstützt wird. Solange die Eigenschaften einfach festgelegt sind, kann das Reaktionszeitlayout automatisch implementiert werden, was den Prozess der Programmiererschnittstelle erheblich vereinfacht.
Daher verwende ich das Bootstrap -Framework, um die folgende Schnittstelle zu implementieren. Obwohl es einfach ist, ist es außergewöhnlich (wenn Sie es wirklich selbst implementieren möchten, weiß ich nicht, ob es das Jahr des Affen- und Pferdemonats sein wird)
Die gesamte Seite ist in mehrere Teile unterteilt, die mit dem Beispielcode auf der offiziellen Website von Bootstrap implementiert und schließlich zu einer Seite geformt werden. Die Schemata jedes Teils sind in der folgenden Abbildung dargestellt
Erklären Sie als nächstes den Code jedes Teils nacheinander
Erstellen Sie zunächst eine leere Seite, der Code lautet wie folgt:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-kompatible" content = "ie = edge"> <meta name = "Ansichtsport" content = "width = giry-width, initial-scale = 1.0"> <meta name " name = "author" content = ""> <title> stootstrap </title> <link rel = "styleSheet" href = "http://cdn.bootcs.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <link Rel = "Stylesheet" href = "http://cdn.bootcs.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[wenn lt ie 9]> <script src = "../../ docs-assets/js/ie8-responsive file-warning.js"> </script> <! [endif]-> <! 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respect.js/1.3.0/respect.min.js"> </script> <! [endif]-> <style> .bs-docs-home {background-color: #1b31b1; Hintergrundbild: URL (Zeile.png); } </style> </head> <body> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcs.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>Um das Bootstrap -Framework zu verwenden, müssen Sie sich auf die Bootstrap -Framework -Datei in der Seite beziehen. Insgesamt gibt es vier: Bootstrap.min.css, Bootstrap-theMe.min.css, Jquery-1.10.2.min.js, Bootstrap.min.js
Nur durch Verweisen auf diese Dateien können Sie die verschiedenen UI -Elemente verwenden, die vom Bootstrap -Framework bereitgestellt werden.
Erklären Sie als nächstes, wie in der obigen Abbildung gezeigt, die Codes jedes Teils in der Sequenz
Top Beschreibung:
Die Idee, die gesamte Seite zu entwerfen
Die Seite des Bootstrap-Frameworks ist ein 12-Spal-Raster-Layout. Also habe ich die gesamte Seite in drei Teile unterteilt. Links und rechts befinden sich 3 Säulen breite Rohlinge und 6 Spalten erweitern ein Panel (Panel).
Der Code lautet wie folgt: Der verbleibende Teil des Codes befindet sich in der Sequenz <div> </div>
<body><div><h1 style=" line-height:2em;"> </h1><br /><div><div></div> <div><div><h3><strong>Vocational Skills Examination Score Query</strong></h3></div><div> </div> </div> </div> </div> <div></div> </div> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcs.com/twitter-bootstrap/3.1/js/bootstrap.min.js"> </</</</</</</</</</</</</bystrocks "> </</</</</</</</</byStraps
Eingabetext
Der Eingabeaufforderungstext verwendet die Alarmkomponente im Bootstrap -Framework, und der Code lautet wie folgt:
<div> <button type = "button" data-dismiss = "alert" aria-hidden = "true"> × </button> <strong> Hinweis!
Identitätskartenformular und Abfragebaste
Das ID -Kartenformular und das nachfolgende Kontoformular sollten in einem Formular erfolgen. Identitätsform- und Abfrage -Schaltflächen sind Gruppierungen von Formularelementen, die das Bootstrap -Framework verwenden. Verwenden Sie die Eingabegruppe, um das Textfeld und die Schaltfläche zu kombinieren. Das Bootstrap -Framework bietet Effekte wie Wasserzeichen und Highlights. Fügen Sie der Form viel Farbe hinzu
<Formrolle = "Form" name = "Form1"> <div> <Label für = "idCard"> Bitte geben Sie Ihre ID -Nummer </label> <div> <Eingabe type = "text" id = "idCard" name = "idcard" placeholder = "idCard number"> <span> <Taste = "" Taste "Onclick =" Form1.Submit (); "; > Abfrage </button> </span> </div> </form>
Betreffform
Kontoformulare sind auch Gruppen von Formularelementen, die das Bootstrap -Framework verwenden. Verwenden Sie die Eingabegruppe, um das Textfeld (Eingabe), Schaltfläche (Schaltfläche) und Dropdown-Liste (UL) zu kombinieren.
Sie können das Thema direkt in das Textfeld eingeben oder das Thema im Dropdown-Menü auswählen. Die spezifische Implementierung besteht darin, $ ('#Betreff'). Val ('Computer -Operator') und andere Codes zu verwenden, um den Inhalt im Textfeld im Klickereignis (Klicken) des Hyperlink (a) zu ändern. Das Kontoformular befindet sich unterhalb des ID -Formulars innerhalb des Formulars (Formular)
Der Code ist wie folgt:
<div> <Label für = "Betreff"> Bitte geben Sie den Betreff ein, den Sie suchen. Onclick = "$ ('#Betreff'). Onclick = "$ ('#Subjekt'). Val ('Multimedia');"> Multimedia </a> </li> </ul> </div> </div> </div>Abfrageinformationen
Wenn auf die Schaltfläche Abfragen klickt und kein Datensatz gefunden wird, wird die Abfragefehlermeldung angezeigt. Wie im vorherigen Eingabeaufforderungstext wird die Warnkomponente im Bootstrap -Framework verwendet.
Ob diese Informationen angezeigt werden, erfordert auch die Zusammenarbeit des Hintergrunddynamikcode. Der dynamische Code entscheidet, ob die Informationen basierend auf den Abfrageergebnissen angezeigt werden (falls es keinen Datensatz gibt, werden die Informationen angezeigt). Dynamischer Code wird in diesem Artikel nicht erörtert.
Der Ort befindet sich hinter dem Formular und der Code ist wie folgt:
<Div> <button type = "button" data-dismiss = "alert" aria-hidden = "true"> × </button> <strong> Hinweis!
Formform
Wenn die Schaltfläche Abfragen klickt, wird das Bewertungsformular angezeigt, wenn der Datensatz gefunden wird. In ähnlicher Weise erfordert es auch die Zusammenarbeit des dynamischen Code im Hintergrund.
Gleichzeitig können nur eine Fehlermeldung und ein Score -Formular angezeigt werden
Der Code ist wie folgt:
<div> <table cellpacing="0" cellpadding="0"> <tr> <th scope="col" ><span style="color:white">Subjects</span></th> <th scope="col"><span style="color:white">Score</span></th> </tr> <tr> <td>Computer Operator</td> <td>No Grade</td> </tr> <tr> <td>Computer Operator</td> <td>Excellent</td> </tr> <tr> <td>Multimedia Operator</td> <td>Good</td> </tr> <tr> <td>Web Design</td> <td>Failed</td> </tr> </table> </div>
Diese Seite wird mit dem Bootstrap -Framework implementiert. Dank der Kraft des Bootstrap -Frameworks ist das Entwerfen der Benutzeroberfläche keine schwierige Aufgabe mehr. Aber Bootstrap ist nur ein UI -Framework, und seine Exzellenz hängt von der Zusammenarbeit des dynamischen Code im Hintergrund ab.
Die folgende URL ist die Funktion des Autors, die den oben genannten Schnittstellen und Backend Dynamic Code (PHP) verwendet, um die Abfrage der Bewertungen für berufliche Fähigkeiten zu realisieren (nur Shanghai). Sie können einen Blick darauf werfen und wertvolle Kommentare abgeben (gültig für 1 Monat).
http://bertin.sturgeon.mopaas.com/
Der vollständige UI -Code lautet wie folgt:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-kompatible" content = "ie = edge"> <meta name = "Ansichtsport" content = "width = giry-width, initial-scale = 1.0"> <meta name " name = "author" content = ""> <title> stootstrap </title> <link rel = "styleSheet" href = "http://cdn.bootcs.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <link Rel = "Stylesheet" href = "http://cdn.bootcs.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[wenn lt ie 9]> <script src = "../../ docs-assets/js/ie8-responsive file-warning.js"> </script> <! [endif]-> <! 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respect.js/1.3.0/respect.min.js"> </script> <! [endif]-> <style> .bs-docs-home {background-color: #1b31b1; Hintergrundbild: URL (Zeile.png); } </style> </head> <body> <div> <h1 style = "line-height: 2EM;"> </h1> <br/> <div> <div> </div> <div> <h3> <strong> Vokationsfähigkeiten Prüfungsuntersuchung Query </strong> </h3> </div> <div> <div> <button = button aria-hidden = "true"> × </button> <strong> Hinweis! </strong> Die auf dieser Website erkundten Bewertungen stammen von der offiziellen Website von 12333. Für Details wenden Sie sich bitte an die offizielle Website </div> <Formrolle = "Form" name = "Form1"> <div> <div> <div> <Label für = "idcard"> bitte Ihre IDChard </label> <div> <Input "<Diveinputtyps". placeholder = "id number"> <span> <button type = "button" onclick = "Form1.submit ();" > Abfrage </button> </span> </div> <div> <Label für = "Betreff"> Bitte geben Sie den Betreff ein, den Sie abfragen möchten. href = "#" Onclick = "$ ('#Betreff'). Onclick = "$ ('#Betreff'). <div><table cellpacing="0" cellpadding="0"><tr><th scope="col" ><span style="color:white">subjects</span></th><th scope="col"><span style="color:white">score</span></th></tr><td>computer operator</td><td>no grade</td></tr><td>computer operator</td><td>excellent</td></tr><td>multimedia operator</td><td>good</td></tr><td>web design</td><td>failed</td></tr> </table></div> </div></div><div></div></div></div></div> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcs.com/twitter-bootstrap/3.0.1/js/bootstrap.Min.js"> </</</</by> </</</</by> </</</by> </</</by> </by/by/html>Das obige ist das relevante Wissen über die Verwendung des Bootstrap -Frameworks zum Erstellen von Schnittstellen -Beispielcodes für Abfragebereitungen, die Ihnen vorgelegt wurden. 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!