基于Metronic4.1的Bootstrap脚本样式说明

虽说Bootstrap作为当下最流行的响应式的UI，但是对于一些在Bootstrap基础上扩展的UI的资料算是少之又少。这里楼主结合这一个月的辛酸把那些脚本跟样式整理一下下。。。

关于Metronic4.1的相关信息也只能从Metronic4.1的Demo中扣出来，首先看下如下样式：

<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="@Url.StaticFile("/assets/global/plugins/font-awesome/css/font-awesome.min.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.StaticFile("/assets/global/plugins/simple-line-icons/simple-line-icons.min.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.StaticFile("/assets/global/plugins/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.StaticFile("/assets/global/plugins/uniform/css/uniform.default.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.StaticFile("/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css")" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->

Metronic的Demo中也标注的很清楚 (GLOBAL MANDATORY STYLES) 可以看出以下样式是强制必须强制要加的。下面简单说明下这些样式的作用

第一行:Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用
第二行:包含了Metronic的一些图标。
第三行就不解释了，第四行是属于Jquery的一套UI美化的样式吧。
第五行其实并不需要强制加，Bootstrap-Switch 为Bootstrap的一个开关控件后面详细解释

<!-- BEGIN THEME STYLES -->
<link href="@Url.StaticFile("/assets/global/css/components.css")" rel="stylesheet" />
<link href="@Url.StaticFile("/assets/global/css/plugins.css")" rel="stylesheet" />
<link href="@Url.StaticFile("/assets/admin/layout/css/layout.css")" rel="stylesheet" />
<link id="style_color" href="@Url.StaticFile("/assets/admin/layout/css/themes/default.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.StaticFile("/assets/admin/layout/css/custom.css")" rel="stylesheet" />
<!-- END THEME STYLES -->

以上是Metronic主题的一些样式
第一行：缺少components.css就无法呈现一些带图标的漂亮按钮。
比如：<a class="btn red" id="delete" href="javascript:;"><i class="icon-trash icon-white"></i>删除</a>
第二行：缺少plugins.css，发现部分input样式产生变化。没有深入去看看。
第三行：控制着这个管理界面的布局，非常的重要
第四行：为Metronic的主题色样式，可以将该脚本存入Cookie进行主题色的切换保存
第五行：样式custom.css，暂时没有发现是干什么用的

下面再来Metronic4.1中会出现的脚本：

<script src="@Url.StaticFile("/assets/global/plugins/jquery.min.js")"></script>
<!--一个过渡插件 让你在原来代码上升级jquery 不用修改代码-->
<script src="@Url.StaticFile("/assets/global/plugins/jquery-migrate.min.js")"></script>

jquery-ui.min.js这个脚本非常重要，而且需要在bootstrap.min.js脚本之前加载完成，该脚本提供Bootstrap导航菜单的下拉事件

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

以下脚本应该都要引入：
Bootstrap-hover-dropdown-min.js ： 也用于控制管理菜单栏的下拉动作等
Jquery-slimscroll.min.js： 滚动条控件，支持把内容放在一个盒子里面，固定一个高度，超出的则使用滚动
Jquery-blockui.min.js：jQuery BlockUI插件让你在不锁定浏览器的情况下使用Ajax时模拟同步行为。当被激活的时候,它会阻止用户的行为直到它无效

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

metronic.js为主题设置相关的脚本（重要）

<script src="@Url.StaticFile("/assets/global/scripts/metronic.js")" type="text/javascript"></script>
<script src="@Url.StaticFile("/assets/admin/layout/scripts/quick-sidebar.js")"  type="text/javascript"></script>
<script src="@Url.StaticFile("/assets/admin/layout/scripts/demo.js")" type="text/javascript"></script>

layout.js 跟布局相关的样式（重要）

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

关于Bootstrap-Metronic的其他组件
Select2控件介绍
这个插件是基于Select的扩展插件，能够提供更加丰富的功能和用户体验，它的github官网地址为:https://select2.github.io/，具体的使用案例，可以参考地址：https://select2.github.io/examples.html
我们在整个框架里面，用到了很多Select2控件来处理内容的显示，包括单选的下拉列表（包括级联选择框）、复选的下拉列表、树形下拉列表等方式

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

Bootstrap-Switch 为Bootstrap的一个开关控件【 Bootstrap 开关（switch）控件 】 http://www.bootcss.com/p/bootstrap-switch/

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

Bootstrap-DataTables的组件样式和脚本

<link href="@Url.StaticFile("/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css")" rel="stylesheet" />
<script src="@Url.StaticFile("/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js")"></script>
<script src="@Url.StaticFile("/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js")"></script>

Bootstrap-datapicker组件样式和脚本

<link href="@Url.StaticFile("/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css")" rel="stylesheet" />
<script src="@Url.StaticFile("/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js")"></script>
<script type="text/javascript" src="@Url.StaticFile("/content/scripts/jquery.ui.datapicker-zh-CN.js")"></script>

最后需要编写如下代码来初始化所有的组件

<script type="text/javascript">
jQuery(document).ready(function () {
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
});
</script>