编程 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添加输出窗口的代码

Feb 07 Javascript

基于jquery的checkbox下拉框插件代码

Jun 25 Javascript

js自定义事件及事件交互原理概述(二)

Feb 01 Javascript

如何在父窗口中得知window.open()出的子窗口关闭事件

Oct 15 Javascript

原生javaScript做得动态表格(注释写的很清楚)

Dec 29 Javascript

javascript的tab切换原理与效果实现方法

Jan 10 Javascript

深入理解JavaScript系列（49）：Function模式（上篇）

Mar 04 Javascript

jquery插件unobtrusive实现片段式加载

Jun 15 Javascript

vue axios同步请求解决方案

Sep 29 Javascript

vue-image-crop基于Vue的移动端图片裁剪组件示例

Aug 28 Javascript

vue和better-scroll实现列表左右联动效果详解

Apr 29 Javascript

JavaScript使用canvas绘制随机验证码

Feb 17 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

Apache设置虚拟WEB

2006/10/09 PHP

phpMyAdmin下载、安装和使用入门教程

2007/05/31 PHP

PHP连接MySQL的2种方法小结以及防止乱码

2014/03/11 PHP

PHP的变量类型和作用域详解

2014/03/12 PHP

php实现删除指定目录下相关文件的方法

2014/10/20 PHP

Yii数据库缓存实例分析

2016/03/29 PHP

使Ext的Template可以解析二层的json数据的方法

2007/12/22 Javascript

JavaScript 学习笔记（十五）

2010/01/28 Javascript

JavaScript 学习笔记一些小技巧

2010/03/28 Javascript

js正则表达exec与match的区别说明

2014/01/29 Javascript

jquery队列queue与原生模仿其实现方法分享

2014/03/25 Javascript

jQuery实现为图片添加镜头放大效果的方法

2015/06/25 Javascript

JQuery控制图片由中心点逐渐放大效果

2016/06/26 Javascript

js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】

2016/08/02 Javascript

基于d3.js实现实时刷新的折线图

2016/08/03 Javascript

vue弹窗组件使用方法

2018/04/28 Javascript

原生js实现自定义滚动条组件

2021/01/20 Javascript

[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交

2014/07/23 DOTA

[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局

2016/02/27 DOTA

Python pickle类库介绍（对象序列化和反序列化）

2014/11/21 Python

Linux下使用python调用top命令获得CPU利用率

2015/03/10 Python

python中__call__内置函数用法实例

2015/06/04 Python

Django框架下在视图中使用模版的方法

2015/07/16 Python

numpy找出array中的最大值,最小值实例

2018/04/03 Python

Linux下python与C++使用dlib实现人脸检测

2018/06/29 Python

用python给自己做一款小说阅读器过程详解

2019/07/11 Python

Python Matplotlib简易教程(小白教程)

2020/07/28 Python

CSS3实现红包抖动效果

2020/12/23 HTML / CSS

蔻驰法国官网：COACH法国

2018/11/14 全球购物

Yves Rocher捷克官方网站：植物化妆品的创造者

2019/07/31 全球购物

澳大利亚排名第一的露营和户外设备在线零售商：Outbax

2020/05/06 全球购物

法国购买二手电子产品网站：Asgoodasnew

2020/03/27 全球购物

Oracle里面常用的数据字典有哪些

2014/02/14 面试题

个人找工作自荐信格式

2013/09/21 职场文书

Python 批量下载阴阳师网站壁纸

2021/05/19 Python

Python 类,对象,数据分类,函数参数传递详解

2021/09/25 Python