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>
5400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
