Web前端-Bootstrap（五）

最新推荐文章于 2023-04-12 22:52:40 发布
最新推荐文章于 2023-04-12 22:52:40 发布
阅读量981 收藏 7
点赞数 1
分类专栏： # 计算机（Java进阶）初级进阶 阶段 文章标签： html5 前端 jquery css bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42171159/article/details/125179529
版权

文章目录

一、认识BootStrap

1.1、需求说明

将使用Bootstrap写首页，整个案例中将使用到Bootstrap各种模块，为了方便编程，将采用拆分的原则，各个模块单独编写。

1.2、知识点-BootStrap（一）

1.2.1、bootstrap概述

1.2.1.1、什么是bootstrap？bootstrap的作用？

Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。（底层封装了html，css，js）
该框架已经预定义了一套CSS样式和与样式对应的JS代码。
开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。

<div class=””><div>

作用：

①Bootstrap 使得 Web 开发更加快捷，高效。
②BootStrap支持响应式开发，解决了移动互联网前端开发问题

课外了解知识：
该框架由Twitter 公司的设计师Mark Otto和Jacob Thornton合作开发。
Bootstrap基础入门使用的都是自带CSS样式，高级开发中需要使用HTML5、CSS3、动态CSS语言Less 进行自定义开发，JavaEE课程中学习是“基础入门”。

中文官网

所涉及资料下载

1.2.1.2、什么是响应式布局？响应式布局解决的问题？

BootStrap

响应式布局：一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独做一个展示版本。
5.5寸，展示5.5寸的样式。7.9寸，展示7.9寸的样式
此概念专为解决移动互联网浏览而诞生的。
响应式布局，使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开发维护成本，并且能带给用户更好的体验性

1.2.2、bootstrap环境搭建

1.2.2.1、下载

下载资源
在这里插入图片描述

1.2.2.2、目录结构

在这里插入图片描述

1.2.2.3、bootstrap引入

在这里插入图片描述
在这里插入图片描述
测试案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
        <button type="button" class="btn btn-success">（成功）Success</button>
</body>
</html>

出现这样说明成功的引入了css,js,文件：
在这里插入图片描述

二、网页首页案例

2.1、需求说明

1.顶部导航中 显示对应图片和列表
2.顶部导航距离浏览器的两边要有距离
3.PC“大屏幕”整个topbar划分比例：1:1:1
4.IPAD“中等屏幕”，普通手机“小屏幕”, “超小屏幕”每个区域各占一行
5.中间区域只在“大屏幕”显示

2.2、知识点-BootStrap（二）

2.2.1、布局容器

BootStrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。
帮助手册位置：全局CSS样式-------》概览-------》布局容器
任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用div作为布局容器

布局容器

在这里插入图片描述
Container:两端留白
container-fluid:占据100%宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <link rel="stylesheet" href="css/bootstrap.css">
      <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
      <script type="text/javascript" src="js/bootstrap.js"></script>
    <style>
        div{
            border: 1px red solid;
        }
    </style>
</head>
<body>
  <div class="container"><!--只有占据中间-->
      111
  </div>
  <div class="container-fluid"><!--占满-->
      222
  </div>
</body>
</html>

运行效果显示
在这里插入图片描述

2.2.2、栅格

2.2.2.1、简述栅格系统

为了方便在布局容器中进行网页的布局操作。
BootStrap提供了一套专门用于响应式开发布局的栅格系统。
栅格系统将一行分为12列，通过设定元素占用的列数来布局元素在页面上的展示位置。

在这里插入图片描述
在这里插入图片描述
作用：
可以让开发人员更加轻松进行网页布局，并且轻松进行响应式开发。

2.2.2.2、栅格系统的特点及入门案例

栅格特点
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
行使用的样式“.row”，列使用样式“col--**” 元素内容应当放置于“列（column）”内
基本的书写方式必须是：容器—行—列—内容
栅格参数：“col-屏幕尺寸-占用列数”

示例1：一个元素占一行

示例2：三个元素平分一行

示例3：六个元素平分一行

（1）案例素材源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
   
</head>
<body>
            <!--示例1：一个元素占一行-->
            <!--示例2：三个元素平分一行-->
            <!--示例3：六个元素平分一行-->
</body>
</html>

（2）完整源码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style>
        div{
            border: 1px red solid;
        }
    </style>
