一、表单
基础表单
对于基础表单，Bootstrap并未对其做太多定制性效果设计，仅仅对表单内的fieldset/legeng/label标签进行定制
主要是想这些元素的margin、padding、border等进行了细化
.form-control类
- 宽度100%
- 设置了一个浅灰色的边框（#ccc）
- 具有4px的圆角
- 设置阴影效果，元素得到焦点时，阴影变化
-
设置了placeholder的颜色（#999）
form-control
原始焦点
form-control焦点
role属性
role="form"告诉辅助设备这是个表单
role="button"告诉设备，这是个按钮，可以点击
.form-group：产生一个margin-bottom=15px效果
form-group
form表单元素
input表单
- 使用时必须声明type类型
-
.input-sm：小标签 -
.input-lg：大标签
表单大小 -
disabled：禁用 -
placeholder：提示
disabled/placeholder
select
-
.moutiple：多行选择
多行
textarea
设置rows，cols可定宽高，但如果添加了form-control类名，则不必设置cols
单选框、多选框
- 日常最头痛的控件与文字对齐问题，在bootstrap中无需关心
-
.checkbox-inline：复选框水平排列 -
.radio-inline：单选框水平排列
原始样式
内联样式
按钮
bootstrap中按钮全都用button按钮实现
Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。
默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。
.btn：默认按钮（同样支持a标签及input标签中的submit）
<button class=“bin btn-default” type=“button”>默认按钮</button>
.btn-primary：主要按钮
.btn-success：成功按钮
.btn-warning：警告按钮
.btn-danger：危险按钮
.btn-link：链接按钮
<button class="btn-primary">登录</button>
<button class="btn-success">登录</button>
<button class="btn-warning">登录</button>
<button class="btn-danger">登录</button>
<button class="btn-link">登录</button>
按钮颜色
按钮大小
.btn-lg：大型按钮
.btn-sm：小型按钮
.btn-xs：超小型按钮
.btn-block：块状按钮
按钮大小
内联表单
.form-inline
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="用户名/邮箱">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="密码">
</div>
<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
<button class="btn btn-primary">提交</button>
</form>
内联表单
横向表单
.form-horizontal配合栅格系统
<form action="" class="horiaontal" role="form">
<div class="form-group">
<label for="user" class="col-md-1 control-label">用户名</label>
<div class="col-md-11">
<input type="text" class="form-control" id="user" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-1 control-label">密码</label>
<div class="col-md-11">
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-1 col-md-11">
<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-1 col-md-11">
<button class="btn btn-primary">登录</button>
</div>
</div>
</form>
横向表单
综合demo
<div class="container">
<div class="page-header">
<h2>登录页面</h2>
</div>
<div class="form-group">
<label for="username"><span class="glyphicon glyphicon-user"></span>用户名：</label>
<input id="username" name="username" class="form-control" placeholder="用户名/邮箱" type="text">
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-lock"></span>密码：</label>
<input id="password" name="password" class="form-control" placeholder="密码" type="text">
</div>
<div class="form-group">
<input type="checkbox">记住我
</div>
<button class="btn btn-primary">提交</button>
</div>
综合demo
