输入框
- 一、输入框
-
- 1.基本
- 2.尺寸
- 3.多选框和单选框
- 4.多个输入框与多个额外组件
- 5.按钮组合
- 6.带下拉列表的按钮组合
- 7.分离式按钮
- 8.自定义表单组合
- 9.自定义文件
一、输入框
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>
Bootstrap组件——输入框一、输入框 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>
Bootstrap组件——输入框一、输入框 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>
Bootstrap组件——输入框一、输入框 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>
Bootstrap组件——输入框一、输入框 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>
Bootstrap组件——输入框一、输入框 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>
Bootstrap组件——输入框一、输入框 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>
Bootstrap组件——输入框一、输入框 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>
Bootstrap组件——输入框一、输入框 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>
Bootstrap组件——输入框一、输入框 