</head>
<body>
            <!--示例1：一个元素占一行-->
        <div class="container-fluid" >
            <div class="row">
                <div class="col-lg-12">111</div>
            </div>
            <!--示例2：三个元素平分一行-->
            <div class="row">
              <div class="col-lg-4">111</div>
              <div class="col-lg-4">111</div>
              <div class="col-lg-4">111</div>
            </div>
            <!--示例3：六个元素平分一行-->
            <div class="row">
                <div class="col-lg-2">111</div>
                <div class="col-lg-2">111</div>
                <div class="col-lg-2">111</div>
                <div class="col-lg-2">111</div>
                <div class="col-lg-2">111</div>
                <div class="col-lg-2">111</div>
            </div>
        </div>
</body>
</html>

运行效果显示
在这里插入图片描述

2.2.2.3、栅格屏幕尺寸设置

在这里插入图片描述
示例：中等屏幕尺寸，平分一行；小屏幕各占一行

源码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style>
    div{
      border: 1px red solid;
    }
  </style>
</head>
<body>
        <!--中等屏幕尺寸，平分一行；小屏幕各占一行-->
          <div class="container">
              <div class="col-md-4 col-sm-12">222</div>
              <div class="col-md-4 col-sm-12">222</div>
              <div class="col-md-4 col-sm-12">222</div>

          </div>
</body>
</html>

效果显示：
在这里插入图片描述
在这里插入图片描述

2.2.2.4、设置屏幕尺寸时的注意事项

如果设置某个屏幕尺寸的样式,比该尺寸的屏幕大或者小会沿用该屏幕

2.2.2.5、列偏移

通常情况下我们需要将元素居中显示，需要左边空出一定的空白区域，这里我们就可以使用列偏移来达到效果。

在这里插入图片描述
（1）案例素材准备：

<style>
      div{
        border:1px solid red;
         height:100px;
        }
</style>

<!--要求：元素居中展示 -->
<div class="container">
	<div class="row">
		<div class="col-xs-4">111111</div>
	</div>
</div>

偏移前：
在这里插入图片描述
案例实现源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

    <style>
        div{
            border:1px solid red;
            height:100px;
        }
    </style>
</head>
<body>
        <!--要求：元素居中展示 -->
        <div class="container">
          <div class="row">
            <div class="col-xs-4 col-xs-offset-4">111111</div>
          </div>
        </div>
</body>
</html>

偏移后：
在这里插入图片描述

2.2.2.6、响应式工具

为针对性地在移动页面上展示和隐藏不同的内容，bootStrap提供响应式工具。
可以让开发人员通过该工具决定，在何种屏幕尺寸下，隐藏或者显示某些元素

全局CSS样式—>响应式工具
在这里插入图片描述
（1）案例代码准备：

<style>
	div{
		border:1px solid red;
		height:100px;
	}
</style>
<!--要求：中间元素在大尺寸屏幕可见-->
<div class="container">
	<div class="row">
		<div class="col-xs-4">111111</div>
		<div class="col-xs-4 ">222222</div>
		<div class="col-xs-4">333333</div>
	</div>
</div>

（2）最终实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

      <style>
        div{
          border:1px solid red;
          height:100px;
        }
      </style>
</head>
<body>
      <!--要求：中间元素在大尺寸屏幕可见-->
      <div class="container">
        <div class="row">
          <div class="col-xs-4">111111</div>
          <div class="col-xs-4 visible-lg ">222222</div>
          <div class="col-xs-4">333333</div>
        </div>
      </div>
</body>
</html>

大屏幕显示（中间可见）：
在这里插入图片描述
小屏幕显示（中间不可见）：
在这里插入图片描述

2.3 案例顶部topbar页眉实现

在这里插入图片描述

1.顶部导航中 显示对应图片和列表
2. 顶部导航距离浏览器的两边要有距离
3. PC“大屏幕”整个topbar划分比例：1:1:1
4. IPAD“中等屏幕”，普通手机“小屏幕”, “超小屏幕”每个区域各占一行
5. 中间区域只在“大屏幕”显示

案例实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <img src="img/logo2.png" alt="">
                </div>
                <div class="col-md-4 visible-lg">
                    <img src="img/header.png" alt="">
                </div>
                <div class="col-md-4" style="margin-top: 25px">
                    <p class="text-center">
                        <a href="https://passport.jd.com/new/login.aspx?ReturnUrl=https://www.jd.com/">登录</a>
                        <a href="https://reg.jd.com/reg/person?ReturnUrl=https%3A//www.jd.com/">注册</a>
                        <a href="https://cart.jd.com/cart_index">购物车</a>
                    </p>
                </div>
            </div>
        </div>
