标签：inline bootstrap 下拉框 状态 宽度 水果 -o val 绿色
一、表单基本结构
举例说明：表单内的两个控件以水平方式显示
<form class="form-horizontal" role="form">
<div class="form-group">
<label>注册名</label>
<input type="text " class="form-control" placeholder=" 请填写注册名 " >
</div>
<div class="form-group">
<label>联系方式</label>
<input type="text " class="form-control" placeholder=" 请填写绑定的手机号 " >
</div>
</form>
1、表单内控件水平显示：<form class="form-horizontal" role="form">
role="form"：扮演表单角色
表单内联：<form class="form-inline" role="form">
2、表单容器：class="form-group"
3、bootstrap定义的表单中文本框的格式：class="form-control"
表示表单宽度100%，浅灰色的边框，4px的圆角，鼠标聚焦时阴影和边框有明显的变化效果，placeholder字体颜色为#999
只有文本框才会使用 class="form-control"，比如文本框、下拉框
4、隐藏label标签：<label class="sr-only">……</label>
简单记忆：大标签<form>--容器<div class="form-group">--小标签<label>--表单属性
二、表单的文本框（text）、文本域（textarea）、单选按钮（radio）、复选框（checkbox）、下拉框（select）
文本框：
<form role="form">
<div class="form-group">
<label>……</label>
<input type="text" class="form-control" placeholder=" ">
</div>
</form>
文本域：
<form role="form">
<div class="form-group">
<label>……</label>
<textarea class="form-control" row="3">
</div>
</form>
单选按钮：
<form role="form">
<div class="form-group">
<div class="radio">
<label class="radio-inline">
<input type="radio" id="sex" name="girl">
女生
</label>
</div>
<div class="radio">
<label class="radio-inline">
<input type="radio" id="sex" name="boy">
男生
</label>
</div>
</div>
</form>
值得注意：<div>需要声明类名为radio；id名相同，才能进行二选一；单个单选按钮包含在<label>标签，否则按钮和文字不在同一水平线上
复选框：
<form role="form">
<div class="form-group">
<p>你喜欢的水果是：</p>
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" value=" ">
苹果
</label>
</div>
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" value=" " >
梨子
</label>
</div>
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" value=" ">
石榴
</label>
</div>
</div>
</form>
下拉框：
<form role="form">
<div class="form-group">
<select class="form-control" >
<option>广西壮族自治区</option>
<option>广东省</option>
<option>四川省</option>
</select>
</div>
</form>
三、表单控件状态：验证状态
1、表示警告状态（黄色）：.has-warning
2、表示错误状态（红色）：.has-error
3、表示成功状态（绿色）：.has-success
四、表单控件状态：禁用状态
禁用有两种方式：
1、可以禁止元素默认状态：class="disabled"
2、不会禁止元素默认状态：disabled="disabled"
3、上述两种方法都是在表单控件里添加禁用属性代码
4、特例存在的标签，颜色变灰，但没有被禁用：<legend>……</legend>
标签：inline bootstrap 下拉框 状态 宽度 水果 -o val 绿色
原文地址：https://www.cnblogs.com/love-or/p/8889523.html
