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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AhDung

【手记】理想的网页列表效果

单纯用ul/ol的list-style-position是搞不掂的,inside是可以让整个列表区块与段落对齐,但会失去项间悬挂对齐效果;outside倒是悬挂...

15120
来自专栏河湾欢儿的专栏

01-工具 面板 视图

网页分为两步: 1.从设计稿中切出网页素材 比如说:按钮 logo 图片 背景等 2.编写代码,按效果图实现静态页面

12110
来自专栏Google Dart

AngularDart Material Design 是/否 按钮 顶

可以使用MaterialSaveCancelButtonsDirective等指令来提供基本文本自定义,该指令用保存/取消替换是/否。

19550
来自专栏我和未来有约会

动态创建Storyboard

做动画或者做控件的时候不一定都要在xaml里做Storyboard,有时候在代码里动态创建会更加灵活些。 这里以我做的一个改变颜色的Storyboard为例来做...

38840
来自专栏木头编程 - moTzxx

CSS 样式控制溢出的数据 省略号隐藏

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

14330
来自专栏大数据钻研

HTML 入门笔记 - 初识HTML

基础框架 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/ht...

52050
来自专栏JavaEdge

React.js 实战之深入理解组件sublime 插件安装组件间通信

18340
来自专栏vue学习

微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。)

(1)图片需是本地图片或者是路径为https的网络图片; (2)使用网络图片要用wx.downloadFile( )下载,否则真机上无法显示图片; (3)w...

23020
来自专栏刘望舒

React Native组件(三)Text组件解析

前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。 1 概述 Text组...

27460
来自专栏Nian糕的私人厨房

CSS 鼠标悬停图片,显示隐藏文本

我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果...

20940

扫码关注云+社区

领取腾讯云代金券