Bootstrap 做网页需要布局，轮播图，缩略图，表格，表单等元素。

于 2022-03-15 15:42:47 发布
阅读量1.1k 收藏 7
点赞数
分类专栏： 笔记 文章标签： bootstrap css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56340497/article/details/123504231
版权 
<!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="img/images/f_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="img/images/magnify.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="img/images/big2.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="img/images/big3.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="img/images/big5.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="img/images/logo.png" 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="img/images/blur_img2.jpg"/>
                                    <p>菜品</p>
                                    <p>￥：145.0</p>
                                </div>
                                <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                        <img src="img/images/blur_img3.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>

大学生（Snowflake）first
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）
01-19
本文算是bootstrap学习使用的年底大总结，供大家参考，具体内容如下 bootstrap框架 BootStrap学习从现在开始，前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢。 <!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, ini
用Bootstrap做一款酷炫的个人简历.rar
02-19
JavaScript插件则提供了诸如模态框、下拉菜单和轮播图等动态效果。 在制作个人简历时，Bootstrap的响应式设计尤为重要。这意味着你的简历在桌面、平板电脑和手机上都能保持良好的显示效果。你可以利用Bootstrap的...
Bootstrap3的响应式缩略图幻灯轮播效果设计
amkokq884222的博客
01-07 509
在线演示1 本地下载 HTML <divclass="container"> <divclass="col-md-12"> <h3>Bootstrap3缩略图幻灯画廊效果</h3> </div> </div> <divclass="con...
网站前端_Bootstrap排版/列表/表格/表单/按钮/图像1
weixin_34023863的博客
03-03 204
2019独角兽企业重金招聘Python工程师标准>>> ...
用Bootstrap网站主页(轮播图、导航栏、栅格系统)
weixin_622464的博客
11-11 3396
效果如图： 主要代码： index.html <!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-w
23.2 Bootstrap框架3
最新发布
10-04
6. **类型和文本工具**: Bootstrap 提供了多种文本相关的类，如对齐方式、行高、字体样式等，以及用于代码、引用、列表和缩略图的工具，方便快速美化文本内容。 7. **表格和表单**: Bootstrap 3提供了预设样式的...
值得分享和收藏的Bootstrap学习教程
09-02
基础排版、表格、表单、按钮等元素的使用方法也是基础知识中的重点，这些元素构成了网页的基本视觉和交互元素。 接下来，Bootstrap的组件教程将更深入地探讨各种组件的使用。下拉菜单、导航、导航条、标签与徽章、...
Bootstrap3通用商城前端模板VqP.zip
08-28
这些资源共同构建了一个强大的工具包，简化了网页布局、导航、表格、表单、按钮、模态框等常见元素的设计和实现。 模板中包含的`index.html`是主页面文件，它是整个商城的入口，通常包括头部导航、轮播图、商品分类...
带缩略图轮播效果（全屏切换）
12-17
插件描述：点击缩略图或点击缩略图左右按钮进行切换. 参考示例：http://www.jq22.com/jquery-info5141
Bootstrap3制作图片轮播效果
11-26
先来看看Bootstrap图片轮播效果： 上面就是为大家分享的效果，不过这是网易云音乐的首页。 这样的效果记得最先在ios7的官方控件库中出现之后安卓也在某个版本加入了这个view，设计是通用的啊..bootstrap3也支持在web中使用这样的效果。 接下来进行简单分析： 一 . 结构分析 一个轮播图片主要包括三个部分： 　　:ballot_box_with_check: 轮播的图片 　　:ballot_box_with_check: 轮播图片的计数器 　　:ballot_box_with_check: 轮播图片的控制器 第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。 复制代码 代码如下:<div id=
Bootstrap学习笔记系列2-------Bootstrap简单表格处理
aitukang0425的博客
11-12 150
标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素，用来识别列 <tbody> 表格主提中的表格行的容器元素 <tr> 单行的容器元素，用来存放 <th> 在中使用，用来存放列名单元格 <td> 表数据单元格 <caption> 关于表格存储内容的描述或者总结 应用于表格样式...
简单登录界面 bootstrap实现 带导航栏、下拉菜单
NULL
10-10 1818
效果图如下： HTML代码为： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap</title> <link rel="stylesheet" href="https://cdn.staticf...
网站首页 - 导航条和轮播图的实现(bootstrap)
XiaoJian的博客
10-05 6598
Bootstrap: 组件 (静态CSS) JS插件(动态JS) 组件 反色导航条: 基本都是去bootstrap官网(组件-导航条)复制过来, 改一改文字內容即可. bootstrap可参考: https://blog.csdn.net/qq_42986107/article/details/82929465 &amp;amp;lt;!-- 反色导航条组件 --&amp;amp;gt; &amp;amp;lt;nav class...
Bootstrap(3)__Bootstrap基础<导航,轮播,下拉表>
Richard_xx的博客
08-11 1861
下拉菜单 dropdown">//dropdoup上啦 <button class="btn btn-default" data-toggle="dropdown">//开关 下拉菜单 dropdown-menu"> 北京 成都 上海 阆中   //1.菜单项向右对齐,默认是dropdown-menu-left   //2.设置菜单的标题(不要加超链接
bootstrap缩略图（21）
qq_43687284的博客
12-29 241
Bootstrap 缩略图 本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。 Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下： 在图像周围添加带有 class .thumbnail 的 &lt;a&gt; 标签。 这会添加四个像素的内边距（padding）和一个灰色的边框。 当鼠标悬停在图像上时，会动...
bootstrap轮播
ttn456456的博客
03-09 313
&lt;div id="myCarousel" class="carousel slide"&gt; &lt;div class="carousel-inner"&gt; &lt;div class="item active"&gt; &lt;img src="images/" alt="First slide&quot
用bootstrap做一个轮播图
05-11
你还需要在页面中包含以下Bootstrap CSS和JS文件，以便轮播图正常工作： ```html <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大学生（Snowflake）first

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值