编程 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 相关文章推荐

延时重复执行函数 lLoopRun.js

May 08 Javascript

Javascript模块化编程(一)模块的写法最佳实践

Jan 17 Javascript

javascript中比较字符串是否相等的方法

Jul 23 Javascript

js window.print实现打印特定控件或内容

Sep 16 Javascript

js调用css属性写法

Sep 21 Javascript

onmouseover事件和onmouseout事件全面理解

Aug 15 Javascript

zTree树形插件异步加载方法详解

Jun 14 Javascript

vue开发调试神器vue-devtools使用详解

Jul 13 Javascript

利用vue开发一个所谓的数独方法实例

Dec 21 Javascript

Angular如何由模板生成DOM树的方法

Dec 23 Javascript

vue学习之Vue-Router用法实例分析

Jan 06 Javascript

Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】

May 29 jQuery

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

非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样

2021/03/03 咖啡文化

简单采集了yahoo的一些数据

2007/02/14 PHP

PHP伪静态写法附代码

2008/06/20 PHP

swfupload 多文件上传实现代码

2008/08/27 PHP

destoon公司主页模板风格的添加方法

2014/06/20 PHP

thinkphp3.0输出重复两次的解决方法

2014/12/19 PHP

PHP中trim()函数简单使用指南

2015/04/16 PHP

四个PHP非常实用的功能

2015/09/29 PHP

PHP缩略图生成和图片水印制作

2017/01/07 PHP

thinkphp5框架API token身份验证功能示例

2019/05/21 PHP

PHP过滤器 filter_has_var() 函数用法实例分析

2020/04/23 PHP

Js+Dhtml:WEB程序员简易开发工具包(预先体验版)

2006/11/07 Javascript

动态控制Table的js代码

2007/03/07 Javascript

jQuery之折叠面板的深入解析

2013/06/19 Javascript

js原生appendChild的bug解决心得分享

2013/07/01 Javascript

jquery中常用的SET和GET$(”#msg”).html循环介绍

2013/10/09 Javascript

Adapter适配器模式在JavaScript设计模式编程中的运用分析

2016/05/18 Javascript

JS中判断null的方法分析

2016/11/21 Javascript

从零开始学习Node.js系列教程四：多页面实现数学运算的client端和server端示例

2017/04/13 Javascript

Swiper自定义分页器使用详解

2017/12/28 Javascript

jQuery实现的页面详情展开收起功能示例

2018/06/11 jQuery

基于ssm框架实现layui分页效果

2019/07/27 Javascript

Python常用模块之requests模块用法分析

2019/05/15 Python

用Anaconda安装本地python包的方法及路径问题(图文)

2019/07/16 Python

vue常用指令代码实例总结

2020/03/16 Python

基于Python的OCR实现示例

2020/04/03 Python

Python3交互式shell ipython3安装及使用详解

2020/07/11 Python

css3 pointer-events 介绍详解

2017/09/18 HTML / CSS

详解css3中 text-fill-color属性

2019/07/08 HTML / CSS

Probikekit日本：自行车套件，跑步和铁人三项装备

2017/04/03 全球购物

SQL面试题

2013/04/30 面试题

五四青年节优秀演讲稿范文

2014/05/28 职场文书

2015年食堂工作总结报告

2015/04/23 职场文书

企业团队精神心得体会

2016/01/19 职场文书

学校团代会开幕词

2016/03/04 职场文书

Pytorch GPU内存占用很高,但是利用率很低如何解决

2021/06/01 Python