编程 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 new后的constructor属性

Aug 05 Javascript

颜色选择器 Color Picker,IE,Firefox,Opera,Safar

Nov 25 Javascript

分享10篇优秀的jQuery幻灯片制作教程及应用案例

Apr 16 Javascript

js去除空格的12种实用方法

Nov 08 Javascript

jQuery后代选择器用法实例

Dec 23 Javascript

微信小程序中使用javascript 回调函数

May 11 Javascript

JS去掉字符串末尾的标点符号及删除最后一个字符的方法

Oct 24 Javascript

vue.js默认路由不加载linkActiveClass问题的解决方法

Dec 11 Javascript

详解vue-cli中模拟数据的两种方法

Jul 03 Javascript

学习React中ref的两个demo示例

Aug 14 Javascript

Vue-Quill-Editor富文本编辑器的使用教程

Sep 21 Javascript

如何配置vue.config.js 处理static文件夹下的静态文件

Jun 19 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

destoon调用企业会员公司形象图片的实现方法

2014/08/21 PHP

PHP+Mysql基于事务处理实现转账功能的方法

2015/07/08 PHP

javascript中的delete使用详解

2013/04/11 Javascript

javascript浏览器窗口之间传递数据的方法

2015/01/20 Javascript

浅谈window对象的scrollBy()方法

2015/07/15 Javascript

jquery实现红色竖向多级向右展开的导航菜单效果

2015/08/31 Javascript

JavaScript生成带有缩进的表格代码

2016/06/15 Javascript

快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)

2016/08/29 Javascript

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

2016/09/02 Javascript

细数JavaScript 一个等号,两个等号,三个等号的区别

2016/10/09 Javascript

基于jquery实现左右上下移动效果

2018/05/02 jQuery

详解VUE-地区选择器(V-Distpicker)组件使用心得

2018/05/07 Javascript

vuejs点击class变化的实例

2018/09/05 Javascript

Node.js中读取TXT文件内容fs.readFile()用法

2018/10/10 Javascript

微信小程序页面间传值与页面取值操作实例分析

2019/04/30 Javascript

自定义javascript验证框架示例【附源码下载】

2019/05/31 Javascript

在Linux系统上安装Python的Scrapy框架的教程

2015/06/11 Python

Django框架封装外部函数示例

2019/05/28 Python

selenium处理元素定位点击无效问题

2019/06/12 Python

使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法

2019/09/06 Python

python matplotlib模块基本图形绘制方法小结【直线，曲线，直方图，饼图等】

2020/04/26 Python

学习python需要有编程基础吗

2020/06/02 Python

Python 使用Opencv实现目标检测与识别的示例代码

2020/09/08 Python

python实现不同数据库间数据同步功能

2021/02/25 Python

css3设置box-pack和box-align让div里面的元素垂直居中

2014/09/01 HTML / CSS

英国DIY汽车维修配件网站：DIY Car Service Parts

2019/08/30 全球购物

Blue Nile中国官网：全球知名的钻石和珠宝网络零售商

2020/03/22 全球购物

开办饭店创业计划书

2013/12/28 职场文书

仓库管理专业个人的自我评价

2013/12/30 职场文书

青年教师典范事迹材料

2014/01/31 职场文书

网络技术专业求职信

2014/02/18 职场文书

医院院务公开实施方案

2014/05/03 职场文书

社区平安建设汇报材料

2014/08/14 职场文书

2014年节能工作总结

2014/12/18 职场文书

文明单位创建材料

2014/12/24 职场文书

再读《皇帝的新衣》的读后感悟！

2019/08/07 职场文书