新しいASP.Net MVC5 Webアプリケーションを作成しようとしています。アプリケーションでbootswatchまたはwrapbootstrapのテーマを使用したいのですが、これを行う方法に関する一連の指示が見つかりません。
テーマを適用する手順は非常に簡単です。すべてがどのように連携するかを本当に理解するには、ASP.NET MVC 5テンプレートがすぐに提供するものと、ニーズに合わせてカスタマイズする方法を理解する必要があります。
注:MVC 5テンプレートの動作方法の基本を理解している場合は、テーマ設定セクションまでスクロールします。
このウォークスルーでは、MVC 5プロジェクトの作成方法と内部で行われていることについて説明します。。 このブログ でMVC 5テンプレートのすべての機能を参照してください。
新しいプロジェクトを作成します。テンプレートでWeb>ASP.NET Web Applicationを選択します。プロジェクトの名前を入力してクリックします OK。
次のウィザードで、MVCを選択してクリックします OK。これにより、MVC 5テンプレートが適用されます。
MVC 5テンプレートは、Bootstrapを使用してレスポンシブデザインおよびテーマ機能を提供するMVCアプリケーションを作成します。内部には、テンプレートに bootstrap 3. * nuget package が含まれており、4つのファイルをインストールします:bootstrap.css
、bootstrap.min.css
、bootstrap.js
、およびbootstrap.min.js
。
ブートストラップは、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"));
これにより、事前に設定することなくアプリケーションを実行できます。今すぐプロジェクトを実行してみてください。
このウォークスルーでは、MVC 5プロジェクトでbootstrapテーマを適用する方法について説明します
css
をダウンロードします。この例では、Bootswatchの Flatly を使用します。ダウンロードしたflatly.bootstrap.css
とflatly.bootstrap.min.css
をContent
フォルダーに含めます(必ずProjectにも含めてください)。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"));
MVC 5テンプレートに含まれるデフォルトの_Layout.cshtml
を使用している場合は、ステップ4にスキップできます。そうでない場合は、最低限、これら2行を Bootstrap HTMLテンプレート :
あなたの<head>
:
@Styles.Render("~/Content/css")
</body>
を閉じる前の最後の行:
@Scripts.Render("~/bundles/bootstrap")
今すぐプロジェクトを実行してみてください。テーマを使用して、新しく作成したアプリケーションが表示されます。
この素晴らしい30日間のウォークスルーガイド by James Chambers で、Twitter BootstrapをASPで使用する方法の詳細、チュートリアル、ヒント、コツを確認してください。 .NET MVC 5。
これは少し遅れることがあります。しかし、誰かが役に立つでしょう。
人気のあるBootstrapテンプレートであるAdminLTEをMVC5に統合するためのNugetパッケージがあります
Visual Studio Package Managerコンソールでこのコマンドを実行するだけです
Install-Package AdminLteMvc
注意:必要なすべてのファイルをダウンロードするだけでなく、開発に役立つサンプルの完全ビューと部分ビュー(.cshtmlファイル)を作成するため、インストールに時間がかかる場合があります。サンプルレイアウトファイル_AdminLteLayout.cshtml
も提供されます。
~/Views/Shared/
フォルダーにファイルがあります
まず、あなたが見つけることができる場合
bootstrap.cssファイル
そして
bootstrap.min.jsファイル
あなたのコンピューターで、あなたがすることは
まず、お気に入りのテーマ、つまり http://bootswatch.com/ からダウンロードします
ダウンロードしたbootstrap.cssおよびbootstrap.min.jsファイルをコピーします
次に、コンピューターで既存のファイルを見つけて、ダウンロードした新しいファイルに置き換えます。
注:ダウンロードしたファイルがrenamedフォルダーの内容
つまり.
その後、あなたは行ってもいいです。
sometimes結果がすぐに表示されない場合があります。更新する方法として、ブラウザでcssを実行する必要がある場合があります
必要なのは、Bootswatch Webサイトからbootstrap.cssファイルとbootstrap.jsファイルを選択してダウンロードし、元のファイルをそれらに置き換えるだけです。
もちろん、すべてのjQueryパスの後に、レイアウトページにパスを追加する必要があります。
MSDN-VS 2012、VS 2013、およびVS 2015を使用したカスタムbootstrapテーマ/レイアウトを使用したASP.NET MVCの作成に関する記事があり、デモコードサンプルも添付されています。以下のリンクを参照してください。 https://code.msdn.Microsoft.com/ASPNET-MVC-application-62ffc106