学习Java的日子 Day68 jQuery操作节点，Bootstrap

news2024/12/23 6:46:56

jQuery

1.jQuery操作DOM

DOM为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容和展示形式

在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性attr、内容html、值value、CSS 的操作

1.1 操作内容

获取和设置元素内容

操作元素内容的方法包括html()和text()，比如文本框后面的提示信息

获取和设置元素值

要获取元素的值通过val()方法实现

比如文本框的值之类的

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$("#btn01").click(function(){
			console.log($("#span01").text());
		})
				
		$("#btn02").click(function(){
			$("#span01").text("<h1>做真实的自己</h1>");
		})
				
		$("#btn03").click(function(){
			console.log($("#span02").html());
		})
		
		$("#btn04").click(function(){
			$("#span02").html("<h1>做真实的自己</h1>");
		})
			
	})
</script>
</head>
<body>
		
	<button id="btn01">获取内容 - text</button>
	<button id="btn02">设置内容 - text</button>
	<br />
	<span id="span01">用良心做教育</span>
	<br />
		
	<button id="btn03">获取内容 - html</button>
	<button id="btn04">设置内容 - html</button>
	<br />
	<span id="span02">用良心做教育</span>
		
</body>
</html>

1.2 操作属性

获取元素属性：

使用attr(name)方法获取元素的属性

设置元素的属性：

通过attr(name,value)的方式设置元素的属性

删除元素的属性

使用removeAttr(name)方法可以将元素的属性删除

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			
	$(function(){
				
		$("#btn01").click(function(){
			console.log($("img").attr("src"));
			console.log($("img").attr("width"));
			console.log($("img").attr("height"));
		})
				
		$("#btn02").click(function(){
			$("img").attr("src","../img/樱井步.jpg");
			$("img").attr("width","100px");
			$("img").attr("height","100px");
		})
				
		$("#btn03").click(function(){
			$("img").removeAttr("width");
			$("img").removeAttr("height");
		})
				
	})
			
</script>
</head>
<body>
		
	<button id="btn01">获取属性</button>
	<button id="btn02">设置属性</button>
	<button id="btn03">删除属性</button>
	<br />
	<img src="../img/波多野结衣.jpg" width="50px" height="50px" />
		
</body>
</html>

val () 方法返回或设置被选元素的value值

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$("#btn01").click(function(){
			//console.log($("input").attr("value"));
					
			console.log($("input").val());
		})
				
		$("#btn02").click(function(){
			//$("input").attr("value","用良心做教育");
				
			$("input").val("用良心做教育");
		})
				
	})
</script>
</head>
<body>
		
	<input type="text" />
	<button id="btn01">获取输入框的数据</button>
	<button id="btn02">设置输入框的数据</button>
</body>
</html>

操作属性案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{color: red;}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//给表单绑定一个提交事件，false就提交不了，true就可以提交
				$("form").submit(function(){
                    
					//先清空
					$("#username+span").text("");
					$("#password+span").text("");
					$("#repassword+span").text("");
					
					var bool = true;
					//trim去空格
					if($.trim($("#username").val()) == ""){
						$("#username+span").text("账号不能为空");
						bool = false;
					}
					
					if($.trim($("#password").val()) == ""){
						$("#password+span").text("密码不能为空");
						bool = false;
					}
					
					if($.trim($("#repassword").val()) == ""){
						$("#repassword+span").text("确认密码不能为空");
						bool = false;
					}else if($.trim($("#repassword").val()) != $.trim($("#password").val())){
						$("#repassword+span").text("确认密码和密码不一致");
						bool = false;
					}
					
					return bool;
				})			
							
			})
		</script>
	</head>
	<body>
		
		<form action="#" method="post">
			
			账号：<input type="text" id="username" name="username" /><span></span><br/>
			密码：<input type="password" id="password" name="password" /><span></span><br/>
			确认密码：<input type="password" id="repassword" name="repassword" /><span></span><br/>
			<input type="submit" value="提交" />
		</form>
		
	</body>
</html>

运行结果：

在这里插入图片描述

1.3 操作样式（CSS）

在页面中，元素样式的操作包含：直接设置样式、增加CSS类别、删除类别、类别切换

