Bootstrap组件——输入框

一、输入框

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>

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>

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>

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>

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>

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>

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>

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>

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>