zoukankan html css js c++ java

bootstrap-表单

表单布局

Bootstrap 提供了下列类型的表单布局：

垂直表单（默认）
内联表单
水平表单

垂直表单或者基本表单

向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control，可将宽度拉伸到100%.

1.输入文本框

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 基本表单</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
			<div class="form-group">
				<label for="name">名称</label>
				<input type="text" class="form-control" id="name" placeholder="请输入名称">
			</div>
			<button type="submit" class="btn btn-default">提交</button>
		</form>
	</body>
</html>

运行结果：

2.文件浏览器选择框

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 基本表单</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
			<div class="form-group">
				<label for="inputfile">文件输入</label>
				<input type="file" id="inputfile">
				<p class="help-block">这里是块级帮助文本的实例。</p>
   			</div>
		</form>
	</body>
</html>

运行结果：

3.checkbox

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 基本表单</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
			<div class="checkbox">
				<label>
					<input type="checkbox"> 请打勾      
				</label>
			</div>
			<button type="submit" class="btn btn-default">提交</button>
		</form>
	</body>
</html>

运行结果：

内联表单

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 内联表单</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form class="form-inline" role="form">
			<div class="form-group">
				<label class="sr-only" for="name">名称</label>
				<input type="text" class="form-control" id="name" 
					   placeholder="请输入名称">
			</div>
			<div class="form-group">
				<label class="sr-only" for="inputfile">文件输入</label>
				<input type="file" id="inputfile">
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox"> 请打勾      
				</label>
			</div>
			<button type="submit" class="btn btn-default">提交</button></form>
	</body>
</html>

运行结果：

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 水平表单</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">名字</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="firstname" 
						   placeholder="请输入名字">
				</div>
			</div>
			<div class="form-group">
				<label for="lastname" class="col-sm-2 control-label">姓</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="lastname" 
						   placeholder="请输入姓">
				</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>
	</body>
</html>

运行结果：

常见的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

1.最常见的表单文本字段是输入框 input

用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 输入框</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
		<div class="form-group">
			<label for="name">标签</label>
			<input type="text" class="form-control" placeholder="文本输入">
		</div>
		</form>
	</body>
</html>

运行结果：

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 文本框</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
			<div class="form-group">
				<label for="name">文本框</label>
				<textarea class="form-control" rows="3"></textarea>
			</div>
		</form>
	</body>
</html>

2.文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 文本框</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
			<div class="form-group">
				<label for="name">文本框</label>
				<textarea class="form-control" rows="3"></textarea>
			</div>
		</form>
	</body>
</html>

运行结果：

3.复选框（（Checkbox）和单选框（Radio）

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

下面的实例演示了这两种类型（默认和内联）：

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 复选框和单选按钮</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<label for="name">默认的复选框和单选按钮的实例</label>
		<div class="checkbox">
			<label><input type="checkbox" value="">选项 1</label>
		</div>
		<div class="checkbox">
			<label><input type="checkbox" value="">选项 2</label>
		</div>
		<div class="radio">
			<label>
				<input type="radio" name="optionsRadios" id="optionsRadios1" 
					   value="option1" checked> 选项 1   
			</label>
		</div>
		<div class="radio">
			<label>
				<input type="radio" name="optionsRadios" id="optionsRadios2" 
					   value="option2">
				选项 2 - 选择它将会取消选择选项 1   
			</label>
		</div>
		<label for="name">内联的复选框和单选按钮的实例</label><div>
		<label class="checkbox-inline">
			<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1   
		</label>
		<label class="checkbox-inline">
			<input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2   
		</label>
		<label class="checkbox-inline">
			<input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3   
		</label>
		<label class="checkbox-inline">
			<input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
				   value="option1" checked> 选项 1   
		</label>
		<label class="checkbox-inline">
			<input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
				   value="option2"> 选项 2   
		</label>
		</div>
	</body>
</html>

4.静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 静态控件</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label class="col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<p class="form-control-static">email@example.com</p>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="inputPassword" 
						   placeholder="请输入密码">
				</div>
			</div>
		</form>
	</body>
</html>

运行结果：

查看全文

相关阅读:
83. Remove Duplicates from Sorted List
35. Search Insert Position
96. Unique Binary Search Trees
94. Binary Tree Inorder Traversal
117. Populating Next Right Pointers in Each Node II
116. Populating Next Right Pointers in Each Node
111. Minimum Depth of Binary Tree
169. Majority Element
171. Excel Sheet Column Number
190. Reverse Bits

原文地址：https://www.cnblogs.com/hester/p/10945976.html