什么是bootstrap?
是一种方便你编辑网页样式的方法,通过类名加载前辈设置好的样式
网址:getbootstrap.com,中文网址:v3.bootcss.com
使用:
下载-下载源码(会下载一个压缩包),另一种下载方法(去bootcdn.com里下,搜索bootstrap-选择后缀名为bootstrap.css的地址拷贝),然后引入bootstrap,不断往里面加类即可。
在不添加任何样式下,建立一个登录页面:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>登录</h1>
<form>
<div>
<lable>用户名</lable>
<input type="text">
</div>
<div>
<lable>密码</lable>
<input type="password">
</div>
<div>
<button type="submit">登录</button>
</div>
</form>
</body>
</html>
效果图:
引用bootstrap样式:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
</head>
<body>
<h1>登录</h1>
<form class="container">
<div class="form-group">
<lable>用户名</lable>
<input class="from-control" type="text">
</div>
<div class="form-group">
<lable>密码</lable>
<input class="from-control" type="password">
</div>
<div class="from-group" >
<button class="btn btn-primary" type="submit">登录</button>
</div>
</form>
</body>
</html>
效果图:
引入bootstrap后,会使我们的样式设置便捷很多。如果还有某些样式效果达不到你的预期效果,我们还可以进行针对性的添加样式,注意,这里所要修改的样式应该放在bootstrap的引入链接之后,去覆盖它。
如,更改登录按钮的背景和边框颜色:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
<style>
.btn.btn-primary{
background-color: #aa2200;
border-color: #aa2200;
}
</style>
</head>
<body>
<h1>登录</h1>
<form class="container">
<div class="form-group">
<lable>用户名</lable>
<input class="from-control" type="text">
</div>
<div class="form-group">
<lable>密码</lable>
<input class="from-control" type="password">
</div>
<div class="from-group" >
<button class="btn btn-primary" type="submit">登录</button>
</div>
</form>
</body>
</html>
效果图:
同样,和自己添加css的方法一样,我们还可以给标签加类,然后去定义这个类的样式。
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
<style>
.btn.btn-primary{
background-color: #aa2200;
border-color: #aa2200;
}
.contaner-small{
max-width: 500px;
}
</style>
</head>
<div class="container contaner-small">
<h1>登录</h1>
<div class="alert alert-success">登录成功~正在跳转...</div>
<form">
<div class="form-group">
<lable class="container">用户名</lable>
<input class="from-control container" type="text">
</div>
<div class="form-group">
<lable class="container">密码</lable>
<input class="from-control container" type="password">
</div>
<div class="from-group" >
<button class="btn btn-primary" type="submit">登录</button>
</div>
</form>
</div>
</html>
效果图: