文档章节

Bootstrap响应式前端框架笔记九——输入框组

珲少
 珲少
发布于 2016/12/11 17:06
字数 578
阅读 155
收藏 1

Bootstrap响应式前端框架笔记九——输入框组

    将input标签与input-group-addon类组合使用可以为输入框添加前后挂件,需要注意,Bootstrap不支持在输入框控件一侧添加多个挂件,示例如下:

		<p>输入框的前后可以添加额外的标题元素</p>
		<div class="input-group form-group">
			<span class="input-group-addon">邮箱</span>
			<input type="text" class="form-control" placeholder="邮箱">
		</div>

		<div class="input-group form-group">
			<input type="text" class="form-control">
			<span class="input-group-addon">平米</span>
		</div>

		<div class="input-group form-group">
			<span class="input-group-addon">余额</span>
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>

效果如下:

    也可以将输入框组合为选择控件,示例如下:

		<p>将输入框组合为选择组件</p>
		<div class="input-group form-group">
			<span class="input-group-addon">
                <input type="checkbox">
            </span>
			<input type="text" class="form-control">
		</div>
		<div class="input-group form-group">
			<span class="input-group-addon">
                <input type="radio">
            </span>
			<input type="text" class="form-control">
		</div>

效果如下:

    在输入框的前后,也可以添加功能按钮,示例如下:

		<p>为输入框添加功能按钮</p>
		<div class="input-group form-group">
			<span class="input-group-btn">
                <button class="btn btn-default" type="button">星座</button>
            </span>
			<input type="text" class="form-control">
		</div>
		<div class="input-group form-group">
			<input type="text" class="form-control">
			<span class="input-group-btn">
                <button class="btn btn-primary" type="button">前往</button>
            </span>
		</div>

效果如下图:

    在输入框组件中,也可以与下拉菜单进行嵌套使用,示例如下:

		<p>在输入框组件中嵌套下拉菜单组件</p>
		<div class="input-group">
			<div class="input-group-btn">
				<button type="button" class="btn btn-default dropdown-toggle">星座 <span class="caret"></span></button>
				<ul class="dropdown-menu">
					<li>
						<a href="#">金牛</a>
					</li>
					<li>
						<a href="#">狮子</a>
					</li>
					<li>
						<a href="#">摩羯</a>
					</li>
					<li class="divider"></li>
					<li>
						<a href="#">无</a>
					</li>
				</ul>
			</div>
			<input type="text" class="form-control">
		</div>
		<div class="input-group">
			<input type="text" class="form-control">
			<div class="input-group-btn">
				<button type="button" class="btn btn-default">金牛</button>
				<button class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
				<ul class="dropdown-menu">
					<li>
						<a href="#">金牛</a>
					</li>
					<li>
						<a href="#">狮子</a>
					</li>
					<li>
						<a href="#">摩羯</a>
					</li>
					<li class="divider"></li>
					<li>
						<a href="#">无</a>
					</li>
				</ul>
			</div>
		</div>

效果如下:

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/inputGroup.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 858
博文 384
码字总数 452377
作品 0
上海
iOS工程师
私信 提问
bootstrap3教程

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...

harries
2015/09/24
199
0
Bootstrap响应式前端框架笔记十五——面板与井

Bootstrap响应式前端框架笔记十五——面板与井 Bootstrap中的面板由pannel相关类来创建,一个完整的面板分为面板头部、面板体和面板注脚,并且Bootstrap中默认定义了一些面板风格,示例如下:...

珲少
2016/12/22
22
0
Bootstrap响应式前端框架笔记十三——警告框与进度条

Bootstrap响应式前端框架笔记十三——警告框与进度条 在Bootstrap中,使用alert相关类可以实现简洁的警告框控件,示例如下: 效果如下图所示: 警告框上面也可以添加有一个关闭按钮,示例如下...

珲少
2016/12/19
32
0
Bootstrap响应式前端框架笔记八——按钮组

Bootstrap响应式前端框架笔记八——按钮组 在Bootstrap定义的Css样式中,开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件,组合后的控件左右两侧的按钮将被圆角处理,示例代...

珲少
2016/12/10
19
0
Bootstrap响应式前端框架笔记十四——媒体对象与列表组

Bootstrap响应式前端框架笔记十四——媒体对象与列表组 在移动开发中经常会使用到列表,使用媒体对象可以方便的创建列表中每一行元素,常规的媒体对象实例如下:

珲少
2016/12/20
51
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据技术的发展趋势

大数据领域已经涌现出了大量新的技术,它们成为大数据采集、存储、处理和呈现的有力武器。这些技术下一步将如何发展?它们之中哪些技术将广为流行?又会诞生哪些新的技术? 技术趋向多样化,...

董黎明
12分钟前
1
0
藏在正则表达式里的陷阱

前几天线上一个项目监控信息突然报告异常,上到机器上后查看相关资源的使用情况,发现 CPU 利用率将近 100%。通过 Java 自带的线程 Dump 工具,我们导出了出问题的堆栈信息。 我们可以看到所...

前端小攻略
14分钟前
0
0
TensorFlow的基础概念01

概念: TensorFlow是一个深度学习框架,人人都能实现机器学习。 import osos.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'import tensorflow as tf#导入对应的TensorFlow#输出Hello W...

怪咖先生forever
14分钟前
0
0
关联更新,关联查询

关联更新 update A,B SET A.c1=B.c1,A.c2=B.c2 where A.id=B.id and ... update A inner join on A.id=B.id set A.c1=B.c1,A.c2=B.c2 where... 关联查询 交叉连接(cross join),内连接(inner ......

关元
17分钟前
0
0
django的环境搭建及启用

Pycharm社区版不像商业版那样可以直接创建django工程,需要通过一下步骤创建: 新建一个用于Django开发的虚拟环境 打开命令窗口 新建虚拟环境: conda create -n env_name python=3.6 查看系...

davidwbnu
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部