基础表单
<form role="form">
<div class="form-group">
<label for="myEmail">邮箱
</label>
<input type="email" class="form-control" id="myEail" placeholder="请输入您的邮箱">
</div>
<div class="form-group">
<label for="myPassword">密码
</label>
<input type="password" class="form-control" id="myPassword" placeholder="请输入您的密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox">记住密码
</label>
</div>
<button type="submit" class="btn btn-default">
进入邮箱
</button>
</form>
水平表单
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="myEmail" class="col-md-2 control-label">邮箱
</label>
<div class="col-md-10">
<input type="email" id="myEmail" class="form-control" placeholder="请输入您的邮箱" >
</div>
</div>
<div class="form-group">
<label for="myPassword" class="col-md-2 control-label">密码
</label>
<div class="col-md-10">
<input type="password" class="form-control" placeholder="请输入您的密码" id="myPassword" >
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-2">
<div class="checkbox">
<label>
<input type="checkbox">记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-2">
<button type="submit" class="btn btn-default">
进入邮箱
</button>
</div>
</div>
</form>
内联表单
只需添加一个class="form-inline"到form标签即可。
若将class="sr-only"添加到label标签,则label不再显示,而且不会占据空的一行
下拉选择框
<form role="form">
<div class="form-group">
<select name="" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
</div>
<div class="form-group">
<select name="" id="" class="form-control" multiple="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
</div>
</form>
文本域
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3">
</textarea>
</div>
</form>
复选框和单选按钮
<form roel="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sex" value="boy" checked>男
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sex" value="girl"> 女
</label>
</div>
</form>
复选和单选框水平排列
在label标签上添加类名"checkbox-inline",“radio-inline”。
按钮
- 样式
class="btn"
class="btn btn-primary"//主要按钮,蓝色
class="btn btn-success"//成功按钮,绿色
class="btn btn-info"//信息按钮,浅蓝色
class="btn btn-warning"//警告按钮,橙色
class="btn btn-danger"//危险按钮,红色
- 大小
在button标签中添加一个类:btn-lg
或btn-sm
即可。 - 块状按钮
在button标签中添加一个类:btn-block
即可。此时按钮宽度为100%. - 禁用状态
方法1:在标签中添加disabled属性
(可以禁止元素默认行为)
方法2:在标签中添加disable类
表单控件的大小
input标签中添加类名:input-lg,input-sm
表单控件禁用状态
- 在要禁用的表单控件上加上"disabled"
- 如果在fieldset设置了disabled属性,整个域都处于被禁用的状态
表单控件验证状态
- has-warning 警告状态(黄色)
- has-error错误状态(红色)
- has-success成功状态(绿色)
<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">成功状态
<input class="form-control" id="inputSuccess1" type="text" placeholder="成功状态">
</label>
</div>
......
</form>
表单提醒信息
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">
成功状态
</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态">
<span class="help-block">你输入的信息是对的</span>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
多标签支持
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span按钮标签</span>
<div class="btn btn-default">div按钮标签</div>
图像
给img添加类:
- img-responsive:响应式图片
- img-rounded:圆角图片
- img-circle:圆形图片
- img-thumbnail:缩略图片
图标
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-plus"></span>