首页 > 代码库 > Bootstrap（项目2）
Bootstrap（项目2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pantry‘s Best 派送喜悦</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://www.mamicode.com/css/bootstrap.css">
<script src="http://www.mamicode.com/js/jquery-3.2.1.js"> </script>
<script src="http://www.mamicode.com/js/bootstrap.js"></script>
<script src="http://www.mamicode.com/js/holder.js"></script>
<style>
@media(min-width: 992px){
.thumbnail {
border: none;
max-width: 130%;
height: auto
}
#mynav_content li{
margin-right: 30px;
color: white;
}
#select_nav{
margin-right: 20px;
}
}
@media (max-width: 768px) {
#select_nav {
margin-right: 20px;
}
#honeycarousel {
margin-top: 100px;
}
.logo {
margin-left: 120px;
margin-right: 50px;
}
#sina,#weixin,#goodslistimg{
display: none;
}
.thumbnail img {
border: none;
max-width:130%;
height: auto;
}
.thumbnail {
border: none;
max-width:130%;
height: auto
}
#footertext{
text-align: center;
}
#phonelogo{
}
/*#shoppingcar {*/
/*position: absolute;*/
/*font-size: 20px;*/
/*line-height: 30px;*/
/*text-align: center;*/
/*height: 30px;*/
/*width: 30px;*/
/**/
/*margin-left: 200px;*/
/*border-radius: 50%;*/
/*margin-top: 120px;*/
/*}*/
/*#shoppingcar:hover {*/
/**/
/*}*/
}
</style>
</head>
<body>
<nav class="navbar navbar-fixed-top" style="background-color: rgb(57, 12, 32)">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav">
<p style="color: white">未登录</p>
</button>
<a href="http://www.mamicode.com/#" class="logo"><img src="http://www.mamicode.com/img/logo.png" ></a>
</div>
<div class="nav navbar-collapse collapse" id="mynav" >
<ul class="nav navbar-nav" id="mynav_content">
<li><a href="http://www.mamicode.com/#">English</a></li>
<li>
<a href="http://www.mamicode.com/#sub1" class="navbar-collapse"data-toggle="collapse">当前城市：北京<span class="glyphicon glyphicon-triangle-bottom"></span></a>
<ul id="sub1" class="collapse dropdown-menu">
<li><a href="http://www.mamicode.com/#">杭州</a></li>
<li><a href="http://www.mamicode.com/#">上海</a></li>
<li><a href="http://www.mamicode.com/#">广州</a></li>
<li><a href="http://www.mamicode.com/#">深圳</a></li>
</ul>
<li>
<a href="http://www.mamicode.com/#sub2" class="navbar-collapse"data-toggle="collapse">产品列表<span class="glyphicon glyphicon-triangle-bottom"></span></a>
<ul id="sub2" class="collapse dropdown-menu" >
<li><a href="http://www.mamicode.com/#">迪士尼</a></li>
<li><a href="http://www.mamicode.com/#">蛋糕</a></li>
<li><a href="http://www.mamicode.com/#">纸杯蛋糕</a></li>
<li><a href="http://www.mamicode.com/#">礼盒</a></li>
<li><a href="http://www.mamicode.com/#">挞</a></li>
<li><a href="http://www.mamicode.com/#">派</a></li>
<li><a href="http://www.mamicode.com/#">素食</a></li>
<li><a href="http://www.mamicode.com/#">礼品卡</a></li>
</ul>
</li>
<li><a href="http://www.mamicode.com/#">门店</a></li>
<li><a href="http://www.mamicode.com/#">配送须知</a></li>
<li><a href="http://www.mamicode.com/#">活动</a></li>
<li>
<a href="http://www.mamicode.com/#sub3" class="navbar-collapse" data-toggle="collapse">关于<span class="glyphicon glyphicon-triangle-bottom"></span></a>
<ul id="sub3" class="collapse dropdown-menu">
<li>我们</li>
<li>会员</li>
<li>礼品卡</li>
</ul>
</li>
<li><a href="http://www.mamicode.com/#">甜品台<img src="http://www.mamicode.com/img/new_icon.png"></a></li>
</ul>
<ul class="nav navbar-nav navbar-right" id="select_nav">
<li><a href="http://www.mamicode.com/#">登录</a></li>
<li><a href="http://www.mamicode.com/#">注册</a></li>
<li><a href="http://www.mamicode.com/#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
</ul>
</div>
</nav>
<div class="carousel slide" data-ride="carousel" id="honeycarousel">
<!--创建图片容器 -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.mamicode.com/img/1.jpg" >
</div>
<div class="item">
<img src="http://www.mamicode.com/img/2.jpg" >
</div>
<div class="item">
<img src="http://www.mamicode.com/img/3.jpg" >
</div>
<div class="item">
<img src="http://www.mamicode.com/img/4.jpg" >
</div>
<div class="item">
<img src="http://www.mamicode.com/img/5.jpg" >
</div>
</div>
<!--创建小圆点容器 -->
<ol class="carousel-indicators">
<li data-target="#honeycarousel" data-slide-to="0"></li>
<li data-target="#honeycarousel" data-slide-to="1"></li>
<li data-target="#honeycarousel" data-slide-to="2"></li>
<li data-target="#honeycarousel" data-slide-to="3"></li>
<li data-target="#honeycarousel" data-slide-to="4"></li>
</ol>
<!--创建左右按钮容器 -->
<a href="http://www.mamicode.com/#honeycarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="http://www.mamicode.com/#honeycarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="container">
<div class="panel">
<div class="panel-heading">
<a href="http://www.mamicode.com/#"><span class="glyphicon glyphicon-triangle-right"></span>产品列表</a>
</div>
</div>
<div class="row" id="row1">
<div class="col-md-3 col-xs-6">
<div class="thumbnail">
<img src="http://www.mamicode.com/img/goods1.png" >
<p><a href="http://www.mamicode.com/#">迪士尼</a></p>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="thumbnail">
<img src="http://www.mamicode.com/img/goods2.png" >
<p><a href="http://www.mamicode.com/#">礼盒</a></p>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="thumbnail">
<img src="http://www.mamicode.com/img/goods3.jpg" >
<p><a href="http://www.mamicode.com/#">蛋糕</a></p>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="thumbnail">
<img src="http://www.mamicode.com/img/goods4.png" >
<p><a href="http://www.mamicode.com/#">挞</a></p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<a href="http://www.mamicode.com/#"><span class="glyphicon glyphicon-triangle-right"></span>新品推出</a>
</div>
</div>
<div class="row" id="row2">
<div class="col-md-3 col-xs-6">
<div class="thumbnail">
<img src="http://www.mamicode.com/img/goods6.jpg" >
<p><a href="http://www.mamicode.com/#"> 纯脆提拉米苏 6吋 ￥299 </a></p>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="thumbnail">
<img src="http://www.mamicode.com/img/goods7.jpg" >
<p><a href="http://www.mamicode.com/#"> 芒果空气感蛋糕 6吋 ￥249 </a></p>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="thumbnail">
<img src="http://www.mamicode.com/img/goods8.jpg" >
<p><a href="http://www.mamicode.com/#"> 荔枝玫瑰蛋糕 6吋 ￥299 </a></p>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="thumbnail">
<img src="http://www.mamicode.com/img/goods9.jpg" >
<p><a href="http://www.mamicode.com/#"> 素食迷你纸杯礼盒 礼盒 ￥199 </a></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12" id="footertext">
<p><span class="glyphicon glyphicon-earphone" style="color=lightgreen"></span>4008-3-14159</p>
<p><span class="glyphicon glyphicon-envelope" style="color=lightgreen"></span>order@pantrysbest.com</p>
</div>
<div class="col-md-4">
<span><a href="http://www.mamicode.com/#" id="sina" ><img src="http://www.mamicode.com/img/sina.png" style=" margin-left:120px;margin-right: 20px;height: 30px;width: 30px"></a> <a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/weixin.png" id="weixin" style="height: 30px;width: 30px"></a></span>
</div>
<div class="col-md-4">
<img src="http://www.mamicode.com/img/brand-icons1.png" id="goodslistimg" style="width: 200px;height: 30px;margin-left: 150px">
</div>
</div>
<div class="row">
<div class="col-md-12"style="text-align: center">
<p>北京市朝阳区神路街39号10幢3层4段92-93</p>
<p> Copyright 2010-2017 派悦坊，Ltd 京ICP备12046340</p>
</div>
</div>
</div>
</body>
</html>
Bootstrap（项目2）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。