Bootstrap学习笔记--表单

Bootstrap表单有三种类型：
1. 垂直表单 ：表单元素垂直分布
2. 内联表单：表单元素行内分布，左对齐
3. 水平表单：表单元素水平分布

默认：所有文本<input>，<textarea>和 <select>类的元素.form-control都有100％的宽度。

Bootstrap的表单布局：

垂直形式（这是默认）
水平形式
内联表格

垂直表单：

举个栗子：
创建一个带有两个输入字段，一个复选框和一个提交按钮的垂直表单:
先贴一下源码：

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form role="form">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

效果图：

所有三种表单布局的标准规则：（用到上面例子展示）

1. 始终使用<form role=”form”>主要为了始终居中 好看（有助于改善使用屏幕阅读器的人员的可访问性)

没有效果之前：

增加<form role=”form”>之后：

2. 将标签和表格控件包裹<div class=”form-group”> （需要最佳间距）

举个栗子：

两个<div class="form-group">之间留有恰当好处的举例 
没有<div class="form-group"> 会造成表单元素太紧贴，看着粘一块 一点都不美观

3. 添加类.form-control的所有文字<input>，<textarea>和<select>元素

可能你们不是很明白什么意思 直接看图说话：

没加效果之前：

加.form-control之后：

两者效果很明显吧

---

内联表单：

将类添加.form-inline到<form>元素

在内联表单中，所有元素都是内联的，左对齐的，并且标签是并排的。

注意：这仅适用于至少768px宽的视口内的窗体！ 当窗体大小 小于768px宽时就是跟垂直效果一样是层叠的

举个栗子：
创建一个带有两个输入字段，一个复选框和一个提交按钮的内联表单
源码：

<div class="container">
  <h2>Inline form</h2>
  <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
  <form class="form-inline" role="form">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

效果图：

大于768px宽的视口内的窗体：

小于768px宽的视口内的窗体：

sr-only类：
如果您没有为每个输入添加标签，则屏幕阅读器会在您的表单中遇到问题。您可以使用.sr-only该类隐藏除屏幕阅读器以外的所有设备的标签
我不是很懂
源码：

 <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class=