底部版权导航条以及侧边栏的制作

一.侧边栏的实现

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; }}

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>

最终效果图

将最新的文章发送到你的邮箱

展示评论