Frage Wie kann ich ein Thema von bootswatch oder wrapbootstrap in einem MVC 5 Projekt implementieren?


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 aber keine Anweisungen finden, wie dies zu tun ist.


75
2018-02-17 21:11


Ursprung


Antworten:


Die Schritte zum Anwenden eines Themas sind ziemlich einfach. Um wirklich zu verstehen, wie alles zusammenarbeitet, müssen Sie verstehen, was die ASP.NET MVC 5-Vorlage standardmäßig bereitstellt und wie Sie sie an Ihre Anforderungen anpassen können.

Hinweis: Wenn Sie ein grundlegendes Verständnis dafür haben, wie die MVC 5-Vorlage funktioniert, führen Sie einen Bildlauf zum Abschnitt Thema durch.


ASP.NET MVC 5 Vorlage: Wie es funktioniert

Dieser Durchlauf beschreibt, wie man ein MVC 5-Projekt erstellt und was unter der Haube passiert. Sehen Sie alle Funktionen von MVC 5 Template in dieser Blog.

  1. Erstellen Sie ein neues Projekt. Unter Vorlagen Wählen Sie Netz > 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 klicke OK. Dadurch wird die MVC 5-Vorlage angewendet.

    Example of choosing MVC Template

  3. Die MVC 5-Vorlage erstellt eine MVC-Anwendung, die Bootstrap verwendet, um Responsive Design- und Theming-Funktionen bereitzustellen. Unter der Haube enthält die Vorlage a bootstrap 3. * nuget Paket das installiert 4 Dateien: bootstrap.css, bootstrap.min.css, bootstrap.js, und bootstrap.min.js.

    Example of installed css and js

  4. Bootstrap wird in Ihrer Anwendung mithilfe der Weboptimierungsfunktion gebündelt. Prüfen Views/Shared/_Layout.cshtml und danach suchen

    @Styles.Render("~/Content/css")
    

    und

    @Scripts.Render("~/bundles/bootstrap") 
    

    Diese beiden Pfade beziehen sich auf 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. Dies macht es möglich, Ihre Anwendung ohne Konfiguration im Vorfeld zu betreiben. Versuchen Sie, Ihr Projekt jetzt auszuführen.

    Default Application Running


 Anwenden von Bootstrap-Designs in ASP.NET MVC 5

Dieser Durchlauf beschreibt, wie Sie Bootstrap-Themen in einem MVC 5-Projekt anwenden

  1. Laden Sie zuerst die css des Themas, das du anwenden möchtest. In diesem Beispiel verwende ich Bootswatch's Rundweg. Schließen Sie die heruntergeladene Datei ein flatly.bootstrap.css und flatly.bootstrap.min.css in dem Content Ordner (achten Sie darauf, dass Sie auch im Projekt enthalten sind).
  2. Öffnen App_Start/BundleConfig.cs und ändere folgendes:

    bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/bootstrap.css",
        "~/Content/site.css"));
    

    um dein neues Thema aufzunehmen:

    bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/flatly.bootstrap.css",
        "~/Content/site.css"));
    
  3. Wenn Sie den Standard verwenden _Layout.cshtml Wenn Sie nicht in der MVC 5-Vorlage enthalten sind, können Sie mit Schritt 4 fortfahren. Wenn nicht, fügen Sie diese beiden Zeilen in Ihrem Layout zusammen mit Ihren Bootstrap-HTML-Vorlage:

    In deinem <head>:

    @Styles.Render("~/Content/css")
    

    Letzte Zeile vor dem Schließen </body>:

    @Scripts.Render("~/bundles/bootstrap")
    
  4. Versuchen Sie, Ihr Projekt jetzt auszuführen. Sie sollten nun Ihre neu erstellte Anwendung mit Ihrem Design sehen.

    Default template using flatly theme


Ressourcen

Auschecken Dieser großartige 30-Tage-Guide durch James Chambers Weitere Informationen, Tutorials, Tipps und Tricks zur Verwendung von Twitter Bootstrap mit ASP.NET MVC 5.


179
2018-02-18 20:23



Das könnte etwas spät sein; aber jemand wird es nützlich finden.

Es gibt ein Nuget-Paket, um AdminLTE - eine beliebte Bootstrap-Vorlage - in MVC5 zu integrieren

Führen Sie diesen Befehl einfach in Ihrer Visual Studio Package Manager-Konsole aus

Install-Package AdminLteMvc

Hinweis: Es kann eine Weile dauern, bis die Installation abgeschlossen ist, da alle notwendigen Dateien heruntergeladen werden und vollständige und teilweise Ansichten (.cshtml-Dateien) erstellt werden, die Sie bei der Entwicklung unterstützen. Eine Beispiellayoutdatei _AdminLteLayout.cshtml ist auch vorgesehen.

Sie finden die Dateien in ~/Views/Shared/ Mappe


17
2017-12-25 20:51



Erstens, wenn Sie in der Lage sind, Ihre

bootstrap.css Datei

und

bootstrap.min.js Datei

in deinem Computer, dann was du gerade tust ist

Laden Sie zuerst Ihr Lieblingsmotiv herunter, z http://bootswatch.com/

Kopiere das heruntergeladene bootstrap.css und bootstrap.min.js Dateien

Suchen Sie dann auf Ihrem Computer die vorhandenen Dateien und ersetzen Sie sie durch die neu heruntergeladenen Dateien.

HINWEIS: Stellen Sie sicher, dass Ihre heruntergeladenen Dateien sind umbenannt zu was in Ihrem Ordner ist


3
2018-03-05 17:50



Ich habe einen Artikel über MSDN - Erstellen von ASP.NET MVC mit benutzerdefinierten bootstrap Thema / Layout mit VS 2012, VS 2013 und VS 2015, haben auch ein Demo-Codebeispiel angehängt .. Bitte beachten Sie den folgenden Link. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106


0
2017-09-23 16:23



Sie müssen lediglich die Dateien bootstrap.css und bootstrap.js von der Bootswatch-Website auswählen und herunterladen und dann die ursprünglichen Dateien durch diese ersetzen.

Natürlich müssen Sie die Pfade zu Ihrer Layout-Seite nach dem jQuery-Pfad hinzufügen, der alles ist.


0
2018-03-04 04:36