Bootstrap
BootStrap举例 网站首页：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 8 <link rel="stylesheet" href="../css/bootstrap.css" /> 9 10 <!--需要引入JQuery--> 11 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 12 13 <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 14 <script type="text/javascript" src="../js/bootstrap.js"></script> 15 16 <meta name="viewport" content="width=device-width, initial-scale=1"> 17 18 <!-- 19 引入bootstrap相关的头文件 20 1. div布局容器 class = " container" 21 2. 放8行 row 22 --> 23 </head> 24 25 <body> 26 <!--最外层的布局容器--> 27 <div class="container"> 28 <!--LOGO部分--> 29 <div class="row"> 30 <div class="col-md-4 col-sm-6 col-xs-6"> 31 <img src="../img/logo2.png" /> 32 </div> 33 <div class="col-md-4 hidden-sm hidden-xs"> 34 <img src="../img/header.png" /> 35 </div> 36 <div class="col-md-4 col-sm-6 col-xs-6" style="line-height: 50px;height: 50px;"> 37 <a href="#">登录</a> 38 <a href="#">注册</a> 39 <a href="#">购物车</a> 40 </div> 41 </div> 42 43 <!--导航栏部分--> 44 <nav class="navbar navbar-inverse"> 45 <div class="container-fluid"> 46 <!-- Brand and toggle get grouped for better mobile display --> 47 <div class="navbar-header"> 48 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 49 <span class="sr-only">Toggle navigation</span> 50 <span class="icon-bar"></span> 51 <span class="icon-bar"></span> 52 <span class="icon-bar"></span> 53 </button> 54 <a class="navbar-brand" href="#">首页</a> 55 </div> 56 57 <!-- Collect the nav links, forms, and other content for toggling --> 58 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 59 <ul class="nav navbar-nav"> 60 <li class="active"> 61 <a href="#">手机数码 <span class="sr-only">(current)</span></a> 62 </li> 63 <li> 64 <a href="#">电脑办公</a> 65 </li> 66 <li> 67 <a href="#">鞋靴箱包</a> 68 </li> 69 <li> 70 <a href="#">香烟酒水</a> 71 </li> 72 <li class="dropdown"> 73 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">全部分类 <span class="caret"></span></a> 74 <ul class="dropdown-menu" role="menu"> 75 <li> 76 <a href="#">手机数码</a> 77 </li> 78 <li> 79 <a href="#">电脑办公</a> 80 </li> 81 <li> 82 <a href="#">鞋靴箱包</a> 83 </li> 84 <li class="divider"></li> 85 <li> 86 <a href="#">香烟酒水</a> 87 </li> 88 <li class="divider"></li> 89 <li> 90 <a href="#">花生瓜子</a> 91 </li> 92 </ul> 93 </li> 94 </ul> 95 <form class="navbar-form navbar-right" role="search"> 96 <div class="form-group"> 97 <input type="text" class="form-control" placeholder="Search"> 98 </div> 99 <button type="submit" class="btn btn-default">Submit</button> 100 </form> 101 102 </div> 103 <!-- /.navbar-collapse --> 104 </div> 105 <!-- /.container-fluid --> 106 </nav> 107 108 109 <!--轮播图--> 110 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000"> 111 <!-- Indicators --> 112 <ol class="carousel-indicators"> 113 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 114 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 115 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 116 </ol> 117 118 <!-- Wrapper for slides --> 119 <div class="carousel-inner" role="listbox"> 120 <div class="item active"> 121 <img src="../img/1.jpg" alt="..."> 122 <div class="carousel-caption"> 123 ... 124 </div> 125 </div> 126 <div class="item"> 127 <img src="../img/2.jpg" alt="..."> 128 <div class="carousel-caption"> 129 ... 130 </div> 131 </div> 132 <div class="item"> 133 <img src="../img/3.jpg" alt="..."> 134 <div class="carousel-caption"> 135 ... 136 </div> 137 </div> 138 </div> 139 140 <!-- Controls --> 141 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 142 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 143 <span class="sr-only">Previous</span> 144 </a> 145 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 146 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 147 <span class="sr-only">Next</span> 148 </a> 149 </div> 150 <!--最新商品--> 151 <div class="row"> 152 <div class="col-md-12"> 153 <h3>最新商品<img src="../images/title2.jpg"/></h3> 154 </div> 155 </div> 156 157 158 <!--商品部分--> 159 <div class="row"> 160 <!--左边大图部分--> 161 <div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;"> 162 <img src="../products/hao/big01.jpg" width="100%" height="100%"/> 163 </div> 164 <!-- 165 右边商品项部分 166 --> 167 <div class="col-md-10"> 168 <!--投影神券来袭--> 169 <div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;"> 170 <img src="../products/hao/middle01.jpg" style="width: 100%;" /> 171 </div> 172 173 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 174 <img src="../products/hao/small01.jpg" style="max-width: 80%;"/> 175 <p>微波炉</p> 176 <p style="color: red;">$998</p> 177 </div> 178 179 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 180 <img src="../products/hao/small02.jpg"/> 181 <p>微波炉</p> 182 <p style="color: red;">$998</p> 183 </div> 184 185 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 186 <img src="../products/hao/small03.jpg"/> 187 <p>微波炉</p> 188 <p style="color: red;">$998</p> 189 </div> 190 191 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 192 <img src="../products/hao/small04.jpg"/> 193 <p>微波炉</p> 194 <p style="color: red;">$998</p> 195 </div> 196 197 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 198 <img src="../products/hao/small05.jpg"/> 199 <p>微波炉</p> 200 <p style="color: red;">$998</p> 201 </div> 202 203 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 204 <img src="../products/hao/small06.jpg"/> 205 <p>微波炉</p> 206 <p style="color: red;">$998</p> 207 </div> 208 209 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 210 <img src="../products/hao/small07.jpg"/> 211 <p>微波炉</p> 212 <p style="color: red;">$998</p> 213 </div> 214 215 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 216 <img src="../products/hao/small08.jpg"/> 217 <p>微波炉</p> 218 <p style="color: red;">$998</p> 219 </div> 220 221 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 222 <img src="../products/hao/small09.jpg"/> 223 <p>微波炉</p> 224 <p style="color: red;">$998</p> 225 </div> 226 227 228 </div> 229 </div> 230 <!--LOGO部分--> 231 <div class="row"> 232 <div class="col-md-12"> 233 <img src="../products/hao/ad.jpg" width="100%"/> 234 </div> 235 </div> 236 237 <!--最新商品--> 238 <div class="row"> 239 <div class="col-md-12"> 240 <h3>最新商品<img src="../images/title2.jpg"/></h3> 241 </div> 242 </div> 243 <!--商品部分--> 244 <div class="row"> 245 <!--左边大图部分--> 246 <div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;"> 247 <img src="../products/hao/big01.jpg"/> 248 </div> 249 <!-- 250 右边商品项部分 251 --> 252 <div class="col-md-10"> 253 <!--投影神券来袭--> 254 <div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;"> 255 <img src="../products/hao/middle01.jpg" /> 256 </div> 257 258 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 259 <img src="../products/hao/small09.jpg"/> 260 <p>微波炉</p> 261 <p style="color: red;">$998</p> 262 </div> 263 264 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 265 <img src="../products/hao/small08.jpg"/> 266 <p>微波炉</p> 267 <p style="color: red;">$998</p> 268 </div> 269 270 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 271 <img src="../products/hao/small07.jpg"/> 272 <p>微波炉</p> 273 <p style="color: red;">$998</p> 274 </div> 275 276 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 277 <img src="../products/hao/small06.jpg"/> 278 <p>微波炉</p> 279 <p style="color: red;">$998</p> 280 </div> 281 282 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 283 <img src="../products/hao/small05.jpg"/> 284 <p>微波炉</p> 285 <p style="color: red;">$998</p> 286 </div> 287 288 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 289 <img src="../products/hao/small04.jpg"/> 290 <p>微波炉</p> 291 <p style="color: red;">$998</p> 292 </div> 293 294 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 295 <img src="../products/hao/small03.jpg"/> 296 <p>微波炉</p> 297 <p style="color: red;">$998</p> 298 </div> 299 300 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 301 <img src="../products/hao/small02.jpg"/> 302 <p>微波炉</p> 303 <p style="color: red;">$998</p> 304 </div> 305 306 <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;"> 307 <img src="../products/hao/small01.jpg"/> 308 <p>微波炉</p> 309 <p style="color: red;">$998</p> 310 </div> 311 312 313 314 </div> 315 </div> 316 317 318 <!-- footer --> 319 <div class="row"> 320 <div class="col-md-12"> 321 <img src="../img/footer.jpg" width="100%"/> 322 </div> 323 </div> 324 325 326 <div style="text-align: center;"> 327 328 <a href="#">关于我们</a> 329 <a href="#">联系我们</a> 330 <a href="#">招贤纳士</a> 331 <a href="#">法律声明</a> 332 <a href="#">友情链接</a> 333 <a href="#">支付方式</a> 334 <a href="#">配送方式</a> 335 <a href="#">服务声明</a> 336 <a href="#">广告声明</a> 337 338 <br /> 339 340 Copyright © 2005-2016 传智商城 版权所有 341 </div> 342 343 </div> 344 </body> 345 346 </html>
