bootstrap框架之表单垂直（基本）表单
基本的表单结构是 Bootstrap ⾃带的，个别的表单控件⾃动接收⼀些全局样式
1）向⽗ <form> 元素添加 role="form"
2）把标签和控件放在⼀个带有form-group 类的<div> 中，这是获取最佳间距所必需的。
3）向所有的⽂本元素 <input>、<textarea> 和 <select>添加form-control类
help-block类提⽰帮助信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 基本表单</title>
<link rel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/3.3.7/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>
<div class="form-group">
<label for="inputfile">⽂件输⼊</label>
<input type="file"id="inputfile">
<p class="help-block">这⾥是块级帮助⽂本的实例。</p>
<select class="form-control">aaa</select>
</div>
<div>
<label>
input标签placeholder属性<input type="checkbox">请打勾
</label>
</div>
<button type="submit"class="btn btn-default">提交</button>
</form>
</body>
</html>
内联表单
如果需要创建⼀个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 标签添加form-inline类
sr-only类：标注这些元素的⽂本说明，但是⼜不需要展⽰给普通⽤户看到，于是加上sr-only的意义就在于能保证屏幕阅读器正确读取且不会影响正常⼈的使⽤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Bootstrap 实例 - 基本表单</title>
<link rel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/3.3.7/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>
<div class="form-group">
<label for="inputfile">⽂件输⼊</label>
<input type="file"id="inputfile"/>
<p class="help-block">这⾥是块级帮助⽂本的实例。</p>
<select class="form-control">
aaa
</select>
</div>
<div>
<label><input type="checkbox"/>请打勾</label>
</div>
<button type="submit"class="btn btn-default">提交</button>
</form>
</body>
</html>
⽔平表单
col-*-offset和col-*-push都可以使⼀个column向右偏移距离；col-*-offset使⽤的是margin-left属性实现右移，col-*-push使⽤的是float + left属性实现右移
1）向⽗ <form> 元素添加form-horizontal类
2）把标签和控件放在⼀个带有form-group 类的 <div> 中
3）向标签添加control-label类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - ⽔平表单</title>
<link rel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/3.3.7/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>
⽀持的表单控件
1. 输⼊框（Input）
Bootstrap 提供了对所有原⽣的 HTML5 的 input 类型的⽀持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
2. ⽂本框（Textarea）
当需要进⾏多⾏输⼊的时，则可以使⽤⽂本框 textarea。必要时可以改变rows属性（较少的⾏ = 较⼩的盒⼦，较多的⾏ = 较⼤的盒⼦）。
3. 复选框（Checkbox）和单选框（Radio）
当创建表单时，如果想从列表中选择若⼲个选项时，请使⽤ checkbox。如果限制只能选择⼀个选项，请使⽤ radio。
对⼀系列复选框和单选框使⽤ checkbox-inline类 或 radio-inline类，控制它们显⽰在同⼀⾏上。
4. 选择框（Select）
当想从多个选项中进⾏选择，但是默认情况下只能选择⼀个选项时，则使⽤选择框。
使⽤<select>展⽰列表选项，通常是那些⽤户很熟悉的选择列表，⽐如州或者数字。
使⽤multiple="multiple"允许⽤户选择多个选项。
5. 静态控件
当需要在⼀个⽔平表单内的表单标签后放置纯⽂本时，请在 <p>上使⽤form-control-static类。
表单控件状态
1. 输⼊框焦点
当输⼊框 input 接收到:focus 时，输⼊框的轮廓会被移除，同时应⽤ box-shadow。
2. 禁⽤的输⼊框 input
如果想要禁⽤⼀个输⼊框 input，只需要简单地添加 disabled属性，这不仅会禁⽤输⼊框，还会改变输⼊框的样式以及当⿏标的指针悬停在元素上时⿏标指针的样式。
3. 禁⽤的字段集 fieldset
对 <fieldset> 添加 disabled 属性来禁⽤ 内的所有控件。
4. 验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对⽗元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使⽤验证状态。
表单控件⼤⼩
可以分别使⽤input-lg类 和 col-lg-*类 来设置表单的⾼度和宽度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。