一.侧边栏的实现
1. 设置侧边栏样式
.sidebar{
position:fixed;
top:52px;
left:0;
bottom:0;
background: #f5f5f5;
padding:20px 0 0 0;
}
2.设置侧边栏<a>
标签样式
.nav-sidebar li a:hover,.nav-sidebar li a:active,.nav-sidebar li a:focus{
color: #fff;
background-color: #428bca;
}
3.设置侧边栏自适应
@media (max-width:768px){ .sidebar{ display: none; }}
二.footer的实现
1.设置footer样式
.nav-footer{
position: absolute;
bottom:0;
width:100%;
padding:15px;
text-align: center;
border-top:1px solid #eee;
font-size:12px;
}
2.设置<p>
标签样式
.nav-footer p{
color: #5e5e5e;
}
三.引用
在HTML中:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
<div class="nav nav-sidebar">
<ul>
<li>...</li>
</ul>
</div>
<div class="nav-footer">
</div>
</div>
</div>
</div>