<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--上述2个meta标签必须放在最前面，任何其他内容都必须放在后面-->
<title>Bootstrap Store</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<style>
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<!--导航栏-->
<nav class="navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapse" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<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="ecommerce.html">Bootstrap</a>
</div>
<!-- 下拉框-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="active dropdown-toggle" data-toggle="dropdown">所有商品分类
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="category.html">服装&饰品</a></li>
<li><a href="category.html">母婴用品&</a></li>
<li><a href="category.html">美容&保健</a></li>
<li><a href="category.html">电子产品</a></li>
<li><a href="category.html">家具</a></li>
<li><a href="category.html">家居&园艺</a></li>
<li><a href="category.html">箱包</a></li>
<li><a href="category.html">鞋</a></li>
<li><a href="category.html">体育&娱乐</a></li>
<li><a href="category.html">手表</a></li>
<li class="divider"></li>
<li><a href="category.html">所有商品分类</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<span class="badge pull-right">4</span>
<i class="glyphicon glyphicon-shopping-cart"></i>
</a>
</li>
<li>
<a href="account.html">
<i class="glyphicon glyphicon-user"></i>
</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#myModal">登录</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="model">
<span aria-hidden="true">×</span>
<span class="sr-only">关闭</span>
</button>
<h2 class="modal-title" id="myModalLabel">登录</h2>
</div>
<!-- 登录界面-->
<div class="modal-body">
<form class="form-signin" role="form">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" placeholder="电子邮箱" required autofocus>
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="password" class="form-control" placeholder="密码" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"/>记住用户名
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>
</div>
</div>
</div>
</div>
<!--轮播图-->
<div id="content" class="container">
<div class="row carousel-holder">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="slide-image" src="img/轮播图.jpg">
</div>
<div class="item">
<img class="slide-image" src="img/轮播图.jpg">
</div>
<div class="item">
<img class="slide-image" src="img/轮播图.jpg">
</div>
</div>
<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="prev">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<hr/>
<!--
描述：左侧产品目录
-->
<div class="row">
<div class="col-sm-4 col-md-3">
<h3>产品目录</h3>
<div class="list-group">
<a href="category.html" class="list-group-item">服装&饰品</a>
<a href="category.html" class="list-group-item">母婴用品</a>
<a href="category.html" class="list-group-item">美容&保健</a>
<a href="category.html" class="list-group-item">电子产品</a>
<a href="category.html" class="list-group-item">家具</a>
<a href="category.html" class="list-group-item">家居&园艺</a>
<a href="category.html" class="list-group-item">箱包</a>
<a href="category.html" class="list-group-item">鞋</a>
<a href="category.html" class="list-group-item">体育&娱乐</a>
<a href="category.html" class="list-group-item">手表</a>
</div>
</div>
<!--商品展示图-->
<div class="col-sm-8 col-md-9">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/商品展示图.jpg" alt=""/>
<div class="add-to-cart">
<a href="#" class="glyphicon glyphicon-plus-sign" data-toggle="tooltip" data-placement="top"
title="添加购物车"></a>
</div>
Bootstrap&jQuery项目实战：电商网站
需积分: 20 68 浏览量
2022-03-16
09:00:23
上传
评论 2
收藏 3.36MB ZIP 举报
电商网站.zip （16个子文件） 
电商网站 css 
bootstrap.min.css 118KB img 
2.jpg 70KB 1.jpg 66KB 3.jpg 34KB
cc.png 3.02MB logo.png 7KB 轮播图.jpg 7KB 商品展示图.jpg 6KB fonts glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.woff2 18KB glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB
index.html 20KB js jquery-3.3.1.min.js 85KB bootstrap.min.js 36KB
评论0