Bootstrap 表单--输入框

1.单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

2.不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

3.要实现内联表单，可以为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

4.一定要为文本内容嵌套 label 标签

5.要实现水平排列的表单,可以通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<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>

效果：

    <div class="container">
        <div class="row">
            <div class="col-md-3 bg-danger">1</div>
            <div class="col-md-6 bg-success">
                <form action="" class="form-inline"> 
                    <div class="form-group">
                        <label for="" class="sr-only">账号：</label>
                        <input type="text" class=" form-control">
                    </div>
                    <div class="form-group">
                        <label for="">密码：</label>
                        <input type="text" class=" form-control">
                    </div>
                </form>
            </div>
            <!-- input-group相当于将按钮（input-group-addon）与表单项连在一起 -->
            <div class="col-md-3 bg-warning">
                <form action="" class="form-inline">
                    <div class="input-group">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-music "></span></div>
                        <input type="text" class="form-control">
                    </div>
                </form>
            </div>
        </div>
    </div>

效果：