頂求網首頁是一個web2.0博客類的網站首頁，在該網站中用戶可以發表博客，也可以推薦圖書給其他用戶。所以，在首頁中主要分三個板塊——文章、圖書、用戶。另外，網站的頭部和尾部還要有導航（navigator，固定在頭部）和腳註(footer)，而這些元素也是整個網站都要用到的，具體實現時可以把它們放在網... ...
整體架構
本教程里要設計的網站首頁是一個web2.0博客類的網站首頁，在該網站中用戶可以發表博客，也可以推薦圖書給其他用戶。所以，在首頁中主要分三個板塊——文章、圖書、用戶。另外，網站的頭部和尾部還要有導航（navigator，固定在頭部）和腳註(footer)，而這些元素也是整個網站都要用到的，具體實現時可以把它們放在網站的佈局模板中。
板塊劃分
文章板塊——將最新、最熱的文章以標簽頁（tabs）切換的方式放在該模塊中，為了頁面的美觀，將有帶有圖片的文章放在輪換圖片（caoursel）插件中,最右側放置熱門文章分類。樣式如下圖所示：
首頁文章板塊
圖書板塊--按照圖書的分類將圖書放在首頁中，點擊不同的分類切換到不同的選項卡，這部分採用自己用Jquery寫的Tabs，並將其整合到BootStrap環境中。最右側同樣是圖書的分類。效果圖如下所示：
首頁圖書板塊
用戶板塊——將新加入的用戶和對社區貢獻最多的用戶放在首頁中，效果圖如下：
首頁用戶板塊
要用到的BootStrap元素
佈局頁面導航條——這裡要用到固定在網頁頭部的導航條,併在其中整合用戶登錄模塊，代碼如下：
<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" > <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>
文章板塊需要用到的BootStrap元素
1.輪換圖片插件（caoursel），解決了圖片變形的問題。
2.標簽頁插件（tabs），美化了預設插件，並增加了定時滑動時間。
3.信息按鈕（btn-info）插件,用於列出分類信息
圖書板塊需要用到的元素
1.自己用Jquery寫的Tabs插件
2.自己寫的分類標簽
用戶板塊用到的BootStrap元素
1.BootStrap原生tabs
2.圓形圖片（image_circle）
本文首發於頂求網，轉載請註明來源
