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-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-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">×</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>