按照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>

 

相关文章