文档章节

Bootstrap3学习笔记:表单

JeeChou
 JeeChou
发布于 2015/02/04 14:11
字数 1222
阅读 776
收藏 2
<!DOCTYPE html>
<html>
<head>
<meta charst="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- user-scalable=no 在移动设备浏览器上,禁止用户缩放(zooming) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<title>Bootstrap基础练习</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的,如果不用可移除 -->
<!-- 注意:Respond.js不支持 file:// 方式的访问 -->
<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
	<!-- 基础表单 -->
	<!-- 提示语句label和input元素放在一个样式为.form-group的div里,form-group提供了一个margin-button:15px的底部外边距,可以看清楚每一组控件。 -->
	<form>
		<fieldset>
			<legend>用户登录</legend>
			<div class="form-group">
				<label>登录账户:</label>
				<input type="email" class="form-control" placeholder="请输入你的邮箱"></input>
			</div>
			<div class="form-group">
				<label>登录密码:</label>
				<input type="text" class="form-control" placeholder="请输入你的密码"></input>
			</div>
			<div class="checkbox">
				<label><input type="checkbox">记住密码</label>
			</div>
			<button type="submit" class="btn btn-default">登录</button>
		</fieldset>
	</form>
	<br />
	<!-- 在普通的form元素中使用.form-inline样式实现内联表单 -->
	<!-- 注意,在这种情况下再设置一个label的话,input又会换行,所以如果非要加label,只能在input所在的div上边在加一个div元素用于包含label标签。 -->
	<form class="form-inline">
		<legend>内联表单样式</legend>
		<div class="form-group">
			<label>用户:</label>
		</div>
		<div class="form-group">
			<input type="text" class="form-control" placeholder="请输入你的邮箱"></input>
		</div>
		<div class="form-group">
			<label>密码:</label>
		</div>
		<div class="form-group">
			<input type="text" class="form-control" placeholder="请输入你的密码"></input>
		</div>
		<div class="checkbox">
			<label><input type="checkbox">记住密码</label>
		</div>
		<button type="submit" class="btn btn-default">登录</button>
	</form>
	<br />
	<!-- 如果没有为每个输入控件设置label,屏幕阅读器将无法正确识别。对于这种内联表单,可以使用.sr-only样式将其隐藏。 -->
	<form class="form-inline">
		<div class="form-group">
			<label class="sr-only">登录用户:</label>
			<input type="text" class="form-control" id="account" placeholder="请输入你的邮箱"></input>
		</div>
		<div class="form-group">
			<label class="sr-only">登录密码:</label>
			<input type="text" class="form-control" id="passwords" placeholder="请输入你的密码"></input>
		</div>
		<div class="checkbox">
			<label><input type="checkbox">记住密码</label>
		</div>
		<button type="submit" class="btn btn-default">登录</button>
	</form>
	<br />
	<!-- 横向表单 -->
	<!-- 横向表单与内联表单使用方式有些不一样,横向表单不能在form元素上简单应用一个.form-horizontal样式,这是因为.form-horizontal样式本身没有做什么特殊的设置,只是简单设置了一下相关的padding和margin值。在实现横向表单时还要使用Bootstrap的栅格类,以便将label和控件水平并排布局。 -->
	<form class="form-horizontal" role="form">
		<div class="form-group">
			<label for="account" class="col-sm-2 control-label">用户名</label>
			<div class="col-sm-10">
				<input type="email" class="form-control" id="account" palceholder="请输入你的用户名">
			</div>
		</div>
		<div class="form-group">
			<label for="account" class="col-sm-2 control-label">密码</label>
			<div class="col-sm-10">
				<input type="password" class="form-control" id="password" palceholder="请输入你的密码">
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<div class="checkbox"><label><input type="checkbox">记住密码</label></div>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="submit" class="btn btn-default">登录</button>
			</div>
		</div>
	</form>
	<!-- 表单控件 -->
	<form>
		<select>
			<option>这是一个下拉列表菜单</option>
			<option>下拉列表菜单的第一项</option>
			<option>下拉列表菜单的第二项</option>
			<option>下拉列表菜单的第三项</option>
			<option>下拉列表菜单的第四项</option>
			<option>下拉列表菜单的第五项</option>
		</select>
		<select multiple="multiple">
			<option>这是第一个选项</option>
			<option>这是第二个选项</option>
			<option>这是第三个选项</option>
			<option>这是第四个选项</option>
			<option>这是第五个选项</option>
		</select>
		<textarea class-"form-control" rows="5"></textarea>
	</form>
	<!-- checkbox和radio -->
	<!-- checkbox和radio是input元素里两个非常特殊的type,通常在使用的过程中要和label文字搭配。每个input外部都要用label包住,并且在最外层用容器元素包住,并应用相应的.checkbox和.radio样式。 -->
	<form>
		<div class="checkbox">
			<label><input type="checkbox" value="">是否已阅相关信息条款</label>
		</div>
		<div class="radio">
			<label><input type="radio" name="optionsRadios" value="female" checked>女</label>
		</div>
		<div class="radio">
			<label><input type="radio" name="optionsRadios" value="male">男</label>
		</div>
	</form>
	<!-- 使用.checkbox-inline和.radio-inline样式,实现checkbox和radio的横向显示 -->
	<form>
		<label class="checkbox-inline"><input type="checkbox" value="sports" id="sports">体育</label>
		<label class="checkbox-inline"><input type="checkbox" value="music" id="music">音乐</label>
		<label class="checkbox-inline"><input type="checkbox" value="art" id="art">艺术</label>
		<label class="radio-inline"><input type="radio" value="female" id="female">女</label>
		<label class="radio-inline"><input type="radio" value="male" id="female">男</label>
		<label class="radio-inline"><input type="radio" value="null" id="null">保密</label>
	</form>
</body>
</html>


© 著作权归作者所有

JeeChou
粉丝 4
博文 13
码字总数 10333
作品 0
杨浦
个人站长
私信 提问
Django2 实验添加entry条目,没有form文本框显示

最近根据《python编程从入门到实践》编写python web程序,但是出现了一些问题: 我对代码经过多次核对,也参考了django1.7和2的差异,并对相应的代码做了调整,经过几天的分析和问题查找,感...

Moose_Wang
2018/04/27
316
0
Pycharm上Django的使用 Day13

设置应用程序的样式 为设置样式,我们将使用Bootstrap库 1.应用程序django-bootstrap3 1>安装django-bootstrap3 在活动的虚拟环境中执行命令:pip install django-bootstrap3 来进行安装 2>在...

不会TC的猫
2018/11/30
0
0
jshow for bootstrap

jshow for bootstrap是整理改造的一款可用于搭建一个功能完善的站点的bootstrap插件集合。本系统基于Bootstrap2.x进行构造,感谢Bootstrap这一优秀的开源软件!由于bootstrap3对modal和拖动已...

supperman
2013/10/21
1K
0
bootstrap3-validation

bootstrap3 表单的验证JQuery插件。

龙仕云
2013/10/03
17.7K
1
Django 实战1:搭建属于自己社工查询系统(下)

上篇文章已经完成框架搭建,本文接着上篇的内容继续讲解。本片主要的说三点内容,分别是:根据条件查询数据、根据查询结果显示不同内容、将查询数据填充到页面上。 1 逻辑优化 在上篇文章,我...

猴哥Yuri
2018/04/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部