调用css(name,value)方法直接设置元素的值

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		/**
		 * 案例：点击图片，使图片自动变大
		 * 案例：点击字体，是字体变粗，背景颜色变蓝
		 */
		$("img").click(function(){
			$(this).css("width","200px");
			$(this).css("height","200px");
		})
				
		$("p").click(function(){
			$(this).css("font-size","50px");
			$(this).css("background-color","blue");
			})
		})
</script>
</head>
<body>
		
	<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
	<p>用良心做教育</p>
		
</body>
</html>

<style type="text/css">
	.big{
		width: 200px;
		height: 200px;
	}
</style>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		/**
		 * 案例：点击图片，使图片自动变大，再次点击又变小，循环往复
		 */
		$("img").click(function(){
			//判断当前对象的class属性是否有big，有就返回true
			if($(this).hasClass("big")){
				$(this).removeClass("big");
			}else{
				$(this).addClass("big");
			}
		})
        
	})
</script>
</head>
<body>
		
	<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
		
</body>
</html>

更好的方法

<style type="text/css">
	.big{
		width: 200px;
		height: 200px;
	}
</style>
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){

		$("img").click(function(){
					
			//判断当前对象的class属性是否有big，有就删除，没有就添加
			$(this).toggleClass("big");
			
		})

	})
</script>
</head>
<body>
		
	<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
		
</body>
</html>

1.4 操作节点

1.4.1 创建元素节点

使用$(html)函数动态创建节点元素

函数$(html)只完成DOM元素创建，加入到页面还需要通过元素节点的插入或追加操作；同时，在创建DOM元素时，要注意字符标记是否完全闭合，否则达不到预期效果。

案例：

给页面添加图片元素节点

在页面中动态创建元素需要执行节点的插入或追加操作，append

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
			}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				$("#btn01").click(function(){
					
					var img = $("<img src='../img/波多野结衣.jpg'/>");//创建一个jQuery对象
					
					//将图片添加到div里 -- 末尾
					//$("#manager").append(img);
					//$(img).appendTo($("#manager"));
					
					//将图片添加到div里 -- 首位
					//$("#manager").prepend(img);
					//$(img).prependTo($("#manager"));
					
					//将图片添加到div标签后面 -- 并列关系
					//$("#manager").after(img);
					//$(img).insertAfter($("#manager"));
					
					//将图片添加到div标签前面 -- 并列关系
					//$("#manager").before(img);
					$(img).insertBefore($("#manager"));
				})
				
				$("#btn02").click(function(){
					$("img:first").remove();
				})
				
			})
		</script>
	</head>
	<body>
		
		<button id="btn01">添加节点</button>
		<button id="btn02">删除节点</button>
		
		<div id="manager">
			<img src="../img/樱井步.jpg"/>
		</div>
		
	</body>
</html>

运行结果：

在这里插入图片描述

1.4.2 遍历元素

在DOM元素操作中，有时需要对同一标记的全部元素进行统一操作。

在传统的JavaScript中，先获取元素的总长度，然后以for循环语句递减总长度，访问其中的某个元素，代码相对复杂；

而在jQuery中，可以直接使用each(callback)方法实现元素的遍历

$(“img”).each(function(){ …})

案例：点击图片，就会变成其他的图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
			}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				$("img").each(function(){//遍历所有img标签
					$("img").click(function(){//给每一个img便签绑定一个点击事件
						$(this).attr("src","../img/乐乐.jfif");
					})
				})					
				
			})
		</script>
	</head>
	<body>

		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		<img src="../img/1.webp" />
		
	</body>
</html>
1.4.3 练习案例

实现管理页面的全选功能

