基于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>

 

相关文章