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

最新推荐文章于 2021-06-14 20:15:30 发布

weixin_34126215

最新推荐文章于 2021-06-14 20:15:30 发布

阅读量440

点赞数 1

本文介绍如何使用Bootstrap3框架设计简洁且响应式的页脚，包含版权信息、公司简介、导航链接、社交媒体链接和作者致谢等内容。通过CSS设置，实现深色背景和清晰的文本显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页脚部分比较简单，把一个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开发响应式网站实践”系列包括：