响应式餐饮类网页BootStrap

最新推荐文章于 2022-12-31 12:56:49 发布

@-花妖er

最新推荐文章于 2022-12-31 12:56:49 发布

阅读量1.1w

点赞数 47

分类专栏：前端文章标签： bootstrap html css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_44270748/article/details/106275847

版权

前端专栏收录该内容

2 篇文章 5 订阅

订阅专栏

响应式餐饮类网页

简介：此网页利用BootStrap进行响应式web设计，包括布局容器、制作表单和按钮、导航栏、轮播事件、标签页以及BootStrap的栅格系统等。

先上效果图
1.首页全局
网页全局
2.首页随机变化
在这里插入图片描述

步骤：

1).完成网页header部分

2).完成网页搜索模块

3).完成热卖商品模块

4).完成特色推荐模块

5).完成轮播广告模块

6).整合所有模块，完成footer部分
-----成品).

代码块

1).完成网页header部分


<!DOCTYPE html>
 <!--
            /*（1）导航部分使用BootStrap导航栏完成
            （2）logo图片放在class="navbar-left"的<div>标签中
            （3）购物车图片放在class="navbar-right"的<div>标签中
            (4)其余菜单放在class="navbar-nav"的菜单中
            .navbar-brand:通过该类设置logo部分图片的宽高位置等
            .navbar-default、navbar-nav:通过此类设置导航菜单的样式，如鼠标悬停变色的效果等
            .navbar-right:通过该类设置导航右侧购物车部分的样式*/
      -->
<html>
    <head>
        <title>餐饮网站header部分</title>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--引入Bootstrap-->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
        /*设置body元素字体为Microso YaHei*/
        body {font-family: Microsoft YaHei;}
        .head-top{
            background: #5fa022;
            padding:0.8em 0;
        }
        .navbar-brand{
            padding: 0 0;
        }
        /*设置图片logo的大小和位置*/
        .navbar-brand>img{
            height: auto;
            margin-right: 5px;
            margin-top: 5px;
            width: 250px;
        }
        /*设置整个导航菜单的内边距、背景色和阴影*/
        .navbar-default{
            padding: 1.5em 0;
            background-color:#f2f0f1 ;
            box-shadow:12px -5px 39px -12px;
        }
        /*设置导航栏中菜单a链接的样式*/
        .navbar-default .navbar-nav>li a{
            top:10px;
            padding:0.5em 3em;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.2em;
            color:#919191;
        }
        /*设置导航栏菜单鼠标悬停和获取焦点时的状态*/
        .navbar-default .navbar-nav>li>a:hover,
        .navbar-default .navbar-nav>li>a:focus{
            background: #D96B66;
            color:white;
            border-radius: 3px;
            -webkit-border-radius:3px;
        }
        /*设置导航栏右侧a链接（0.00）的颜色*/
        .navbar-right>a{
            color:#D96B66;

        }
        /*媒体查询：当视口小于970px时，导航菜单字体变小，避免了换行的问题*/
        @media (max-width:970px){
            .navbar-default .navbar-nav>li a{
                font-size: 1.1em;
            }
        }    
        </style>    
    </head>
    <body>
        <!--header-->
    <header>
        <div class="head-top"></div>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="container">
                <div class="navbar-header">
                    <!--<div class="log"-->
                        <a href="#" class="navbar-brand"><img src="images/logo.png" alt=""></a>
                        <!--</div>-->
                        <!--当进入最小设备时，导航条将隐藏，显示汉堡按钮，单击时可以切换显示导航条隐藏的信息*data-target:用于确认需要显示的div-->
                        <button type="button" class="navbar-toggle collapsed"
                        data-toggle="collapse" data-target="#navbar-collapse"
                        aria-expanded="false">
                        <span class="sr-only">汉堡按钮</span>
                        <sapn class="icon-bar"></sapn>
                        <sapn class="icon-bar"></sapn>
                        <sapn class="icon-bar"></sapn>
                    </button>
                </div>    
                    <!--导航链接、表单和其他内容切换-->
                    <div class="collapse navbar-collapse" id="navbar-collapse">
                        <ul class="nav navbar-nav">
                            <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 class="navbar-right">
                            <a href="#"><h3><span>￥0.00<img src="images/bag.png" alt=""></span></h3></a>
                        </div>
                    </div>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </div>
        </nav>
    </header>    
    <!--header-->
    <!--jQuery (Bootstrap的JavaScript插件需要引入jQuery)-->
    <script src="jquery/jquery-1.12.4.min.js"></script>
    <!--包括所有已经编译的插件-->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

