bootstrap4 轮播
菜鸟教程上的案例
<div id="demo" class="caroul slide" data-ride="caroul"> <!-- 指示符 --> <ul class="caroul-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="caroul-inner"> <div class="caroul-item active"> <img src="/d/file/titlepic/img_fjords_wide.jpg"> <div class="caroul-caption"> <h3>第一张图片描述标题</h3> <p>描述文字!</p> </div> </div> <div class="caroul-item"> <img src="/d/file/titlepic/img_nature_wide.jpg"> <div class="caroul-caption"> <h3>第二张图片描述标题</h3> <p>描述文字!</p> </div> </div> <div class="caroul-item"> <img src="https://static.runoob.com/images/mix/img_mountains_wide.jp上网本怎么样g"> <div class="caroul-caption"> <h3>第三张图片描述标题</h3> <p>描述文字!</p> </div> </div> </div> <!-- 左右切换按钮 --> <a class="caroul-control-prev" href="#demo" data-slide="prev"> <span class="caroul-control-prev-icon"></span> </a> <a class="caroul-control-next" href="#demo" data-slide="next"> <span class="caroul-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 chart="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 .caroul-inner .caroul-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 .caroul-inner .caroul-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 .caroul-inner .caroul-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="caroul slide" data-ride="caroul"> <!-- 指示符 --> <ul class="caroul-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="caroul-inner"> <div class="caroul-item active caroul-bg1"> <img src="/d/file/titlepic/img_fjords_wide.jpg"> <dinumber缩写v class="caroul-caption"> <h3>第一张图片描述标题</h3> <p>描述文字!</p> </div> </div> <div class="caroul-item caroul-bg2"> <img src="/d/file/titlepic/img_nature_wide.jpg"> <div class="caroul-caption"> <h3>第二张图片描述标题</h3> <p>描述文字!</p> </div> </div> <div class="caroul-item caroul-bg3"> <img src="/d/file/titlepic/img_mountains_wide.jpg"> <div class="caroul-caption"> <h3>第三张图片描述标题</h3> dnf哪个职业最厉害<p>描述文字!</p> </div> </div> </div> <!-- 左右切换按钮 --> <a class="caroul-control-prev" href="#demo" data-slide="prev"> <span class="caroul-control-prev-icon"></span> </a> <a class="caroul-control-next" href="#demo" data-slide="next"> <span class="caroul-control-next-icon"></span> </a> </div></body></html>参考链接：
<script> $(function(){ $('.caroul').caroul({ 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="clo" data-dismiss="modal">×</button> </div> <!-- 模态框主体 --> <div class="modal-body"> 模态框内容.. </div> <!-- 模态框底部 --> <div class="modal-footer"> <button type="button" class="btn btn-condary" 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>
本文发布于:2023-04-03 18:13:45，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/33cc19a1dfb51172072470694ad9ceb3.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：Bootstrap4 轮播+模态框+提示框+弹出框.doc
本文 PDF 下载地址：Bootstrap4 轮播+模态框+提示框+弹出框.pdf
| 留言与评论（共有 0 条评论） |
