06-bootstrap 表单
2018-12-19 本文已影响8人
明明德撩码
效果图
代码
说明：label+input 组件表示一组 ，用.form-group 样式。在label上加for表示为按个input服务，点击label时光标定位到input中。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class=" container">
<form >
<div class="form-group">
<label for="name">姓名:</label>
<input class="form-control" id="name" type="text" placeholder="请输入姓名"/>
</div>
<div class="form-group">
<label for="phone">电话:</label>
<input class="form-control" id="phone" type="text" placeholder="请输入电话"/>
</div>
<input type="submit" class=" btn btn-success" value="登入"/>
</form>
</div>
</body>
</html>
内联表单
控制form（<form class=" form-inline">）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class=" container">
<form class=" form-inline">
<div class="form-group">
<label for="name">姓名:</label>
<input class="form-control" id="name" type="text" placeholder="请输入姓名"/>
</div>
<div class="form-group">
<label for="phone">电话:</label>
<input class="form-control" id="phone" type="text" placeholder="请输入电话"/>
</div>
<input type="submit" class=" btn btn-success" value="登入"/>
</form>
</div>
</body>
</html>
输入组（input-group）,特效使用（@ ￥）
关键代码
<form>
<div class="form-group">
<label for="email" >电子邮件</label>
<div class="input-group">
<div class=" input-group-addon">@</div>
<input class="form-control" id="email" type="text" placeholder="请输入email"/>
</div>
</div>
</form>
说明：添加一个input-group 组，把它放到form-group 中。
把组内label和input水平排列（放到一行）
<form >
<div class="form-group form-inline">
<label for="email1" >电子邮件</label>
<input class="form-control" id="email1" type="text" placeholder="请输入email"/>
</div>
</form>
关键：添加form-inline 样例
多组在一行显示（form-inline+col-sm-3）
<form class="form-horizontal">
<div class="form-group form-inline">
<div class="form-group col-sm-6">
<label for="name" class="col-xs-3">name</label>
<input class="form-control col-xs-3" id="name" type="text" placeholder="请输入name"/>
</div>
<div class="form-group col-sm-6">
<label for="email1" class="col-xs-3">电子邮件</label>
<input class="form-control col-xs-3" id="email1" type="text" placeholder="请输入email"/>
</div>
</div>
</form>
说明：主要利用组上的 form-inline 控制实现。一个行组内嵌套两个组，就可以实现这样的效果了。组内利用12栅格划分 组大小，一组占6个栅格，组内的label和input再个3个栅格。
12 = 6（3+3）+6（3+3）
12：行组 6：行内嵌组 3：lable 3:input 占用的栅格大小。欧耶！！
文本域 text
<form >
<div class="form-group">
<label>介绍</label>
<textarea class="form-control" rows="5" ></textarea>
</div>
</form>
注意：input textarea 这样组件要添加 formcontrol样式
多选框
<div class="form-group">
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" >读书
</label>
<label class="checkbox-inline">
<input type="checkbox">电影
</label>
<label class="checkbox-inline">
<input type="checkbox">运动
</label>
</div>
</div>
重点：disabled ：不可选择
一个选择框是一个组添加组样式checkbox，
把文字放到label利用form-group 添加样式。
如何实现把多选框放到一行？给lable组件添加样式checkbox-inline
单选框
image.png
<div class="form-group">
<div class="radio ">
<label class="radio-inline">
<input type="radio" >读书
</label>
<label class="radio-inline disabled">
<input type="radio">电影
</label>
<label class="radio-inline">
<input type="radio">运动
</label>
</div>
</div>
重点：
disabled ：不可选择 。
一个单选框是一个lable。
把文字放到label，利用form-group 添加样式。
如何实现把多个单选框放到一行？给label组件添加样式radio-inline
下拉列表框组件
单选
image.png
<div class="col-xs-4">
<select class="form-control ">
<option>请选择</option>
<option>读书</option>
<option>电影</option>
<option>运动</option>
</select>
</div>
关键：把select组件也添加到formcontrol类。
多选
<div class="col-xs-4">
<select multiple class="form-control ">
<option>请选择</option>
<option>读书</option>
<option>电影</option>
<option>运动</option>
</select>
</div>
关键：multiple
表单内部布局
<div class="row ">
<div class="form-group form-inline col-xs-3">
<label>爱好：</label>
<select class="form-control ">
<option>请选择</option>
<option>读书</option>
<option>电影</option>
<option>运动</option>
</select>
</div>
<div class="form-group form-inline col-xs-3">
<label>爱好：</label>
<select class="form-control ">
<option>请选择</option>
<option>读书</option>
<option>电影</option>
<option>运动</option>
</select>
</div>
</div>
布局：row=group+group group = label+组件
group 样式：form-inline + col-xs-3 ，保证组内在同一行并指定组栅格。
静态控件处理类（form-control-static）
input select组件的处理类是form-control 。静态控件则用form-control-static
<div class="form-group form-inline col-xs-3"">
<label>email</label>
<p class="form-control-static">lizh@ufc.com.cn</p>
</div>
控件添加反馈图标
文本框大小调节
<div class="form-group form-inline col-xs-3 has-error ">
<label>电话</label>
<input type="tel" class="form-control input-sm" />
</div>
关键点：input-sm 类样式的添加
