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

编程语言 2023-08-22 17:32:05 阅读次数: 0

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

轮播图

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">&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>
		</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">&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>
		</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">&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>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

提示框

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

1. 如何创建提示框

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

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

代码如下：

<!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">
			<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>
		</div>
		<script>
			$(document).ready(function(){
     
     
				$('[data-toggle="tooltip"]').tooltip();
			});
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

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">
			<a href="#" data-toggle="tooltip" data-placement="top" title="我是提示内容!">鼠标移动到我这</a>
			<a href="#" data-toggle="tooltip" data-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>
			<a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">鼠标移动到我这</a>
			<a href="#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">鼠标移动到我这</a>
		</div>
		<script>
			$(document).ready(function() {
     
     
				$('[data-toggle="tooltip"]').tooltip();
			});
		</script>
	</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 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 标签里头:

代码如下：

<!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-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
				Tooltip with HTML
			</button>
		</div>

		<script>
			$(document).ready(function() {
     
     
				$('[data-toggle="tooltip"]').tooltip();
			});
		</script>
	</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">
			<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
				<button class="btn btn-warning" style="pointer-events: none;" type="button" disabled>Disabled button</button>
			</span>
		</div>

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

运行结果：
在这里插入图片描述
pointer-events能够：

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

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

弹出框

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

1. 如何创建弹出框

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

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

代码如下：

<!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">
		  <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>
		</div>
		<script>
		$(document).ready(function(){
     
     
		    $('[data-toggle="popover"]').popover();   
		});
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

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">
		  <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">点我</a>
		  <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">点我</a>
		  <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">点我</a>
		  <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">点我</a>
		 </div>
		<script>
		$(document).ready(function(){
     
     
		    $('[data-toggle="popover"]').popover();   
		});
		</script>
	</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>
		<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” 属性来设置在鼠标点击元素外部区域来关闭弹出框。

代码如下：

<!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">
			<a href="#" title="取消弹出框" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">点我</a>
		</div>

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

运行结果：
在这里插入图片描述

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

代码如下：

<!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">
			<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="一些内容">鼠标移动到我这</a>
		</div>

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

运行结果：
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43756494/article/details/109210156
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022