Ich bin dabei, eine neue ASP.Net MVC5-Webanwendung zu erstellen. Ich möchte ein Thema von Bootswatch oder Wrapbootstrap in der Anwendung verwenden, kann jedoch keine Anweisungen dazu finden.
asp.net-mvc
twitter-bootstrap
asp.net-mvc-5
bootswatch
Peter Loudon
quelle
quelle
.cssThema und in Ihrem App_Start BundleConfig.cs, ersetzen~/Content/bootstrap.cssmit~/Content/yourtheme.bootstrap.cssAntworten:
Die Schritte zum Anwenden eines Themas sind recht einfach. Um wirklich zu verstehen, wie alles zusammenarbeitet, müssen Sie verstehen, was die ASP.NET MVC 5-Vorlage sofort bereitstellt und wie Sie sie an Ihre Anforderungen anpassen können.
Hinweis: Wenn Sie grundlegende Kenntnisse über die Funktionsweise der MVC 5-Vorlage haben, scrollen Sie zum Themenbereich.
ASP.NET MVC 5-Vorlage: So funktioniert es
In dieser Anleitung wird erläutert, wie Sie ein MVC 5-Projekt erstellen und was unter der Haube vor sich geht . Alle Funktionen der MVC 5-Vorlage finden Sie in diesem Blog .
Erstellen Sie ein neues Projekt. Wählen Sie unter Vorlagen Web > ASP.NET-Webanwendung . Geben Sie einen Namen für Ihr Projekt ein und klicken Sie auf OK.
Wählen Sie im nächsten Assistenten MVC und klicken Sie auf OK. Dadurch wird die MVC 5-Vorlage angewendet.
Die MVC 5-Vorlage erstellt eine MVC-Anwendung, die Bootstrap verwendet, um reaktionsschnelle Design- und Themenfunktionen bereitzustellen. Unter der Haube enthält die Vorlage ein Bootstrap 3. * nuget Paket , die 4 - Dateien installiert:
bootstrap.css,bootstrap.min.css,bootstrap.js, undbootstrap.min.js.Bootstrap wird in Ihrer Anwendung mithilfe der Weboptimierungsfunktion gebündelt. Inspizieren
Views/Shared/_Layout.cshtmlund suchen@Styles.Render("~/Content/css")und
@Scripts.Render("~/bundles/bootstrap")Diese beiden Pfade beziehen sich auf Bündel, die eingerichtet wurden in
App_Start/BundleConfig.cs:bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css"));Auf diese Weise können Sie Ihre Anwendung ausführen, ohne sie vorher konfigurieren zu müssen. Versuchen Sie jetzt, Ihr Projekt auszuführen.
Anwenden von Bootstrap-Designs in ASP.NET MVC 5
In dieser Anleitung wird beschrieben, wie Sie Bootstrap-Themen in einem MVC 5-Projekt anwenden
cssSie zunächst das Thema herunter, das Sie anwenden möchten. Für dieses Beispiel werde ich mit Bootswatch der sein Rundweg . Fügen Sie das heruntergeladeneflatly.bootstrap.cssundflatly.bootstrap.min.cssin denContentOrdner ein (stellen Sie sicher, dass Sie es auch in das Projekt aufnehmen).Öffnen
App_Start/BundleConfig.csund ändern Sie Folgendes:bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css"));um Ihr neues Thema aufzunehmen:
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/flatly.bootstrap.css", "~/Content/site.css"));Wenn Sie
_Layout.cshtmldie in der MVC 5-Vorlage enthaltene Standardeinstellung verwenden , können Sie mit Schritt 4 fortfahren. Wenn nicht, fügen Sie diese beiden Zeilen mindestens zusammen mit Ihrer Bootstrap-HTML-Vorlage in Ihr Layout ein :In Ihrem
<head>:@Styles.Render("~/Content/css")Letzte Zeile vor dem Schließen
</body>:@Scripts.Render("~/bundles/bootstrap")Versuchen Sie jetzt, Ihr Projekt auszuführen. Sie sollten Ihre neu erstellte Anwendung jetzt mit Ihrem Thema sehen.
Ressourcen
Weitere Informationen, Tutorials, Tipps und Tricks zur Verwendung von Twitter Bootstrap mit ASP.NET MVC 5 finden Sie in dieser fantastischen 30-Tage-Anleitung von James Chambers .
quelle
@Styles.Render("//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css")Dies kann etwas spät sein; aber jemand wird es nützlich finden.
Es gibt ein Nuget-Paket zur Integration von AdminLTE - einer beliebten Bootstrap-Vorlage - in MVC5
Führen Sie diesen Befehl einfach in Ihrer Visual Studio Package Manager-Konsole aus
Install-Package AdminLteMvcNB: Die Installation kann eine Weile dauern, da alle erforderlichen Dateien heruntergeladen und Beispiel-Voll- und Teilansichten (CSHTM-Dateien) erstellt werden, die Sie bei der Entwicklung unterstützen können. Eine Beispiel-Layoutdatei
_AdminLteLayout.cshtmlwird ebenfalls bereitgestellt.Sie finden die Dateien im
~/Views/Shared/Ordnerquelle
Erstens, wenn Sie in der Lage sind, Ihre zu finden
bootstrap.css Datei
und
bootstrap.min.js Datei
In Ihrem Computer tun Sie dann einfach
Laden Sie zuerst Ihr Lieblingsthema herunter, dh von http://bootswatch.com/
Kopieren Sie die heruntergeladenen Dateien bootstrap.css und bootstrap.min.js
Suchen Sie dann auf Ihrem Computer die vorhandenen Dateien und ersetzen Sie sie durch die neu heruntergeladenen Dateien.
HINWEIS: sicherzustellen , dass Ihre heruntergeladenen Dateien werden umbenannt , was in Ihrem Ordner
dh
Dann können Sie loslegen.
Manchmal wird das Ergebnis möglicherweise nicht sofort angezeigt. Möglicherweise müssen Sie das CSS in Ihrem Browser ausführen, um es zu aktualisieren
quelle
Ich habe einen Artikel über MSDN - Erstellen von ASP.NET MVC mit benutzerdefiniertem Bootstrap-Design / Layout mit VS 2012, VS 2013 und VS 2015, an den auch ein Demo-Codebeispiel angehängt ist. Siehe folgenden Link. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106
quelle
Alles, was Sie tun müssen, ist, die Dateien bootstrap.css und bootstrap.js von der Bootswatch-Website auszuwählen und herunterzuladen und dann die Originaldateien durch diese zu ersetzen.
Natürlich müssen Sie die Pfade nach dem jQuery-Pfad zu Ihrer Layoutseite hinzufügen.
quelle
Bootswatch ist eine gute Alternative, aber Sie können hier auch mehrere Arten von kostenlosen Vorlagen für ASP.NET MVC finden, die MDBootstrap (ein auf Bootstrap basierendes Front-End-Framework) verwenden:
ASP.NET MVC MDB-Vorlagen
quelle