输入框组、自定义表单
输入框组
1. 基础输入框
我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。最后，我们还需要使用 .input-group-text 类来设置文本的样式。
代码如下：
<!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 mt-3">
<form action="#" method="post">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" name="username" id="username" placeholder="Username" />
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" name="email" id="mail" placeholder="Your Email" />
<div class="input-group-append">
<span class="input-group-text">
@163.com
</span>
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</body>
</html>
运行程序：
2. 输入框的大小（.input-group-lg / .input-group-sm）
代码如下：
<!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 mt-3">
<form>
<div class="input-group mb-3 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">Small</span>
</div>
<input type="text" class="form-control" />
</div>
</form>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Default</span>
</div>
<input type="text" class="form-control" />
</div>
</form>
<form>
<div class="input-group mb-3 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">Large</span>
</div>
<input type="text" class="form-control" />
</div>
</form>
</div>
</body>
</html>
运行结果：
3. 多个输入框和文本
代码如下：
<!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 mt-3">
<!-- 多个输入框 -->
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Name</span>
</div>
<input type="text" class="form-control" placeholder="First Name" />
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</form>
<!-- 多个文本信息 -->
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">One</span>
<span class="input-group-text">Two</span>
<span class="input-group-text">Three</span>
</div>
<input type="text" class="form-control">
</div>
</form>
</div>
</body>
</html>
运行结果：
4. 复选框与单选框
代码如下：
<!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 mt-3">
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" />
</div>
</div>
<input type="text" class="form-control" placeholder="游泳" />
</div>
</form>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" />
</div>
</div>
<input type="text" class="form-control" placeholder="读书" />
</div>
</form>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" />
</div>
</div>
<input type="text" class="form-control" placeholder="记住密码" />
</div>
</form>
</div>
</body>
</html>
运行结果：
5. 输入框添加按钮组
代码如下：
<!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 mt-3">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary">基础按钮</button>
</div>
<input type="text" class="form-control" placeholder="文本" />
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search"/>
<div class="input-group-append">
<button type="submit" class="btn btn-success">Go</button>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="balabala"/>
<div class="input-group-append">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Cancel</button>
</div>
</div>
</div>
</body>
</html>
运行结果：
6. 设置下拉菜单
输入框中添加下拉菜单不需要使用 .dropdown 类。
代码如下：
<!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 mt-3">
<form>
<div class="input-group mt-3 mb-2">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">选择网站</button>
<div class="dropdown-menu">
<a href="https://www.taobao.com" class="dropdown-item">淘宝</a>
<a href="https://www.baidu.com" class="dropdown-item">百度</a>
<a href="https://www.jd.com" class="dropdown-item">京东</a>
</div>
</div>
<input type="text" class="form-control" placeholder="网站地址" />
</div>
</form>
</div>
</body>
</html>
运行结果：
7. 输入框组标签
在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应，点击标签后可以聚焦输入框：
代码如下：
<!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 mt-3">
<form>
<label for="email">这里输入您的邮箱:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="email" name="email" />
<div class="input-group-append">
<span class="input-group-text">@163.com</span>
</div>
</div>
</form>
</div>
</body>
</html>
运行结果：
自定义表单
(Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。)
1. 自定义复选框
如果要自定义一个复选框，可以设置 < div > 为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该 < div > 里头，然后复选框设置为 type=“checkbox”，类为 .custom-control-input。复选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配复选框的 id。
代码如下：
<!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 mt-3">
<form>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example" />
<label class="custom-control-label" for="customCheck">自定义复选框</label>
</div>
<input type="checkbox" id="defaultCheck" name="example2" />
<label for="defaultCheck">默认复选框</label>
<br>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</body>
</html>
运行结果：
2. 自定义单选框
如果要自定义一个单选框，可以设置 < div > 为父元素，类为 .custom-control 和 .custom-radio，单选框作为子元素放在该 < div > 里头，然后单选框设置为 type=“radio”，类为 .custom-control-input。单选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配单选框的 id。
代码如下：
<!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 mt-3">
<form>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customRadio" name="example" />
<label class="custom-control-label" for="customRadio">自定义单选框</label>
</div>
<input type="radio" id="defaultRadio" name="example2" />
<label for="defaultRadio">默认单选框</label>
<br>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</body>
</html>
运行结果：
3. 自定义控件显示在同一行（ .custom-control-inline ）
我们可以在外部元素上使用 .custom-control-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>
<div class="container mt-3">
<form>
<div class="custom-control custom-radio mb-3 custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio1" name="example" />
<label class="custom-control-label" for="customRadio1">自定义单选框</label>
</div>
<div class="custom-control custom-radio mb-3 custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio2" name="example" />
<label class="custom-control-label" for="customRadio2">自定义单选框</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</body>
</html>
运行结果：
4. 自定义选择菜单
创建自定义选择菜单可以在 元素上添加 .custom-select 类:比如，可以使用 .custom-select-sm、.custom-select-lg 来设置菜单的大小。
代码如下：
<!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 mt-3">
<form>
<select name="links" class="custom-select-sm">
<option selected>自定义选择菜单</option>
<option value ="京东">京东</option>
<option value ="淘宝">淘宝</option>
<option value ="拼多多">拼多多</option>
</select>
</form>
</div>
</body>
</html>
运行结果：
5. 自定义滑块控件
我们可以在 input 为 type=“range” 的输入框中添加 .custom-range 类来设置自定义滑块控件。
代码如下：
<!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 mt-3">
<form>
<label for="customRange">自定义滑块控件</label>
<input type="range" class="custom-range" id="customRange" name="points1">
<label for="defaultRange">默认滑块控件</label>
<input type="range" id="defaultRange" name="points2">
</form>
</div>
</body>
</html>
运行结果：
6. 自定义文件上传控件
我们可以在父元素添加 .custom-file 类，然后在 input 设置为 type=“file” 并添加 .custom-file-input:上传控件的文本使用 label 标签，标签使用 .custom-file-label 类，label 的 for 属性值需要匹配上传控件 id。
代码如下：
<!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 mt-3">
<form>
<p>自定义上传文件样式:</p>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFile" name="filename">
<label class="custom-file-label" for="customFile">选择文件</label>
</div>
<p>默认上传文件样式:</p>
<input type="file" id="myFile" name="filename2">
</form>
</div>
</body>
</html>
运行结果：
