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

Bin ich über eine neue zu erstellen ASP.Net MVC5 web-Anwendung. Ich möchte ein theme von bootswatch oder wrapbootstrap in der Anwendung, aber nicht finden können, ein Satz von Anweisungen, wie dies zu tun.

InformationsquelleAutor der Frage Peter Loudon | 2014-02-17

177

Die Schritte zum anwenden eines Designs sind ziemlich einfach. Um wirklich zu verstehen, wie alles zusammen funktioniert, müssen Sie verstehen, was die ASP.NET MVC-5-Vorlage ist die out of the box und wie Sie Sie anpassen können, für Ihre Bedürfnisse.

_{Hinweis: Wenn Sie ein grundlegendes Verständnis davon, wie das MVC-5-Vorlage funktioniert, scrollen Sie nach unten zu den theming-Bereich.}

ASP.NET MVC-5-Vorlage: Wie es funktioniert

Diese walk-through geht über, wie man erstellen Sie eine MVC 5 Projekt und was Los ist unter der Haube. Siehe alle Funktionen des MVC-5-Vorlage in dieser blog.
1. Erstellen Sie ein neues Projekt. Unter Vorlagen Wählen Sie Web > ASP.NET Web-Anwendung. Geben Sie einen Namen für Ihr Projekt und klicken Sie auf OK.
2. Auf der nächsten Assistenten, wählen Sie MVC und klicken Sie auf OK. Dies gilt MVC-5-Vorlage.
3. Dem MVC-5-Vorlage erstellt eine MVC-Anwendung mit Bootstrap zu bieten ansprechendes design und theming-Funktionen. Unter der Haube, die Vorlage enthält ein bootstrap-3.* nuget-Paket installiert 4 Dateien: bootstrap.cssbootstrap.min.cssbootstrap.jsund bootstrap.min.js.
4. Bootstrap gebündelt ist, in Ihrer Anwendung durch die Verwendung des Web-Optimierung. Prüfen Views/Shared/_Layout.cshtml und suchen
```
@Styles.Render("~/Content/css")
```
  und
```
@Scripts.Render("~/bundles/bootstrap") 
```
  Diese beiden Wege beziehen sich auf bundles setzen sich 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 ist, was macht es möglich, dass Ihre Anwendung ohne jegliche Konfiguration von vorne. Versuchen Sie, Ihr Projekt jetzt.
Anwendung von Bootstrap-Themes im ASP.NET MVC 5

Diese walk-through beschreibt, wie man anwenden, bootstrap Themen in einer MVC 5 Projekt
1. Zuerst laden Sie die css von der Thema, das Sie anwenden möchten. Für dieses Beispiel werde ich sein mit Bootswatch ' s Rundweg. Zählen Sie die heruntergeladene flatly.bootstrap.css und flatly.bootstrap.min.css im Content Ordner (im Projekt).
2. Öffnen App_Start/BundleConfig.cs und ändern Sie die folgenden:
```
bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));
```
  Ihren neuen Thema:
```
bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/flatly.bootstrap.css",
    "~/Content/site.css"));
```
3. Wenn Sie mit der Standard - _Layout.cshtml enthalten in der MVC 5-Vorlage, können Sie überspringen zu Schritt 4. Wenn nicht, als absolutes minimum, gehören diese zwei line-in Ihrem layout zusammen mit Ihrem Bootstrap HTML-template:
  
  In Ihrem <head>:
```
@Styles.Render("~/Content/css")
```
  Letzte Zeile vor dem schließen </body>:
```
@Scripts.Render("~/bundles/bootstrap")
```
4. Versuchen Sie, Ihr Projekt jetzt. Sollten Sie sehen Ihre neu erstellte Anwendung jetzt über dein Thema.
Ressourcen

Check-out dieses tolle 30-Tage-Spaziergang-durch-guide von James Chambers für mehr Informationen, Anleitungen, Tipps und tricks zur Nutzung von Twitter Bootstrap mit ASP.NET MVC 5.
InformationsquelleAutor der Antwort Carrie Kendall
17

Dies ist vielleicht ein wenig spät, aber hat jemand finden es nützlich.

Gibt es ein Nuget-Paket für die Integration von AdminLTE - einem beliebten Bootstrap template - MVC5

Führen Sie einfach diesen Befehl in Ihre Visual Studio-Paket-Manager-Konsole
```
Install-Package AdminLteMvc
```
NB: Es kann eine Weile dauern zu installieren, denn es lädt alle notwendigen Dateien sowie das erstellen von sample-volle und partielle views (.cshtml-Dateien), kann guide Sie, wie Sie entwickeln. Ein Beispiel layout-Datei _AdminLteLayout.cshtml ist ebenfalls vorhanden.

Finden Sie die Dateien in ~/Views/Shared/ Ordner

InformationsquelleAutor der Antwort Soma Mbadiwe
3

Erstens, wenn Sie sind in der Lage, suchen Sie Ihr

bootstrap.css Datei

und

bootstrap.min.js Datei

in Ihrem computer, dann, was Sie gerade tun, ist

Ersten laden Sie Ihre Lieblings-Thema, also von http://bootswatch.com/

Kopieren Sie die heruntergeladene bootstrap.css und bootstrap.min.js Dateien

Dann in Ihrem computer, suchen Sie die vorhandenen Dateien und ersetzt Sie mit der neuen heruntergeladenen Dateien.

HINWEIS: sicherzustellen, dass Ihre heruntergeladenen Dateien sind umbenannt zu dem, was in Ihrem Ordner

d.h.

Dann sind Sie gut zu gehen.

manchmal Ergebnis möglicherweise nicht sofort angezeigt. Ihr können müssen Sie die css in Ihrem browser als eine Möglichkeit, erfrischende

InformationsquelleAutor der Antwort Omari Victor Omosa
0

Habe ich einen Artikel auf der MSDN-Website - Erstellung ASP.NET MVC mit angepassten bootstrap-theme /layout mit VS 2012 VS 2013 und VS 2015, haben Sie auch einen demo-code Probe befestigt..
Bitte siehe link unten.
https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

InformationsquelleAutor der Antwort Hussain Patel
0

Alles, was Sie tun müssen, ist wählen Sie und laden Sie die bootstrap.css und bootstrap.js Dateien von der website Bootswatch, und dann ersetzen Sie die original-Dateien mit Ihnen.

Natürlich müssen Sie die Pfade zu Ihren layout-Seite, die nach der jQuery-Weg ist alles.

InformationsquelleAutor der Antwort shaddad

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

ASP.NET MVC-5-Vorlage: Wie es funktioniert

Anwendung von Bootstrap-Themes im ASP.NET MVC 5

Ressourcen