<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Bootstrap 4 表单</title>
</head>
<body>
<div class="container mt-4">
<h2>表单示例</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="输入邮箱">
<small id="emailHelp" class="form-text text-muted">我们将保护您的邮箱。</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="输入密码">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">记住我</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<!-- Bootstrap JavaScript 和 jQuery(可选)-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
在这个例子中,我们使用了 form、form-group、form-control、form-check、btn 和 btn-primary 等类来创建一个简单的表单。表单包含一个邮箱地址输入框、一个密码输入框、一个复选框(记住我)和一个提交按钮。
你可以根据需要添加更多的表单元素,使用其他 Bootstrap 类来调整样式。这只是一个简单的示例,你可以根据实际需求进行更多的定制。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5500/Bootstrap