BootStrap之——網站首頁整體設計思路

整體架構

一般而言首頁設計幾乎等同與整個網站設計，那麼首頁中到底應該放些什麼內容纔好呢？這要看網站有哪些主要的元素。本教程裏要設計的網站首頁是一個多用戶博客類的網站首頁，在該網站中用戶可以發表博客，也可以推薦圖書給其他用戶。所以，首頁中的板塊包括這些應該是恰當的：

1.整站導航條

2.文章（博客）展示板塊

3.圖書展示板塊

4.用戶（會員）展示板塊

5.腳註——footer部分

其中導航條和腳註是整個網站中都要用到的，具體實現時可以放在佈局模板中。

板塊劃分

根據上面的整體架構，我們將首頁的板塊分爲以下幾個：

    1.文章板塊——將最新、最熱的文章以標籤頁（tab）切換方式放在該模塊中，爲了頁面美觀，將有圖片的文章的第一章圖片放在輪換圖片（caoursel）插件中,最右側放置熱門文章分類。



2.圖書板塊——按照圖書的分類將圖書放在首頁中，點擊不同的分類切換到不同的選項卡。圖書展示使用自己開發的Jquery Tab插件，並將其整合到BootStrap環境中。最右側同樣是圖書的分類。


3.用戶板塊——將新加入的用戶和對社區貢獻最多的用戶放在首頁中.

要用到的BootStrap元素

那麼，我麼要用到哪些BootStrap元素才能很好的展示我們的板塊內容呢？

1.導航條

這裏要用到固定在網頁頭部的導航條（navbar-fixed-top）,並在其中整合用戶登錄模塊，代碼如下

 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
     <div class="navbar-header">
      <a class="navbar-brand active" href="URL">頂求網</a>
      <a class="navbar-brand" href="URL">圖書</a>
      <a class="navbar-brand" href="面URL">文章</a>
    </div>
    <div class="btn-group" style="margin-top:10px; float:right;">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          會員登陸 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
           <LI><a href="URL"  target="_top">會員登陸</a></LI>
           <LI><a href="URL"  target="_top">會員註冊</a></LI>
        </ul>
    </div>
</div>
 </div>

2.文章板塊需要用到的BootStrap元素

1.輪換圖片插件（caoursel)——解決了展示圖片時圖片變形的問題。

2.標籤頁插件（tabs）——對插件的樣式進行了美化，並增加了自動切換功能。

3.信息按鈕（btn-info）組件——用它列出文章分類信息。

3.圖書板塊需要用到的元素

1.自己開發的Jquery Tab插件

2.縮略圖(thumbnail)組件

3.分類標籤(仿豆瓣)

4.用戶板塊用到的BootStrap元素

1.BootStrap原生tab

2.圓形圖片（image_circle）