Bootstrap学习记录【6】【表单】

1.表单控件

.form-control：.input-lg（较大） .input-sm（较小）

1.1输入框input

	<input type="text" class="form-control"><br>
	<input type="text" class="form-control input-lg"><br>
	<input type="text" class="form-control input-sm"><br>

1.2下拉框select

	<select name="select" id="select" class="form-control">
		<option value="1">这是1</option>
		<option value="2">这是2</option>
		<option value="3">这是3</option>
	</select>

1.3文本框textarea

	<textarea class="form-control">你好啊</textarea><br>
	<textarea class="form-control input-lg">你好啊</textarea><br>
	<textarea class="form-control input-sm" >你好啊</textarea><br>

1.4复选框checkbox、单选框radio
（1）checkbox
①竖直排放

<div class="row">
		<div class="col-lg-8">
			<div class="checkbox">
				<label><input type="checkbox" name="hobby" />唱歌</label>
			</div>
			<div class="checkbox">
				<label><input type="checkbox" name="hobby" />跳舞</label>
			</div>
		</div>
	</div>

②水平排放

<div class="row">
		<div class="col-lg-8">
			<label  class="checkbox-inline">
				<input type="checkbox" name="hobby">唱歌
			</label>
			<label  class="checkbox-inline">
				<input type="checkbox" name="hobby">跳舞
			</label>
		</div>
	</div>

（2）radio即将上述checkbox例子里的checkbox全改成radio

1.5按钮button
（1）button
基本样式：.btn
附加样式：
.btn-danger：红
.btn-success：绿
.btn-warning：橙
.btn-primary：深蓝
.btn-info：蓝
.btn-link：按钮效果（蓝字）
.btn-default：白

<button class="btn btn-danger">按钮</button>

（2）设置其他标签为按钮效果

	<a href="" class="btn btn-success">a标签</a>
	<div class="btn btn-danger">div标签</div>
	<span class="btn btn-info">span标签</span>

（3）按钮大小
.btn-lg .btn-sm .btn-xs(超小)

（4）按钮禁用
.disabled 看起来像禁用了，只是样式上禁用了，点击还是有效果的

1.6表单布局
创建基本表单的步骤：
（1）向父<form>标签添加role="from"
（2）把标签和控件放在一个带有.from-group的div中
（3）向所有文本元素<input>、<textarea>和<select>添加class="from-control"
结构布局：
（1）（使用更多）水平表单 .form-horizontal

	<form role="form" class="form-horizontal" action="#">
		<div class="form-group">		
			<label for="email" class="control-label col-md-2">邮箱</label>
			<div class="col-md-8">
				<input id="email" type="email" class="form-control" placeholder="请输入邮箱">
			</div>
		</div>
		<div class="form-group">		
			<label for="password" class="control-label col-md-2">密码</label>
			<div class="col-md-8">
				<input id="password" type="password" class="form-control" placeholder="请输入密码">
			</div>
		</div>
	</form>

（2）内联表单，在一行显示.form-inline,都在一行上显示，不需要设置占多少

	<form role="form" class="form-inline" action="#">
		<div class="form-group">		
			<label for="email" class="control-label col-md-2">邮箱</label>
			<input id="email" type="email" class="form-control" placeholder="请输入邮箱">
		</div>
		<div class="form-group">		
			<label for="password" class="control-label col-md-2">密码</label>
			<input id="password" type="password" class="form-control" placeholder="请输入密码">
		</div>
		<div class="form-group">
				<button class="btn btn-info">审查</button>
				<button class="btn btn-success">提交</button>
				<button class="btn btn-warning">退出</button>
			</div>
	</form>

其他补充：lable中的for与input中的id相同，点击lable可聚焦到input标签

学习来源：
https://www.bilibili.com/video/BV1Pz4y1k7g5?from=search&seid=12895899452417695000
学习进度：101、102、103、104