2).完成网页搜索模块

<!DOCTYPE html>
<html>
    <head>
        <title>餐饮网站搜索区域</title>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--引入Bootstrap-->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
        /*为下面字体设置*/
        body,button,input,select{font-family: Microsoft YaHei;}
        /*设置搜索区域*/
        /*设置搜索按钮前面的图标*/
        .search{
            background-image: url(images/banner.jpg);
            background-size: cover;
            -webkit-background-size:cover;
            min-height: 600px;
            margin-top: -20px;
        }
        /*设置搜索框外层div样式，形成白色透明背景*/
        .reservation{
            padding: 60px 60px;
            width: 50%;
            background: rgba(255, 255, 255, 0.7);
            margin: 0 auto;
            margin-top: 15%;
            font-weight: 500;
            color:#f2f0f1;
            font-size: 1.2em;
            outline: none;
        }
        /*设置”搜索按钮的样式“*/
        .btn{
            width: 50%;
            background: #D96B66;
            color: #fff;
            padding: 5px;
            border: none;
            border-radius: 4px;
            -webkit-border-radius:4px;
        }
        .form-control{
            color: #8e908d;
        }
        .searchbtn{
            text-align: center;
        }
        /*媒体查询*/
        @media (max-width: 768px){
            .reservation{
                padding: 20px 20px;
                width: 90%;
            }
        }

        </style>

    </head>

    <body>
        <!--搜索区域-->
        <div class="search">
            <div class="container">
                <div class="reservation">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <input type="text" class="form-control input-lg"
                                    id="name" placeholder="请输入餐厅名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12 col-md-12 col-lg-12">
                                <select id="country" class="form-control input-lg">
                                    <option value="null">请选择城市</option>
                                    <option value="bj">北京</option>
                                    <option value="sh">上海</option>
                                    <option value="sz">深圳</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="searchbtn">
                                    <button type="submit" class="btn btn-success btn-lg">
                                        <img src="images/search-icon.png">&nbsp;搜索
                                    </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--搜索区域结束-->
        <script src="jquery/jquery-1.12.4.min.js"></script>

        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>

</html>

3).完成热卖商品模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>餐饮网站热卖模块</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        /*为页面中以下元素设置字体*/
        body,h3,h6{font-family: Microsoft YaHei;}
        /*热卖商品*/
        .hot h3{
            margin-top: -20px;
            color:#1A1A1A;
            font-size: 1.5em;
            font-weight: 600;
            margin: 0 0 1em;
            padding: 0 0 0.5em;
            border-bottom: 2px solid #eee;
        }
        .hot p{
            color:#5fa022;
            font-size: 1em;
            font-weight: 400;
            line-height: 1.8em;
            margin: 1em 0;
        }
        .hot{
            padding: 3em 0;
            border: 1px solid #eee;
            margin: 0 0;
        }
        .hot h6{
            color:#C15162;
            font-size: 1.5em;
            font-weight: 400;
            margin: 0.3em 0;
        }
        a.morebtn{
            display: block;
            font-size: 1em;
            color:#FFF;
            text-decoration: none;  /*去除下划线*/
            font-weight: 400;
            background: #D96B66;
            padding: 10px 18px;
            transition: 0.5s all ease;
            -webkit-transition: 0.5s all ease;
            border-radius: 3px;
            -weblit-border-radius:3px;
        }
        a.morebtn:hover{
            background:#5fa022;
        }
        @media(max-width:1024px)
{
    a.morebtn{
        max-width:410px;/*当窗口小于1024时按钮的最大宽度*/
    }
}

    </style>




