Bundling and changing Bootstap default styles in ASP. Net. MVC5

Use @scritps.render () in the MVC5 view, @Styles. Render () to load styles and scripts, respectively. Both the bundled and the actual paths are available.

The CSS and script files can be referenced flexibly in a programmatic way.

First, the layout page header will be used

@Styles. Render ("~/content/css") to load the CSS file, not the actual file path. Equivalent to <link href= "Css.css" rel= "stylesheet" type= "Text/css"/>
@Scripts. Render ("~/bundles/modernizr") to load the Modernizr script, not the actual file path. <script src= "Modernizr.js" type= "Text/javascript" > </script>

Second, layout layouts page at the bottom will be used. Put some script files at the bottom of the page to improve page loading speed.

@Scripts. Render ("~/bundles/jquery") to load the bundled script, not the actual file path. The jquery script is introduced first, and then the bootstrap script is introduced. Because Boostrap relies on jquery.

@Scripts. Render ("~/bundles/bootstrap") to load the bundled script. The non-physical file path.
@RenderSection ("Scripts", Required:false) to load the bundled script. The non-physical file path.

If you are creating and editing a page, the bottom of the page is used:
@Scripts. Render ("~/bundles/jqueryval",) non-actual file path. Provides client-side jquery validation.

If you use Baidu Ueditor, in the new page and edit page

@section Scripts {
@Scripts. Render ("~/bundles/jqueryval", "~/content/ueditor/ueditor.config.js", "~/content/ueditor/ueditor.all.js" ) to load the actual script file path. And can be a @scripts.render can load multiple scripts.

<script type= "Text/javascript" >
var editor = new Baidu.editor.ui.Editor ({
Ueditor_home_url: '/content/ueditor/',//config editor path
Iframecssurl: '/content/ueditor/themes/iframe.css ',//style path
Initialcontent: ' Welcome to Ueditor ',//Initialize editor content
autoheightenabled:true,//Height Auto-growth
initialframeheight:400
});
Editor.render (' Content ');
</script>

There is a configuration bundle in the App_start file BundleConfig.cs,

public static void Registerbundles (Bundlecollection bundles)
{
Bundles. ADD (New Scriptbundle ("~/bundles/jquery"). Include (//new scriptbundle (). Include () converts the actual file path to the virtual binding path.
"~/scripts/jquery-{version}.js")); The introduction of placeholders allows you to isolate changes to the Jqeury version.

Bundles. ADD (New Scriptbundle ("~/bundles/jqueryval"). Include (
"~/scripts/jquery.validate*")); You can isolate changes to the Jqeury version by using the wildcard character *

Bundles. ADD (New Stylebundle ("~/content/css"). Include (//if there are multiple CSS files in the same bundle, one of the last faces has the highest precedence.)
"~/content/bootstrap.css",
"~/content/bootstrap.custom.css",//custom BOOTSTAP files, can override some of the class styles defined by native bootstrap. This is a non-intrusive approach.
"~/content/site.css")); Web site custom CSS with the highest priority.

For example: Create a new style sheet file Bootstrap.custom.css, create some class properties,

. 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>

The original badge badge background color is gray, if the reference to Badge-info, the background color of the badge becomes blue.

If you need more than one binding, you can also use the traversal method:

Bundling and changing Bootstap default styles in ASP. Net. MVC5