Bootstrap4 轮播+模态框+提示框+弹出框

程序员文章站 2022-06-22 07:50:27

Bootstrap4 轮播菜鸟教程上的案例

bootstrap4 轮播

菜鸟教程上的案例

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
      <div class="carousel-caption">
        <h3>第一张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
      <div class="carousel-caption">
        <h3>第二张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
      <div class="carousel-caption">
        <h3>第三张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

Bootstrap4 轮播+模态框+提示框+弹出框

但是，我们通常不这样写代码。通常的做法时在屏幕放大时使用backgroun="背景图(大图)"，在屏幕缩小时使用<img src="">的做法。

采用这样的原因是：屏幕缩小时，图片过大，对移动端设备流量消耗过大，在屏幕缩小时采用<img src="小图">的做法来显示图片的主旨内容。

逻辑详解：在屏幕变化时，采用@media（媒体查询）来布局；在小图时，图片要随着屏幕的缩小而缩小，大图时，不用跟着屏幕的缩小而缩小。
在屏幕为640px以上时要使用background:url("大图")来显示，并将<img>设置为display:none.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        body{
            margin:10px;
            padding:10px;
        }
        @media screen and (min-width:640px){
            #demo img{
                display: none;
            }
            #demo .carousel-inner .carousel-bg1{
                background: url(https://static.runoob.com/images/mix/img_fjords_wide.jpg) no-repeat center center;
                width: 100%;
                height: 410px;
                background-size:cover;
            }
            #demo .carousel-inner .carousel-bg2{
                background: url(https://static.runoob.com/images/mix/img_nature_wide.jpg) no-repeat center center;
                width: 100%;
                height: 410px;
                background-size:cover;
            }
            #demo .carousel-inner .carousel-bg3{
                background: url(https://static.runoob.com/images/mix/img_mountains_wide.jpg) no-repeat center center;
                width: 100%;
                height: 410px;
                background-size:cover;
            }
        }
        @media screen and (max-width:640px){
            #demo img{
                display: block;
            }
        }
        
    </style>
</head>
<body>

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active carousel-bg1">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
      <div class="carousel-caption">
        <h3>第一张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item carousel-bg2">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
      <div class="carousel-caption">
        <h3>第二张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="carousel-item carousel-bg3">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
      <div class="carousel-caption">
        <h3>第三张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

</body>
</html>

参考链接：

<script>
    $(function(){
        $('.carousel').carousel({
            interval: 500//轮播间隔
        });
    });
</script>

查资料说这样可以改变轮播图的速度，我试了下没什么卵用，各位有知道啥原因么==

bootstrap4 模态框

<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mymodal">
  打开模态框
</button>
 
<!-- 模态框 -->
<div class="modal fade" id="mymodal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框头部</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- 模态框主体 -->
      <div class="modal-body">
        模态框内容..
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
 
    </div>
  </div>
</div>

Bootstrap4 轮播+模态框+提示框+弹出框

bootstrap4 提示框

<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

Bootstrap4 轮播+模态框+提示框+弹出框

默认情况下提示框显示在元素上方。

可以使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right:

<br><br>
<a href="#" data-toggle="tooltip" title="我是提示内容!" data-placement="top">鼠标移动到我这top</a>
<a href="#" data-toggle="tooltip" title="我是提示内容!" data-placement="bottom">鼠标移动到我这bottom</a>
<a href="#" data-toggle="tooltip" title="我是提示内容!" data-placement="left">鼠标移动到我这left</a>
<a href="#" data-toggle="tooltip" title="我是提示内容!" data-placement="right">鼠标移动到我这right</a>

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

Bootstrap4 轮播+模态框+提示框+弹出框

在按钮中使用提示信息

<br><br>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="我是提示内容!" data-placement="top">按钮提示top</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="我是提示内容!" data-placement="bottom">按钮提示bottom</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="我是提示内容!" data-placement="left">按钮提示left</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="我是提示内容!" data-placement="right">按钮提示right</button>

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

Bootstrap4 轮播+模态框+提示框+弹出框

提示内容添加 html 标签，设置 data-html="true"，内容放在 title 标签里头

<br><br>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="<b>我是提示内容!</b>" data-html="true">按钮提示top</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="<b>我是提示内容!</b>">按钮提示top</button>

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

Bootstrap4 轮播+模态框+提示框+弹出框

bootstrap4 弹出框

<a href="#" data-toggle="popover" title="title" data-content="this is content">click me</a>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

Bootstrap4 轮播+模态框+提示框+弹出框

<br><br>
<a href="#" data-toggle="popover" title="title" data-content="this is content" data-placement="top">click me</a>
<a href="#" data-toggle="popover" title="title" data-content="this is content" data-placement="bottom">click me</a>
<a href="#" data-toggle="popover" title="title" data-content="this is content" data-placement="left">click me</a>
<a href="#" data-toggle="popover" title="title" data-content="this is content" data-placement="right">click me</a>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

Bootstrap4 轮播+模态框+提示框+弹出框

按钮中使用弹出框

<br><br>
<button type="button" class="btn btn-info" data-toggle="popover" data-container="body" data-content="vivamus sagittis lacus vel augue laoreet rutrum faucibus." >按钮提示</button>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

Bootstrap4 轮播+模态框+提示框+弹出框

点击其他地方关闭弹出框 data-trigger="focus"

<button type="button" class="btn btn-info" data-toggle="popover" data-container="body" data-content="vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-trigger="focus">按钮提示</button>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

在鼠标移动到元素上显示，移除后消失的效果 data-trigger="hover"

<button type="button" class="btn btn-info" data-toggle="popover" data-container="body" data-content="vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-trigger="hover">按钮提示</button>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

上一篇：北二外和北外的差距？北二外属于啥档次的大学？

下一篇：前端的状态管理（下）

Bootstrap4 轮播+模态框+提示框+弹出框

eclipse中去除build时总是js错误循环弹出提示框的问题

android 弹出提示框的使用(图文实例)

点击按钮弹出模态框的一系列操作代码实例

扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

解决plsql连接失败,弹出空白提示框的方法详解

bootstrap模态框关闭事件（bootstrap弹出模态框）

bootstrap模态框关闭事件（bootstrap弹出模态框）

PHP弹出提示框并跳转到新页面即重定向到新页面

Asp.Net中避免重复提交和弹出提示框的实例代码

eclipse中去除build时总是js错误循环弹出提示框的问题