学习自 https://www.runoob.com/bootstrap/bootstrap-grid-system.html
创建一个简单的BootStrap页面
- 官网下载bootstrap文件
https://getbootstrap.com/docs/4.5/getting-started/download/ - 新建html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap_test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>bootstrap web</h1>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
网格系统
<!--网格，每行12个,必须写在container中,每一行使用一个row,每一行有12个,保证总和有12个就可以-->
<div class="container">
<h1>bootstrap web</h1>
<div class="row">
<!-- 在不同设备上会有设置不同的比例 -->
<div class="col-sm-6 col-md-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>
<div class="col-sm-6 col-md-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>
<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>
</div>
</div>
<div class="row">
<div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 - 分为四个盒子</h4>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.
</p>
</div>
</div>
</div>
</div>
</div>
页面结果
表单
method和action方式提交表单
<div class="container">
<h2>form</h2>
<form role="form" method="post" action="/ssm/file/log">
<div class="form-group">
<label for="name1">名称</label>
<input type="text" class="form-control" id="name1" name="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="password1">密码</label>
<input type="text" class="form-control" id="password1" name="password" placeholder="请输入密码">
</div>
<button type="submit" class="btn">提交</button>
</form>
</div>
ajax方式提交表单
<div class="container">
<h2>form ajax</h2>
<form role="form" id="loginForm">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="text" class="form-control" id="password" name="password" placeholder="请输入密码">
</div>
<button type="button" class="btn" onclick="login()">提交</button>
</form>
</div>
<script>
function login() {
var data = $('#loginForm').serialize();
console.log("name"+data.name);
console.log("password:"+data.password);
console.log("data:"+data);
$.ajax({
cache: false,
type: "POST",
url: "/ssm/file/log",
data: data,
async: false,
success: function () {
window.location.href = "/ssm/logsucess.jsp?"+data;
}
});
}
</script>
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
