使用Bootstrap 3开发响应式网站实践07,页脚

浏览数：66 / 时间：2015年06月09日

页脚部分比较简单，把一个12列的Grid切分。

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-2">
                    <h6>Copyright &copy;新浪体育</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;
}