【项目实战：电商网站】

一、效果展示图

二、代码部分

（一）、导航栏

1.Bootstrap按钮

<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>

注：二级页面暂时没有做！

2.下拉框

  <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">服装&amp;饰品</a></li>
                        <li><a href="category.html">母婴用品&amp;</a></li>
                        <li><a href="category.html">美容&amp;保健</a></li>
                        <li><a href="category.html">电子产品</a></li>
                        <li><a href="category.html">家具</a></li>
                        <li><a href="category.html">家居&amp;园艺</a></li>
                        <li><a href="category.html">箱包</a></li>
                        <li><a href="category.html">鞋</a></li>
                        <li><a href="category.html">体育&amp;娱乐</a></li>
                        <li><a href="category.html">手表</a></li>
                        <li class="divider"></li>
                        <li><a href="category.html">所有商品分类</a></li>
                    </ul>
                </li>
            </ul>

3.登录界面

          <!--            登录界面-->
            <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>

4、导航栏完整代码

<!--导航栏-->
<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">服装&amp;饰品</a></li>
                        <li><a href="category.html">母婴用品&amp;</a></li>
                        <li><a href="category.html">美容&amp;保健</a></li>
                        <li><a href="category.html">电子产品</a></li>
                        <li><a href="category.html">家具</a></li>
                        <li><a href="category.html">家居&amp;园艺</a></li>
                        <li><a href="category.html">箱包</a></li>
                        <li><a href="category.html">鞋</a></li>
                        <li><a href="category.html">体育&amp;娱乐</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">&times;</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>

（三）、左侧产品目录

<!--
        描述：左侧产品目录
    -->
    <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-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>
                        <div class="caption">
                            <h4 class="pull-right">￥24.99</h4>
                            <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                            <p>苏泊尔</p>
                            <div class="ratings">
                                <p class="pull-right"><a href="product.html#comments">15评论</a></p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

（五）、完整代码

<!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">服装&amp;饰品</a></li>
                        <li><a href="category.html">母婴用品&amp;</a></li>
                        <li><a href="category.html">美容&amp;保健</a></li>
                        <li><a href="category.html">电子产品</a></li>
                        <li><a href="category.html">家具</a></li>
                        <li><a href="category.html">家居&amp;园艺</a></li>
                        <li><a href="category.html">箱包</a></li>
                        <li><a href="category.html">鞋</a></li>
                        <li><a href="category.html">体育&amp;娱乐</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">&times;</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>
                        <div class="caption">
                            <h4 class="pull-right">￥24.99</h4>
                            <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                            <p>苏泊尔</p>
                            <div class="ratings">
                                <p class="pull-right"><a href="product.html#comments">15评论</a></p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <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>
                        <div class="caption">
                            <h4 class="pull-right">￥24.99</h4>
                            <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                            <p>苏泊尔</p>
                            <div class="ratings">
                                <p class="pull-right"><a href="product.html#comments">15评论</a></p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <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>
                        <div class="caption">
                            <h4 class="pull-right">￥24.99</h4>
                            <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                            <p>苏泊尔</p>
                            <div class="ratings">
                                <p class="pull-right"><a href="product.html#comments">15评论</a></p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <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>
                        <div class="caption">
                            <h4 class="pull-right">￥24.99</h4>
                            <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                            <p>苏泊尔</p>
                            <div class="ratings">
                                <p class="pull-right"><a href="product.html#comments">15评论</a></p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <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>
                        <div class="caption">
                            <h4 class="pull-right">￥24.99</h4>
                            <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                            <p>苏泊尔</p>
                            <div class="ratings">
                                <p class="pull-right"><a href="product.html#comments">15评论</a></p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <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>
                        <div class="caption">
                            <h4 class="pull-right">￥24.99</h4>
                            <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                            <p>苏泊尔</p>
                            <div class="ratings">
                                <p class="pull-right"><a href="product.html#comments">15评论</a></p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <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>
                        <div class="caption">
                            <h4 class="pull-right">￥24.99</h4>
                            <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                            <p>苏泊尔</p>
                            <div class="ratings">
                                <p class="pull-right"><a href="product.html#comments">15评论</a></p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <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>
                        <div class="caption">
                            <h4 class="pull-right">￥24.99</h4>
                            <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                            <p>苏泊尔</p>
                            <div class="ratings">
                                <p class="pull-right"><a href="product.html#comments">15评论</a></p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <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>
                        <div class="caption">
                            <h4 class="pull-right">￥24.99</h4>
                            <h4><a href="product.html">1<sup>st</sup>商品</a></h4>
                            <p>苏泊尔</p>
                            <div class="ratings">
                                <p class="pull-right"><a href="product.html#comments">15评论</a></p>
                                <p>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                    <span class="glyphicon glyphicon-star"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

三、源代码

源代码