BootStrap实现商城首页
来源：互联网 发布：安广网络电视 编辑：程序博客网 时间：2024/04/30 23:37
BootStrap作为一个JS框架，在web开发上带来的便捷实在太大了。如图
这是个特别方便的文档，可以下载离线，也可以在官网上直接用。
附上一个效果图及自己的代码：
效果图就是这样，有很多框架就是直接官网模板复制过来简单的修改一下，而且很美观。
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="bootstrap.css" rel="stylesheet"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="jquery-1.11.3.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="bootstrap.min.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-6"> <img src="logo2.png"> </div> <div class="col-lg-6 col-md-4 hidden-xs col-sm-6"> <img src="header.png"> </div> <div class="col-lg-2 col-md-4" style="padding-top: 15px"> <a href="#">登陆</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> </div> <div class="container" style="margin-top: 10px"> <nav class="navbar navbar-inverse" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首页</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">手机数码</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">鞋靴箱包</a></li> <li><a href="#">孕婴保健</a></li> <!-- <li><a href="#">傻逼</a></li> --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">所有分类 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">手机数码</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">鞋靴箱包</a></li> <li class="divider"></li> <li><a href="#">S孕婴保健</a></li> <li class="divider"></li> <li><a href="#">傻逼</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <!-- <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> --> </div><!-- /.navbar-collapse --></nav> </div> <div class="container"> <div id="carousel-example-generic" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="1.jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="2.jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="1.jpg" alt="..."> <div class="carousel-caption"> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div> </div><div class="container"> <div class="row"> <span id="" style="font-size: 30px;padding-left:33px;"> 热门商品 <img src="title2.jpg"> </span> </div> <div class="row"> <div class="col-md-2 col-sm-2 hidden-xs hidden-sm" style="height: 400px;"> <img src="big01.jpg" height="100%"> </div> <div class="col-md-10 col-sm-10" style="padding-left: 10px;"> <div class="row"> <div class="col-md-6 hidden-xs hidden-sm" style="height:200px;width: 480px;"> <a href="#"><img src="middle01.jpg" height="100%" width="100%"></a> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> </div> <div class="row"> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> </div> </div> </div></div><div class="container" style="margin-top:10px;"> <div class="row"> <div class="hidden-md hidden-sm hidden-xs" style="padding-left: 14px;"> <img src="ad.jpg" style="width: 100%"> </div> </div></div><div class="container"> <div class="row"> <span id="" style="font-size: 30px;padding-left:33px;"> 热门商品 <img src="title2.jpg"> </span> </div> <div class="row"> <div class="col-md-2 col-sm-2 hidden-xs hidden-sm" style="height: 400px;"> <img src="big01.jpg" height="100%"> </div> <div class="col-md-10 col-sm-10" style="padding-left: 10px;"> <div class="row"> <div class="col-md-6 hidden-xs hidden-sm" style="height:200px;width: 480px;"> <a href="#"><img src="middle01.jpg" height="100%" width="100%"></a> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> </div> <div class="row"> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="small03.jpg"></a> <a href="#"><p><font color="gray">电炖锅</p></a> <p><font color="red">￥399</font></p> </div> </div> </div> </div></div><div class="container" style="margin-top:10px;"> <div class="row"> <div class="hidden-md hidden-sm hidden-xs" style="padding-left: 14px;"> <img src="footer.jpg" style="width: 100%"> </div> </div></div><div class="container" style="margin-top: 10px;"> <div class="row"> <ul class="list-inline" align="center"> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">招贤纳士</a></li> <li><a href="#">法律声明</a></li> <li><a href="#">有情链接</a></li> <li><a href="#">支付方式</a></li> <li><a href="#">配送方式</a></li> <li><a href="#">服务声明</a></li> <li><a href="#">广告声明</a></li> </ul> <div style="text-align: center;margin-top: 5px;margin-bottom: 20px;"> CopyRight 0000-9999 刘氏商城 版权所有 </div> </div></div> </body></html>
阅读全文
0 0
- BootStrap实现商城首页
- DIV+CSS实现商城首页
- Bootstrap实现网站首页（Bootstrap概述）
- 用RecyclerView+CardView实现 商城首页
- jQuery实现商城首页幻灯片的效果
- Android 深入ViewPager实现类京东商城首页广告效果
- 高仿各大商城首页---使用分类型的RecyclerView来实现
- 高仿各大商城首页---使用分类型的RecyclerView来实现
- 商城首页兼容问题
- 微信小程序商城首页
- jQuery实现图片轮播效果（仿QQ商城首页、天猫首页）
- jQuery实现图片轮播效果（仿QQ商城首页、天猫首页）
- jQuery实现图片轮播效果（仿QQ商城首页、天猫首页）
- jQuery实现图片轮播效果（仿QQ商城首页、天猫首页）
- jQuery实现图片轮播效果（仿QQ商城首页、天猫首页）
- jQuery实现图片轮播效果（仿QQ商城首页、天猫首页）
- HTML网站商城首页轮播图
- 商城之首页商品分类
- python中的文件备份过程
- 文章标题
- ReactNative小小圈数据层设计稿（初稿）
- 在centos7下设置kettle定时任务
- 函数内部属性
- BootStrap实现商城首页
- IOS 星星评分控件-Swift3.0
- Linux下hydra的使用
- Ubuntu 安装和修改Apache2端口
- 查找（一）
- 文章标题
- 文章标题
- python中的文件数据保存
- 文章标题