实现批量删除的功能

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
                //点击全选按钮，就可以选三个按钮
				$("#chkAll").click(function(){
					if($(this).attr("checked")){
						$("td>input").attr("checked","checked");
					}else{
						$("td>input").removeAttr("checked");
					}
				})
				
				$("td>input").each(function(){
					
					$(this).click(function(){
						
						if($("td>input").length == $("td>input:checked").length){
							$("#chkAll").attr("checked","checked");
						}else{
							$("#chkAll").removeAttr("checked");
						}
					})
					
				})
				
                //删除功能
				$("#btnDel").click(function(){
					
					$("td>input:checked").each(function(){
						var deleteId = $(this).val();
						$("tr[id=" + deleteId + "]").remove();
					})
					
					if($("td>input").length == 0){
						$("#chkAll").removeAttr("checked");
					}
				})
				
			})
		</script>
	</head>
	<body>
		
		<table border="1">
	        <tr>
	           <th>选项</th>
	           <th>编号</th>
	           <th>姓名</th>
	           <th>性别</th>
	        </tr>
	        <tr id="1">
	           <td><input type="checkbox" value="1"/></td>
	           <td>1001</td>
	           <td>小明</td>
	           <td>男</td>
	        </tr>
	        <tr id="2">
	           <td><input type="checkbox" value="2"/></td>
	           <td>1002</td>
	           <td>明明</td>
	           <td>女</td>
	        </tr>
	        <tr id="3">
	           <td><input type="checkbox" value="3"/></td>
	           <td>1003</td>
	           <td>小红</td>
	           <td>女</td>
	        </tr>
	        <tr>
	           <td colspan="4">
	           	<span><input id="chkAll" type="checkbox" />全选</span>
               	<span><input id="btnDel" type="button" value="删除"/></span>
	           </td>
	        </tr>
		</table>

	</body>
</html>

2.jQuery事件

众所周知，页面在加载时，会触发Load事件。当用户单击某个按钮时，触发该按钮的Click事件，通过种种事件实现各项功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用

2.1 事件冒泡现象：(可能会考)

事件在触发后分为两个阶段，一个是捕获（Capture），另一个则是冒泡（Bubbling）；但大多数浏览器并不是都支持捕获阶段，jQuery也不支持。因此在事件触发后，往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。

案例：掌握什么是事件的冒泡现象

冒泡现象：子元素的事件向上传递给了父级元素（一直往上传，直到找到body为止，类似于绝对定位）

就是一层层往上冒

如何阻止冒泡的发生

在jQuery中，可以通过e.stopPropagation()方法可以阻止冒泡过程的发生。

还可以通过语句return false实现停止事件的冒泡过程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#manager{
				width: 200px;
				height: 200px;
				border: orange 1px solid;
			}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				/**
				 * 冒泡现象：子元素的事件向上传递给了父级元素
				 */
				
				$("#manager").click(function(){
					alert("div被点击了");
				})
				
				$("#btn").click(function(event){
					alert("按钮被点击了");
					
					//阻止冒泡现象 -- 解决方案一
					//event.stopPropagation();
					
					//阻止冒泡现象 -- 解决方案二
					return false;
				})
			})
		</script>
	</head>
	<body>
		
		<div id="manager">
			
			<input id="btn" type="button" value="普通按钮" />
			
		</div>
		
	</body>
</html>

2.2 页面载入事件$(function(){}）

一直在用

$(function(){ ......})

2.3 绑定事件 bind()

比如像这种方式来绑定事件click、mouseout

使用bind()方法绑定事件

bind()功能是为每个选择元素的事件绑定处理函数，其语法格式如下：

bind(type,[data],fn)

这种方式相比之前：其中参数type为一个或多个类型的字符串，如"click"或"change"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				//绑定事件
                //通过映射方式绑定事件（类似于json格式）
				$("img").bind({
					"click":function(){
						console.log("图片被点击了");
					},
					"mouseout":function(){
						console.log("鼠标移出图片了");
					}
				})
				

			})
		</script>
	</head>
	<body>
		
		<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
	</body>
</html>

2.4 解绑事件 unbind()

unbind()方法移除元素绑定事件

unbind(type,[fn]])

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				//绑定事件				
				$("img").bind("click mouseout",function(){
					console.log("触发事件了");
				})
				
				$("#btn").click(function(){
					//解绑所有的事件
					//$("img").unbind();
					
					//解绑指定的事件
					$("img").unbind("click");
				})

			})
		</script>
	</head>
	<body>
		<button id="btn">解绑事件</button><br />
		<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
	</body>
</html>

2.5 切换事件hover() toggle()

hover()方法

鼠标移入、移出事件来回切换

toggle()方法

鼠标单击事件循环切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				//切换事件：鼠标移入、移出事件来回切换
				$("img").hover(
					function(){
						console.log("aaa");
					},
					function(){
						console.log("bbb");
					}
				)
				
			})
		</script>
	</head>
	<body>
		
		<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
		
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				//切换事件：鼠标单击事件循环切换
				$("img").toggle(
					function(){
						console.log("aaa");
					},
					function(){
						console.log("bbb");
					},
					function(){
						console.log("ccc");
					}
				)
				
			})
		</script>
	</head>
	<body>
		
		<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
		
	</body>
