脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap输入框组件

bootstrap输入框组件使用方法详解

 更新时间：2017年01月19日 11:48:15   作者：zaichuanguanshui  
这篇文章主要为大家详细介绍了bootstrap输入框组件使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了bootstrap输入框组的具体使用方法，供大家参考，具体内容如下

1、基本用法

我们有时需要在输入框一侧或两侧添加额外的元素
这个时候只需要把所有元素都包裹在一个.input-group的div里面就可以
但是每个输入框组只能有一个input

<div class="input-group">
 <span class="input-group-addon">@</span>
 <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
 <input type="text" class="form-control">
 <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
 <span class="input-group-addon">$</span>
 <input type="text" class="form-control">
 <span class="input-group-addon">.00</span>
</div>

2、尺寸

给最外层的.input-group添加.input-group-lg.input-group-sm.input-group-xs
就可以实现输入框组的大小变化

<div class="input-group input-group-lg">
 <span class="input-group-addon">@</span>
 <input type="text" class="form-control" placeholder="Username">
</div>

3、单选框作为额外元素

只需要把span里面的文字替换成对应的radio就可以了

<div class="input-group">
 <span class="input-group-addon">
  <input type="radio"/> 
 </span>
 <input type="text" class="form-control"/>
</div>

4、多选框作为额外元素

只需要把span里面的文字替换成对应的checkbox就可以了

<div class="input-group">
 <span class="input-group-addon">
  <input type="checkbox">
 </span>
 <input type="text" class="form-control">
</div>

5、按钮作为额外元素

span的类不再是.input-group-addon，变成.input-group-btn
span里面的文字替换成button就可以了

<div class="input-group">
 <span class="input-group-btn">
  <button type="button" class="btn btn-default">Go</button>
 </span>
 <input type="text" class="form-control" />
</div>

6、下拉式菜单作为额外元素

把对应的span替换成下拉式菜单，同时修改下拉式菜单最外层的类
不是.dropdown或者.btn-group，而是.input-group-btn

<div class="input-group">
 <div class="input-group-btn">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  Action 
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
 </ul>
 </div>
 <input type="text" class="form-control">
</div>

<div class="input-group">
 <div class="input-group-btn">
 <button type="button" class="btn btn-default">Action</button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
 </ul>
 </div>
 <input type="text" class="form-control">
</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Javascript 构造函数 实例分析

    Javascript 构造函数 实例分析

    一般构造函数没有返回值，他们通过关键字this初始化对象，没有返回值。当然一个构造器允许返回一个对 象，如果这样的话 返回的对象将变成new 表达式的值,在这种情况下值为this的对象将抛弃
    2008-11-11
  • javacript replace 正则取字符串中的值并替换【推荐】

    javacript replace 正则取字符串中的值并替换【推荐】

    replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。这篇文章主要介绍了javacript replace 正则取字符串中的值并替换,需要的朋友可以参考下
    2018-09-09
  • js改变鼠标的形状和样式的方法

    js改变鼠标的形状和样式的方法

    常用的改变鼠标样式的方法：如果你想鼠标移动到某个元素上改变鼠标样式 就在这个元素的样式里加上 cursor:(你想改的样式)
    2014-03-03
  • JS 判断某变量是否为某数组中的一个值的3种方法(总结)

    JS 判断某变量是否为某数组中的一个值的3种方法(总结)

    下面小编就为大家带来一篇JS 判断某变量是否为某数组中的一个值的3种方法(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • H5页面跳转小程序的3种实现方式

    H5页面跳转小程序的3种实现方式

    这篇文章主要给大家介绍了关于H5页面跳转小程序的3种实现方式,说出来你可能不信,每位商家几乎都会h5转跳到小程序、H5转跳至小程序的应用范围十分广阔,需要的朋友可以参考下
    2023-08-08
  • 微信小程序实现多行文字滚动效果

    微信小程序实现多行文字滚动效果

    这篇文章主要介绍了微信小程序实现多行文字滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • JS中移除非数字最多保留一位小数

    JS中移除非数字最多保留一位小数

    这篇文章主要介绍了JS中移除非数字最多保留一位小数的实现代码，文章给大家提到了js处理数字保留2位小数,强制保留2位小数不够补上.00的完整代码，感兴趣的朋友一起看看吧
    2018-05-05
  • bootstrap轮播图示例代码分享

    bootstrap轮播图示例代码分享

    这篇文章主要为大家详细介绍了bootstrap轮播图示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 原生js实现自定义滚动条组件

    原生js实现自定义滚动条组件

    这篇文章主要为大家详细介绍了原生js实现自定义滚动条组件的开发，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 详解JavaScript中数组的reduce方法

    详解JavaScript中数组的reduce方法

    js函数中有三个在特定场合很好用的函数:reduce(),map(),filter()。而数组经常用到的方法有push、join、indexOf、slice等等，但是有一个经常被我们忽略的方法：reduce，这个方法简直强大的不要不要的。下面通过这篇文章来一起学习学习吧。
    2016-12-12

最新评论