编程 Javascript

Bootstrap输入框组件使用详解

Posted in Javascript onJune 09, 2017

Bootstrap输入框组件的使用方法，具体内容如下

.input-group——设置div为输入框组；

.input-group-lg、.input-group-sm、.input-group-xs——改变输入框组的尺寸；

.input-group-addon——在输入框前或后加入额外内容；

.input-group-btn——在输入框前或后加入button或button式下拉菜单组件。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>组件_输入框组</title>
 <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
 <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
 <script src="jquery-1.11.1.min.js"></script>
 <script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <p>
  <div class="input-group">
   <span class="input-group-addon">$</span>
   <input type="number" class="form-control"/>
   <span class="input-group-addon">.00</span>
  </div>
 </p>
 <p>
 <div class="input-group input-group-lg">
  <span class="input-group-addon">$</span>
  <input type="number" class="form-control"/>
  <span class="input-group-addon">.00</span>
 </div>
 </p>
 <p>
  <div class="row">
   <div class="col-md-4">
    <div class="input-group">
     <span class="input-group-addon">
      <input class="checkbox" type="checkbox"/>
     </span>
     <input type="text" class="form-control"/>
    </div>
   </div>
   <div class="col-md-4">
    <div class="input-group">
     <input type="text" class="form-control" placeholder="马上查询"/>
     <span class="input-group-btn">
      <button class="btn btn-primary" type="button" >Go!</button>
     </span>
    </div>
   </div>
   <div class="col-md-4">
    <div class="input-group">
     <div class="input-group-btn">
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       产品分类
       <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
       <li><a href="#" role="menuitem">男装</a></li>
       <li><a href="#" role="menuitem">女装</a></li>
       <li><a href="#" role="menuitem">童装</a></li>
      </ul>
     </div>
     <input type="text" class="form-control" placeholder="清凉一夏">
    </div>
   </div>
  </div>
 </p>
</div>

</body>
</html>

效果：

Bootstrap输入框组件使用详解

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

Bootstrap输入框组件使用详解

- Author -

mthoutai

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 题型问答有答案参考

Feb 17 Javascript

jquery获取特定name所有选中的checkbox,支持IE9标准模式

Mar 18 Javascript

js调试系列初识控制台

Jun 18 Javascript

谷歌浏览器调试JavaScript小技巧

Dec 29 Javascript

常用原生JS兼容性写法汇总

Apr 27 Javascript

Angular.js中$apply()和$digest()的深入理解

Oct 13 Javascript

jquery设置css样式的多种方法(总结)

Feb 21 Javascript

基于vue实现网站前台的权限管理(前后端分离实践)

Jan 13 Javascript

使用node搭建自动发图文微博机器人的方法

Mar 22 Javascript

layui表格数据复选框回显设置方法

Sep 13 Javascript

JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例

Sep 17 Javascript

如何在微信小程序中存setStorage

Dec 13 Javascript

Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)

Jun 09 #jQuery

微信分享调用jssdk实例

Jun 08 #Javascript

浅谈vue实现数据监听的函数 Object.defineProperty

Jun 08 #Javascript

jQuery Validate表单验证插件实现代码

Jun 08 #jQuery

浅谈 Vue v-model指令的实现原理

Jun 08 #Javascript

Vue如何实现组件的源码解析

Jun 08 #Javascript

jquery Ajax实现Select动态添加数据

Jun 08 #jQuery

You might like

使用PHP强制下载PDF文件示例

2014/01/17 PHP

php+jQuery实现的三级导航栏下拉菜单显示效果

2017/08/10 PHP

Nigma vs Alliance BO5 第三场2.14

2021/03/10 DOTA

仅IE支持clearAttributes/mergeAttributes方法使用介绍

2012/05/04 Javascript

打印json对象的内容及JSON.stringify函数应用

2013/03/29 Javascript

JavaScript获取客户端计算机硬件及系统等信息的方法

2014/01/02 Javascript

ztree获取当前选中节点子节点id集合的方法

2015/02/12 Javascript

jquery中attr和prop的区别分析

2015/03/16 Javascript

js表单提交和submit提交的区别实例分析

2015/12/10 Javascript

js拖拽的原型声明和用法总结

2016/04/04 Javascript

原生js制作日历控件实例分享

2016/04/06 Javascript

Agularjs妙用双向数据绑定实现手风琴效果

2017/05/26 Javascript

vue2.0 computed 计算list循环后累加值的实例

2018/03/07 Javascript

jQuery+datatables插件实现ajax加载数据与增删改查功能示例

2018/04/17 jQuery

详解如何在微信小程序开发中正确的使用vant ui组件

2018/09/13 Javascript

JavaScript中七种流行的开源机器学习框架

2018/10/11 Javascript

微信公众号平台接口开发获取access_token过程解析

2019/08/14 Javascript

JS字符串和数组如何实现相互转化

2020/07/02 Javascript

微信小程序实现转盘抽奖

2020/09/21 Javascript

vue-video-player视频播放器使用配置详解

2020/10/23 Javascript

python操作数据库之sqlite3打开数据库、删除、修改示例

2014/03/13 Python

对python中的xlsxwriter库简单分析

2018/05/04 Python

Face++ API实现手势识别系统设计

2018/11/21 Python

Django实现单用户登录的方法示例

2019/03/28 Python

face++与python实现人脸识别签到（考勤）功能

2019/08/28 Python

Python函数的定义方式与函数参数问题实例分析

2019/12/26 Python

Python虚拟环境库virtualenvwrapper安装及使用

2020/06/17 Python

python中zip()函数遍历多个列表方法

2021/02/18 Python

阿迪达斯法国官方网站：adidas法国

2018/03/20 全球购物

中学家长会邀请函

2014/01/17 职场文书

互联网创业计划书写作技巧攻略

2014/03/23 职场文书

《中国梦我的梦》小学生演讲稿

2014/08/20 职场文书

2014业务员年终工作总结

2014/12/09 职场文书

高中生综合素质自我评价

2015/03/06 职场文书

2015年秋学期教研工作总结

2015/10/14 职场文书

导游词之台湾阿里山

2019/10/23 职场文书