Bootstrap输入框组件使用详解
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 支持的另一个特性，输入框组。输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。 通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。 向 .form
-
本文向大家介绍bootstrap输入框组使用方法，包括了bootstrap输入框组使用方法的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了bootstrap输入框组的使用方法，供大家参考，具体内容如下 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍Vue.js数字输入框组件使用方法详解，包括了Vue.js数字输入框组件使用方法详解的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue.js数字输入框组件的具体实现代码，供大家参考，具体内容如下 效果 入口页 index.html 数字输入框组件 input-number.js 根实例 更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。 关于vue.j
-
本文向大家介绍学习使用Bootstrap输入框、导航、分页等常用组件，包括了学习使用Bootstrap输入框、导航、分页等常用组件的使用技巧和注意事项，需要的朋友参考一下 Bootstrap输入框和导航组件 一.下拉菜单 下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。 按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置datatoggle=”dropdow
-
本文向大家介绍JS组件Bootstrap Table使用方法详解，包括了JS组件Bootstrap Table使用方法详解的使用技巧和注意事项，需要的朋友参考一下 最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页
-
本文向大家介绍JS组件Bootstrap Select2使用方法详解，包括了JS组件Bootstrap Select2使用方法详解的使用技巧和注意事项，需要的朋友参考一下 在介绍select组件的时候，之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章，这两个组件的功能确实很强大，本文分享下select组件的一些用法和特性。 一些通用的单选、多选、分组等功能这里就