</html>

2.6 事件应用案例

2.6.1 表单验证

为各个表单项添加事件，检查其数据的合理性

为表单绑定提交事件，并做好正确的控制（事件的触发）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{color: red;}
		</style>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				var bool = true;
				
				$("#username").blur(function(){
					if($.trim($(this).val()) == ""){
						$("#username+span").text("账号不能为空");
						bool = false;
					}else{
						$("#username+span").text("");
					}
				})
				
				$("#password").blur(function(){
					if($.trim($(this).val()) == ""){
						$("#password+span").text("密码不能为空");
						bool = false;
					}else{
						$("#password+span").text("");
					}
				})
				
				$("#repassword").blur(function(){
					if($.trim($(this).val()) == ""){
						$("#repassword+span").text("确认密码不能为空");
						bool = false;
					}else if($.trim($(this).val()) != $.trim($("#password").val())){
						$("#repassword+span").text("确认密码与密码不一致");
						bool = false;
					}else{
						$("#repassword+span").text("");
					}
				})
				
				$("form").submit(function(){
					
					bool = true;
					
					//触发username、password、repassword的失去焦点事件
					$("#username").trigger("blur");
					$("#password").trigger("blur");
					$("#repassword").trigger("blur");
					
					return bool;
				})
				
				
				
			})
		</script>
	</head>
	<body>
		
		<form action="#" method="post">
			
			账号：<input type="text" id="username" name="username" /><span></span><br/>
			密码：<input type="password" id="password" name="password" /><span></span><br/>
			确认密码：<input type="password" id="repassword" name="repassword" /><span></span><br/>
			<input type="submit" value="提交" />
		</form>
		
	</body>
</html>
2.6.2 实现选项卡

案例：点击php，下面会显示php的内容，.net也是一样的

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#tab li {
				text-align: center;
				float: left;
				padding: 5px;
				margin-right: 2px;
				width: 50px;
				cursor: pointer
			}
			
			#tab li.tabFocus {
				width: 50px;
				font-weight: bold;
				background-color: powderblue;
				border: solid 1px #666;
				border-bottom: 0;
				z-index: 100;
				position: relative
			}
			
			#content {
				width: 260px;
				height: 80px;
				padding: 10px;
				background-color: powderblue;
				clear: left;
				border: solid 1px #666;
				position: relative;
				top: -1px
			}
			
			#content li {
				display: none
			}
			
			#content li.contentFocus {
				display: block
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.2.js">
		</script>
		<script type="text/javascript">
			$(function() {
	
				$("#tab>li").each(function(index){
					
					$(this).click(function(){
						
						$("#tab>li[class='tabFocus']").removeClass("tabFocus");
						$(this).addClass("tabFocus");
						
						$("#content>li[class='contentFocus']").removeClass("contentFocus");
						$("#content>li:eq(" + index + ")").addClass("contentFocus");
					})
					
				})
				

			})
		</script>
	</head>

	<body>
		<ul id="tab">
			<li class="tabFocus">javaee</li>
			<li>php</li>
			<li>.NET</li>
		</ul>
		<ul id="content">
			<li class="contentFocus">企业级应用占据领导地位</li>
			<li>中小型网站首选</li>
			<li>微软出品</li>
		</ul>
	</body>

</html>

3.Bootstrap

简介

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

为什么使用Bootstrap

1.移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

2.浏览器支持：所有的主流浏览器都支持 Bootstrap。

3.容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

4.响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计

3.1 Bootstrap安装环境

CDN

注意：顺序不能乱

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

3.2 常用控件

标签

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

图片

<!--圆角-->
<img src="../img/纯蓝色.png" class="img-rounded"/>
<!--圆型-->
<img src="../img/纯蓝色.png" class="img-circle"/>
<!--缩略图-->
<img src="../img/纯蓝色.png" class="img-thumbnail"/>

列表组

<div class="list-group" style="width: 300px;">
	<a href="#" class="list-group-item active">xxxx</a>
	<a href="#" class="list-group-item">xxxx</a>
	<a href="#" class="list-group-item">xxxx</a>
	<a href="#" class="list-group-item">xxxx</a>
	<a href="#" class="list-group-item">xxxx</a>
</div>

