在本章中,我们将看看现在包含在ASP.NET和MVC中的前端框架Bootstrap。这是一个流行的Web应用程序前端工具包,将帮助我们建立一个HTML,CSS和JavaScript的用户界面。
它最初是由Twitter的网站开发人员为个人使用而创建的,但是由于其灵活性和易用性,它现在是开源的,并且已经深受设计人员和开发人员的欢迎。
您可以使用Bootstrap创建一个从小型移动屏幕到大型桌应用的界面。在本章中,我们还将介绍Bootstrap如何与布局视图一起工作来构造应用程序的外观。
Bootstrap提供布局,按钮,表单,菜单,小部件,图片轮播,标签,徽章,排版以及各种功能所需的所有部分。由于Bootstrap都是HTML,CSS和JavaScript,所有开放的标准,你可以使用任何框架,包括ASP.NET MVC。当你开始一个新的MVC项目时,Bootstrap将会出现,在项目中可以找到Bootstrap.css 和Bootstrap.js 。
我们来创建一个新的ASP.NET Web应用程序。填写项目的名称:MVCBootstrap,然后单击确定 ,会看到下面的对话框。
在这个对话框中,如果选择了空的模板,会得到一个空的web应用程序,并且不会有Bootstrap ,不会有任何控制器或任何其他脚本文件。
现在选择MVC模板,然后单击确定 。 当Visual Studio创建这个解决方案时,它将下载并安装到项目中的一个包将成为Bootstrap NuGet包。可以通过到packages.config 进行验证,可以看到有Bootstrap版本3 的包,如下图所示 -
还可以看到包含不同 css
文件的 Content
文件夹。
运行这个应用程序,会看到下面的页面。
出现此页面时,看到的大部分布局和样式都是由 Bootstrap 应用的布局和样式。 它包括顶部的导航栏,链接以及广告ASP.NET的显示。它还包括所有这些部分,关于入门和获得更多的类库和虚拟主机。
如果只是稍微拉伸一下浏览器,那么这些浏览器实际上并排放置,这是Bootstrap 响应式设计功能的一部分。
如果查看Content文件夹,那么应该会看到有一个Bootstrap.css 文件。
NuGet软件包还提供了一个缩小版本的文件。 在Scripts目录下,应该有一个:Bootstrap.js 文件,这是Bootstrap的一些组件所必需的。
它确实依赖于jQuery,幸运的是jQuery也安装在这个项目中,并且有一个缩小版的Bootstrap JavaScript文件。
现在的问题是,所有这些在应用程序中添加了哪里? 可能您期望它在布局模板中,位于View/Shared/_layout.cshtml 下的此项目的布局视图。
布局视图控制着用户界面的结构。 以下是_layout.cshtml文件中的完整代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
<li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
在上面的代码中有两点需要注意。 首先在<title>
之后,看到下面这行代码。
@Styles.Render("~/Content/css")
Styles.Render对于 Content/css 实际上是Bootstrap.css
文件将被包含的地方,在底部,会看到下面这行代码 -
@Scripts.Render("~/bundles/bootstrap")
它正在渲染引导脚本,找出这些包里面究竟是什么,打开App_Start文件夹中的BundleConfig.cs 文件,内容如下所示 -
在BundleConfig.cs 文件中,可以从底部看到CSS包包含了Bootstrap.css 和自定义的site.css 。如下所示 -
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
这是我们添加自己的样式表来定制应用程序外观的地方。还可以看到在包含Bootstrap.js 的CSS包之前出现的Bootstrap包,以及另一个JavaScript文件respond.js。
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
下面来注释掉Bootstrap.css 文件,如下面的代码所示 -
bundles.Add(new StyleBundle("~/Content/css").Include(
//"~/Content/bootstrap.css",
"~/Content/site.css"));
再次运行此应用程序,只是为了让您了解Bootstrap的功能,因为现在唯一可用的样式是site.css 文件中的样式。得到结果如下 -
正如上面所看到的,失去了页面顶部的导航栏。
现在来看看Bootstrap是什么。Bootstrap只是自动执行一些操作,当添加类并具有正确的HTML结构时,Bootstrap可为您做一些事情。 如果查看_layout.cshtml 文件,可以看到如以下代码所示的navbar
类 -
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
<li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
它是Bootstrap的CSS类,如navbar
,navbar inverse
和navbar fixed top
。 如果删除了一些像navbar inverse
,navbar fixed top
这样的类,并且取消注释Bootstrap.css
,然后再次运行应用程序,应该会看到下面的输出。
会看到有一个导航栏,但现在它不使用反色,所以它是白色的。 它也不会粘在页面的顶部。 当向下滚动时,导航栏会从顶部滚动,将无法再看到它。