如何在MVC 5项目中实现bootswatch或wrapbootstrap中的主题？

Question

如何在MVC 5项目中实现bootswatch或wrapbootstrap中的主题？

Pet*_*don 77 asp.net-mvc twitter-bootstrap bootswatch asp.net-mvc-5

我即将创建一个新的ASP.Net MVC5 Web应用程序.我想在应用程序中使用bootswatch或wrapbootstrap中的主题,但无法找到有关如何执行此操作的一组说明.

Answer 1

Car*_*all 185

应用主题的步骤非常简单.要真正理解所有内容如何协同工作,您需要了解ASP.NET MVC 5模板提供的开箱即用内容以及如何根据需要自定义它.

_{注意:如果您对MVC 5模板的工作原理有基本的了解,请向下滚动到主题部分.}

ASP.NET MVC 5模板:它是如何工作的

本演练将讨论如何创建一个MVC 5项目以及幕后发生的事情.在此博客中查看MVC 5模板的所有功能.

创建一个新项目.在模板下选择Web > ASP.NET Web应用程序.输入项目名称,然后单击OK.
在下一个向导中,选择MVC并单击OK.这将应用MVC 5模板.
MVC 5模板创建了一个MVC应用程序,该应用程序使用Bootstrap来提供响应式设计和主题功能.引擎盖下,所述模板包括一自举3.*NuGet包,它安装4个文件:bootstrap.css,bootstrap.min.css,bootstrap.js,和bootstrap.min.js.

使用Web Optimization功能将Bootstrap捆绑在应用程序中.检查Views/Shared/_Layout.cshtml和寻找

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

Run Code Online (Sandbox Code Playgroud)

和

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

Run Code Online (Sandbox Code Playgroud)

这两个路径指的是在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"));

Run Code Online (Sandbox Code Playgroud)

这使得在没有任何预先配置的情况下运行应用程序成为可能.尝试立即运行您的项目.

在ASP.NET MVC 5中应用Bootstrap主题

本演练内容介绍了如何在MVC 5项目中应用引导主题

首先,下载css您想要应用的主题.在这个例子中,我将使用Bootswatch的断然.包括将下载flatly.bootstrap.css并flatly.bootstrap.min.css在在Content文件夹中(一定要在项目以包括为好).

打开App_Start/BundleConfig.cs并更改以下内容:

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

Run Code Online (Sandbox Code Playgroud)

包括你的新主题:

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

Run Code Online (Sandbox Code Playgroud)

如果您使用的_Layout.cshtml是MVC 5模板中包含的默认值,则可以跳到第4步.如果不是,最低限度,请在布局中包含这两行以及Bootstrap HTML模板:

在你的<head>:
```
@Styles.Render("~/Content/css")
```
Run Code Online (Sandbox Code Playgroud)
关闭前的最后一行</body>:
```
@Scripts.Render("~/bundles/bootstrap")
```
Run Code Online (Sandbox Code Playgroud)
尝试立即运行您的项目.您现在应该使用主题查看新创建的应用程序.

资源

查看James Chambers的这个非常棒的30天漫游指南,了解有关如何在ASP.NET MVC 5中使用Twitter Bootstrap的更多信息,教程,提示和技巧.

我不建议使用CDN主要是因为你失去了许多捆绑内置的优化(如[缩小](http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification) )).话虽如此,您只需更改步骤#4中视图中的链接以反映CDN的链接,即`@ Styles.Render("// maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap .min.css")` (3认同)
我永远不会使用公共CDN,因为我无法控制[盒子或安全措施](http://www.securityweek.com/jquery-confirms-website-hacked-again) .在任何情况下,这个对话都不是这个帖子的主题,所以如果你想继续谈话,请考虑加入我[聊天](http://chat.stackoverflow.com/rooms/29074/html -css-webdesign):) (2认同)

Answer 2

Som*_*iwe 17

这可能有点晚了; 但有人会发现它很有用.

有一个Nuget包用于将AdminLTE(一种流行的Bootstrap模板)集成到MVC5

只需在Visual Studio包管理器控制台中运行此命令即可

Install-Package AdminLteMvc

Run Code Online (Sandbox Code Playgroud)

注意:安装可能需要一段时间,因为它会下载所有必需的文件,以及创建示例完整视图和部分视图(.cshtml文件),可以在您开发时为您提供指导._AdminLteLayout.cshtml还提供了示例布局文件.

你会在文件~/Views/Shared/夹中找到这些文件

归档时间：	11 年，10 月前
查看次数：	102155 次
最近记录：	8 年，2 月前