表格

		<!--
			<table class="table table-condensed">
  			<caption>精简表格布局</caption>
  			
  			<table class="table table-striped">
  			<caption>条纹表格布局</caption>
  			
  			<table class="table table-bordered">
  			<caption>边框表格布局</caption>
			
			<table class="table table-hover">
 	  		<caption>悬停表格布局</caption>
        -->
        <table class="table">
  			<caption>基本的表格布局</caption>
		  	<thead>
		    	<tr>
			      	<th>名称</th>
			      	<th>年龄</th>
			      	<th>性别</th>
		    	</tr>
		  	</thead>
		  	<tbody>
			    <tr>
			      <td>小红</td>
			      <td>18</td>
			      <td>女</td>
			    </tr>
			    <tr>
			      <td>小黄</td>
			      <td>19</td>
			      <td>男</td>
			    </tr>
			    <tr>
			      <td>小绿</td>
			      <td>20</td>
			      <td>男</td>
			    </tr>
			  </tbody>
</table>

表单(输入框、密码框、单选、多选、下拉、各种按钮)

<form class="form-horizontal " role="form" >
		  	<div class="form-group">
			    <label class="col-sm-2 control-label">输入框：</label>
			    <div class="col-sm-10 col-lg-4">
			      <input type="text" class="form-control" placeholder="请输入输入框">
			    </div>
			</div>
		  	<div class="form-group">
			    <label class="col-sm-2 control-label">密码框：</label>
			    <div class="col-sm-10 col-lg-4">
			      <input type="password" class="form-control" placeholder="请输入密码框">
			    </div>
			 </div>
			 
			<div class="form-group">
			    <label class="col-sm-2 control-label">单选框：</label>
			    <div class="radio col-sm-10">
			    	<label>
			        	<input name="sex" type="radio" checked="checked">选项 1
			        </label>
			        <label>
			        	<input name="sex" type="radio" >选项 2
			        </label>
			    </div>
		    </div>
		    
		    <div class="form-group">
			    <label class="col-sm-2 control-label">多选框：</label>
			    <div class="col-sm-10">
				    <label class="checkbox-inline">
				        <input type="checkbox"> 选项 1
				    </label>
				    <label class="checkbox-inline">
				        <input type="checkbox"> 选项 2
				    </label>
				    <label class="checkbox-inline">
				        <input type="checkbox"> 选项 3
				    </label>
			    </div>
		   	</div>
		    
		    <div class="form-group">
			    <label class="col-sm-2 control-label">下拉链表：</label>
			    <div class=" col-sm-10 col-lg-4">
				    <select class="form-control ">
					    <option>1</option>
					    <option>2</option>
					    <option>3</option>
					    <option>4</option>
					    <option>5</option>
				    </select>
			    </div>
		    </div>
		    
		  	<div class="form-group">
			    <div class="col-sm-offset-2 col-sm-10">
			      <button type="submit" class="btn btn-default">提交按钮</button>
			      <button type="reset" class="btn btn-default">重置按钮</button>
			      <button type="button" class="btn btn-default">普通按钮</button>
			    </div>
		  	</div>
</form>

模态框

<!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
		            </div>
		            <div class="modal-body">在这里添加一些文本</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="fun01()">关闭</button>
		                <button type="button" class="btn btn-primary" onclick="fun02()">提交更改</button>
		            </div>
		        </div>
		    </div>
		</div>		
		<script type="text/javascript">
			function fun01(){
				alert("no");
			}
			function fun02(){
				alert("yes");
			}
		</script>

3.3 可视化定制

http://www.bootcss.com/p/layoutit/

学习网站：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

总结

1.操作节点

2.各种事件
冒泡现象 – 重要

注重：案例

3.Bootstrap

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2041331.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

《Hadoop大数据技术与实践》+ 数仓版本

《Hadoop大数据技术与实践》+ 数仓版本

基础概念 随着数字化时代的到来&#xff0c;数据量的爆炸性增长使得传统的数据处理和分析方法变得不够高效&#xff0c;因此大数据技术应运而生。 数据分类 结构化数据&#xff1a;固定格式的SQL数据库等半结构化数据&#xff1a;json非结构化数据&#xff1a;图片、音视频 …
阅读更多...
探索sqlmap的奥秘：Python中的强大SQL注入检测工具

探索sqlmap的奥秘：Python中的强大SQL注入检测工具

