表单

1、基本输入框(label与input垂直排布)

<div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form action="">
                    <div class="form-group">
                        <label for="email">邮箱：</label>
                        <input type="text" class="form-control" id="email">
                    </div>
                    <div class="form-group">
                        <label for="password">密码:</label>
                        <input type="password" id="password" class="form-control">
                    </div>
                </form>
            </div>
        </div>
    </div>
1、.form-group 让每个输入框底部有一定的margin 让上下的input有一定的间距
2、.form-control 让input的宽为100%
3、建议使用label，有利于屏幕阅读器 的识别
4、<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。在pc端展示所有的input水平展示，在移动端可能会分行（折叠）排列
5、input的宽度设置了form-control，变为100%，如果不需要那么长，使用栅格系统来控制他的宽度

2、label与input水平排布

<form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
    </form>
1、为form标签添加form-horizontal类名

3、在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
我们不支持在输入框的单独一侧添加多个额外元素（.input-group-addon 或 .input-group-btn）。
我们不支持在单个输入框组中添加多个表单控件。

更多例子请查看官网
https://v3.bootcss.com/components/#input-groups

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

4、设置input的尺寸

<div class="input-group input-group-lg">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
input-group-lg  大输入框
input-group-sm 小输入框