Javaweb day05

Bootstrap的常用组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
	</head>
	<body>
		<!-- 1.按钮组 -->
		<div class="btn-group" role="group">
			<button type="button" class="btn btn-default">我四按钮</button>
			<button type="button" class="btn btn-default">我四按钮</button>
		</div>

		<!-- 2. 导航条 -->
		<ul class="nav nav-tabs">
			<li role="presentation"><a href="#">首页</a></li>
			<li role="presentation" class="active"><a href="#">个人中心</a></li>
			<li role="presentation"><a href="#">购物车</a></li>
		</ul>

		<!-- 3. 分页 -->
		<nav>
			<ul class="pagination">
				<li>
					<a href="#" aria-label="Previous">
						<span aria-hidden="true">&laquo;</span>
					</a>
				</li>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li>
					<a href="#">下一页</a>
				</li>
			</ul>
		</nav>

		<!-- 4. 巨幕 -->
		<div class="jumbotron">
			<h1>你好,欢迎来到蜗牛学院</h1>
			<p>
				Java好
			</p>
		</div>

		<!-- 5. 警告框 -->
		<div class="alert alert-success" role="alert">成功了</div>
		<div class="alert alert-info" role="alert">成功了</div>
		<div class="alert alert-warning" role="alert">成功了</div>
		<div class="alert alert-danger" role="alert">成功了</div>

		<!-- 6. 进度条 -->
		<div class="progress">
			<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" style="width: 60%">
				<span class="sr-only">60%</span>
			</div>
		</div>

		<!-- 7. 下拉列表 -->
		<div class="btn-group">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				国家<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">中国</a></li>
				<li><a href="#">中国</a></li>
				<li><a href="#">中国</a></li>
				<li><a href="#">中国</a></li>
			</ul>
		</div>
		
		<!-- 8.表格 -->
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<table class="table table-striped table-bordered table-hover">
						<tr>
							<td>1</td>
							<td>2</td>
							<td>3</td>
							<td>4</td>
						</tr>
						<tr>
							<td>5</td>
							<td>6</td>
							<td>7</td>
							<td>8</td>
						</tr>
						<tr>
							<td>9</td>
							<td>10</td>
							<td>11</td>
							<td>12</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		
		<!-- 9. 表单 -->
		
	</body>
</html>

表单

`

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
	</head>
	<body>
		<!-- 9. 表单 -->
		<form>
			<div class="form-group">
				<label for="inputEmail">邮箱</label>
				<input id="inputEmail" type="email" class="form-control" placeholder="Email"/>
			</div>
			<div class="form-group">
				<label for="inputPassword">密码</label>
				<input id="inputPassword" type="password" class="form-control" placeholder="Password"/>
			</div>
			<div class="form-group">
				<label for="inputFile">上传</label>
				<input id="inputFile" type="file" class="form-control"/>
				<p class="help-block">
					skdfjlsfjlsdj
				</p>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox"/> 篮球
				</label>
				<label>
					<input type="checkbox"/> 篮球
				</label>
			</div>
			<button type="submit" class="btn btn-default">注册</button>
		</form>
		
	</body>
</html>


下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="gj" onchange="f1(this.value)">
			<option value="0">请选择国家</option>
			<option value="1">魏国</option>
			<option value="2">蜀国</option>
			<option value="3">吴国</option>
		</select>
		<select id="xm" onchange="f2(this.value)">
		</select>
		<select id="wq">
		</select>
	</body>
	<script type="text/javascript">
		function f1(v) {
			let xm = document.getElementById("xm");
			xm.options.length = 0;
			switch(v) {
				case "0":
				xm.options[0] = new Option("请选择国家")
				break;
				case "1":
				xm.options[0] = new Option("曹操", 11)
				xm.options[1] = new Option("夏侯惇", 12)
				xm.options[2] = new Option("荀彧", 13)
				break;
				case "2":
				xm.options[0] = new Option("刘备", 21)
				xm.options[1] = new Option("关羽", 22)
				xm.options[2] = new Option("赵云", 23)
				break;
				case "3":
				xm.options[0] = new Option("孙权", 31)
				xm.options[1] = new Option("周瑜", 32)
				xm.options[2] = new Option("甘宁", 33)
				break;
			}
		}
		
		function f2(v) {
			let xm = document.getElementById("wq");
			xm.options.length = 0;
			switch(v) {
				case "11":
				xm.options[0] = new Option("倚天剑")
				break;
				case "12":
				xm.options[0] = new Option("芭蕉扇")
				break;
				case "13":
				xm.options[0] = new Option("长枪")
				break;
				case "21":
				xm.options[0] = new Option("雌雄双股剑")
				break;
				case "22":
				xm.options[0] = new Option("青龙偃月刀")
				break;
				case "23":
				xm.options[0] = new Option("豪龙胆")
				break;
				case "31":
				xm.options[0] = new Option("大宝剑")
				break;
				case "32":
				xm.options[0] = new Option("火攻")
				break;
				case "33":
				xm.options[0] = new Option("双截棍")
				break;
			}
		}
		
		// window.onload = function() { // $(function(){})
		// 	let gj = document.getElementById("gj");
		// 	gj.onchange = f1 // $(#_gj).onchange
		// }
	</script>
</html>

你可能感兴趣的:(学习计划,javascript,开发语言,ecmascript)