编程 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 组件之旅（二）编码实现和算法

Oct 28 Javascript

IE6/7/8/9不支持exec的简写方式

May 25 Javascript

防止xss和sql注入:JS特殊字符过滤正则

Apr 18 Javascript

Jquery网页出现的乱码问题的三种解决方法

Jun 30 Javascript

JQuery中操作Css样式的方法

Feb 12 Javascript

深入理解JavaScript中的call、apply、bind方法的区别

May 30 Javascript

Vue.js实战之组件之间的数据传递

Apr 01 Javascript

bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据

Aug 09 Javascript

vue实现长图垂直居上 vue实现短图垂直居中

Oct 18 Javascript

微信小程序页面生命周期详解

Jan 31 Javascript

vue动态配置模板 'component is'代码

Jul 04 Javascript

GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析

Jun 15 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 cookie的操作实现代码(登录)

2010/12/29 PHP

php中判断字符串是否全是中文或含有中文的实现代码

2011/09/16 PHP

php中is_null,empty,isset,unset 的区别详细介绍

2013/04/28 PHP

php实现在服务器上创建目录的方法

2015/03/16 PHP

利用php输出不同的心形图案

2016/04/22 PHP

JScript内置对象Array中元素的删除方法

2007/03/08 Javascript

jQuery EasyUI API 中文文档可调整尺寸

2011/09/29 Javascript

js禁止页面使用右键(简单示例代码)

2013/11/13 Javascript

解决checkbox的attr(checked)一直为undefined问题

2014/06/16 Javascript

ExtJs动态生成treepanel的Json格式

2015/07/19 Javascript

JS模拟并美化的表单控件完整实例

2015/08/19 Javascript

JS实现日期时间动态显示的方法

2015/12/07 Javascript

详解Javascript模板引擎mustache.js

2016/01/20 Javascript

AngularJS实现Model缓存的方式

2016/02/03 Javascript

微信小程序石头剪刀布实例代码

2017/01/04 Javascript

JavaScript获取键盘按键的键码(参照表)

2017/01/10 Javascript

JS实现复制内容到剪贴板功能

2017/02/05 Javascript

vue左侧菜单,树形图递归实现代码

2018/08/24 Javascript

浅谈JavaScript_DOM学习篇_图片切换小案例

2019/03/19 Javascript

vue.js中ref及$refs的使用方法解析

2019/10/08 Javascript

vue实现二级导航栏效果

2019/10/19 Javascript

Ajax获取node服务器数据的完整步骤

2020/09/20 Javascript

[48:21]林俊杰圣堂刺客超神杀戮秀

2014/10/29 DOTA

python回调函数的使用方法

2014/01/23 Python

python使用ctypes模块调用windowsapi获取系统版本示例

2014/04/17 Python

Python3处理文件中每个词的方法

2015/05/22 Python

Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法

2016/04/23 Python

PyTorch快速搭建神经网络及其保存提取方法详解

2018/04/28 Python

对python读取zip压缩文件里面的csv数据实例详解

2019/02/08 Python

Matplotlib 绘制饼图解决文字重叠的方法

2020/07/24 Python

Python实现冒泡排序算法的完整实例

2020/11/04 Python

Anaconda的安装与虚拟环境建立

2020/11/18 Python

美国家居装饰店：Z Gallerie

2020/12/28 全球购物

驾驶员管理制度范本

2015/08/06 职场文书

总经理聘用协议书

2015/09/21 职场文书

MySQL慢查询优化解决问题

2022/03/17 MySQL