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

页脚部分比较简单,把一个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;
}


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

参考资料:
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开发响应式网站实践”系列包括:

使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

使用Bootstrap 3开发响应式网站实践02,轮播

使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

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

上一篇:使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版


下一篇:使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容