首页 > > 网页制作 > css >

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

2020-04-16 16:03:29来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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>

 

 

 

但是，我们通常不这样写代码。通常的做法时在屏幕放大时使用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>

 

参考链接：https://blog.csdn.net/yufanhui/article/details/80738760?utm_source=blogxgwz7

 

<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 提示框

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

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

 

 

 

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

可以使用 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>

 

 

 

在按钮中使用提示信息

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

 

 

 

提示内容添加 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 弹出框

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

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

 

 

 

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

 

 

 

 按钮中使用弹出框

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

 

 

点击其他地方关闭弹出框 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>

 


原文链接:https://www.cnblogs.com/chenyingying0/p/12713585.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Bootstrap4 面包屑导航+表单+输入框组+自定义表单

下一篇：转职做web前端，一开始别走弯了！

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签