使用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;
}    

 

 

參考資料：
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,頁腳