用Bootstrap写表单

一、表单

在一个网站中登录注册都会用到表单，下面我们来看看在boostrap中表单的使用。

1、表单的布局

• 垂直表单（默认）

<form role="form">
  <div class="form-group">
    <label for="name">name</label>
    <input type="text" class="form-control" id="name" placeholder="请输入姓名：">
  </div>
  <div class="form-group">
    <label for="tel">Password</label>
    <input type="tel" class="form-control" id="tel" placeholder="请输入电话：">
  </div>
  <div class="form-group">
    <label for="file">File input</label>
    <input type="file" id="file">
    <p class="help-block">这是帮助文档</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 同意
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

• 内联表单

<form class="form-inline">
    <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="email" class="form-control" id="tel" placeholder="请输入电话：">
     </div>
     <button type="submit" class="btn btn-default">submit</button>
   </form>

• 水平表单

<form class="form-horizontal">
        <div class="form-group">
            <label for="user" class="col-sm-2 control-label">账号</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="user" placeholder="请输入账号：">
            </div>
        </div>
        <div class="form-group">
            <label for="pwd" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="pwd" placeholder="请输入密码：">
            </div>
        </div>
        <div class="form-group">
                <label for="age" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-10">
                <select class="form-control" id="age">
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                </select>
            </div>
        </div>
        
        <div class="form-group">
            <div class="col-sm-offset-6 col-sm-10">
                <button type="submit" class="btn btn-default">登录</button>
            </div>
        </div>
    </form>

2、注意

• 为所有输入框添加label标签,不然内容要手动定位
• 把标签和控件放在class.form-group的div中，获取最佳间距
• 所有的 标签和元素中必须添加class.form-control,元素宽度被设置为width:100%
• form-inline 内联表单，添加到form元素类中，横向排布
• form-horizontal 添加到form,让form-group类如同row效果，可以让label与控件水平排列
  使用form-horizontal想要水平排列时，需要将输入框放入盒子内，因为输入框宽度为100%