杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。

网站建设项目的一些相关表单元素中,我们常常会在一些input元素中加入额外的内容,例如input表单的标题、与input表单结合的按钮等样式。
这些对应样式在Bootstrap中同样提供了,让我们看看Bootstrap input元素组的使用方法。


input元素组基本样式

最基本的input元素组样式就是在input元素的左右加入图标或者单位,从而达到一些对应的功能效果。
让我们看看应该如何实现这个效果:<div class="input-group">  <span class="input-group-addon">¥</span>  <input type="text" class="form-control">  <span class="input-group-addon">.00</span></div>以上代码的效果是,在input元素前放入一个元素,从而说明该input是作为人民币的输入框,后面的.00用来说明该金额应该是准确到小数点后两位。
怎么样,通过这种形式对input元素的解释说明是不是非常直观简单?


input元素组尺寸

Bootstrap按钮元素以及Bootstrap按钮组样式一样,input元素组照样有对应的尺寸选择,你可以通过在最外层的div中调用input-group-lg或者input-group-sm来获得大尺寸以及小尺寸的input元素,例如:<div class="input-group input-group-lg">  <span class="input-group-addon">¥</span>  <input type="text" class="form-control" placeholder="Username"></div>以上代码显示出来的就是input组的大尺寸样式。


input元素组与多选框单选框结合

当你想要在input元素前加入一个单选框或者多选框的时候,也能够非常容易地实现:<div class="input-group">  <span class="input-group-addon">    <input type="checkbox">  </span>  <input type="text" class="form-control"></div>上述代码就是在input元素前面加入一个checkbox元素,radio元素的写法也与其类似。


input元素组与按钮相结合

input元素与按钮相结合最经典的例子就是搜索框了,如果你想要将搜索框和搜索按钮融合在一起,就可以采用这个方式实现:<div class="input-group">  <input type="text" class="form-control">  <span class="input-group-btn">    <button class="btn btn-default" type="button">搜索</button>  </span></div>当然,其中按钮的样式你可以参考按钮元素样式进行设定对应的颜色。


写在文章最后

除了以上几种与input元素结合的方式之外,类似按钮下拉列表等样式也同样可以与input元素结合,通过这样的方式调用,可以大大节约开发时间成本。


佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。