</head>
<body>
   <!--热卖商品-->
   <div class="hot">
    <div class="container">
        <div class="col-md-4">
            <h3>米西奈斯煎饼</h3>
            <img src="images/4.jpg" class="img-responsive" alt="">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择</p>
                <div class="cur">
                    <span><a class="morebtn" href="#">添加到购物车</a></span>
                    <span><h6>一口价：￥45.00</h6></span>
                </div>
            </div>
        </div>
        <div class="col-md-4"><h3>蒙特斯大虾</h3>
        <img src="images/1.jpg" class="img-responsive" alt="蒙特斯大虾">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择</p>
                <div class="cur">
                    <span><a class="morebtn" href="#">添加到购物车</a></span>
                    <span><h6>一口价：￥55.00</h6></span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h3>香酥鸡排</h3>
            <img src="images/3.jpg" class="img-responsive" alt="香酥鸡排">
                <div>
                        <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择</p>
                        <div class="cur">
                            <span><a class="morebtn" href="#">添加到购物车</a></span>
                            <span><h6>一口价：￥65.00</h6></span>
                        </div>
                </div>        
        </div>
    </div>


   </div>
    


    <script src="jquery/jquery-1.12.4.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

4).完成特色推荐模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>餐饮网站特色推荐模块</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
 /*为页面中以下元素设置字体*/
 body{font-family: Microsoft YaHei;}
/*特色推荐*/
/*设置左上角图片位置和宽高*/
.navbar-brand>img{
    height: auto;
    width: 250px;
    margin-right: 5px;
    margin-top: 5px;
}
/*设置选项卡菜单的字体颜色*/
.nav-pills>li>a{
    color:#8e908d;
}
/*设置选项卡菜单鼠标悬停和获取焦点时的背景色和字体颜色*/
.nav-pills>li.active>a, .nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover{
    color:#fff;
    background-color: #5A9522;
}
    .choose{
        border:1px solid silver;
    }
    /*设置选项卡内容位置*/
    .tab-content{
        margin: 5px;
        text-align: center;/*居中*/
    }


</style>

</head>
<body>
 <!--特色推荐-->
    <div class="container">
        <div class="choose">
            <div class="row">
                <div class="col-md-12">
                    <div class="navbar-header hidden-xs">
                        <a class="navbar-brand" href="#"><img src="images/title.jpg" sizes="100px"/></a>
                    </div>
                    <!--选项卡菜单-->
                    <ul class="nav nav-pills navbar-right" role="tablist" style="margin-right: 0px;">
                        <li role="presentation" class="active"><a href="#dishes" role="tab" data-toggle="tab">菜品</a></li>
                        <li role="presentation" ><a href="#drink" role="tab" data-toggle="tab">饮品</a></li>
                        <li role="presentation" ><a href="#staple" role="tab" data-toggle="tab">主食</a></li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="tab-content">
                        <!--菜品-->
                        <div role="tabpanel" class="tab-pane active" id="dishes">
                            <div class="col-md-2 col-sm-4 col-xs-6">
                                <img src="images/products/small01.jpg"/>
                                <p>菜品</p>
                                <p>￥：145.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                    <img src="images/products/small02.jpg"/>
                                    <p>菜品</p>
                                    <p>￥：165.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                        <img src="images/products/small04.jpg"/>
                                        <p>菜品</p>
                                        <p>￥：165.0</p>
                            </div> 
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                    <img src="images/products/small02.jpg"/>
                                    <p>菜品</p>
                                    <p>￥：165.0</p>
                                </div>
                             <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                        <img src="images/products/small07.jpg"/>
                                        <p>菜品</p>
                                        <p>￥：145.0</p>
                            </div>       
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                    <img src="images/products/small08.jpg"/>
                                    <p>菜品</p>
                                    <p>￥：165.0</p>
                            </div>
                        </div>
                        <!--饮品-->
                        <div role="tabpanel" class="tab-pane" id="drink">
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="images/products/small03.jpg"/>
                                <p>饮品</p>
                                <p>￥：98.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                    <img src="images/products/small03.jpg"/>
                                    <p>饮品</p>
                                    <p>￥：98.0</p>
                                </div>
                        </div>
                        <!--主食-->
                        <div role="tabpanel" class="tab-pane" id="staple">
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                        <img src="images/products/small05.jpg"/>
                                        <p>主食</p>
                                        <p>￥：98.0</p>
                             </div>    
                             <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                    <img src="images/products/small06.jpg"/>
                                    <p>主食</p>
                                    <p>￥：98.0</p>
                                </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                        <img src="images/products/small09.jpg"/>
                                        <p>主食</p>
                                        <p>￥：98.0</p>
                            </div>       

                        </div>
                       
                    </div>

                </div>
            </div>


        </div>
    </div>

