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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
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
一个数据采集类
2007/02/14 PHP
php 多文件上传的实现实例
2016/10/23 PHP
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
详解 Python 读写XML文件的实例
2017/08/02 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python中的数据结构比较
2019/05/13 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python 实现return返回多个值
2019/11/19 Python
python加载自定义词典实例
2019/12/06 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
英语自荐信常用语句
2013/12/13 职场文书
上班早退检讨书
2014/01/09 职场文书
酒店营销策划方案
2014/02/07 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
公司员工离职感言
2015/08/03 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
JS 基本概念详细介绍
2021/10/16 Javascript
HTML中的表单元素介绍
2022/02/28 HTML / CSS
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js