1. 使用bootstrap搭建后台管理系统页面《一》
一般的后台管理系统页面主体包括四个部分,顶部导航栏,左侧菜单栏,中间正文页和底部的页脚。 其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了iframe框架。
1.1 nav组件
接下来简单介绍一下nav组件常见的几种样式
1. 标准标签页
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
- 1
- 2
- 3
- 4
- 5
tab页的样式通过外边框线条和内置padding构建出来
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
color:#555;
cursor:default;
background-color:#fff;
border:1px solid #ddd;
border-bottom-color:transparent }
.nav>li>a{
position:relative;
display:block;
padding:10px 15;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
1.2 胶囊式标签页
<ul class="nav nav-pills">
<li