Wie kann ich ein Thema aus Bootswatch oder Wrapbootstrap in einem MVC 5-Projekt implementieren?

Question 1

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.

Question 2

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, und bootstrap.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

Laden 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 heruntergeladene flatly.bootstrap.cssund flatly.bootstrap.min.cssin den ContentOrdner 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 .

Question 3

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 AdminLteMvc

NB: 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/Ordner

Question 4

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

Question 5

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

Question 6

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.

Question 7

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