bootstrap搭建后台管理页⾯
bootstrap搭建后台管理页⾯
管理页⾯主体包括4部分，顶部导航栏，左侧导航栏，中间正⽂页和底部的页脚。其中左侧和顶部使⽤的是bootstrap的导航和下拉菜单组件，主体页⾯为了演⽰⽅便，使⽤了iframe框架。
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>
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;
2.胶囊式标签页
<ul class="nav nav-pills">
<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>
和标准的tab页不相同的是，通过填充背景颜⾊构成胶囊状的导航块，区别的样式代码如下：
.
nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
color:#fff;
background-color:#337ab7;
}
胶囊是标签页也是可以垂直⽅向堆叠排列的，只需添加 .nav-stacked 类。
正常情况ul标签下的li标签都是垂直排列的，之前的.nav-pills下的li标签之所以可以横向排列，是加了float属性。
.nav-pills>li{
float:left;
}
⽽此处在.nav-stack类下的li标签则去除了元素的float属性：
.nav-stacked>li{
float:none;
}
这块你可能会有疑问了，如何能确保下⾯的样式⽣效呢？因为.nav-pills>li和.nav-stacked>li这两种选择器其实优先级是⼀样的，在优先级⼀样的情况下，后声明的选择器会最终⽣效，当然在bootstrap中也能看到使⽤简单粗暴的!important去提⾼优先级的做法。
下拉菜单组件
下拉菜单依赖单独的插件，我们可以在任何组件（⽐如导航栏，标签页，胶囊式导航菜单，按钮等）中添加下拉菜单，可以通过单独引⽤dropdown.js，或者引⽤bootstrap.js 或压缩版的 bootstrap.min.js。
它包括2中调⽤⽅式，通过data属性或者通过JS直接调⽤，接下来仅简单介绍通过data属性进⾏调⽤的情况。
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#"class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Java</a></li>
<li><a href="#">C#</a></li>
<li class="divider"></li>
<li><a href="#">Python</a></li>
</ul>
</li>
</ul>
将⼆级菜单的内容放在类dropdown-menu修饰的ul标签中，向链接或按钮添加 data-toggle=”dropdown” 来切换下拉菜单，但通常情况下下拉菜单的样式不太好看，我们可以微调样式来达到我们需要的效果。
简易的后台管理页⾯
<!--顶部导航栏部分-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand"title="logoTitle"href="#">Neo Yang</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li role="presentation">
<a href="#">当前⽤户：<span class="badge">TestUser</span></a>
</li>
<li>
<a href="../login/logout">
<span class="glyphicon glyphicon-lock"></span>退出登录</a> </li>
</ul>
</div>
</div>
</nav>
<!-- 中间主体内容部分 -->
<div class="pageContainer">
<!-- 左侧导航栏 -->
<div class="pageSidebar">
<ul class="nav nav-stacked nav-pills">
<li role="presentation">
<a href="nav1.html"target="mainFrame" >导航链接1</a>
</li>
<li role="presentation">
<a href="nav2.html"target="mainFrame">导航链接2</a>
</li>
<li role="presentation">
<a href="nav3.html"target="mainFrame">导航链接3</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle"data-toggle="dropdown"href="#">
js导航栏下拉菜单导航链接4<span class="caret"></span>
</a>
</a>
<ul class="dropdown-menu">
<li>
<a href="nav1.html"target="mainFrame">导航链接4-1</a>
</li>
<li>
<a href="nav2.html"target="mainFrame">导航链接4-2</a>
</li>
<li>
<a href="nav3.html"target="mainFrame">导航链接4-3</a>
</li>
</ul>
</li>
<li role="presentation">
<a href="nav4.html"target="mainFrame">导航链接5</a>
</li>
</ul>
</div>
<!-- 左侧导航和正⽂内容的分隔线 -->
<div class="splitter"></div>
<!-- 正⽂内容部分 -->
<div class="pageContent">
<iframe src="index.html"id="mainFrame"name="mainFrame"frameborder="0"width="100%"height="100%"frameBorder="0"></iframe> </div>
</div>
<!-- 底部页脚部分 -->
<div class="footer">
<p class="text-center">
2017 © NeoYang.
</p>
</div>
稍微调整了⼀下导航栏和下拉菜单的样式，这样整体的风格能更好⼀些，修改了min-width，margin-le
ft和background-color属性，是下拉框出现的位置更加美观⼀些
.navbar-collapse{
padding-left: 5px;
padding-right: 5px;
}
.nav>li{
text-align: center;
}
.nav>li>a{
color:#444;
margin: 0 5px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
background-color:#222222;
}
.dropdown-menu{
min-width: 200px;
margin-left: 40px;
background-color:#E3E3E3;
}
.dropdown-menu>li>a{
padding: 10px 15px;
}
另外贴⼀下整体页⾯布局的样式设置
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论