<div> <button type="button">Search</button> <button type="button" data-toggle="dropdown"> <span></span> </button> <ul> <li><a href="javascript:;">link1</a></li> <li><a href="javascript:;">link2</a></li> <li><a href="javascript:;">link3</a></li> </ul> </div>
按钮组控件本身也支持下拉菜单的触发,所以不需要class=dropdown了
同理,在button-group上加上dropup代表向上弹出。
五.输入框组——input-group系列
用于单行文本输入框和其它小的组件(比如说span)进行排列。只支持文本输入框<input type="text">。
1. input-group-addon——直接添加到span标签
<div> <span>Email</span> <input type="email" placeholder="Enter your Email"> </div>
你也可以为span里面加单选框(radio)和复选框(checkbox),但是样式相当难看。
看上去好神奇的样子,那能为span加诸如<span><i></i></span>的图标字体吗?——抱然而真的不能用。
2. input-group-btn——直接添加到span标签,但是里面包了一个按钮
为什么要额外设置多一个input-group-addon?
.btn的样式过于复杂了。为了避免冲突,需要额外指定一个类。
<div> <span>Email</span> <input type="email" placeholder="Enter your Email"> <span><button>GO</button></span> </div>
注意:
(1) input-group-btn不是直接用,button按钮上面,同时,button按钮至少要加个btn的class,三者是配合使用的。
(2)input输入框组支持定义大小——和btn-group一样,支持input-group-lg/sm/xs+默认 四个大小样式。
【例4.2】
在上面代码的基础上,当输入正确邮箱时(if(this.value!="" && !( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ))),按钮变为可用(移除.disabled),点击可以为此地址法邮件(通常用于提交验证邮件)。用脚本实现之。
唯一需要注意的是,这里的button按钮应使用location.href作为跳转。
$(function(){ $('.form-control:input').keyup(function(){ if(this.value!="" && !( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )){ $('button').removeClass().addClass('btn btn-success'); var address=this.value; $('button').click(function(){ location.href='mailto:'+address; }) }else{ $('button').html('GO').removeClass().addClass('btn btn-warning').addClass('disabled'); } }) })
3.与其它组件结合
(1)下拉菜单结合addon
把上面的代码修改以下,直接给按钮加上一个data-toggle="dropdown",然后把容器由span改成div。
<div> <input type="email" placeholder="Enter your Email"> <div><button data-toggle="dropdown">GO <span></span> </button> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div>
(2)分裂式按钮
在input-gro
<li><a href="#">Pofile</a></li>
up-btn下,组合的按钮也是可以分裂式的。无需再给父级容器加btn-group。同时应该注意到,不同点在于按钮的圆角被去掉了。
六. 导航(基本)