// HTML >>> 第一种样式
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body style="padding:5px;">
<form role="form">
<div class="form-group">
<label for="Email1">邮箱地址</label>
<input type="email" class="form-control" id="Email1" placeholder="Enter email">
<!-- 添加 form-control 类用于将表单设置为 100% 宽度, 并添加样式上的美化 -->
</div>
<div class="form-group">
<label for="Password1">密码</label>
<input type="password" class="form-control" id="Password1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">文件上传 </label>
<input type="file" id="exampleInputFile">
<p class="help-block"> ...... </p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请勾选
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>
参考 《CSS高效开发实战》 P160