<!--特色推荐结束-->
<!--jQuery(Bootstrap的JavaScript插件需要引入jQuery)-->
<script src="jquery/jquery-1.12.4.min.js"></script>
<!--包括所有已编译的插件-->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

5).完成轮播广告模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>餐饮网站轮播广告模板</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /*轮播广告*/
        .pic{
            margin: 0 auto;
            width: 800px;
            padding: 20px;
        }
        .carousel{
            background: white;
        }
        /*媒体查询：当视口小于992px时缩小了轮播div的宽度，图片换行*/
        @media(max-width:992px){
            .pic{
                width: 415px;
            }
        }
    </style>
</head>
<body>
    <!--轮播广告-->
    <div class="container hidden-xs">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!--轮播Carousel项目-->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="pic">
                        <img src="images/1p.jpg" alt="">
                        <img src="images/2p.jpg" alt="">
                        <img src="images/3p.png" alt="">
                        <img src="images/4p.jpg" alt="">
                        <img src="images/5p.jpg" alt="">
                        <img src="images/6p.jpg" alt="">
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="images/2p.jpg" alt="">
                        <img src="images/3p.png" alt="">
                        <img src="images/4p.jpg" alt="">
                        <img src="images/5p.jpg" alt="">
                        <img src="images/6p.jpg" alt="">
                        <img src="images/7p.jpg" alt="">
                    </div>
                </div>
                <div class="item">
                        <div class="pic">
                            <img src="images/3p.png" alt="">
                            <img src="images/4p.jpg" alt="">
                            <img src="images/5p.jpg" alt="">
                            <img src="images/6p.jpg" alt="">
                            <img src="images/7p.jpg" alt="">
                            <img src="images/8p.jpg" alt="">
                        </div>
                    </div>
                <div class="item">
                        <div class="pic">
                            <img src="images/4p.jpg" alt="">
                            <img src="images/5p.jpg" alt="">
                            <img src="images/6p.jpg" alt="">
                            <img src="images/7p.jpg" alt="">
                            <img src="images/8p.jpg" alt="">
                            <img src="images/1p.jpg" alt="">
                        </div>
                    </div>
                <div class="item">
                        <div class="pic">
                                <img src="images/5p.jpg" alt="">
                                <img src="images/6p.jpg" alt="">
                                <img src="images/7p.jpg" alt="">
                                <img src="images/8p.jpg" alt="">
                                <img src="images/1p.jpg" alt="">
                                <img src="images/2p.jpg" alt="">
                        </div>
                </div>    
                <div class="item">
                        <div class="pic">
                                <img src="images/6p.jpg" alt="">
                                <img src="images/7p.jpg" alt="">
                                <img src="images/8p.jpg" alt="">
                                <img src="images/1p.jpg" alt="">
                                <img src="images/2p.jpg" alt="">
                                <img src="images/3p.png" alt="">
                            </div>
                    </div>    
                    <div class="item">
                            <div class="pic">
                                <img src="images/7p.jpg" alt="">
                                <img src="images/8p.jpg" alt="">
                                <img src="images/1p.jpg" alt="">
                                <img src="images/2p.jpg" alt="">
                                <img src="images/3p.png" alt="">
                                <img src="images/4p.jpg" alt="">
                            </div>
                    </div>            
                    <div class="item">
                            <div class="pic">            
                                <img src="images/8p.jpg" alt="">
                                <img src="images/1p.jpg" alt="">
                                <img src="images/2p.jpg" alt="">
                                <img src="images/3p.png" alt="">
                                <img src="images/4p.jpg" alt="">
                                <img src="images/5p.jpg" alt="">
                            </div>
                    </div>                    

            </div>
            <!--轮播导航-->
            <a class="carousel-control left" href="#myCarousel" role="button" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" role="button" data-slide="next">&rsaquo;</a>
            

        </div>

    </div>





