用bootstrap十分钟搭建你的博客首页
第零章 效果图
第一章 引入文件
- 引入bootstrap的css文件、js文件和jQuery文件
|
1 2 3 4 |
<!-- 这里我是将bootstrap的css,fonts,js文件都放在目录下，且jQuery更名为jq后放在js的目录下 --> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> <script type="text/javascript" src="./js/jq.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script> |
-
注意：
引入bootstrap的js文件时，需要先引入jQuery文件，因为bootstrap的许多效果是基于jQuery去实现的。
第二章 首页结构规划
一个正常的博客首页包含以下部分：头部、导航栏、主体内容和尾部。
2.1 容器
将首页的所有部分都包含在一个容器内（即用一个div将所有部分全都包裹住）
|
1 2 3 |
<div class="container"> ... </div> |
2.2 头部
头部一般包含主标题、副标题等
|
1 2 3 4 |
<div class="page-header"> <h1>荆白博客</h1> <p>因为菜，所以需要更加努力！</p> </div> |
2.3 导航栏
导航栏中的多个标签全都用li标签一字排开，这里，我在右边加上了搜索框
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<nav class="navbar navbar-inverse"> <ul class="nav navbar-nav"> <li><a href="#">首页</a></li> <li class="active"><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">PHP <span class="caret"></span></a> <!-- 下拉菜单 --> <ul class="dropdown-menu"> <li><a href="#">PDO</a></li> <li><a href="#">基本函数</a></li> <li><a href="#">OOP</a></li> <li role="separator" class="divider"></li> <li><a href="#">MVC</a></li> </ul> </li> <li><a href="#">Linux</a></li> <li><a href="#">bootstrap</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">账号管理 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">添加文章</a></li> <li class="divider"></li> <li><a href="#">更改密码</a></li> <li><a href="#">登录</a></li> <li><a href="#">注销</a></li> </ul> </li> </ul> <!-- 搜索框 --> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="关键字"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </nav> |
2.4 主体内容
-
左边-主体内容
这里，我将主体内容放在了左边，并在最后加上了分页效果
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- 左-内容 --> <div class="col-md-9"> <article> <header> <h2><a href="#">文章标题1</a></h2> </header> <div class="cont"> <p>“乘风破浪会有时，直挂云帆济沧海。”别让怯弱否定自己，别让惫懒误了青春。一个人不奋斗不能有所成就，一个国家不奋斗不能立足世界，一个民族不奋斗不能兴盛强大</p> <p>“乘风破浪会有时，直挂云帆济沧海。”别让怯弱否定自己，别让惫懒误了青春。一个人不奋斗不能有所成就，一个国家不奋斗不能立足世界，一个民族不奋斗不能兴盛强大</p> </div> <div class="text-right"> <a href="#" class="btn btn-primary">阅读更多</a > </div> </article> <div class="text-right"> <ul class="pagination text"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </div> </div> |
- 右边-面板
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- 右-侧边栏 --> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> 栏目列表1 </div> <div class="panel-body"> <ul class="list-unstyled"> <li><a href="#">php技术</a></li> <li><a href="#">聊人生</a></li> <li><a href="#">畅理想</a></li> <li><a href="#">个人心情</a></li> </ul> </div> </div> </div> |
-
注意：
主体内容部分我用了
<div class="row"></div>进行包裹，防止后面的效果对其产生影响。
2.5 尾部
尾部一般是一个网站的备案及统计信息等
|
1 2 3 4 5 6 |
<footer> <div class="well text-center"> 关于本站及版权申明 | 在线留言 | 隐私保护 | RSS订阅站长统计 京ICP备090614xx号 Copyright © 2011-2018 文章阅读网 版权所有 </div> </footer> |
第三章 完整代码
通过以上代码，我进行了一些简单的样式调整，完整代码如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>荆白博客</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> <script type="text/javascript" src="./js/jq.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script> <style type="text/css"> .page-header h1 { padding: 10px 0 0 10px; } .page-header p { padding-left: 35px; } .navbar-right{ margin-right: -10px; } article{ padding: 0 0 20px 0; border-bottom: 1px solid #DDD; } </style> </head> <body> <!-- 容器 --> <div class="container"> <!-- 头部 --> <div class="page-header"> <h1>荆白博客</h1> <p>因为菜，所以需要更加努力！</p> </div> <!-- 导航 --> <nav class="navbar navbar-inverse"> <ul class="nav navbar-nav"> <li><a href="#">首页</a></li> <li class="active"><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li> <!-- class是caret的 显现效果为一个倒三角形 --> <a href="#" class="dropdown-toggle" data-toggle="dropdown">PHP <span class="caret"></span></a> <!-- 下拉菜单 --> <ul class="dropdown-menu"> <li><a href="#">PDO</a></li> <li><a href="#">基本函数</a></li> <li><a href="#">OOP</a></li> <!-- 下拉子菜单的分割线 --> <li role="separator" class="divider"></li> <li><a href="#">MVC</a></li> </ul> </li> <li><a href="#">Linux</a></li> <li><a href="#">bootstrap</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">账号管理 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">添加文章</a></li> <li class="divider"></li> <li><a href="#">更改密码</a></li> <li><a href="#">登录</a></li> <li><a href="#">注销</a></li> </ul> </li> </ul> <!-- 搜索框 --> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="关键字"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </nav> <!-- 主体内容 --> <div class="row"> <!-- 左-内容 --> <div class="col-md-9"> <article> <header> <h2><a href="#">文章标题1</a></h2> </header> <div class="cont"> <p>“乘风破浪会有时，直挂云帆济沧海。”别让怯弱否定自己，别让惫懒误了青春。一个人不奋斗不能有所成就，一个国家不奋斗不能立足世界，一个民族不奋斗不能兴盛强大</p> <p>“乘风破浪会有时，直挂云帆济沧海。”别让怯弱否定自己，别让惫懒误了青春。一个人不奋斗不能有所成就，一个国家不奋斗不能立足世界，一个民族不奋斗不能兴盛强大</p> </div> <div class="text-right"> <a href="#" class="btn btn-primary">阅读更多</a > </div> </article> <article> <header> <h2><a href="#">文章标题2</a></h2> </header> <div class="cont"> <p>“乘风破浪会有时，直挂云帆济沧海。”别让怯弱否定自己，别让惫懒误了青春。一个人不奋斗不能有所成就，一个国家不奋斗不能立足世界，一个民族不奋斗不能兴盛强大</p> <p>“乘风破浪会有时，直挂云帆济沧海。”别让怯弱否定自己，别让惫懒误了青春。一个人不奋斗不能有所成就，一个国家不奋斗不能立足世界，一个民族不奋斗不能兴盛强大</p> </div> <div class="text-right"> <a href="#" class="btn btn-primary">阅读更多</a > </div> </article> <article> <header> <h2><a href="#">文章标题3</a></h2> </header> <div class="cont"> <p>“乘风破浪会有时，直挂云帆济沧海。”别让怯弱否定自己，别让惫懒误了青春。一个人不奋斗不能有所成就，一个国家不奋斗不能立足世界，一个民族不奋斗不能兴盛强大</p> <p>“乘风破浪会有时，直挂云帆济沧海。”别让怯弱否定自己，别让惫懒误了青春。一个人不奋斗不能有所成就，一个国家不奋斗不能立足世界，一个民族不奋斗不能兴盛强大</p> </div> <div class="text-right"> <a href="#" class="btn btn-primary">阅读更多</a > </div> </article> <div class="text-right"> <ul class="pagination text"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </div> </div> <!-- 右-侧边栏 --> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> 栏目列表1 </div> <div class="panel-body"> <ul class="list-unstyled"> <li><a href="#">php技术</a></li> <li><a href="#">聊人生</a></li> <li><a href="#">畅理想</a></li> <li><a href="#">个人心情</a></li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> 栏目列表2 </div> <div class="panel-body"> <ul class="list-unstyled"> <li><a href="#">php技术</a></li> <li><a href="#">聊人生</a></li> <li><a href="#">畅理想</a></li> <li><a href="#">个人心情</a></li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> 栏目列表3 </div> <div class="panel-body"> <ul class="list-unstyled"> <li><a href="#">php技术</a></li> <li><a href="#">聊人生</a></li> <li><a href="#">畅理想</a></li> <li><a href="#">个人心情</a></li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> 栏目列表4 </div> <div class="panel-body"> <ul class="list-unstyled"> <li><a href="#">php技术</a></li> <li><a href="#">聊人生</a></li> <li><a href="#">畅理想</a></li> <li><a href="#">个人心情</a></li> </ul> </div> </div> </div> </div> <!-- 尾部 --> <footer> <div class="well text-center"> 关于本站及版权申明 | 在线留言 | 隐私保护 | RSS订阅站长统计 京ICP备090614xx号 Copyright © 2011-2018 文章阅读网 版权所有 </div> </footer> </div> </body> </html> |
原创文章，作者：seabert，如若转载，请注明出处：https://bysjb.cn/bootstrap-blog.html