文档章节

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

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

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

© 著作权归作者所有

珲少

珲少

粉丝 896
博文 395
码字总数 478732
作品 0
上海
程序员
私信 提问
加载中

评论(0)

bootstrap3教程

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

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

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

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

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

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

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

珲少
2016/12/10
71
0
Bootstrap响应式前端框架笔记四——表单

Bootstrap响应式前端框架笔记四——表单 一、基本表单样式 在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布...

珲少
2016/12/06
342
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 现在看动弹的人都是什么状态

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《夏日、教室与望着窗外的我》- Candy_Wind 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
75
1
wamp环境安装redis扩展

1.查看phpinfo信息根据配置信息下载对应的扩展 关键信息:VC14,TS,x86 2.下载php_redis和php_igbinary扩展 php_redis扩展下载地址: https://windows.php.net/downloads/pecl/snaps/redis...

点滴课程
今天
36
0
开源商城开发笔记1-创建MyBatis示例

一、修改pom.xml,引入MyBatis,JUnit,Log4j <dependencies><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.4</version>......

土龙
今天
56
0
The Best Way To Learn English in 2020 (In my humble opinion.)

✅Here is the plan: THINGS YOU WILL NEED: - 1 hour per day (30 minutes will work as well). - a notebook and a pen to write down new vocabulary each day. - an English song. - an ......

FalconChen
昨天
73
0
nodejs 使用 pako 压缩数据

github https://github.com/nodeca/pako 应用场景 大对象传输一般使用json, 在worker或local storage中还必须使用字符串, pako可以对字符串或者 Uint8Array 数据进行压缩和解压, 牺牲一部分读...

阿豪boy
昨天
79
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部