文章目录 **探索sqlmap的奥秘&#xff1a;Python中的强大SQL注入检测工具**第一部分&#xff1a;背景介绍第二部分&#xff1a;sqlmap是什么&#xff1f;第三部分&#xff1a;如何安装sqlmap&#xff1f;第四部分&#xff1a;简单库函数使用方法第五部分&#xff1a;场景应用第…
阅读更多...
Grafana+Influxdb（Prometheus）+Apache Jmeter搭建可视化性能测试监控平台

Grafana+Influxdb（Prometheus）+Apache Jmeter搭建可视化性能测试监控平台

此性能测试监控平台&#xff0c;架构可以是&#xff1a; GrafanaInfluxdbJmeterGrafanaPrometheusJmeter Influxdb和Prometheus在这里都是时序性数据库 在测试环境中&#xff0c;压测数据对存储和持久化的要求不高&#xff0c;所以这里的组件可以都通过docker-compose.yml文件…
阅读更多...
制氧机在造纸工业中的作用

制氧机在造纸工业中的作用

在现代造纸工业中&#xff0c;制氧机扮演着至关重要的角色&#xff0c;为整个生产流程带来了诸多显著的优势和改进。 制氧机能够优化纸浆的漂白过程。传统的漂白方法可能效果不佳&#xff0c;且对环境造成较大压力。而通过制氧机制备的高纯度氧气参与漂白反应&#xff0c;能大大…
阅读更多...
Langchain pandas agent - Azure OpenAI account

Langchain pandas agent - Azure OpenAI account

题意&#xff1a;Langchain pandas代理 - Azure OpenAI账户 问题背景&#xff1a; I am trying to use Langchain for structured data using these steps from the official document. 我正在尝试使用 Langchain 处理结构化数据&#xff0c;按照官方文档中的这些步骤进行操作…
阅读更多...
软件测试第2章 黑盒测试和白盒测试对比

软件测试第2章 黑盒测试和白盒测试对比

目录 一、黑盒测试 二、白盒测试 三、黑盒测试 VS 白盒测试 一、黑盒测试 1、它只检查程序功能是否能按照需求规格说明书的规定正常使用&#xff0c;程序是否能适当地接受输入数据而产生正确的输出信息。 2、黑盒测试也称功能测试&#xff0c;通过测试来检测每个功能是否能…
阅读更多...
《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(4)-再识Wireshark

《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(4)-再识Wireshark

1.简介 按照以前的讲解和分享路数&#xff0c;宏哥今天就应该从外观上来讲解WireShark的界面功能了。 2.软件界面 由上到下依次是标题栏、主菜单栏、主菜单工具栏、显示过滤文本框、打开区、最近捕获并保存的文件、捕获区、捕获过滤文本框、本机所有网络接口、学习区及用户指…
阅读更多...
文件上传漏洞（三，靶场详解）

文件上传漏洞（三，靶场详解）

前言&#xff1a; 本文基于github上的upload-labs&#xff0c;PHP study以及bp抓包软件进行操作。 靶场环境搭建及pass-1.pass-2请转到&#xff1a;文件上传漏洞&#xff08;二&#xff0c;靶场搭建及漏洞利用&#xff09; 一&#xff0c;pass-3。 查看源码可知&#xff0c…
阅读更多...
OJ-0815

OJ-0815

题目 示例1 输入 bb1234aa 输出 10示例2 输入 bb12-34aa 输出 -31示例3 输入 bb0012-0034aa 输出 -31题解 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);long res 0;String s scanner…
阅读更多...
在WinCC(TIA Portal)项目中,如何正确的使用面板,模板,弹出窗口和滑入窗口?

在WinCC(TIA Portal)项目中,如何正确的使用面板,模板,弹出窗口和滑入窗口?

WinCC(TIA Portal)中提供了许多设计元素和组态对象,使得组态工作变得简单,文档中简要介绍了这些内容. WinCC(TIA Portal) 中提供了许多设计元素和组态对象&#xff0c;使得组态工作变得简单,文档中简要介绍了这些内容。 在 WinCC(TIA Portal) 中使用以下选项有助于提高组态过程…
阅读更多...
git是什么/基本指令

git是什么/基本指令

git作用 去中心化&#xff0c; 分布式版本控制器 新增术语&#xff1a;仓库区&#xff0c; 工作区&#xff0c; 暂存区 具体见下板书 常用git命令 git clone 仓库网址 git status 查看仓库状态 git add newfile 临时添加到git仓库 git commit -m 正式添加git仓库 g…
阅读更多...
电商SaaS聚水潭上市“求解”

