页脚部分比较简单,把一个12列的Grid切分。
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>Copyright ©新浪体育</h6>
</div>
<div class="col-sm-4">
<h6>关于我们</h6>
<p>
中国上海/2014年8月14日 — 服务于中国及全球华人社群的领先在线媒体公司新浪公司(NASDAQ GS: SINA)今日公布了截至2014年6月30日的第二季度未经审计的财务报告。
</p>
</div>
<div class="col-sm-2">
<h6>导航</h6>
<ul class="unstyled">
<li><a href="">主页</a></li>
<li><a href="">服务</a></li>
<li><a href="">链接</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
<div class="col-sm-2">
<h6>Follow us</h6>
<ul class="unstyled">
<li><a href="">微博</a></li>
<li><a href="">微信</a></li>
<li><a href="">来往</a></li>
</ul>
</div>
<div class="col-sm-2">
<h6>本网站由<span class="glyphicon glyphicon-heart"></span>Darren制作</h6>
</div>
</div>
</div>
</footer><!--页脚结束-->
对页脚部分进行CSS设置。
/*----------------------------------------
页脚
------------------------------------*/
footer {
background: #333;
color: #eee;
font-size: 11px;
padding: 20px;
}
ul.unstyled {
list-style: none;
padding: 0;
}
footer h6 {
color: white;
}
参考资料:
Code a Responsive Website with Bootstrap 3 --by Brad Hussey
http://getbootstrap.com/
http://bootswatch.com/
http://www.tutorialspoint.com/
http://www.placehold.it/
“使用Bootstrap 3开发响应式网站实践”系列包括: