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="nav