表单、表单控件
表单
1. 表单布局
- 堆叠表单 (全屏宽度)：垂直方向
- 内联表单：水平方向
表单元素 < input >, < textarea >, 和 < select > 在使用 .form-control 类的情况下，宽度都是设置为 100%。
2. 堆叠表单
代码如下：
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名"/>
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码" />
</div>
<div class="form-check">
<label for="form-check-lable">
<input class="form-check-input" type="checkbox">记住密码
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</body>
</html>
运行结果：
3. 内联表单（.form-inline）
内联表单需要在 元素上添加 .form-inline类。所有内联表单中的元素都是左对齐的。
注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form class="form-inline">
<label for="username">用户名：</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名" />
<label for="password">密码：</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码" />
<div class="form-check">
<label for="form-check-lable">
<input class="form-check-input" type="checkbox">记住密码
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</body>
</html>
运行结果：
扫描二维码关注公众号，回复：
16298652 查看本文章
表单控件
1. 支持的表单控件
- input
- textarea
- checkbox
- radio
- select
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
注： 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。
2. input
代码如下：使用两个 input 元素，一个是 text，一个是 password。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group">
<label for="passwords">密码:</label>
<input type="password" class="form-control" id="passwords">
</div>
</form>
</div>
</body>
</html>
运行结果：
2. textarea
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="comment">备注:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</form>
</div>
</body>
</html>
运行结果：
3. 复选框(checkbox)
代码如下：包含了三个选项，最后一个是禁用的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">游泳
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">阅读
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>吃零食
</label>
</div>
</form>
</body>
</html>
运行结果：
使用 .form-check-inline 类可以让选项显示在同一行上。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">游泳
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">阅读
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>吃零食
</label>
</div>
</form>
</body>
</html>
运行结果：
4. 单选框(radio)
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form>
<div class="radio">
<label><input type="radio" name="optradio">保存1周</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">保存1个月</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>永远保存</label>
</div>
</form>
</body>
</html>
运行结果：
使用 .radio-inline 类可以让选项显示在同一行上。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form>
<label class="radio-inline"><input type="radio" name="optradio">游泳</label>
<label class="radio-inline"><input type="radio" name="optradio">阅读</label>
<label class="radio-inline"><input type="radio" name="optradio" disabled>吃零食</label>
</form>
</body>
</html>
运行结果：
5. 下拉菜单(select)
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="sel1">单选下拉菜单:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label for="sel2">多选下拉菜单(按住 shift 键，可以选取多个选项):</label>
<select multiple class="form-control" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</body>
</html>
运行结果：
