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

第零章 效果图 第一章 引入文件 引入bootstrap的css文件、js文件和jQuery文件

注意: 引入bo…

第零章 效果图

用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 尾部

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

第三章 完整代码

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

如果您喜欢本站分享的资源,点击这儿捐赠我们

这些信息可能会帮助到你: 外卖赚钱 | 进站必看

原创文章,作者:宋小羽,如若转载,请注明出处:https://res.bysjb.cn/bootstrap-blog.html