电商SaaS聚水潭上市“求解”

时隔半年之后&#xff0c;电商ERP龙头聚水潭&#xff0c;再次向港交所递交主板上市申请&#xff0c;中金公司、摩根大通成为其联席保荐人。作为辅助电商商家运营的SaaS&#xff0c;其所提供的服务&#xff0c;主要包括库存分配、店铺管理、客户服务等诸多项目。作为国内最大的电…
阅读更多...
机械行业数字化生产供应链产品解决方案（七）

机械行业数字化生产供应链产品解决方案（七）

在机械行业的数字化生产供应链产品解决方案中&#xff0c;通过全面部署物联网&#xff08;IoT&#xff09;传感器、智能分析平台和自动化控制系统&#xff0c;实现对生产设备的实时监控和数据采集&#xff0c;并结合大数据和人工智能技术进行深度分析&#xff0c;从而优化生产调…
阅读更多...
AI绘画Stable Diffusion可以帮我做室内设计啦！把AI出图 应用到工作当中已经是人人必备的技能啦！

AI绘画Stable Diffusion可以帮我做室内设计啦！把AI出图 应用到工作当中已经是人人必备的技能啦！

哈喽大家好&#xff0c;我是画画的小强 今天给大家带来个有意思教程&#xff0c;就是AI绘画Stable Diffusion 辅助帮我做室内设计&#xff01; 在本篇文章中我们可以把Stable Diffusion 当做一个小的渲染器来用&#xff0c;帮助我们快速出图&#xff0c;以及快速的出概念的创…
阅读更多...
【网络】应用层协议-http协议

【网络】应用层协议-http协议

应用层协议-http协议 文章目录 1.Http协议1.1什么是http协议1.2认识URL1.3urlencode和urldecode1.4HTTP请求协议格式1.5HTTP响应协议格式1.6HTTP常见的Header1.7HTTP常见状态码1.8HTTP的方法1.8根据url调取对应的服务 2.cookie和session2.1cookie2.2session 3.HTTPS协议3.1对称…
阅读更多...
【Linux入门】Linux环境搭建

【Linux入门】Linux环境搭建

目录 前言 一、发行版本 二、搭建Linux环境 1.Linux环境搭建方式 2.虚拟机安装Ubuntu 22.02.4 1&#xff09;安装VMWare 2&#xff09;下载镜像源 3&#xff09;添加虚拟机 4&#xff09;换源 5&#xff09;安装VM Tools 6)添加快照 总结 前言 Linux是一款自由和开放…
阅读更多...
notepad++安装HexEdit插件

notepad++安装HexEdit插件

notepad安装HexEdit插件 打开notepad&#xff0c;选择插件—>插件管理 在这里找到HexEdit点击安装就可以 点击完&#xff0c;notepad会自动重启&#xff0c;重启完成就安装好了
阅读更多...
企业如何通过数据虚拟化，构建逻辑数据编织平台？

企业如何通过数据虚拟化，构建逻辑数据编织平台？

逻辑数据编织的理念来自于 Data Fabric 这一创新的架构理念。尤其是在过去五六年间&#xff0c;这个理念在国际领域持续保持其热度与前沿性&#xff0c;成为备受瞩目的技术趋势。 Data Fabric 的核心观点在于正视并接受数据物理集中化的不可行性&#xff0c;进而探索通过技术手…
阅读更多...
44 个 React 前端面试问题

44 个 React 前端面试问题

1.你知道哪些React hooks&#xff1f; useState&#xff1a;用于管理功能组件中的状态。useEffect&#xff1a;用于在功能组件中执行副作用&#xff0c;例如获取数据或订阅事件。useContext&#xff1a;用于访问功能组件内的 React 上下文的值。useRef&#xff1a;用于创建对跨…
阅读更多...
直播禁言后极氪总部遭围堵，手机模式造车的反噬来了？

直播禁言后极氪总部遭围堵，手机模式造车的反噬来了？

说实话&#xff0c;在热闹无比的车圈&#xff0c;曾经不咋缺话题的极氪&#xff0c;自从各大新势力强势崛起&#xff0c;尤其是小米杀进来后&#xff0c;已经好久没有像这一次这样被当成公共话题讨论了。‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 不过这一次&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023