一、输入框
1.基本
<div class="form-row">
<div class="col">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="用户名">
</div>
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="邮箱名">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">https://example.com/users/</span>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">文本输入框</span>
</div>
<textarea class="form-control"></textarea>
</div>
</div>
</div>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7bbe1e9770cd5dea35b44226036d17b7.png)
2.尺寸
<div class="form-row">
<div class="col">
<div class="form-group input-group mt-5 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">大尺寸</span>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">正常尺寸</span>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">小尺寸</span>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b16e25c922f4d05eefc67075754139f7.png)
3.多选框和单选框
<div class="form-row">
<div class="col">
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<span class="input-group-text">
<input type="radio">
</span>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<input type="checkbox">
</span>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8c3821eae71b4e0a8a3e98e914e83ef8.png)
4.多个输入框与多个额外组件
<div class="form-row">
<div class="col">
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<span class="input-group-text">多个输入框</span>
</div>
<input type="text" class="form-control" placeholder="请输入姓">
<input type="text" class="form-control" placeholder="请输入名">
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</div>
</div>
</div>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c91a58ebfcdd3842f6611b67901ec188.png)
5.按钮组合
<div class="form-row">
<div class="col">
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary">左按钮</button>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/adf5370f2db8d903fb01cbb6b41c54d9.png)
6.带下拉列表的按钮组合
<div class="form-row">
<div class="col">
<div class="form-group input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">左侧下拉菜单</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">深圳</a>
</div>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d39809854d26acbc81343f5aeb8b7e4c.png)
7.分离式按钮
<div class="form-row">
<div class="col">
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<button class="btn btn-outline-success">分离式左侧下拉菜单</button>
<button class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">深圳</a>
</div>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/62d3b894c120c08ec126e204abf46693.png)
8.自定义表单组合
<div class="form-row">
<div class="col">
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<label for="select1" class="input-group-text">label标签在左边</label>
</div>
<select class="custom-select" id="select1">
<option value="">城市</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
</div>
<div class="form-group input-group">
<select class="custom-select">
<option value="">城市</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-danger">button标签在右边</label>
</div>
</div>
</div>
</div>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e8dbe8bab6732dd3fa989841f40cdfe3.png)
9.自定义文件
<div class="form-row">
<div class="col">
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<span class="input-group-text">上传在左边</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="file1">
<label for="file1" class="custom-file-label"></label>
</div>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary">按钮在左边</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="file1">
<label for="file1" class="custom-file-label"></label>
</div>
</div>
</div>
</div>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ced300b07f7c8411115ce418e528cebf.png)