BootStrap
<!DOCTYPE html> <html lang="en"> <head><!--注释--><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"> </head> <body> <input type="button" value="提交"> <input type="button" value="提交" class="btn btn-primary"> <input type="button" value="提交" class="btn btn-success"> <input type="button" value="提交" class="btn btn-danger"> <input type="button" value="提交" class="btn btn-danger btn-xs"> </body> </html>
栅格系统
响应式布局（开始是堆叠在一起的，当大于这些阈值时将变为水平排列C） .col-sm- 750px .col-md- 970px .col-lg- 1170px <div class="col-sm-6" style="background-color: #2aabd2">1</div> <div class="col-sm-6" style="background-color:#b92c28">2</div> 非响应式布局（总是水平排列） .col-xs-
区域居中
（1）
.a{border:1px solid silver;width: 500px;height: 500px;}
(2)
使用栅格<div class=" a col-sm-offset-5 col-sm-2">xxx</div>
登录页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>.a{border:1px solid silver;margin-top: 100px;}
</style>
</head>
<body>
<form><div class=" a col-sm-offset-5 col-sm-2"><div class="form-group"><label for="exampleInputEmail1">用户名登录</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><button type="submit" class="btn btn-default">登录</button></div>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.a {border: 1px solid silver;border-radius: 5px;height: 300px;width: 350px;margin: 0 auto;margin-top: 50px;padding: 40px;box-shadow: 5px 5px 5px #b92c28;}.a .form-group h1{text-align: center;
}</style>
</head>
<body>
<form><div class="a"><div class=" form-group"><h1>用户名登录</h1><label for="exampleInputPassword1">用户名</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名"></div><div class=" form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"></div><button type="submit" class="btn btn-primary">登录</button></div>
</form>
</body>
</html>
)
