Pertanyaan Bagaimana saya bisa menerapkan tema dari bootswatch atau wrapbootstrap dalam proyek MVC 5?


Saya akan membuat aplikasi web ASP.Net MVC5 baru. Saya ingin menggunakan tema dari bootswatch atau wrapbootstrap dalam aplikasi, tetapi tidak dapat menemukan serangkaian instruksi tentang cara melakukan ini.


75
2018-02-17 21:11


asal


Jawaban:


Langkah-langkah untuk menerapkan tema cukup sederhana. Untuk benar-benar memahami bagaimana semuanya bekerja bersama, Anda harus memahami apa yang disediakan oleh template ASP.NET MVC 5 di luar kotak dan bagaimana Anda dapat menyesuaikannya untuk kebutuhan Anda.

Catatan: Jika Anda memiliki pemahaman dasar tentang cara kerja template MVC 5, gulir ke bawah ke bagian theming.


Template ASP.NET MVC 5: Cara kerjanya

Jalan-jalan ini membahas bagaimana membuat proyek MVC 5 dan apa yang terjadi di bawah kap mesin. Lihat semua fitur dari MVC 5 Template di blog ini.

  1. Buat proyek baru. Di bawah Pola Pilih Web > ASP.NET Web Application. Masukkan nama untuk proyek Anda dan klik baik.

  2. Di wisaya berikutnya, pilih MVC dan klik baik. Ini akan menerapkan template MVC 5.

    Example of choosing MVC Template

  3. Template MVC 5 menciptakan aplikasi MVC yang menggunakan Bootstrap untuk menyediakan desain responsif dan fitur theming. Di bawah kap, template termasuk a bootstrap 3. * paket nuget yang menginstal 4 file: bootstrap.css, bootstrap.min.css, bootstrap.js, dan bootstrap.min.js.

    Example of installed css and js

  4. Bootstrap dibundel dalam aplikasi Anda dengan menggunakan fitur Pengoptimalan Web. Memeriksa Views/Shared/_Layout.cshtml dan mencari

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

    dan

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

    Kedua jalur ini merujuk pada kumpulan yang diatur di 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. Inilah yang memungkinkan untuk menjalankan aplikasi Anda tanpa mengkonfigurasi di depan. Coba jalankan proyek Anda sekarang.

    Default Application Running


 Menerapkan Tema Bootstrap di ASP.NET MVC 5

Langkah-langkah ini mencakup cara menerapkan tema bootstrap dalam proyek MVC 5

  1. Pertama, unduh css dari tema yang ingin Anda terapkan. Untuk contoh ini, saya akan menggunakan Bootswatch Dengan datar. Sertakan unduhan flatly.bootstrap.css dan flatly.bootstrap.min.css dalam Content folder (pastikan untuk Termasuk dalam Proyek juga).
  2. Buka App_Start/BundleConfig.cs dan ubah yang berikut:

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

    untuk menyertakan tema baru Anda:

    bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/flatly.bootstrap.css",
        "~/Content/site.css"));
    
  3. Jika Anda menggunakan default _Layout.cshtml termasuk dalam template MVC 5, Anda dapat melompat ke langkah 4. Jika tidak, sebagai minimal, sertakan dua baris ini dalam tata letak Anda bersama dengan Anda Template HTML Bootstrap:

    Di dalam Anda <head>:

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

    Baris terakhir sebelum ditutup </body>:

    @Scripts.Render("~/bundles/bootstrap")
    
  4. Coba jalankan proyek Anda sekarang. Anda harus melihat aplikasi yang baru Anda buat sekarang menggunakan tema Anda.

    Default template using flatly theme


Sumber daya

Periksa panduan berjalan 30 hari yang luar biasa ini oleh James Chambers untuk informasi lebih lanjut, tutorial, tips dan trik tentang cara menggunakan Twitter Bootstrap dengan ASP.NET MVC 5.


179
2018-02-18 20:23



Ini mungkin sedikit terlambat; tetapi seseorang akan merasa berguna.

Ada Paket Nuget untuk mengintegrasikan AdminLTE - template Bootstrap yang populer - ke MVC5

Cukup jalankan perintah ini di konsol Visual Studio Package Manager Anda

Install-Package AdminLteMvc

NB: Mungkin perlu beberapa saat untuk menginstal karena itu mengunduh semua file yang diperlukan serta membuat tampilan penuh dan parsial (file .cshtml) yang dapat memandu Anda saat Anda mengembangkan. Contoh file tata letak _AdminLteLayout.cshtml juga disediakan.

Anda akan menemukan file dalam ~/Views/Shared/ map


17
2017-12-25 20:51



Pertama, jika Anda dapat menemukan Anda

bootstrap.css mengajukan

dan

bootstrap.min.js mengajukan

di komputer Anda, lalu yang baru saja Anda lakukan adalah

Unduh terlebih dahulu tema favorit Anda, yaitu dari http://bootswatch.com/

Salin unduhan bootstrap.css dan bootstrap.min.js file

Kemudian di komputer Anda cari file yang ada dan ganti dengan file yang baru diunduh.

CATATAN: pastikan file yang Anda unduh berada diganti namanya untuk apa yang ada di folder Anda


3
2018-03-05 17:50



Saya memiliki artikel tentang MSDN - Membuat ASP.NET MVC dengan tema bootstrap / layout khusus menggunakan VS 2012, VS 2013 dan VS 2015, juga memiliki contoh kode demo yang dilampirkan .. Silakan lihat tautan di bawah ini. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106


0
2017-09-23 16:23



Semua yang harus Anda lakukan adalah memilih dan mengunduh file bootstrap.css dan bootstrap.js dari situs web Bootswatch, dan kemudian mengganti file asli dengan mereka.

Tentu saja Anda harus menambahkan path ke halaman layout Anda setelah jQuery path itu semua.


0
2018-03-04 04:36