小编给大家分享一下如何在ASP。净MVC中使用引导框架,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
作为一名网络开发者而言,如果不借助任何前端框架,从零开始使用HTML和CSS来构建友好的页面是非常困难的。特别是对于Windows窗体的开发者而言,更是难上加难。
正是由于这样的原因,引导诞生了.Twitter引导为开发者提供了丰富的CSS样式,组件,插件,响应式布局等,同时微软已经完全集成在ASP。净MVC模板中。
<强>引导结构介绍
你可以通过http://getbootstrap.com。来下载最新版本的引导。
解压文件夹后,可以看到引导的文件分布结构如下,包含3个文件夹:
<李>
字体<李>
js
css文件夹中包含了4个。css文件和2个. map文件。我们只需要将bootstrap.css文件包含到项目里这样就能将引导应用到我们的页面中了.bootstrap.min.css即为上述css的压缩版本。
。地图文件不必包含到项目里,你可以将其忽略。这些文件被用来作为调试符号(类似于Visual Studio中的。pdb文件),最终能让开发人员在线编辑预处理文件。
引导使用字体太棒了(一个字体文件包含了所有的字形图标,只为引导设计)来显示不同的图标和符号,字体文件夹包含了4类的不同格式的字体文件:
嵌入式OpenType (glyphicons-halflings-regular.eot)
<李>可缩放矢量图形(glyphicons-halflings-regular.svg)
<李>TrueType字体(glyphicons-halflings-regular.ttf)
<李>Web开放字体格式(glyphicons-halflings-regular.woff)
建议将所有的字体文件包含在你的网页应用程序中,因为这能让你的站点在不同的浏览器中显示正确的字体。
测试结束字体格式文件需要IE9及以上浏览器支持,TTF是传统的旧字体格式文件,WOFF是从TTF中压缩得到的字体格式文件。如果你只需要支持IE8之后的浏览器,iOS 4以上版本,同时支持Android,那么你只需要包含WOFF字体即可。
js文件夹包含了3个文件,所有的引导插件被包含在boostrap.js文件中,bootstrap.min.js即上述js的压缩版本,npm.js通过项目构建工具繁重自动生成。
在引用boostrap.js文件之前,请确保你已经引用了JQuery库因为所有的引导插件需要JQuery。
<强>在ASP。净MVC项目中添加引导文件
打开Visual Studio 2013中,创建标准的ASP。净MVC项目,默认情况下已经自动添加了引导的所有文件,如下所示:
说明微软对于引导是非常认可的,高度集成在Visual Studio中。
值得注意的是,在脚本文件中添加了一个名为_references。js的文件,这是一个非常有用的功能,当我们在使用引导等一些前端库时,它可以帮助Visual Studio启用智能提示。
当然我们也可以创建一个空的ASP。净MVC项目手动去添加这些依赖文件,正如下图所示这样,选择空的模板:
对于新创建的空白ASP。净MVC项目来说,没用内容、字体、脚本文件夹,我们必须手动去创建他们,如下所示:
当然,也可以用Nuget来自动添加引导资源文件。如果使用图形界面来添加引导Nuget包,则直接搜索引导即可,如果使用包管理器控制台来添加引导Nuget包,则输入安装包引导。
<强>为网站创建布局布局页
为了让我们的网站保持一致的风格,我将使用引导来构建布局布局页。在视图文件夹创建MVC布局页面(剃须刀)布局文件,如下图所示:
在新创建的布局布局页中,使用如下代码来引用引导资源文件。