</body>
</html>

在这里插入图片描述

2.4 首页之导航实现

2.4.1、需求说明

在这里插入图片描述

1.左边部分显示列表，右边部分显示查询表单
2.“中等屏幕”尺寸后，列表信息项和表单隐藏，点击对应按钮显示【汉堡效果】

2.4.2、知识点-BootStrap（三）

2.4.2.1、导航条

BootStrap已经提供了完整的导航条实例，通常情况下，我们仅需进行简单修改即可使用。

组件------->导航条

任意bootStrap组件，只要加上active的样式，就是组件的被点击或被激活状态

案例实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-inverse"><!--通过组件——>导航条（反色的导航条）修改样式-->
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <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="#">首页</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">甘肃省<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">深圳市</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">通渭县 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <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>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="请输入要查找的东东">
                        </div>
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
</body>
</html>

实现效果：
在这里插入图片描述

2.5 首页之轮播图实现

2.5.1、需求说明

1.轮播三张图片
2.每2秒换一次图

2.5.2、知识点-BootStrap（四）

2.5.2.1、轮播图

BootStrap已经提供了完整的轮播图实例，通常情况下，我们仅需进行简单修改即可使用。

JavaScript插件— Carousel

注意：jquery的版本需要1.9以上
data-interval=“2000” 定时轮播图
多个轮播图要设置轮播图组件的ID值

在这里插入图片描述
在这里插入图片描述
案例实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>

</head>
<body>
    <div class="container">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
            <!-- Indicators -->
            <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"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="img/1.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                <div class="item">
                    <img src="img/2.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
                ...
                <div class="item">
                    <img src="img/3.jpg" alt="...">
                    <div class="carousel-caption">
                        ...
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

    </div>
</body>
</html>

效果显示：
在这里插入图片描述

2.6 首页之家乡特产实现

2.6.1 需求分析

在这里插入图片描述

2.6.1 案例要求

  1. PC“大屏幕”以外的分辨率，左边竖图 隐藏
  2. ipad“中等屏幕”后，横着大图 隐藏
  3. 除PC“大屏幕”，最多两个商品一行

2.6.3

（1）源码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>

        <div class="container">
            <div class="row" >
                <div class="col-lg-12">
                    <font size="6px">热门商品</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="img/title2.jpg" alt="">
                </div>
            </div>

            <div class="row">
                <div class="col-lg-2 visible-lg">
                    <img src="img/big01.jpg" alt="">
                </div>
                <div class="col-lg-10" >

                    <div class="row"  style="margin-left: 20px">
                        <div class="col-lg-6 hidden-md">
                            <img src="img/middle01.jpg" alt="">
                        </div>
                        <div class="col-lg-2 col-xs-6" align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                    </div>

                    <div class="row" style="margin-left: 15px">
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>

（2）实现效果：
在这里插入图片描述

2.7 首页之footer页脚实现

2.6.1 案例实现

在这里插入图片描述

2.7.2 实现源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
        <div class="container">
            <div class="row">
                <img src="img/footer.jpg" width="100%">
            </div>
            <div class="row" align="center" style="margin-top: 15px">
                <a href="">关于我们</a>
                <a href="">联系我们</a>
                <a href="">招贤纳士</a>
                <a href="">法律声明</a>
                <a href="">友情链接</a>
                <a href="">支付方式</a>
                <a href="">配送方式</a>
                <a href="">服务生命</a>
                <a href="">广告声明</a>
            </div>
            <div class="row" align="center" style="margin-top: 10px">
                <font>Copyright © 2022-2099 呀啊呀 版权所有</font>
            </div>
        </div>
</body>
</html>

2.7.3 实现效果

在这里插入图片描述

2.8 整合案例首页

2.8.1 结构构建

在这里插入图片描述

