文档章节

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

珲少
 珲少
发布于 2016/12/11 17:06
字数 578
阅读 139
收藏 1
点赞 0
评论 0

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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 834
博文 372
码字总数 435295
作品 0
上海
iOS工程师
Bootstrap响应式前端框架笔记十三——警告框与进度条

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

珲少 ⋅ 2016/12/19 ⋅ 0

Bootstrap响应式前端框架笔记十五——面板与井

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

珲少 ⋅ 2016/12/22 ⋅ 0

Bootstrap响应式前端框架笔记十四——媒体对象与列表组

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

珲少 ⋅ 2016/12/20 ⋅ 0

Bootstrap响应式前端框架笔记八——按钮组

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

珲少 ⋅ 2016/12/10 ⋅ 0

Bootstrap响应式前端框架笔记四——表单

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

珲少 ⋅ 2016/12/06 ⋅ 0

十大前端开发框架(上)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:site point。欢迎加入翻译组。 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部...

伯乐在线 ⋅ 2013/07/16 ⋅ 0

bootstrap3教程

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

harries ⋅ 2015/09/24 ⋅ 0

Bootstrap响应式前端框架笔记十六——模态框交互

Bootstrap响应式前端框架笔记十六——模态框交互 模态框也可以称为弹出窗,其作用是当用户点击某个功能按钮后,在网页上弹出一个内容窗口。在Bootstrap中,创建模态框十分简单。首先模态框组...

珲少 ⋅ 2016/12/26 ⋅ 0

十大前端开发框架(下)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:Site Point。欢迎加入翻译组。 在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Boo...

伯乐在线 ⋅ 2013/07/01 ⋅ 0

Bootstrap响应式前端框架笔记十七——下拉列表交互

Bootstrap响应式前端框架笔记十七——下拉列表交互 为dropdown-toggle类添加data-toggle="dropdown"属性可以实现其下拉列表功能的绑定,示例如下: 点击此按钮后,可以自动实现下拉列表的显示...

珲少 ⋅ 2016/12/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 18分钟前 ⋅ 0

Java学习路径及练手项目合集

Java学习路径及练手项目合集

颖伙虫 ⋅ 33分钟前 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 59分钟前 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

MVC——统一报文格式的异常处理响应

在我们写controller层的时候,常常会有这样的困惑,如果需要返回一个数据是,可能为了统一回去构造一个类似下列的数据格式: { status:true, msg:"保存成功!", data:[]} 而且在写...

alexzhu592 ⋅ 昨天 ⋅ 0

android -------- 打开本地浏览器或指定浏览器加载,打电话,打开第三方app

开发中常常有打开本地浏览器加载url或者指定浏览器加载, 还有打开第三方app, 如 打开高德地图 百度地图等 在Android程序中我们可以通过发送隐式Intent来启动系统默认的浏览器。 如果手机本身...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部