一、表单的基本框架
<!-- <form class="form-inline"> 内联表单,让所有表单元素居于一行--> <form class="form-horizontal"> <div class="form-group"> <label for="Email" class="col-sm-2 control-label">电子邮件</label> <div class="col-sm-10"> <input type="email" name="Email" class="form-control" placeholder="请输入您的电子邮件"> </div> </div> <div class="form-group"> <label for="PassWord" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" name="PassWord" class="form-control" placeholder="请输入您的密码"> </div> </div> <div class="input-group"> <div class="input-group-addon">¥</div> <input type="text" class="form-control" name="" placeholder="请输入价格"> <div class="input-group-addon">元</div> </div> </form>
*在 form 上设置class*
.form-inline // 内联表单,左对齐浮动,表现为inline-block内联块结构 P.s.<768px,会恢复独占样式
.form-horizontal // 表单内元素保持水平排列,
*在 div 上设置class*
.form-group // 表单群组,类似块级模式
.input-group // 表单合组,input 配合 div.input-group-addon使用,保持在一行显示
*在 label 上设置class*
.control-label // 保持和父元素样式同步,居右对齐
二、复选框和单选框 (用法相同)
<div class="checkbox"> <label> <input type="checkbox"> 体育 </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" disabled> 美术 </label> </div>
input放于label中,作用为点击文本也可视为选中。
*在 input和label外围添加div, 上设置class*
.checkbox // 文字和input居中对齐,鼠标为手型,每一组为一行
.disabled // 禁用复选框,鼠标手型变为禁用样式
.radio // radio
<label class="checkbox-inline"> <input type="checkbox"> 音乐 </label> <label class="checkbox-inline disabled"> <input type="checkbox" disabled> 音乐 </label> <label class="radio-inline"> <input type="radio" name="sex"> 女 </label> <div class="radio disabled"> <label> <input type="radio" name="sex" disabled> 男 </label> </div>
*在 label 上设置class*
.checkbox-inline // 内联一行显示的复选框
.radio-inline // 内联一行显示的单选框
三、下拉列表
<select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select>
.form-control // select 100% 显示,并且赋有样式
四、校验的状态
<div class="form-group has-success"> <label for="Email" class="control-label">电子邮件</label> <input type="email" name="Email" class="form-control" placeholder="请输入您的电子邮件"> </div>
*在 div 上设置class,与form-group同级存在*
.has-success // 成功状态
.has-error // 错误状态
.has-warning // 警告状态
*在 label 上设置class*
<label class="control-label"></label> // label标签同步相应的状态
五、添加额外的图标
<div class="form-group has-success has-feedback"> <label for="Email" class="control-label">电子邮件</label> <input type="email" name="Email" class="form-control" placeholder="请输入您的电子邮件"> <span class="glyphicon glyphicon-ok form-control-feedbak"></span> </div>
.has-feedback // 获取相对定位
.form-control-feedback // 获取绝对定位,并且与父元素标签同步相应的状态,即继承has-success样式
P.s.
.glyphicon-ok // 成功状态
.glyphicon-warning-sign // 警告状态
.glyphicon-remove // 错误状态
六、控制尺寸(从大到小)
*在 input 上设置class*
.input-lg
不设置样式
.input-sm
*也可在 父元素 上设置class来调整*
.form-group-lg
.form-group-sm
七、图片
*在 img 上设置class*
.img-rounded // 形状-圆角矩形
.img-circle // 形状-椭圆或者圆
.img-thumbnail // 形状-缩略提,加个边框和圆角矩形,边框有白色填充
.img-responsive // 响应式图片