asp.net MVC5 中的捆绑和更改bootstap默认的样式

在MVC5的视图中使用@Scritps.Render(),@Styles.Render() 分别可以加载样式和脚本。捆绑的和实际的路径都可以。

并且可以利用 编程的方式灵活引用css文件和脚本文件。

一、Layout页面头部会使用

@Styles.Render("~/Content/css") 来加载css文件，非实际文件路径。  相当于 <link href="css.css" rel="stylesheet" type="text/css" />
@Scripts.Render("~/bundles/modernizr") 来加载modernizr脚本，非实际文件路径。<script src="modernizr.js" type="text/javascript"> </script>

二、Layout布局页面底部会使用。把一些脚本 文件放在页面底部 提高页面加载速度 。

@Scripts.Render("~/bundles/jquery")    来加载捆绑的脚本，非实际文件路径。  先引入jquery 脚本，再引入bootstrap脚本。因为boostrap要依赖于jquery.

@Scripts.Render("~/bundles/bootstrap") 来加载捆绑的脚本。非实际文件路径。
@RenderSection("scripts", required: false)来加载捆绑的脚本。非实际文件路径。

如果是新建和编辑页面，页面的底部会使用：
 @Scripts.Render("~/bundles/jqueryval",）非实际文件路径。 提供客户端的jquery验证。

如果使用百度UEditor，在新建页面和编辑页面

@section Scripts {
@Scripts.Render("~/bundles/jqueryval","~/Content/ueditor/ueditor.config.js","~/Content/ueditor/ueditor.all.js") 加载实际的脚本文件路径。并且可以一个@Scripts.Render可以加载多个脚本。

<script type="text/javascript">
var editor = new baidu.editor.ui.Editor({
UEDITOR_HOME_URL:'/Content/ueditor/',//配置编辑器路径
iframeCssUrl:'/Content/ueditor/themes/iframe.css',//样式路径
// initialContent:'欢迎使用ueditor',//初始化编辑器内容
autoHeightEnabled:true,//高度自动增长
initialFrameHeight:400
});
editor.render('Content');
</script>

APP_Start中有一个配置捆绑的文件BundleConfig.cs,

public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(       //new ScriptBundle().include() 将实际的文件路径转换为虚拟的绑定路径。
"~/Scripts/jquery-{version}.js"));  //引入占位符， 可以隔离jqeury版本的变更。

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*")); 可在使用通配符 *，可以隔离jqeury版本的变更

bundles.Add(new StyleBundle("~/Content/css").Include(    //如果在同一个捆绑中有多个CSS文件，最后面的一项优先级最高。
"~/Content/bootstrap.css",
"~/Content/bootstrap.custom.css",  //定制的bootstap文件，可以覆盖掉原生bootstrap定义的一些class的样式。这种是非侵入式的方式。
"~/Content/site.css"));  //网站自定义的css，优先级最高。

比如：在新建一个样式表文件bootstrap.custom.css，新建一些class属性，

.badge-danger {
background-color:#d43f3a;
}

.badge-warning{
background-color:#d58512;
}

.badge-success{
background-color:#398439;
}

.badge-info{
background-color:#269abc;
}

.badge-inverse{
background-color:#333333;
}

<a href="@Url.Action("List", new { categoryID = category.CategoryID})" class="list-group-item @categoryCss">@category.CategoryName <span class="badge badge-info">@category.ArticleCount</span></a>

原来徽章badge的背景色为灰色，如果引用了badge-info,徽章的背景色就变成了蓝色了。

如果需要多个绑定，还可使用遍历的方式：