<!--轮播广告结束-->
<!--jQuery(Bootstrap的JavaScript插件需要引入jQuery)-->
<script src="jquery/jquery-1.12.4.min.js"></script>
<!--包括所有已编译的插件-->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

6).整合所有模块，完成footer部分
-----成品).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式餐饮类网页完整版</title>
    <!--引入Bootstrap-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--引入CSS-->
    <link href="spiceFood.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
    <!--header-->
    <header>
            <div class="head-top"></div>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="container">
                    <div class="navbar-header">
                        <!--<div class="log"-->
                            <a href="#" class="navbar-brand"><img src="images/logo.png" alt=""></a>
                            <!--</div>-->
                            <!--当进入最小设备时，导航条将隐藏，显示汉堡按钮，单击时可以切换显示导航条隐藏的信息*data-target:用于确认需要显示的div-->
                            <button type="button" class="navbar-toggle collapsed"
                            data-toggle="collapse" data-target="#navbar-collapse"
                            aria-expanded="false">
                            <span class="sr-only">汉堡按钮</span>
                            <sapn class="icon-bar"></sapn>
                            <sapn class="icon-bar"></sapn>
                            <sapn class="icon-bar"></sapn>
                        </button>
                    </div>    
                        <!--导航链接、表单和其他内容切换-->
                        <div class="collapse navbar-collapse" id="navbar-collapse">
                            <ul class="nav navbar-nav">
                                <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 class="navbar-right">
                                <a href="#"><h3><span>￥0.00<img src="images/bag.png" alt=""></span></h3></a>
                            </div>
                        </div>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </div>
            </nav>
        </header>    
        <!--header-->
          <!--搜索区域-->
          <div class="search">
                <div class="container">
                    <div class="reservation">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                            <div class="col-sm-12 col-md-12 col-lg-12">
                                <input type="text" class="form-control input-lg"
                                        id="name" placeholder="请输入餐厅名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12 col-md-12 col-lg-12">
                                    <select id="country" class="form-control input-lg">
                                        <option value="null">请选择城市</option>
                                        <option value="bj">北京</option>
                                        <option value="sh">上海</option>
                                        <option value="sz">深圳</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="searchbtn">
                                        <button type="submit" class="btn btn-success btn-lg">
                                            <img src="images/search-icon.png">&nbsp;搜索
                                        </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!--搜索区域结束-->
            <!--热卖商品-->
   <div class="hot">
        <div class="container">
            <div class="col-md-4">
                <h3>米西奈斯煎饼</h3>
                <img src="images/4.jpg" class="img-responsive" alt="">
                <div>
                    <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择</p>
                    <div class="cur">
                        <span><a class="morebtn" href="#">添加到购物车</a></span>
                        <span><h6>一口价：￥45.00</h6></span>
                    </div>
                </div>
            </div>
            <div class="col-md-4"><h3>蒙特斯大虾</h3>
            <img src="images/1.jpg" class="img-responsive" alt="蒙特斯大虾">
                <div>
                    <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择</p>
                    <div class="cur">
                        <span><a class="morebtn" href="#">添加到购物车</a></span>
                        <span><h6>一口价：￥55.00</h6></span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <h3>香酥鸡排</h3>
                <img src="images/3.jpg" class="img-responsive" alt="香酥鸡排">
                    <div>
                            <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择</p>
                            <div class="cur">
                                <span><a class="morebtn" href="#">添加到购物车</a></span>
                                <span><h6>一口价：￥65.00</h6></span>
                            </div>
                    </div>        
            </div>
        </div>
       </div>
       <!--热卖商品结束-->
       <!--特色推荐-->
    <div class="container">
            <div class="choose">
                <div class="row">
                    <div class="col-md-12">
                        <div class="navbar-header hidden-xs">
                            <a class="navbar-brand" href="#"><img src="images/title.jpg" sizes="100px"/></a>
                        </div>
                        <!--选项卡菜单-->
                        <ul class="nav nav-pills navbar-right" role="tablist" style="margin-right: 0px;">
                            <li role="presentation" class="active"><a href="#dishes" role="tab" data-toggle="tab">菜品</a></li>
                            <li role="presentation" ><a href="#drink" role="tab" data-toggle="tab">饮品</a></li>
                            <li role="presentation" ><a href="#staple" role="tab" data-toggle="tab">主食</a></li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="tab-content">
                            <!--菜品-->
                            <div role="tabpanel" class="tab-pane active" id="dishes">
                                <div class="col-md-2 col-sm-4 col-xs-6">
                                    <img src="images/products/small01.jpg"/>
                                    <p>菜品</p>
                                    <p>￥：145.0</p>
                                </div>
                                <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                        <img src="images/products/small02.jpg"/>
                                        <p>菜品</p>
                                        <p>￥：165.0</p>
                                </div>
                                <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                            <img src="images/products/small04.jpg"/>
                                            <p>菜品</p>
                                            <p>￥：165.0</p>
                                </div> 
                                <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                        <img src="images/products/small02.jpg"/>
                                        <p>菜品</p>
                                        <p>￥：165.0</p>
                                    </div>
                                 <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                            <img src="images/products/small07.jpg"/>
                                            <p>菜品</p>
                                            <p>￥：145.0</p>
                                </div>       
                                <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                        <img src="images/products/small08.jpg"/>
                                        <p>菜品</p>
                                        <p>￥：165.0</p>
                                </div>
                            </div>
                            <!--饮品-->
                            <div role="tabpanel" class="tab-pane" id="drink">
                                <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                    <img src="images/products/small03.jpg"/>
                                    <p>饮品</p>
                                    <p>￥：98.0</p>
                                </div>
                                <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                        <img src="images/products/small03.jpg"/>
                                        <p>饮品</p>
                                        <p>￥：98.0</p>
                                    </div>
                            </div>
                            <!--主食-->
                            <div role="tabpanel" class="tab-pane" id="staple">
                                <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                            <img src="images/products/small05.jpg"/>
                                            <p>主食</p>
                                            <p>￥：98.0</p>
                                 </div>    
                                 <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                        <img src="images/products/small06.jpg"/>
                                        <p>主食</p>
                                        <p>￥：98.0</p>
                                    </div>
                                <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                            <img src="images/products/small09.jpg"/>
                                            <p>主食</p>
                                            <p>￥：98.0</p>
                                </div>           
                            </div>                         
                        </div>   
                    </div>
                </div>   
            </div>
        </div>
    
    <!--特色推荐结束-->
    <!--轮播广告-->
    <div class="container hidden-xs">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!--轮播Carousel项目-->
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="pic">
                            <img src="images/1p.jpg" alt="">
                            <img src="images/2p.jpg" alt="">
                            <img src="images/3p.png" alt="">
                            <img src="images/4p.jpg" alt="">
                            <img src="images/5p.jpg" alt="">
                            <img src="images/6p.jpg" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <div class="pic">
                            <img src="images/2p.jpg" alt="">
                            <img src="images/3p.png" alt="">
                            <img src="images/4p.jpg" alt="">
                            <img src="images/5p.jpg" alt="">
                            <img src="images/6p.jpg" alt="">
                            <img src="images/7p.jpg" alt="">
                        </div>
                    </div>
                    <div class="item">
                            <div class="pic">
                                <img src="images/3p.png" alt="">
                                <img src="images/4p.jpg" alt="">
                                <img src="images/5p.jpg" alt="">
                                <img src="images/6p.jpg" alt="">
                                <img src="images/7p.jpg" alt="">
                                <img src="images/8p.jpg" alt="">
                            </div>
                        </div>
                    <div class="item">
                            <div class="pic">
                                <img src="images/4p.jpg" alt="">
                                <img src="images/5p.jpg" alt="">
                                <img src="images/6p.jpg" alt="">
                                <img src="images/7p.jpg" alt="">
                                <img src="images/8p.jpg" alt="">
                                <img src="images/1p.jpg" alt="">
                            </div>
                        </div>
                    <div class="item">
                            <div class="pic">
                                    <img src="images/5p.jpg" alt="">
                                    <img src="images/6p.jpg" alt="">
                                    <img src="images/7p.jpg" alt="">
                                    <img src="images/8p.jpg" alt="">
                                    <img src="images/1p.jpg" alt="">
                                    <img src="images/2p.jpg" alt="">
                            </div>
                    </div>    
                    <div class="item">
                            <div class="pic">
                                    <img src="images/6p.jpg" alt="">
                                    <img src="images/7p.jpg" alt="">
                                    <img src="images/8p.jpg" alt="">
                                    <img src="images/1p.jpg" alt="">
                                    <img src="images/2p.jpg" alt="">
                                    <img src="images/3p.png" alt="">
                                </div>
                        </div>    
                        <div class="item">
                                <div class="pic">
                                    <img src="images/7p.jpg" alt="">
                                    <img src="images/8p.jpg" alt="">
                                    <img src="images/1p.jpg" alt="">
                                    <img src="images/2p.jpg" alt="">
                                    <img src="images/3p.png" alt="">
                                    <img src="images/4p.jpg" alt="">
                                </div>
                        </div>            
                        <div class="item">
                                <div class="pic">            
                                    <img src="images/8p.jpg" alt="">
                                    <img src="images/1p.jpg" alt="">
                                    <img src="images/2p.jpg" alt="">
                                    <img src="images/3p.png" alt="">
                                    <img src="images/4p.jpg" alt="">
                                    <img src="images/5p.jpg" alt="">
                                </div>
                        </div>                    
                </div>
                <!--轮播导航-->
                <a class="carousel-control left" href="#myCarousel" role="button" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" role="button" data-slide="next">&rsaquo;</a>
            </div>
        </div>
    <!--轮播广告结束-->
    <!--footer-->
    <footer class="footer">
        <div class="container">
            <div class="footer-left">
                <p>YING@ 2019 BootStrap 响应式餐饮网站 | 版权所有<a href="#"></a></p>
            </div>
            <div class="footer-right">
                <ul>
                    <li><a href="#"><i class="glyphicon glyphicon-phone-alt">&nbsp;联系我们</i></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-map-marker">&nbsp;公司地址</i></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-question-sign">&nbsp;服务声明</i></a></li>
                </ul>
            </div>
        </div>
    </footer>

    <!--jQuery(Bootstrap的JavaScript插件需要引入jQuery)-->
<script src="jquery/jquery-1.12.4.min.js"></script>
<!--包括所有已编译的插件-->
<script src="bootstrap/js/bootstrap.min.js"></script> 
</body>
</html>

完整代码：移步https://github.com/zninger0823/foodweb
在这里插入图片描述

关注

47
点赞
踩
293

收藏

觉得还不错? 一键收藏
16
评论
响应式餐饮类网页BootStrap

响应式餐饮类网页简介：此网页利用BootStrap进行响应式web设计，包括布局容器、制作表单和按钮、导航栏、轮播事件、标签页以及BootStrap的栅格系统等。先上效果图1.首页全局2.首页随机变化步骤：1).完成网页header部分2).完成网页搜索模块3).完成热卖商品模块4).完成特色推荐模块5).完成轮播广告模块6).整合所有模块，完成footer部分-----成品).代码块1).完成网页header部分<!DOCTYPE html> <!-
复制链接

扫一扫

专栏目录

评论 16

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。