整体架构
本教程里要设计的网站首页是一个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）
本文首发于顶求网，转载请注明来源