表单Form
一、表单Form介绍
-
表单用来做文字输入、数据提交等
-
role="form" // bootstrap 加强语法
-
class="form-horizontal" //水平排列，结合 col-md-* 使用
-
class="form-group" // 一组
-
class="control-label" //label样式
-
class="form-control" // form表单元素
-
颜色：has-warning、 has-error 、 has-success
二、代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./res/bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./res/bootstrap.min.js"></script>
</head>
<body style="padding: 50px;">
<h1>Form表单</h1>
<form role="form" class="form-horizontal" >
<div class="form-group">
<label class="control-label col-md-2">名字</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">编程语言</label>
<div class="col-md-8">
<label class="checkbox-inline">
<input type="checkbox" value="1">Java
</label>
<label class="checkbox-inline">
<input type="checkbox" value="2">Python
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">描述</label>
<div class="col-md-8">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">选择器</label>
<div class="col-md-8">
<select class="form-control" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</form>
</body>
</html>