复选框和单选按钮水平排列
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”按钮
多标签制作按钮
a标签按钮span标签按钮div标签按钮
注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮。
按钮大小
有时候在制作按钮的时候需要按钮宽度充满整个父容器(width:100%)。Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。
<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
按钮状态
Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种
在Bootstrap框架中,要禁用按钮有两种实现方式:
方法1:在标签中添加disabled属性(disabled="disabled")
方法2:在元素标签中添加类名“disabled”
两者的主要区别是:
“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
表单控件大小
高度处理:
1、input-sm:让控件比正常大小更小2、input-lg:让控件比正常大小更大
宽度处理:
表单控件状态
焦点状态:<input class="form-control input-lg" type="text" placeholder="焦点状态">
禁用状态:只需要在需要禁用的表单控件上加上“disabled”即可
注:如果legend中有输入框的话,这个输入框是无法被禁用的
验证状态:
1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)3、.has-success:成功状态(绿色)带图标:
表单提示信息
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"> <span class="help-block">请输入正确信息</span> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">错误状态</label> <input type="text" class="form-control" id="inputError1" placeholder="错误状态"> <span class="help-block">你输入的信息是错误的</span> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div>
也可使用类名“help-inline”
.help-inline{ display:inline-block; padding-left:5px; color: #737373;}