Metronic4.1-based bootstrap script style description

Although Bootstrap is the most popular responsive UI in the present, there is little data on some of the UI extensions on bootstrap basis. Here the landlord combined with the one months of bitterness to the script with the style of the next ...

The relevant information about Metronic4.1 can only be deducted from the Metronic4.1 demo, first look at the following style:

    <!--BEGIN GLOBAL MANDATORY STYLES -    <Linkhref= "@Url. Staticfile ("/assets/global/plugins/font-awesome/css/font-awesome.min.css ")" Rel= "stylesheet"type= "Text/css"/>    <Linkhref= "@Url. Staticfile ("/assets/global/plugins/simple-line-icons/simple-line-icons.min.css ")" Rel= "stylesheet"type= "Text/css"/>    <Linkhref= "@Url. Staticfile ("/assets/global/plugins/bootstrap/css/bootstrap.min.css ")" Rel= "stylesheet"type= "Text/css"/>    <Linkhref= "@Url. Staticfile ("/assets/global/plugins/uniform/css/uniform.default.css ")" Rel= "stylesheet"type= "Text/css"/>    <Linkhref= "@Url. Staticfile ("/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css ")" Rel= "stylesheet"type= "Text/css"/>    <!--END GLOBAL MANDATORY STYLES -

Metronic's demo is also clearly marked (GLOBAL MANDATORY styles) to see that the following styles are mandatory to be added. Here's a brief explanation of the effects of these styles

First line: Font Awesome is a perfect set of icon fonts, the main purpose is to use with the Bootstrap
Second line: Contains some icons for the metronic.
The third line is not explained, and line fourth is a set of UI styles that belong to jquery.
The last line does not really need to be mandatory, bootstrap-switch for the Bootstrap of a switch control after a detailed explanation

<!--BEGIN THEME STYLES -<Linkhref= "@Url. Staticfile ("/assets/global/css/components.css ")" Rel= "stylesheet" /><Linkhref= "@Url. Staticfile ("/assets/global/css/plugins.css ")" Rel= "stylesheet" /><Linkhref= "@Url. Staticfile ("/assets/admin/layout/css/layout.css ")" Rel= "stylesheet" /><LinkID= "Style_color"href= "@Url. Staticfile ("/assets/admin/layout/css/themes/default.css ")" Rel= "stylesheet"type= "Text/css"/><Linkhref= "@Url. Staticfile ("/assets/admin/layout/css/custom.css ")" Rel= "stylesheet" /><!--END THEME STYLES -

These are some of the styles of the Metronic theme
First line: Lack of COMPONENTS.CSS will not render some beautiful buttons with icons.
For example: <a class= "BTN Red" id= "delete" href= "javascript:;" ><i class= "Icon-trash icon-white" ></i> Delete </a>
Second line: Missing Plugins.css, and found that some of the input styles have changed. Didn't go deep to see.
The third line: control the layout of this management interface, very important
Line four: For the metronic theme color style, you can save the script in a cookie for theme color switching
Line five: Style custom.css, not found for the time being what to use

Here's another script that appears in Metronic4.1:

<src= "@Url. Staticfile ("/assets/global/plugins/jquery.min.js ")"  ></script><!--a transition plugin lets you upgrade jquery on the original code without modifying the code--<   src= "@Url. Staticfile ("/assets/global/plugins/jquery-migrate.min.js ")" ></ Script >

Jquery-ui.min.js This script is very important and needs to be loaded before the Bootstrap.min.js script, which provides a drop-down event bootstrap the navigation menu

<src= "@Url. Staticfile ("/assets/global/plugins/jquery-ui/ Jquery-ui.min.js ")"></script>

The following script should all be introduced:
Bootstrap-hover-dropdown-min.js: Also used to control the drop-down action of the admin menu bar, etc.
Jquery-slimscroll.min.js: Scroll bar control, support to put content in a box, fixed a height, beyond the use of scrolling
The jquery-blockui.min.js:jquery blockui plugin lets you emulate synchronization behavior when using AJAX without locking the browser. When activated, it blocks the user's behavior until it is invalid

<Scriptsrc= "@Url. Staticfile ("/assets/global/plugins/bootstrap/js/bootstrap.min.js ")"></Script><Scriptsrc= "@Url. Staticfile ("/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js ")"></Script><Scriptsrc= "@Url. Staticfile ("/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js ")"></Script><Scriptsrc= "@Url. Staticfile ("/assets/global/plugins/jquery.blockui.min.js ")"></Script><Scriptsrc= "@Url. Staticfile ("/assets/global/plugins/jquery.cokie.min.js ")"></Script><Scriptsrc= "@Url. Staticfile ("/assets/global/plugins/uniform/jquery.uniform.min.js ")"></Script>

Metronic.js setting related scripts for themes (important)

<Scriptsrc= "@Url. Staticfile ("/assets/global/scripts/metronic.js ")" Type= "Text/javascript"></Script><Scriptsrc= "@Url. Staticfile ("/assets/admin/layout/scripts/quick-sidebar.js ")" Type= "Text/javascript"></Script><Scriptsrc= "@Url. Staticfile ("/assets/admin/layout/scripts/demo.js ")" Type= "Text/javascript"></Script>

Layout.js layout-related styles (important)

<src= "@Url. Staticfile ("/assets/admin/layout/scripts/layout.js ")" type  = "Text/javascript"></script>

about other components of bootstrap-metronic
Select2 Control Introduction
This plugin is a select-based extension that provides richer functionality and user experience, and its GitHub website address is: https://select2.github.io/, the specific use case, can refer to address: https:// Select2.github.io/examples.html
We use a lot of SELECT2 controls throughout the framework to handle the display of content, including the selection of drop-down lists (including cascading selection boxes), check drop-down lists, tree drop-down lists, etc.

<href= "@Url. Staticfile ("/assets/global/plugins/select2/select2.css ")" Rel= "stylesheet"/><src= "@Url. Staticfile (" /assets/global/plugins/select2/select2.min.js ")"></script> 

Bootstrap-switch is a switch control for Bootstrap "Bootstrap switch Control"
http://www.bootcss.com/p/bootstrap-switch/

<href= "@Url. Staticfile ("/assets/global/plugins/bootstrap-switch/css/ Bootstrap-switch.min.css ")" rel= "stylesheet"/><src  = "@Url. Staticfile ("/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js ")"  ></script>

Bootstrap-datatables Component Styles and scripts

<Linkhref= "@Url. Staticfile ("/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css ")" Rel= "stylesheet" /><Scriptsrc= "@Url. Staticfile ("/assets/global/plugins/datatables/media/js/jquery.datatables.min.js ")"></Script><Scriptsrc= "@Url. Staticfile ("/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js ")"></Script>

Bootstrap-datapicker Component Styles and scripts

<Linkhref= "@Url. Staticfile ("/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css ")" Rel= "stylesheet" /><Scriptsrc= "@Url. Staticfile ("/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js ")"></Script><Scripttype= "Text/javascript"src= "@Url. Staticfile ("/content/scripts/jquery.ui.datapicker-zh-cn.js ")"></Script>

Finally, you need to write the following code to initialize all the components

<Scripttype= "Text/javascript">jQuery (document). Ready (function() {metronic.init ();//init metronic Core componentslayout.init ();//Init Current Layoutquicksidebar.init ();//init Quick Sidebardemo.init ();//Init Demo features    });</Script>

Metronic4.1-based bootstrap script style description