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输入框组件使用详解

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

Javascript 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
详解JS面向对象编程
Jan 24 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
常用的js方法合集
Mar 10 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php5 图片验证码实现代码
2009/12/11 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
javascript实现表单验证
2016/01/29 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python实现二叉树的遍历
2017/12/11 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
详解爬虫被封的问题
2019/04/23 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
pandas 空数据处理方法详解
2019/11/02 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
python SOCKET编程基础入门
2021/02/27 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
外科实习自我鉴定
2013/10/06 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
会计专业导师推荐信
2014/03/08 职场文书
2014年度党员自我评议
2014/09/13 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
在职员工证明书
2014/09/19 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL