1.表单
1.1.基本表单
1、class=”form-control”:可以给<input>、<textarea>、<select>元素设置宽度为100%
示例代码:
<h3 class="mark">1.1 基本表单</h3>
<form >
<label>用户名</label>
<input type="text" class="form-control" />
</form>
<form>
<div class="form-group">
<label>用户名</label>
<input type="text" placeholder="请输入用户名"class="form-control" />
</div>
<div class="form-group">
<label>密码</label>
<input type="text" placeholder="请输入密码"class="form-control" />
</div>
</form>
1.2.内联表单:class=”form-inline”
什么是内联表单呢,就是让我们的所有表单元素都在一行
示例代码:
<h3 class="mark">1.2 内联表单</h3>
<form class="form-inline">
<label>用户名</label>
<input type="text" />
<select >
<option >哈哈</option>
</select>
</form>
1.3.表单组合
class=”input-group”、class=”input-group-addon”
表单组合就是把几个元素组合在一起,我们一起来看一下代码:
<h3 class="mark">1.3 表单组合</h3>
<div class="form-group">
<label>工资</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" />
</div>
</div>
1.4.水平排列表单,设计到栅格
<h3 class="mark">1.4 水平排列表单(结合栅格)</h3>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="