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 相关文章推荐
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
Vuex入门到上手教程
Jun 20 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 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
人族 Terran 基本策略
2020/03/14 星际争霸
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
浅谈PHP进程管理
2019/03/08 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python根据京东商品url获取产品价格
2015/08/09 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python中logging库的使用总结
2017/10/18 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
大学生活学习的自我评价
2013/12/03 职场文书
技校毕业生自荐信
2014/06/03 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
php png失真的原因及解决办法
2021/10/24 PHP