Jak mogę zaimplementować motyw z bootwatch lub wrapbootstrap w projekcie MVC 5?

Question 1

Mam zamiar utworzyć nową aplikację internetową ASP.Net MVC5. Chciałbym użyć motywu z bootwatch lub wrapbootstrap w aplikacji, ale nie mogę znaleźć zestawu instrukcji, jak to zrobić.

Question 2

Kroki, aby zastosować motyw, są dość proste. Aby naprawdę zrozumieć, jak wszystko działa razem, musisz zrozumieć, co zapewnia szablon ASP.NET MVC 5 po wyjęciu z pudełka i jak możesz go dostosować do swoich potrzeb.

_{Uwaga: jeśli masz podstawową wiedzę na temat działania szablonu MVC 5, przewiń w dół do sekcji z motywami.}

Szablon ASP.NET MVC 5: Jak to działa

W tym przewodniku omówiono sposób tworzenia projektu MVC 5 i tego, co dzieje się pod maską . Zobacz wszystkie funkcje szablonu MVC 5 na tym blogu .

Utwórz nowy projekt. W obszarze Szablony wybierz opcję Sieć Web > Aplikacja sieci Web ASP.NET . Wpisz nazwę swojego projektu i kliknij OK.
W następnym kreatorze wybierz MVC i kliknij OK. Spowoduje to zastosowanie szablonu MVC 5.
Szablon MVC 5 tworzy aplikację MVC, która używa Bootstrap, aby zapewnić responsywny projekt i funkcje tworzenia motywów. Pod maską, szablon zawiera bootstrap 3. * Pakiet Nuget który instaluje 4 pliki: bootstrap.css, bootstrap.min.css, bootstrap.js, i bootstrap.min.js.

Bootstrap jest dołączony do aplikacji przy użyciu funkcji optymalizacji sieci Web. Sprawdź Views/Shared/_Layout.cshtmli poszukaj

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

i

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

Te dwie ścieżki odnoszą się do pakietów skonfigurowanych w 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"));

To właśnie umożliwia uruchamianie aplikacji bez wcześniejszej konfiguracji. Spróbuj uruchomić swój projekt teraz.

Stosowanie motywów Bootstrap w ASP.NET MVC 5

W tym przewodniku omówiono sposób stosowania motywów ładowania początkowego w projekcie MVC 5

Najpierw pobierz cssmotyw, który chcesz zastosować. W tym przykładzie użyję Flatly firmy Bootswatch . Dołącz pobrane pliki flatly.bootstrap.cssi flatly.bootstrap.min.cssdo Contentfolderu (pamiętaj, aby uwzględnić również w projekcie).

Otwórz App_Start/BundleConfig.csi zmień następujące elementy:

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

aby dołączyć nowy motyw:

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

Jeśli używasz domyślnego _Layout.cshtmlszablonu MVC 5, możesz przejść do kroku 4. Jeśli nie, jako minimum, dołącz te dwie linie do swojego układu razem z szablonem Bootstrap HTML :

W twoim <head>:
```
@Styles.Render("~/Content/css")
```
Ostatnia linia przed zamknięciem </body>:
```
@Scripts.Render("~/bundles/bootstrap")
```
Spróbuj uruchomić swój projekt teraz. Powinieneś zobaczyć nowo utworzoną aplikację używającą teraz Twojego motywu.

Zasoby

Zapoznaj się z tym niesamowitym 30-dniowym przewodnikiem autorstwa Jamesa Chambersa, aby uzyskać więcej informacji, samouczków, porad i wskazówek dotyczących korzystania z usługi Twitter Bootstrap z ASP.NET MVC 5.

Question 3

To może być trochę za późno; ale ktoś uzna to za przydatne.

Istnieje pakiet Nuget do integracji AdminLTE - popularny szablon Bootstrap - z MVC5

Po prostu uruchom to polecenie w konsoli Menedżera pakietów programu Visual Studio

Install-Package AdminLteMvc

Uwaga: Instalacja może zająć trochę czasu, ponieważ pobiera wszystkie niezbędne pliki, a także tworzy przykładowe pełne i częściowe widoki (pliki .cshtml), które mogą pomóc Ci w rozwoju. Dostarczono również przykładowy plik układu _AdminLteLayout.cshtml.

Pliki znajdziesz w ~/Views/Shared/folderze

Question 4

Po pierwsze, jeśli jesteś w stanie zlokalizować plik

bootstrap.cssplik

i

plik bootstrap.min.js

w komputerze, to po prostu robisz

Najpierw pobierz swój ulubiony motyw, np. Z http://bootswatch.com/

Skopiuj pobrane pliki bootstrap.css i bootstrap.min.js plików

Następnie na swoim komputerze zlokalizuj istniejące pliki i zastąp je nowymi pobranymi plikami.

UWAGA: upewnij się, że nazwy pobranych plików zostały zmienione na zawartość folderu

to znaczy

Wtedy jesteś gotowy.

czasami wynik może nie zostać wyświetlony natychmiast. może być konieczne uruchomienie css w przeglądarce jako sposobu na odświeżenie

Question 5

Mam artykuł na temat MSDN - Tworzenie ASP.NET MVC z niestandardowym motywem / układem bootstrap przy użyciu VS 2012, VS 2013 i VS 2015, mam również dołączony przykładowy kod demonstracyjny. Skorzystaj z poniższego łącza. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

Question 6

Wszystko, co musisz zrobić, to wybrać i pobrać pliki bootstrap.css i bootstrap.js ze strony internetowej Bootswatch, a następnie zastąpić nimi oryginalne pliki.

Oczywiście musisz dodać ścieżki do swojej strony układu po ścieżce jQuery i to wszystko.

Question 7

Bootswatch to dobra alternatywa, ale możesz również znaleźć wiele typów darmowych szablonów stworzonych dla ASP.NET MVC, które używają MDBootstrap (front-end framework zbudowany na Bootstrap) tutaj:

Szablony ASP.NET MVC MDB