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">«</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>