Im vorherigen Aufsatz basiert auf der Erfahrung von Bootstrap Metronics Erfahrung des Entwicklungsrahmens [i] Framework -Übersicht und der Verarbeitung von Menümodulen die Verarbeitung von Menümodulen und führt hauptsächlich vor, wie Daten Datenbank- und Erstellung von Menülisten dynamisch erhalten werden. Der Symbolstil der Menüinformationen wird auch aus der Datenbank erhalten, sodass wir die verschiedenen Symboldefinitionen in Bootstrap dynamisch erhalten müssen. In diesem Artikel wird hauptsächlich vorgelegt, wie Sie die Symbolinformationen von Bootstrap extrahieren und für meine Verwendung in der Datenbank speichern.
1. Menüanzeige und verschiedene Bootstrap -Symbole
In der Abbildung unten können wir sehen, dass für die Schönheit des Menüs jeden Menüpunkt (hier drei Ebenen vorhanden sind) ein Symbol. Obwohl die Größen unterschiedlich sind, verwenden wir Bootstrap -Symbole, die alle aus dem Inhalt der Bootstrap -Symbolbibliothek stammen.
Die Bootstrap -Symbolbibliothek ist in drei Kategorien unterteilt:
Font Fantastisches: Bootstraps spezielle Icon -Schriftart. Alle in Font Awesome enthaltenen Ikonen sind Vektor, sodass sie willkürlich skaliert werden können, um den Aufwand zu vermeiden, dass eine Ikone mehrere Größen durchführt. Die Stile, die CSS für Schriftarten einstellen können, können auch für diese Symbole verwendet werden.
Zum Beispiel sind die folgenden Schriftartikonen:
Einfache Symbole: Sammeln Sie die Logos vieler Websites und geben Sie Netizens hochwertige und unterschiedliche Größen von PNG-Formatbildern. Alle Ikone -Urheberrechte gehört zu ihrer Firma.
Wie unten gezeigt werden einige Symbole einfacher Symbole:
Glyphicons: Enthält eine Sammlung von 200 symbolischen Schriftformatdiagrammen von Glyphicons. Glyphicons Halblinge werden im Allgemeinen berechnet, aber nach Verhandlungen zwischen Bootstrap und Glyphicons -Autoren können Entwickler sie ohne Zahlungsgebühr verwenden.
Hier sind einige der Glypheninhalte:
Mit diesen Icon -Inhalten können wir nur die folgenden Stile vorstellen.
<link href = "/content/meter/font-awesome/css/font-awesome.min href = "/content/meter/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/>
Diese Symbole unterstützen die thematische Anzeige verschiedener Bootstraps, wie in den folgenden Effekten gezeigt.
Oder Sie können das Symbol auch größer machen:
2. Extraktion verschiedener Bootstrap -Symbole
Durch die obige Einführung haben wir wahrscheinlich ein gewisses Verständnis dieser Bootstrap -Symbole. Wenn wir jedoch in der Menübearbeitung Symbole auswählen möchten, müssen wir diese Informationen weiterhin in die Datenbank extrahieren und sie für mich anzeigen, ansonsten können dynamische Konfiguration nicht möglich sein.
In der obigen Bearbeitungsschnittstelle bieten wir beispielsweise eine dynamische Auswahl der Websymbole des Menüs. Wenn wir eine Sammlung der oben genannten Symbole in der Datenbank aufzeichnen, können wir sie in der Schnittstelle anzeigen und das entsprechende Diagramm davon auswählen.
Basierend auf den oben genannten Style -Dateien analysieren wir sie. Für den Dateiinhalt von font-awesome.min.css lautet der Icon Definitionsteil wie folgt.
Bei einfachen Line-ICons ist seine Stildefinition ähnlich, wie unten gezeigt.
Für Glyphicons ist seine Stildefinition auch sehr ähnlich, wie unten gezeigt.
Basierend auf diesen Informationen können wir die Informationen extrahieren, die wir benötigen, durch regelmäßiges Ausdrucksanpassung und in der Datenbank speichern, um den ersten Schritt der dynamischen Anzeige und Auswahl von Symbolen zu realisieren.
Zum Beispiel definieren wir teilweise Variablen und reguläre Ausdrücke, um diese Dateiinhalte zu verarbeiten:
String regex = "^//. (? <name>.*?): vor // s*// {"; List <String> filepathList = Neue Liste <string> () {"~/content/Themen/Meteronic/Assets/Global/Plugins/Bootstrap/CSS/Bootstrap.css", "~/content/Themes/Meteronic/Assets/Global/Plugins/Simple-Line-ICons/Simple-Line-ICons.css.css.css",};Anschließend kann der Sammelinhalt extrahiert werden, indem der Dateiinhalt gelesen und der Matching -Datensatz erhalten wird.
String content = FileUtil.filetoString (RealPath); Liste <String> Matchlist = Cregex.getList (Inhalt, Regex, 1);
Schließlich können wir diese Informationen in der Datenbanktabelle speichern.
Bootstrapiconinfo info = new bootstrapiconinfo () {displayName = item, className = prefix + item, createTime = datetime.now, Sourcetype = Sourcetype,}; Bllfactory <bootstrapicon> .instance.insert (info);Schließlich wird der Datensatz in der Datenbank gespeichert. Der Effekt ist wie folgt. Die Icon -Informationen, die wir benötigen, wurden aufgezeichnet. Auf diese Weise können Sie bei der Verwendung die Informationen jedes Feldes verwenden, um eine gut aussehende Oberfläche anzuzeigen.
3. Anzeige und Auswahl von Bootstrap -Symbolen
Nachdem wir die Datei gelesen und den Inhalt in regulären Ausdrücken extrahiert und dann in der Datenbank speichern, können diese Symbolinformationen für uns verwendet und auf der Seite klassifiziert angezeigt werden. Jede Art von Symbol ist für eine einfache Abfrage paginiert, wie unten gezeigt.
Der Anzeige -Seitencode in diesem Teil ähnelt der regulären Datenanzeige, die Header -Informationen sind jedoch nicht erforderlich. Schauen wir uns den Seitencode wie unten gezeigt an.
<div> <div> <div> <i></i> Icon Information</div> </div> <div> <div> <span>Show per page</span> <select id="rows" onchange="ChangeRows()"> <option>50</option> <option selected>100</option> <option>200</option> <option>1000</option> </select> <span>Record</span> <span>Total records: </span> <span id = 'TotalCount'> 0 </span>, Gesamtseitenanzahl: <span id = 'TotalPageCount'> 0 </span> Seiten. </div> <hr/> <div style = "padding-left: 20px"> <div id = "grid_body"> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Das Hauptsymbolanzeigeinhalt befindet sich im obigen Teil im HTML.
<div id = "grid_body"> </div>
Das Verarbeitungsskript, das HTML -Code dynamisch erhält und generiert, ist wie folgt.
$ .getJson (iconurl + "&" + Bedingung, Funktion (Daten) {$ ("#icon_body"). html (""); title =/"" + item.displayName + "/"> "; tr + =" <i class =/"" + item.className + "/" style =/"font-size: 2.2em/"> </i> "; // // tr + =" <div> " + item.displayname +" appl. "; });Nachdem der Benutzer das entsprechende Symbol ausgewählt hat, können wir den Span -Stil über das Skript festlegen, um das von uns ausgewählte Symbol anzuzeigen, wie unten gezeigt.
$ ("#I_Webicon"). Attr ("Klasse", ClassName);Wenn wir ein Symbol auswählen, stellen wir natürlich ein Popup-Dialogfeld zur Verfügung, um Symbole mit unterschiedlichen Kategorien anzuzeigen, damit der Benutzer nach der Auswahl zurückkehren kann.
Auf diese Weise werden wir fertiggestellt, verschiedene Arten von Diagrammen aus der Icon -Datei extrahiert und dann in der Datenbank gespeichert und auf der Seite angezeigt, damit wir dynamisch auswählen und festlegen können.
Das obige ist die Zusammenfassung der Erfahrungen des Bootstrap -Metronik -Entwicklungsrahmens, das der Editor Ihnen [vier] das relevante Wissen über die Extraktion und Nutzung von Bootstrap -Symbolen vorgestellt hat. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie weitere Informationen wissen möchten, achten Sie bitte auf die Website wulin.com!