2.8.2 源码整合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
        <!--top-->
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <img src="img/logo2.png" alt="">
                </div>
                <div class="col-md-4 visible-lg">
                    <img src="img/header.png" alt="">
                </div>
                <div class="col-md-4" style="margin-top: 25px">
                    <p class="text-center">
                        <a href="https://passport.jd.com/new/login.aspx?ReturnUrl=https://www.jd.com/">登录</a>
                        <a href="https://reg.jd.com/reg/person?ReturnUrl=https%3A//www.jd.com/">注册</a>
                        <a href="https://cart.jd.com/cart_index">购物车</a>
                    </p>
                </div>
            </div>
        </div>

        <!--dnt-->
        <div class="container">
            <nav class="navbar navbar-inverse"><!--通过组件——>导航条（反色的导航条）修改样式-->
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <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="#">首页</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">甘肃省<span class="sr-only">(current)</span></a></li>
                            <li><a href="#">深圳市</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">通渭县 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <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>
                            </li>
                        </ul>
                        <form class="navbar-form navbar-right">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="请输入要查找的东东">
                            </div>
                            <button type="submit" class="btn btn-default">搜索</button>
                        </form>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>

        <!--lbt-->
        <div class="container">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
                <!-- Indicators -->
                <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"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="img/1.jpg" alt="...">
                        <div class="carousel-caption">
                            ...
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/2.jpg" alt="...">
                        <div class="carousel-caption">
                            ...
                        </div>
                    </div>
                    ...
                    <div class="item">
                        <img src="img/3.jpg" alt="...">
                        <div class="carousel-caption">
                            ...
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

        <!--product-->
        <div class="container">
            <div class="row" >
                <div class="col-lg-12">
                    <font size="6px">热门商品</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="img/title2.jpg" alt="">
                </div>
            </div>

            <div class="row">
                <div class="col-lg-2 visible-lg">
                    <img src="img/big01.jpg" alt="">
                </div>
                <div class="col-lg-10" >

                    <div class="row"  style="margin-left: 20px">
                        <div class="col-lg-6 hidden-md">
                            <img src="img/middle01.jpg" alt="">
                        </div>
                        <div class="col-lg-2 col-xs-6" align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                    </div>

                    <div class="row" style="margin-left: 15px">
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                        <div class="col-lg-2 col-xs-6"  align="center">
                            <img src="img/small03.jpg" alt="">
                            <font>冬瓜</font><br/>
                            <a href="">￥299</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--footer-->
        <div class="container">
            <div class="row">
                <img src="img/footer.jpg" width="100%" style="margin-left: 15px">
            </div>
            <div class="row" align="center" style="margin-top: 15px">
                <a href="">关于我们</a>
                <a href="">联系我们</a>
                <a href="">招贤纳士</a>
                <a href="">法律声明</a>
                <a href="">友情链接</a>
                <a href="">支付方式</a>
                <a href="">配送方式</a>
                <a href="">服务生命</a>
                <a href="">广告声明</a>
            </div>
            <div class="row" align="center" style="margin-top: 10px">
                <font>Copyright © 2022-2099 呀啊呀 版权所有</font>
            </div>
        </div>
</body>
</html>

2.8.2 效果显示

在这里插入图片描述
在这里插入图片描述

