文档章节

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

珲少
 珲少
发布于 2016/12/06 15:15
字数 1428
阅读 185
收藏 1

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

一、基本表单样式

    在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布局表单时,可以为其设置一个label标签用于说明,将label标签的for属性与表单标签的id相对应,可以实现当用户点击label标签时使其对应的表单自动获取输入焦点。示例代码如下:

		<p>Bootstrap为默认的表单便签添加了样式</p>
		<form>
			<div class="form-group">
				<label for="exampleInputEmail1">Email address</label>
				<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">Password</label>
				<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
			</div>
			<div class="checkbox">
				<label>
				<input type="checkbox">性别
				</label>
			</div>	
			<button type="submit">提交</button>
		</form>

需要注意,将label和表单标签包裹在form-group类内,会自动进行间距的布局设置。效果如下:

    默认情况下,label与表单元素的排列是竖直布局的,可以使用form-horizontal类来将其设置为水平布局,示例如下:

        <p>使用from-horizontal类可以将label与表单进行水平排列,并可以结合栅格系统使用</p>
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2">Email</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2">Password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">Sign in</button>
				</div>
			</div>
		</form>

效果如下:

二、选择框与下拉列表

    HTML中有单选框和复选框两种选择框标签。示例代码如下:

		<p>默认的单选框与复选框样式</p>
		<p>复选框</p>
		<div class="checkbox">
		<label>
			<input type="checkbox" name="" id="" value="" />
			足球
		</label>
		</div>
		<div class="checkbox">
		<label>
			<input type="checkbox" name="" id="" value="" />
			篮球
		</label>
		</div>
		<div class="checkbox">
		<label>
			<input type="checkbox" name="" id="" value="" />
			乒乓球
		</label>
		</div>
		<p>单选框</p>
		<div class="radio">
			<label>
				<input type="radio" name="sex"/>
				男
			</label>
		</div>
		<div class="radio">
			<label>
				<input type="radio" name="sex"/>
				女
			</label>
		</div>

可以看到,默认的单选框与复选框的排列也是垂直布局的,使用checkbox-inline类和radio-inline类可以实现水平排列布局,示例如下:

		<p>水平排列的单选框与复选框样式</p>
		<p>复选框</p>
		<div class="checkbox-inline">
			<label>
			<input type="checkbox" name="" id="" value="" />
			足球
		</label>
		</div>
		<div class="checkbox-inline">
			<label>
			<input type="checkbox" name="" id="" value="" />
			篮球
		</label>
		</div>
		<div class="checkbox-inline">
			<label>
			<input type="checkbox" name="" id="" value="" />
			乒乓球
		</label>
		</div>
		<p>单选框</p>
		<div class="radio-inline">
			<label>
				<input type="radio" name="sex"/>
				男
			</label>
		</div>
		<div class="radio-inline">
			<label>
				<input type="radio" name="sex"/>
				女
			</label>
		</div>

效果如下图:

    Bootstrap框架中默认的下拉列表样式示例如下:

		<p>默认的下拉列表</p>
		<select class="form-control">
			<option>上海</option>
			<option>北京</option>
			<option>郑州</option>
			<option>深圳</option>
			<option>广州</option>
		</select>

效果如下:

开发者也可以通过添加multiple参数的方式来进行下拉选项的全部展示,示例如下:

		<p>使用multiple参数来进行下拉选项的全部展示</p>
		<select multiple class="form-control">
			<option>上海</option>
			<option>北京</option>
			<option>郑州</option>
			<option>深圳</option>
			<option>广州</option>
		</select>

效果如下:

三、表单状态

    为表单元素添加disabled属性来将表单设置为禁用状态,示例如下:

		<p>禁用表单</p>
		<input class="form-control" placeholder="被禁用的输入框" type="text" disabled/>
		<div  class="checkbox">
		<label>
			<input type="checkbox" disabled/>被禁用的复选框
		</label>
		</div>

效果如下:

    如果在开发中需要使一组的表单元素全部处于禁用状态,可以使用fieldset标签进行包裹,并为fieldset标签添加disabled属性。示例如下:

		<p>进行一组表单元素的禁用</p>
		<form>
			<fieldset disabled>
				<div class="form-group">
					<label for="disabledTextInput">被禁用的输入框</label>
					<input type="text" id="disabledTextInput" class="form-control" placeholder="被禁用的输入框">
				</div>
				<div class="form-group">
					<label for="disabledSelect">被禁用的下拉菜单</label>
					<select id="disabledSelect" class="form-control">
						<option>被禁用的下拉菜单</option>
					</select>
				</div>
				<div class="checkbox">
					<label>
        <input type="checkbox"> 被禁用的选择框
      </label>
				</div>
				<button type="submit" class="btn btn-primary">被禁用的按钮</button>
			</fieldset>
		</form>

效果如下:

Bootstrap中也定义好了一些校验状态的样式,例如警告,成功,错误等状态,为表单元素的父标签添加这些状态类即可,示例如下:

		<p>校验状态</p>
		<form>
			<div class="has-error form-group">
				<input class="form-control" placeholder="错误状态的表单" type="text" />
			</div>
			<div class="has-success form-group">
				<input class="form-control" placeholder="成功状态的表单" type="text" />
			</div>
			<div class="has-warning form-group">
				<input class="form-control" placeholder="警告状态的表单" type="text" />
			</div>
		</form>

效果如下:

开发者也可以为验证表单的右侧添加一个小图标,前提需要为表单元素的父元素设置has-feedback类,示例如下:

		<p>为表单添加右侧icon</p>
		<form>
			<div class="form-group has-error has-feedback ">
				<input class="form-control" placeholder="错误状态的表单" type="text" />
				<span class="glyphicon glyphicon-eur form-control-feedback"></span>
			</div>
			<div class="has-success form-group has-feedback">
				<input class="form-control" placeholder="成功状态的表单" type="text" />
				<span class="glyphicon glyphicon-ok form-control-feedback"></span>
			</div>
			<div class="has-warning form-group has-feedback">
				<input class="form-control" placeholder="警告状态的表单" type="text" />
				<span class="glyphicon glyphicon-off form-control-feedback"></span>
			</div>
		</form>

效果如下:

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

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

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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 857
博文 384
码字总数 452377
作品 0
上海
iOS工程师
私信 提问
Bootstrap响应式前端框架笔记十——导航栏相关组件

Bootstrap响应式前端框架笔记十——导航栏相关组件 Bootstrap中提供的导航栏分为两种模式,使用nav-tabs类可以创建页卡模式的导航栏,使用nav-pills类可以创建胶囊模式的导航栏,示例如下: ...

珲少
2016/12/12
45
0
十大前端开发框架(上)

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

伯乐在线
2013/07/16
0
0
十大前端开发框架(下)

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

伯乐在线
2013/07/01
0
0
Bootstrap响应式前端框架笔记十五——面板与井

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

珲少
2016/12/22
22
0
Bootstrap响应式前端框架笔记十七——下拉列表交互

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

珲少
2016/12/27
101
0

没有更多内容

加载失败,请刷新页面

加载更多

[LintCode] Serialize and Deserialize Binary Tree(二叉树的序列化和反序列化)

描述 设计一个算法,并编写代码来序列化和反序列化二叉树。将树写入一个文件被称为“序列化”,读取文件后重建同样的二叉树被称为“反序列化”。 如何反序列化或序列化二叉树是没有限制的,你...

honeymose
今天
5
0
java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
23
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
18
0
my.ini

1

architect刘源源
今天
16
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部