Wie viel wissen Sie über Bootstrap Framework?
Bootstrap ist ein technischer Front-End-Rahmen, der von vielen Plattformen übernommen werden kann. Java/PHP/.NET kann als Front-End-Schnittstelle verwendet werden. Die Integration von JQuery kann sehr reichhaltige Schnittstelleneffekte erzielen. Derzeit gibt es viele Bootstrap-Plug-Ins, die für alle verwendet werden können. Viele inländische Bootstrap-basierte Einführungen konzentrieren sich jedoch weiterhin auf das Lehren und führen verschiedene Grundkenntnisse und die einfache Verwendung von Bootstrap ein. Dieser Artikel hofft, eine umfassende Einführung in das Bootstrap -Entwicklungsrahmen zu bieten, die auf dem tatsächlichen MVC -Projekt basierend auf C#basieren, und es mit Screenshots des tatsächlichen Projektcode und der Wirkung zu erläutern, um die Erfahrung und Erfahrung in diesem Bereich ausführlich und intuitiv vorzustellen.
1. Überblick über das Bootstrap -Entwicklungsrahmen basierend auf Metronic
Metronic ist ein fremdes Bootstrap-Entwicklungsrahmen, das auf HTML, JS und anderen Technologien basiert und viele Bootstrap-Front-End-Technologien und Plug-Ins integriert. Es ist ein sehr guter technischer Rahmen. Basierend auf diesem Artikel in Kombination mit meinen Forschungen zum Web Framework von MVC integriert dieser Artikel das auf MVC basierende Bootstrap -Entwicklungsrahmen, damit er die strukturellen Bedürfnisse der tatsächlichen Projekte erfüllt.
Das Folgende sind die Gesamtdarstellungen meines Gesamtprojekts.
Der Inhalt des Menübereichs wird in der Datenbank dynamisch erhalten, und einige Informationen werden in der oberen Spalte des Systems platziert und bietet Benutzern eine schnelle Verarbeitung personenbezogener Daten, z. B. das Anzeigen personenbezogener Daten, die Auswahl der Bildschirm usw. Der Inhaltsbereich wird hauptsächlich visuell angezeigte Daten, die über die Steuerelemente und die Tabellensteuerung angezeigt werden. Im Allgemeinen müssen auch die Daten hinzugefügt, gelöscht, modifiziert und Paging geändert werden, sodass verschiedene Funktionen integriert werden müssen. Zusätzlich zu Abfragen und Anzeigen der Daten des Benutzers müssen auch importierte und exportbezogene Vorgänge, bei denen es sich um Routine -Datenverarbeitungsfunktionen handelt, importiert und exportiert werden. Nachdem wir diese Regeln und Schnittstelleneffekte ermittelt haben, können wir diese über Tools für Codegenerierung generieren, um die Schnittstelleneffekte dieser Webprojekte schnell zu generieren.
2. Menü mit Bootstrap Development Framework Anzeige
The entire framework involves a lot of content, including the use of various CSS features of regular Bootstrap, as well as menu bar, Bootstrap icon management, system top bar, tree control JSTree, Portlet container, Modal dialog box, Tab control, drop-down list Select2, checkbox iCheck, multi-text editing control summernote, file and picture upload display fileinput, prompt control bootstrap-toast and sweetalert, numerical adjustment control TouchSpin, Video Play Display Control Video-Player usw. Diese Funktionen sind in der ganzheitlichen Lösung gestaltet. Durch das Sammeln dieser hervorragenden Plug-Ins können unser Framework leistungsfähigere Funktionen und eine reichhaltige Benutzererfahrung bieten.
Dieser Abschnitt kehrt weiterhin zum Beginn des Frameworks, zur Verarbeitung und Präsentation des Menüs zurück. Im Allgemeinen sind die Menüs zum Komfort des Managements in drei Ebenen unterteilt. Die ausgewählten Menüs unterscheiden sich von anderen Menüstilen. Die Menüs können gefaltet und minimiert werden. Der Effekt ist wie folgt.
In Bootstrap ist das Aufbau von Menüs eine relativ leichte Aufgabe. Es verwendet hauptsächlich UL und Li. Durch die Stilverarbeitung kann das Menülayout eingestellt werden. Der Code ist wie folgt.
<UL Data-Keep-expanded = "False" data-auto-scroll = "True" Data-Slide-Speed = "200"> <li id = "1"> <a href = "/home/Index"> <i> </i> </i> <span> home </span> </span> </span> </a. <i></i> <span>Industry Trends</span> <span></span> <span></span> </a> <ul> <li style="font-size:14px;color:yellow"> <i></i> Industry Trends</li> <li> <a href="#"> <i></i> <span>4</span> Policies and Regulations</a> </li> <li> <a href="#"> <i></i> <span>4</span> Notices</a> </li> <li> <a href="#"> <i></i> <span>4</span> Dynamic Information</a> </li> </li> </li> </li> </ul> </li> </ul> </ul> </ul> </ul> </ul>
Unsere allgemeinen Menüs werden jedoch dynamisch verändert, dh wir müssen sie aus der Datenbank erhalten und auf das Front-End-Display einstellen. Auf diese Weise müssen wir den Menüinhalt im MVC-Controller ausgeben und sie dann an die Front-End-Schnittstelle binden, um die Dynamik der Menüdaten zu erkennen. Gleichzeitig ist dies auch die grundlegende Verarbeitung der Berechtigungsregelung.
In der Basisklasse können wir die Menüdaten abrufen und nach dem Einmeldung des Benutzer in das Ansichtsbag -Objekt einfügen.
Der spezifische Code ist wie folgt. Stellen Sie zunächst fest, ob der Benutzer angemeldet ist. Wenn Sie sich angemeldet haben, erhalten Sie die Menüdaten des Benutzers und es ist in Viewbag zur Verwendung verfügbar.
/// <summary> /// Schreiben Sie die Verarbeitung der Basisklasse neu, bevor die Aktion ausgeführt wird /// </summary> /// <param name = "filtercontext"> Schreiben Sie die Parameter der Methode </param> protected Overside void onActionExecuting (actionExecutingContext -Filtercontext). // Die Informationen über den Benutzeranmeldung currentUser = session ["userInfo"] als userInfo erhalten; if (currentUser == null) {response.redirect ("/login/index"); // Wenn der Benutzer leer ist, springen Sie zur Anmeldeschnittstelle} else {// das Autorisierungsattribut festlegen und dann den Wert dem Ansichtsbag zuzuweisen, um ConvertAuthorizedInfo () zu speichern. Viewbag.AuthorizeKey = AuthorizeKey; // Anmeldeinformationen SET Viewbag.fullname = currentUser.fullname; Viewbag.name = currentUser.name; Viewbag.menustring = getMenustring (); //Viewbag.menustring = getMenustringCache (); // Verwenden Sie Cache und aktualisieren Sie ihn von Zeit zu Zeit}}Unter ihnen ist die GetMenustring -Funktion die Montage und Verarbeitung von Menüs. Die Informationen zum Menü in der Datenbank sind eine Baumstruktur, wie unten gezeigt.
Wir können einen HTML -Code erstellen, der in der Schnittstelle basierend auf den Datenbankmenüinformationen verwendet wird.
#Region Definierte Formatvorlage // JavaScript:; // {0}? Tid = {1} var firstTemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> <span class = 'title' var SecondTemplate = @"<li class = 'Heading' style = 'Schriftgröße: 14px; Farbe: gelb'> <i class = '{0}'> </i> {1} </li>"; var ThirdTemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> {2} </a> </li>"; var firstTemplateend = "</li>"; var SecondTemPlatestart = "<ul class = 'sub-menu'>"; var SecondTemplateend = "</ul>"; #endregionZum Beispiel kann das Menü der dritten Ebene über Code generiert werden.
// Stufe 3 icon = subnodeInfo.webicon; // TID ist die Top-Level-Klassifizierungs-ID, SID ist die Menü-ID der dritten Ebene tmpurl = string.format ("{0} {1} Tid = {2} & sid = {3}", subnodeInfo.url, getUrljoiner (subnodeInfo.url), info.id.id.Id.Id.id.Id, subnodeInfo.id.Id); url = (! string.isnullorEmpty (subnodeInfo.url) && subnodeInfo.url.trim ()! = "#")? tmpurl: "JavaScript:;"; SB = SB.AppendFormat (ThirdTemplate, URL, Symbol, SubnodeInfo.name, subnodeInfo.id);Wenn Sie die Parallelität erhöhen möchten, können Sie natürlich das häufige Abrufen des Menüs reduzieren und diesen Teil der Daten wie folgt in Memerycache einfügen.
public String getMenustringCache () {String itemValue = majoreCacheHelper.getCacheItem <string> ("getMenArningCache", delegate () {return getMenustring ();}, null, datetime.now.adminutes (5) // Ablauf in 5 Minuten, neu); Return itemValue zurückgeben; }3. Verwendung von Layoutseiten
Gleichzeitig extrahieren wir, um die Wiederverwendung der Seite zu verbessern, den Inhalt desselben Teils jeder Seite im Allgemeinen und platzieren sie auf der Gesamt -Layout -Seite. Auf diese Weise werden die anderen Teile alle von der Layout -Ansichtsseite geerbt. Unser dynamisches Menü -Teil ist auch Teil des Inhalts in der Layoutansicht.
Die _layout.cshtml in der obigen Abbildung ist die Seite MVC -Gesamtlayoutansicht basierend auf C#. Auf diese Weise setzen wir den Inhalt der Menüzelle auf dieser Seite sowie den Teil des Hauptseite Inhalt und Teil des Skripts Display und reicht aus.
Der Anzeigecode des Menüs ist wie folgt:
Der auf der Layout -Seite links links links links liegende Seite ist wie folgt.
Da Bootstrap im Allgemeinen JS -Dateien am Ende einsetzt, müssen wir neben der Aufbewahrung einiger der erforderlichen JQuery- und anderen Skripte auf der Layout -Seite auch einige der Skriptinhalte am unteren Ende der Seite zum Laden einstellen, und unser Skriptladung kann mit der MVC -Bündelstechnologie komprimiert und integriert werden. Informationen zu dieser Technologie finden Sie in meinem vorherigen Artikel, um "Zusammenfassung der Erfahrung des Webentwicklungsrahmens basierend auf MVC4+ Easyui (11) vorzustellen - mit den Bündeln, um vereinfachte Seitencode zu verarbeiten".
Auf diese Weise müssen wir nach der Einführung der Layout -Ansichtsseite in den Ansichten jeder Unterseite nur den Teil des personalisierten Anzeigeinhalts schreiben, der spezifische Code ist wie folgt.
Geben Sie dann am Ende der Seite einfach den Skriptcode für den erforderlichen Teil an. Nachdem die Seite generiert wurde, wird sie gemäß den von der Layout -Seite festgelegten Bestellblöcken angemessen angezeigt, und alle Teile des Inhalts werden integriert.
4. Verwendung des Seitenbearbeitungswerkzeugs Sublime Text
Viele der Screenshots in der vorherigen stammen aus der VS-Umgebung. Wenn wir jedoch die Ansichtsseite bearbeiten, verwenden wir Sublime Text, ein leistungsstarkes Bearbeitungswerkzeug, reichhaltige Plug-Ins, intelligente Syntaxanforderungen usw., wodurch Sie es lieben, wenn Sie es nach der Verwendung lieben. Es ist ein sehr schnelles Werkzeug zum Bearbeiten von Seiten anzeigen und wird dringend empfohlen.
VS wird im Allgemeinen für die Dateiverwaltung, Kompilierung und andere Verarbeitung verwendet.
Der obige Inhalt ist die Zusammenfassung der Erfahrung des Entwicklungsrahmens basierend auf der von Ihnen [i] Framework -Übersicht und Menümodulverarbeitung vorgelegten Bootstrap -Metronik. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie weitere Informationen wissen möchten, achten Sie bitte auf die Website wulin.com!