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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
document.forms用法示例介绍
Jun 26 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
详解Node.js开发中的express-session
May 19 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
美国批发供应商:Kole Imports
2019/04/10 全球购物
《寓言两则》教学反思
2014/02/27 职场文书
我爱我家教学反思
2014/05/01 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
高二数学教学反思
2016/02/18 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
Redis实现分布式锁的五种方法详解
2022/06/14 Redis