使用Bootstrap 3開發響應式網站實踐07,頁腳

時間 2019-11-11

標籤使用 bootstrap 開發響應網站實踐頁腳欄目 Bootstarp 简体版

原文原文鏈接

頁腳部分比較簡單，把一個12列的Grid切分。html

    <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設置。bootstrap

/*----------------------------------------
    頁腳
    ------------------------------------*/
footer {
    background: #333;
    color: #eee;
    font-size: 11px;
    padding: 20px;
}
ul.unstyled {
    list-style: none;
    padding: 0;
}
footer h6 {
    color: white;
}