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

79

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.

Peter Loudon
quelle
2
Dies ist vielleicht nicht das, wonach Sie suchen, aber es ist ziemlich einfach. In Ihrem Content - Ordner, ist das .cssThema und in Ihrem App_Start BundleConfig.cs, ersetzen ~/Content/bootstrap.cssmit~/Content/yourtheme.bootstrap.css
Carrie Kendall
Danke Carrie. Das ist eine elegante Antwort. Was machen Sie mit der eigentlichen Layoutseite? Ersetzen Sie einfach den Körper durch HTML aus der Probe? Ich möchte sichergehen, dass es dafür keinen GitHub oder ein anderes automatisiertes Verfahren gibt. Ich werde dies als beantwortet markieren, wenn am nächsten Tag keine weiteren Kommentare eingehen.
Peter Loudon
Ich denke, die Layoutseite ist die Standardvorlage . Es wird sofort mit anderen Themen funktionieren. Einfach ausgedrückt, ein Thema ist nur eine andersfarbige / gestaltete Version von Bootstrap. Die Schaltflächen können also unterschiedliche Farben haben und einige Komponenten haben möglicherweise einen unterschiedlichen Rahmenradius, aber der tatsächliche Gesamtstil ist mehr oder weniger gleich. Sie können verschiedene Layouts anwenden. Ersetzen Sie einfach die Includes durch die Bundles.
Carrie Kendall
1
Ich werde später eine gut geschriebene Antwort mit weiteren Details liefern:]
Carrie Kendall
Danke @Carrie. Haben Sie Erfahrung mit der Verwendung der Premium-Themes von wrapbootstrap und ist das Prinzip dasselbe?
Peter Loudon

Antworten:

185

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 .

  1. 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.

  2. Wählen Sie im nächsten Assistenten MVC und klicken Sie auf OK. Dadurch wird die MVC 5-Vorlage angewendet.

    Beispiel für die Auswahl der MVC-Vorlage

  3. 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.

    Beispiel für installierte CSS und JS

  4. 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"));
    
  5. Auf diese Weise können Sie Ihre Anwendung ausführen, ohne sie vorher konfigurieren zu müssen. Versuchen Sie jetzt, Ihr Projekt auszuführen.

    Standardanwendung wird ausgeführt


Anwenden von Bootstrap-Designs in ASP.NET MVC 5

In dieser Anleitung wird beschrieben, wie Sie Bootstrap-Themen in einem MVC 5-Projekt anwenden

  1. 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).
  2. Ö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"));
    
  3. 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")
    
  4. Versuchen Sie jetzt, Ihr Projekt auszuführen. Sie sollten Ihre neu erstellte Anwendung jetzt mit Ihrem Thema sehen.

    Standardvorlage mit flachem Thema


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 .

Carrie Kendall
quelle
3
Ich würde nicht empfehlen, ein CDN zu verwenden, hauptsächlich, weil Sie viel Optimierung verlieren, die in die Bündelung eingebaut ist (wie die Minimierung ). Wenn dies gesagt ist, würden Sie einfach die Links in der Ansicht in Schritt 4 ändern, um die des CDN widerzuspiegeln, dh@Styles.Render("//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css")
Carrie Kendall
1
Ich habe dies getan (aber mit dem Cyborg-Thema) und jetzt erhalte ich "Eine Ausnahme vom Typ 'System.IndexOutOfRangeException' ist in WebGrease.dll aufgetreten", wenn ich versuche auszuführen. Der Fehler tritt auf Styles.Render ("~ / Content / css")
HitLikeAHammer
2
Ich werde niemals ein öffentliches CDN verwenden, nur weil ich keine Kontrolle über die Box oder die vorhandenen Sicherheitspraktiken habe . In jedem Fall ist diese Konversation nicht wirklich ein Thema für diesen Beitrag. Wenn Sie also die Konversation fortsetzen möchten, sollten Sie sich mir im Chat anschließen :)
Carrie Kendall
1
@SixOThree Ich würde den Screenshots nicht viel Wert beimessen, ich habe sie nur als visuelles Beispiel aus einem der verlinkten Artikel gezogen. Hoffe das hilft :)
Carrie Kendall
1
Ich habe gerade die Lösung gefunden: Ich habe Bootstrap v4-Designs verwendet, während meine Bootstrap-Version 3.x war. Sobald ich ein Thema für die richtige Version verwendet habe, hat alles problemlos funktioniert. @ CarrieKendall, ich denke, es könnte für kommende Leser sehr hilfreich sein, wenn Sie diesen Punkt zu Ihrer Antwort hinzufügen.
41686d6564
17

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

Soma Mbadiwe
quelle
1
Dieses "AdminLteMvc Nuget" ist ziemlich ordentlich! Ich habe mir die Vorschau gerade unter almsaeedstudio.com/preview angesehen. Es hat wie ... alles, was man in einer Admin-Website-Vorlage braucht :)
Shiva
3

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

Geben Sie hier die Bildbeschreibung ein

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

Omari Victor Omosa
quelle
0

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

Hussain Patel
quelle
Dieser Artikel wurde als "Artikel des Tages" in asp.net Communities ausgewählt. Asp.net/community/articles am 07. Oktober 2016
Hussain Patel
0

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.

Shaddad
quelle
0

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

Ignacio
quelle