MVC 5 projesi bootswatch veya wrapbootstrap bir tema uygulamak için bir anlatım var mı?

ASP.NET MVC5 yeni bir web uygulaması oluşturmak üzereyim. Uygulamada bootswatch veya wrapbootstrap bir tema kullanmak istiyorum, ancak bunu yapmak için nasıl talimatlar bir dizi bulmak.

Eğer birisi (MVC5) belgelenmiş varsa, deneme yanılma ile devam den takip etmeyi tercih ederim.

CEVAP

18 ŞUBAT 2014, Salı

Bir tema uygulamak için adımlar oldukça basit. Gerçekten her şeyi birlikte nasıl çalıştığını anlamak için, ASP.NET MVC 5 şablonu kutudan sağlayan ve sizin ihtiyaçlarınız için özelleştirebilirsiniz nasıl anlamak gerekir.

Not: Eğer MVC 5 şablonu nasıl çalıştığını temel bir anlayış Varsa, tema bölümüne gidin.

Nasıl çalışır . ASP.NET MVC 5 Şablonu:

Bu tatbikat MVC 5 projesi oluşturma ve kaputun altında neler gider. this blog MVC 5 Şablonun tüm özellikleri.

Yeni bir proje oluşturun. Şablon Seçin AltındaWebASP.NET Web Uygulaması. Proje ve tıklama için bir ad girinTAMAM.
Sonraki sihirbaz, seçinMVCve tıklatınTAMAM. Bu MVC 5 şablon uygulanacaktır.
MVC 5 şablon Bootstrap duyarlı tasarım ve tema özellikleri sağlamak için kullandığı MVC bir uygulama oluşturur. Kaputun altında, şablon 4 dosyaları yükler bootstrap 3.* nuget package içerir: , *, *9bootstrap.cssbootstrap.min.css, bootstrap.min.js.

Bootstrap Web Optimizasyon özelliğini kullanarak uygulama içinde paketlenmiş. Views/Shared/_Layout.cshtml inceleyin ve arayın

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

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

Bu iki yolu demetleri App_Start/BundleConfig.cs kurmak için başvurun:

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"));

Bu mümkün herhangi bir yapılandırma olmadan uygulama ön çalışma yapar. Şimdi projeyi çalıştırmayı deneyin.

ASP.NET MVC uygulama Bootstrap Tema 5

Bu MVC 5 projesi bootstrap temaları uygulamak için nasıl kapsar-yürümek

Birincisi, uygulamak için tema css indir. Bu örnek için, Flatly Bootswatch kullanacağım. flatly.bootstrap.css flatly.bootstrap.min.css Content indirilen klasörü (Projeye de eklemeyi unutmayın) vardır.

App_Start/BundleConfig.cs aç > değiştir

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

yeni tema eklemek için:

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

Eğer varsayılan _Layout.cshtml MVC 5 şablon dahil kullanıyorsanız, adım 4'e geçin. Değilse, minimum olarak, Bootstrap HTML template ile: sıra düzeni içinde bu iki çizgi vardır

<head>:
```
@Styles.Render("~/Content/css")
```
</body> kapatmadan önce son satır:
```
@Scripts.Render("~/bundles/bootstrap")
```
Şimdi projeyi çalıştırmayı deneyin. Yeni oluşturulan bir uygulama şimdi temanızı kullanarak görmelisiniz.

Kaynaklar

ASP.NET MVC 5 ile Twitter Bootstrap nasıl kullanılacağı hakkında daha fazla bilgi, öğreticiler, ipuçları ve püf noktaları için James Chambers this awesome 30 day walk-through guide Check out.