用bootstrap十分钟搭建你的博客首页

第零章 效果图

第一章 引入文件

• 引入bootstrap的css文件、js文件和jQuery文件

• 注意：

  引入bootstrap的js文件时，需要先引入jQuery文件，因为bootstrap的许多效果是基于jQuery去实现的。

第二章 首页结构规划

一个正常的博客首页包含以下部分：头部、导航栏、主体内容和尾部。

2.1 容器

将首页的所有部分都包含在一个容器内（即用一个div将所有部分全都包裹住）

2.2 头部

头部一般包含主标题、副标题等

2.3 导航栏

导航栏中的多个标签全都用li标签一字排开，这里，我在右边加上了搜索框

2.4 主体内容

• 左边-主体内容

  这里，我将主体内容放在了左边，并在最后加上了分页效果

• 右边-面板

• 注意：

  主体内容部分我用了<div class="row"></div>进行包裹，防止后面的效果对其产生影响。

2.5 尾部

尾部一般是一个网站的备案及统计信息等

第三章 完整代码

通过以上代码，我进行了一些简单的样式调整，完整代码如下