bootstrap表单

• 垂直表单（默认）
• 内联表单
• 水平表单

---

垂直表单

也称基本表单
基本的表单结构是 bootstrap 自带的
创建基本表单的步骤：

• 向父 <form> 元素添加 role="form"。
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

 <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="tel">电话</label>
         <input type="text" class="form-control" id="tel" placeholder="请输入电话">
    </div>
    <div class="form-group">
        <label for="inputfile">文件输入</label>
         <input type="file" id="inputfile">
         <p class="help-block">这里是块级帮助文本的实例。</p>
    </div>
    <div class="checkbox">
      <label>
         <input type="checkbox">请打勾
      </label>
      </div>
      <button type="submit" class="btn btn-default">提交</button>
</form>

效果：

Paste_Image.png

使用class .help-block来显示表单提示信息

内联表单

内联表单即所有元素是内联的，向左对齐的，并排体现
在 <form> 标签添加 class .form-inline

<form class="form-inline" 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="tel">电话</label>
   <input type="text" class="form-control" id="tel" placeholder="请输入电话">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
  </div>
  <div class="checkbox">
    <label>
       <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

效果：

Paste_Image.png

水平表单

水平表单风格（标签居左，表单控件居右）
创建步骤：

• 在 <form> 标签添加 class .form-horizontal
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。
• 向标签添加 class .control-label。

<form class="form-horizontal" role="form">
    <div class="form-group">
       <label for="name" class="col-sm-2 control-label">昵称 </label>
           <div class="col-sm-10">
              <input type="text" class="form-control" id="name" placeholder="请输入昵称">
           </div>
    </div>
    <div class="form-group">
       <label for="inputPassword" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" 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>

效果：

Paste_Image.png

代码中用到网格标示col-sm-2
bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。
bootstrap网格的基本结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
</div>