Daniel521-Spark
关注
专栏目录
机械工厂bootstrap整站模板
04-02
机械工厂bootstrap整站模板
Bootstrap CSS
qq_53694927的博客
08-24 481
Bootstrap CSS
BootSrap案例CRM管理系统-查询所有用户
热爱生活,热爱技术,对未知永远保持好奇!
11-09 288
查询所有用户
用vue和bootstrap实现用户信息添加效果
m0_71014221的博客
04-12 276
输入框为空时弹出警示框提醒用户完善信息；数据相同时提醒用户数据重复。
1_boostrap概述
weixin_30270561的博客
12-06 114
1、bootstrap概述 1.1、什么是bootstrap？bootstrap的作用？ Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。（对应的样式有对应的特效） 开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。...
零基础SSM入门教程(18)–SpringMVC+Bootstrap开发博客系统实例(需求分析篇)
程序员大阳
01-26 821
背景 到目前为止，我们对Spring框架也算是入门了，可以用现有的知识实现一个简单的博客系统。 系统虽小，却也是五脏俱全，咱们正儿八经的按流程开发一下，考虑到系统需要足够简单，我们数据库使用MySQL实现，访问数据库采用最简单的JDBC实现（后续会逐渐采用SpringJDBC/JPA/MyBatis），后端框架采用Spring+SpringMVC。 前端视图肯定是采用JSP，原生的网页确实过于难看...
web--bootstrap入门基础笔记
09-26
Bootstrap是世界上最受欢迎的前端开发框架之一，主要用于构建响应式布局和移动设备优先的网页项目。这个"web--bootstrap入门基础笔记"是专科计算机软件设计专业大二学生在一个月内通过32节90分钟课程学习的总结，...
WEB07-BootStrap.rar
08-19
Bootstrap是由Twitter开发并开源的一款前端框架，用于快速构建响应式和移动优先的网站。这个名为"WEB07-BootStrap.rar"的压缩包显然包含了关于如何使用Bootstrap来重构一个首页的相关资源。让我们深入探讨一下...
PHP、web前端开发-Bootstrap框架介绍.pptx
12-16
Bootstrap框架是Web开发领域中最广泛使用的前端开源工具库，它为开发者提供了丰富的预设样式、组件和JavaScript插件，极大地提升了开发效率和网页的响应式设计能力。这个框架由Twitter的设计师Mark Otto和Jacob ...
Sash v9-bootstrap-5-admin-template 一款框架适合前端
06-01
1.AngularJS ...Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的
web前端框架bootstrap
最新发布
05-12
Bootstrap是Twitter推出的一个用于前端开发的开源工具包，开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成
Bootstrap 设计与开发
qq_53027543的博客
01-13 499
Bootstrap响应式布局
Bootstrap Flex（弹性）布局
书香水墨
07-26 5583
一、Bootstrap Flex（弹性）布局 1.1 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。 注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3。 以下...
web开发之分页案例jQuery&BootStrap
nuist_NJUPT的博客
08-25 1006
2.逻辑分页 ：它是利用数据库的游标来操作 （将数据库所有数据都查询出来，存储在内存中），性能比较低，但是它通用。注意：在使用bootstrap的分页组件时，需要导入相关的css文件与js文件，并且bootstrap它依赖于jquery,在导入bootstrap的js文件前要导入jquery的js文件，并且它的版本要求必须是1.9.1以上版本.2）引入相关的jar包，包括：C3p0连接池jar ， Dbutils， json处理的相关jar包，mysql的驱动jar包。5）dao层创建接口和实现类。...
Bootstrap5详细讲解
Harris-H的博客
08-30 5343
文章目录Boostrap v50.介绍1.快速开始2.布局容器 Boostrap v5 0.介绍 使用 Bootstrap 构建快速、响应式布局的网站 Bootstrap 是全球最流行的前端开源工具包，它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。 1.快速开始 <!doctype html> <html lang="zh-CN"> <head> &l
基于bootstrap实现简单用户管理功能
医疗影像检索
04-14 4755
基于bootstrap实现简单用户管理功能，包括增删改以及列表分页展示功能。 1、web.xml配置servlet映射： UserMgServlet com.userMgServlet UserMgServlet /ToUserMgServlet 2、userMg.jsp页面代码 <%@ page language="java"
软件20-4 杜明童 bootstrap
qq_63197676的博客
05-07 346
<!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, initial-scale=1"> <!-- 上述3个meta标签*必须*
[Bootstrap]从入门到实战_客户案例详情页开发（三）
louShuMei 的博客
01-19 7320
$客户案例详情页(case.html)新建一个文件case.html，客户案例详情页实际上和平时常见的 “新闻内容页”、“产品介绍页”非常类似，我们这里先做个简化版。最终效果如下： $case.html-1.布局把页面分成左右两栏，左边是正文区域，右边是相关信息，通过栅格系统来布局可以很容易实现。<div class="container"> <div class="row">
axure rp8 bootstrap 整站lib
01-11
Axure RP8 Bootstrap整站lib是一个为Axure RP8软件设计的全站响应式网页库。它包含了各种常用的Bootstrap组件和样式，可以帮助用户快速设计出具有响应式特性的网页原型。这个整站lib包含了Bootstrap的网格系统、表单、按钮、导航条、模态框、标签页等组件，用户可以根据自己的需求快速拖拽这些组件进行页面的设计。由于Axure RP8 Bootstrap整站lib考虑了响应式设计，因此用户可以在设计过程中实时预览不同尺寸的屏幕效果，从而更好地适配不同设备。 Axure RP8 Bootstrap整站lib的使用不仅可以提高用户的工作效率，还可以帮助用户设计出更加符合现代网页设计趋势的原型。对于需要展示给客户或团队的项目，使用Axure RP8 Bootstrap整站lib设计出的原型可以更直观地展现网页的样式和布局，从而更好地沟通和理解设计意图。另外，这个整站lib还包含了一些常用的图标和配色方案，方便用户在设计过程中使用。 总的来说，Axure RP8 Bootstrap整站lib是一个功能齐全并且易于使用的网页设计工具，它可以帮助用户快速设计响应式网页原型，并且提高了原型设计的效率和实用性。无论是对于个人设计师还是团队设计师，Axure RP8 Bootstrap整站lib都是一个非常实用的设计资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Daniel521-Spark

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

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

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

打赏作者

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

抵扣说明：

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

余额充值