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


Posted in Javascript onJanuary 19, 2017

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

1、基本用法

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

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

<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就可以了

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

<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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
理解jquery事件冒泡
Jan 03 Javascript
js实现模糊匹配功能
Feb 15 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JS实现马赛克图片效果完整示例
Apr 13 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
原生js实现碰撞检测
Mar 12 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
bootstrap组件之按钮式下拉菜单小结
Jan 19 #Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 #Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 #Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 #Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 #Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 #Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 #Javascript
You might like
php项目打包方法
2008/02/18 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Python实现的石头剪子布代码分享
2014/08/22 Python
python基础教程之序列详解
2014/08/29 Python
Python创建系统目录的方法
2015/03/11 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python增加图像对比度的方法
2019/07/12 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
python将数据插入数据库的代码分享
2020/08/16 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
学生会副主席竞聘书
2014/03/31 职场文书
法律专业求职信
2014/05/24 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2014年库房工作总结
2014/11/26 职场文书
中秋节寄语2015
2015/03/24 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
八年级英语教学反思
2016/02/15 职场文书
初中生物教学反思
2016/02/20 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python