Day-13bootstrap轮播图、模态框、提示框、弹出框

it2025-04-06 17

轮播图、模态框、提示框、弹出框

轮播图1. 说明2. 简单的图片轮播3. 轮播图片上添加描述模态框1. 如何创建模态框2. 模态框尺寸提示框1. 如何创建提示框2. 指定提示框的位置弹出框1. 如何创建弹出框2. 指定弹出框的位置3. 关闭弹出框

轮播图

1. 说明

以下实例中使用的类说明：

2. 简单的图片轮播

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <style> .carousel-inner img { width: 100%; height: 450px; } </style> </head> <body> <div id="demo" class="carousel side" 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="img/1.jpg"> </div> <div class="carousel-item"> <img src="img/2.jpg"> </div> <div class="carousel-item"> <img src="img/3.jpg"> </div> </div>  <a href="#demo" class="carousel-control-prev" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a href="#demo" class="carousel-control-next" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </body> </html>

运行结果：

3. 轮播图片上添加描述

在每个 < div class=“carousel-item” > 内添加 < div class=“carousel-caption” > 来设置轮播图片的描述文本：

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <style> .carousel-inner img { width: 100%; height: 450px; } </style> </head> <body> <div id="demo" class="carousel side" 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="img/1.jpg"> <div class="carousel-caption"> <h3>第一张图片描述标题</h3> <p>描述文字!</p> </div> </div> <div class="carousel-item"> <img src="img/2.jpg"> <div class="carousel-caption"> <h3>第二张图片描述标题</h3> <p>描述文字!</p> </div> </div> <div class="carousel-item"> <img src="img/3.jpg"> <div class="carousel-caption"> <h3>第三张图片描述标题</h3> <p>描述文字!</p> </div> </div> </div>  <a href="#demo" class="carousel-control-prev" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a href="#demo" class="carousel-control-next" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </body> </html>

运行结果：

模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

1. 如何创建模态框

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container">  <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> </div> </body> </html>

运行结果：

2. 模态框尺寸

尺寸类放在 < div >元素的 .modal-dialog 类后 :我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container">  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button>  <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <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> </div> </body> </html>

运行结果：代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container">  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button>  <div class="modal fade" id="myModal"> <div class="modal-dialog modal-lg"> <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> </div> </body> </html>

运行结果：

提示框

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

1. 如何创建提示框

通过向元素添加 data-toggle=“tooltip” 来来创建提示框。title 属性的内容为提示框显示的内容。

注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。

代码如下：

运行结果：

2. 指定提示框的位置

默认情况下提示框显示在元素上方。可以使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right。

代码如下：

运行结果：在按钮中使用:

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container mt-5"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button> </div> <script> $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html>

运行结果：在按钮中使用：提示内容添加 HTML 标签，设置 data-html=“true”，内容放在 title 标签里头:

代码如下：

运行结果：禁用按钮：

代码如下：

运行结果： pointer-events能够：

阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态的变化触发事件阻止JavaScript点击动作触发的事件

tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。

弹出框

弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。

1. 如何创建弹出框

通过向元素添加 data-toggle=“popover” 来来创建弹出框。title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容。

注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。

代码如下：

运行结果：

2. 指定弹出框的位置

默认情况下弹出框显示在元素右侧。可以使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right。

代码如下：

运行结果：按钮中使用:

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .container { margin-top: 100px; } </style> </head> <body> <div class="container"> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="top"> Popover on top </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="bottom"> Popover on bottom </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="left"> Popover on left </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="right"> Popover on right </button> </div> <script> $(document).ready(function() { $('[data-toggle="popover"]').popover(); }); </script> </body> </html>

运行结果：

3. 关闭弹出框

默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger=“focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框。

代码如下：

运行结果：

实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 “hover”。

代码如下：

运行结果：

最新回复(0)