Inspinia学习笔记1
2016-08-21 本文已影响0人
易推倒DE小狼
初到公司，公司在提供一个儿童教育类的公司的技术支持。我的小组负责搭建其后台管理，由现有的技术人员组成，CTO决定用一个叫Inspinia的模板让我去写一些静态页面。由于最终的原型方案还没有确定，我有了学习和研究这个框架的时间。
Inspinia是一款基于jQuery和Bootstrap搭建的一套后台响应式模板，里面的包含了所有常用的后台页面所需的组件。总共有五套大型的解决方案，这里只就我工作中将用到的这一套解决方案做一些简单的纪录。（注：本系列只是记录部分代码片段，需要引用的css和js文件略过。）
一、基本布局
侧边栏布局左边写#wrapper 右边写#page-wrapper如：
<body>
<div id="wrapper"></div>
<div id="page-wrapper"></div>
</body>
顶部导航栏 body写top-navigation内部嵌套#wrapper和#page-wrapper如：
<body class-"top-navigation">
<div id="wrapper" >
<div id="page-wrapper">
</div>
</div
</body>
导航条（需引入metismenu.js）
侧边导航条写法：
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element">
<span>
<img src="" alt="" />
</span>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="clear"></span>
</a>
</div>
</li>
<li>
<a href="">
<i></i>
<span class="nav-label"></span>
<span class="fa arrow"></span>
</a>
</li>
<li>
<a href="">
<i></i>
<span class="nav-label"></span>
</a>
</li>
</ul>
</div>
</nav>
