web-dev-qa-db-ja.com

MVC 5プロジェクトでbootswatchまたはwrapbootstrapからテーマを実装するにはどうすればよいですか？

新しいASP.Net MVC5 Webアプリケーションを作成しようとしています。アプリケーションでbootswatchまたはwrapbootstrapのテーマを使用したいのですが、これを行う方法に関する一連の指示が見つかりません。

asp.net-mvctwitter-bootstrapasp.net-mvc-5bootswatch
77
Peter Loudon

テーマを適用する手順は非常に簡単です。すべてがどのように連携するかを本当に理解するには、ASP.NET MVC 5テンプレートがすぐに提供するものと、ニーズに合わせてカスタマイズする方法を理解する必要があります。

注：MVC 5テンプレートの動作方法の基本を理解している場合は、テーマ設定セクションまでスクロールします。

ASP.NET MVC 5テンプレート：仕組み

このウォークスルーでは、MVC 5プロジェクトの作成方法と内部で行われていることについて説明します。。 このブログ でMVC 5テンプレートのすべての機能を参照してください。

  1. 新しいプロジェクトを作成します。テンプレートでWeb>ASP.NET Web Applicationを選択します。プロジェクトの名前を入力してクリックします OK。

  2. 次のウィザードで、MVCを選択してクリックします OK。これにより、MVC 5テンプレートが適用されます。

    Example of choosing MVC Template

  3. MVC 5テンプレートは、Bootstrapを使用してレスポンシブデザインおよびテーマ機能を提供するMVCアプリケーションを作成します。内部には、テンプレートに bootstrap 3. * nuget package が含まれており、4つのファイルをインストールします：bootstrap.css、bootstrap.min.css、bootstrap.js、およびbootstrap.min.js 。

    Example of installed css and js

  4. ブートストラップは、Web最適化機能を使用してアプリケーションにバンドルされています。 Views/Shared/_Layout.cshtmlを調べて探します

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

    そして

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

    これらの2つのパスは、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. これにより、事前に設定することなくアプリケーションを実行できます。今すぐプロジェクトを実行してみてください。

    Default Application Running

ASP.NET MVC 5でBootstrapテーマを適用する

このウォークスルーでは、MVC 5プロジェクトでbootstrapテーマを適用する方法について説明します

  1. まず、適用するテーマのcssをダウンロードします。この例では、Bootswatchの Flatly を使用します。ダウンロードしたflatly.bootstrap.cssとflatly.bootstrap.min.cssをContentフォルダーに含めます（必ずProjectにも含めてください）。

  2. App_Start/BundleConfig.csを開き、次を変更します。

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

    新しいテーマを含めるには：

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

  3. MVC 5テンプレートに含まれるデフォルトの_Layout.cshtmlを使用している場合は、ステップ4にスキップできます。そうでない場合は、最低限、これら2行を Bootstrap HTMLテンプレート ：

    あなたの<head>：

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

    </body>を閉じる前の最後の行：

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

  4. 今すぐプロジェクトを実行してみてください。テーマを使用して、新しく作成したアプリケーションが表示されます。

    Default template using flatly theme

資源

この素晴らしい30日間のウォークスルーガイド by James Chambers で、Twitter BootstrapをASPで使用する方法の詳細、チュートリアル、ヒント、コツを確認してください。 .NET MVC 5。

185
Carrie Kendall

これは少し遅れることがあります。しかし、誰かが役に立つでしょう。

人気のあるBootstrapテンプレートであるAdminLTEをMVC5に統合するためのNugetパッケージがあります

Visual Studio Package Managerコンソールでこのコマンドを実行するだけです

Install-Package AdminLteMvc

注意：必要なすべてのファイルをダウンロードするだけでなく、開発に役立つサンプルの完全ビューと部分ビュー（.cshtmlファイル）を作成するため、インストールに時間がかかる場合があります。サンプルレイアウトファイル_AdminLteLayout.cshtmlも提供されます。

~/Views/Shared/フォルダーにファイルがあります

17
Soma Mbadiwe

まず、あなたが見つけることができる場合

bootstrap.cssファイル

そして

bootstrap.min.jsファイル

あなたのコンピューターで、あなたがすることは

まず、お気に入りのテーマ、つまり http://bootswatch.com/ からダウンロードします

ダウンロードしたbootstrap.cssおよびbootstrap.min.jsファイルをコピーします

次に、コンピューターで既存のファイルを見つけて、ダウンロードした新しいファイルに置き換えます。

注：ダウンロードしたファイルがrenamedフォルダーの内容

つまり.

enter image description here

その後、あなたは行ってもいいです。

sometimes結果がすぐに表示されない場合があります。更新する方法として、ブラウザでcssを実行する必要がある場合があります

3
Omari Victor Omosa

必要なのは、Bootswatch Webサイトからbootstrap.cssファイルとbootstrap.jsファイルを選択してダウンロードし、元のファイルをそれらに置き換えるだけです。

もちろん、すべてのjQueryパスの後に、レイアウトページにパスを追加する必要があります。

0
shaddad

MSDN-VS 2012、VS 2013、およびVS 2015を使用したカスタムbootstrapテーマ/レイアウトを使用したASP.NET MVCの作成に関する記事があり、デモコードサンプルも添付されています。以下のリンクを参照してください。 https://code.msdn.Microsoft.com/ASPNET-MVC-application-62ffc106

0
Hussain Patel