HTML——bootstrap

最新推荐文章于 2024-09-10 12:43:55 发布

Jhinhua

最新推荐文章于 2024-09-10 12:43:55 发布

阅读量213

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104966568

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

bootstrap的简单使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<!-- <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> -->
	</head>
	<body>
		
		<div class="container">
			<table class="table table-bordered table-hover">
				<tr>
					<td>1-1</td>
					<td>1-2</td>
					<td>1-3</td>
				</tr>
				<tr>
					<td>2-1</td>
					<td>2-2</td>
					<td>2-3</td>
				</tr>
				<tr>
					<td>3-1</td>
					<td>3-2</td>
					<td>3-3</td>
				</tr>
			</table>
			
			
			<a class="btn btn-danger btn-sm">百度</a>
			<a class="btn btn-danger btn-lg">百度</a>
			
			<img src="../img/pic21.jpg" class="img-circle" />
			<img src="../img/pic21.jpg" class="img-thumbnail" />
			
			<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			
			<div class="glyphicon glyphicon-trash danger"></div>
			
			<div class="dropdown">
				 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
				    水果和蔬菜
				    <span class="caret"></span>
				  </button>
				  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
					  <li class="dropdown-header">水果</li>
					  <li>苹果</li>
					   <li>香蕉</li>
					    <li>草莓</li>
					<li class="dropdown-header">蔬菜</li>
					<li>大白菜</li>
					 <li>胡萝卜</li>
					  <li>西红柿</li>
				  </ul>
			</div>
			
			<ul class="nav nav-tabs">
				
			  <li role="presentation" class="active"><a href="#">Home</a></li>
			  <li role="presentation"><a href="#">Profile</a></li>
			  <li role="presentation"><a href="#">Messages</a></li>
			</ul>
			
			<button class="add">＋</button>
			<a >
			  Messages <span class="badge">0</span>
			</a>
			<button class="sub">-</button>
			<!-- 
			需求： 信息量在9条以上一直显示的是9+
				点击+  message数量增加 增加到9以上 就显示9+
				点击-  message数量减少  最少减到0
			 -->
			 
			 <br />
			 <br />
			 
			 
			 <button class="process_add">＋</button>
			 <div class="progress">
			   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
			     0%
			   </div>
			 </div>
	
		</div>
		
		
		<script>
			
			// 1-15之间随机增加
			
			// 获取当前的进度数量
			var process_num = parseInt($(".progress-bar").text())
			
			$(".process_add").click(function(){
				// 生成一个1-15之间的随机数
				// Math.random() * 15  [0, 15) 0.31 1 14.78888  15
				var num = Math.ceil(Math.random() * 15) // Math.random()[0, 1)
				process_num += num
				
				if(process_num >= 100){
					process_num = 100  // 满了100之后就不用在增加了
				}
				
				$(".progress-bar").text(process_num + "%")
				$(".progress-bar").css("width", process_num + "%")
			})
			
			
			
			// 获取当前的信息量
			var message_num = parseInt($(".badge").text())
			
			$(".add").click(function(){
				message_num++
				$(".badge").text(message_num + "")
				if(message_num > 9){
					$(".badge").text("9+")
				}
			})
			
			$(".sub").click(function(){
				message_num--
				if(message_num > 9){
					$(".badge").text("9+")
				}else{
					if(message_num < 0){
						message_num = 0
					}
					$(".badge").text(message_num + "")
				}
			})
			
			
			
			
			
			
			var btn_flag = false // 标记按钮是否被点击过展开下拉菜单
			// 默认是没有展开的
			
			$("#dropdownMenu1").click(function(){
				btn_flag = !btn_flag
				if (btn_flag){
					$(".dropdown-menu").css("display", "block")
				}else{
					$(".dropdown-menu").css("display", "none")
				}
			})
			
			
			// 选中导航 切换导航
			// $(".nav li").each(function(){
			// 	console.log(this.innerText)
			// })
			
			$(".nav li").click(function(){
				$(".nav li").removeClass("active")
				
				// 设置被点击的哪个是选中状态
				$(this).addClass("active")
				
			})
			
		</script>
		
	</body>
</html>