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ć.
asp.net-mvc
twitter-bootstrap
asp.net-mvc-5
bootswatch
Peter Loudon
źródło
źródło
.csstematu i w App_Start BundleConfig.cs wymienić~/Content/bootstrap.cssz~/Content/yourtheme.bootstrap.cssOdpowiedzi:
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, ibootstrap.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
cssmotyw, który chcesz zastosować. W tym przykładzie użyję Flatly firmy Bootswatch . Dołącz pobrane plikiflatly.bootstrap.cssiflatly.bootstrap.min.cssdoContentfolderu (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.
źródło
@Styles.Render("//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css")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 AdminLteMvcUwaga: 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źródło
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
źródło
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
źródło
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.
źródło
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
źródło