Bootstrap常用表单组件

1 复选框

---

                                    <div class="checkbox checkbox-info">
                                        <input id="checkbox4" type="checkbox">
                                        <label for="checkbox4">
                                            xuhaitao
                                        </label>
                                    </div>

---

2 文件上传

                    <div id="file-pretty">
                        <div class="form-group">
                            <label class="font-noraml control-label">文件选择（单选）</label>
                            <input type="file" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="font-noraml">文件选择（多选）</label>
                            <input type="file" multiple="multiple" class="form-control">
                        </div>
                    </div>

3 多选框

  <div class="ibox-content">
                    <h3>下拉选择</h3>
                    <p>这个比较有名气啦，不多说</p>
                    <div class="form-group">
                        <label>基本示例</label>
                        <div class="input-group">
                            <select data-placeholder="选择省份..." class="chosen-select" style="width:350px;" tabindex="2">
                                <option value="">请选择省份</option>
                                <option value="110000" hassubinfo="true">徐海涛</option>
                                <option value="110000" hassubinfo="true">北京</option>
                                <option value="120000" hassubinfo="true">天津</option>
                                <option value="130000" hassubinfo="true">河北省</option>
                                <option value="140000" hassubinfo="true">山西省</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="font-noraml">多选</label>

                        <div class="input-group">
                            <select data-placeholder="选择省份" class="chosen-select" multiple style="width:350px;"
                                    tabindex="4">
                                <option value="">请选择省份</option>
                                <option value="110000" hassubinfo="true">北京</option>
                                <option value="120000" hassubinfo="true">天津</option>
                                <option value="130000" hassubinfo="true">河北省</option>

                            </select>
                        </div>
                    </div>
                </div>

---

---

4 表格

---

    <tr>
            <th class="">偏移（Offsets）</th>
            <td colspan="4">是</td>
    </tr>
    <tr>
            <th class="">列排序</th>
            <td colspan="4">是</td>
   </tr>

---

---

---

---

5

---

  <tr>
       <td class="project-status">
            <span class="label label-primary">进行中
       </td>
       <td class="project-title">
            <a href="project_detail.html">LIKE－一款能够让用户快速获得认同感的兴趣社交应用</a>
            <br/>
            <small>创建于 2014.08.15</small>
       </td>
       <td class="project-completion">
            <small>当前进度： 48%</small>
            <div class="progress progress-mini">
                <div style="width: 48%;" class="progress-bar"></div>
            </div>
       </td>
       <td class="project-people">
            <a href="projects.html"><img alt="image" class="img-circle" src="img/a3.jpg"></a>
            <a href="projects.html"><img alt="image" class="img-circle" src="img/a1.jpg"></a>
            <a href="projects.html"><img alt="image" class="img-circle" src="img/a2.jpg"></a>
            <a href="projects.html"><img alt="image" class="img-circle" src="img/a4.jpg"></a>
            <a href="projects.html"><img alt="image" class="img-circle" src="img/a5.jpg"></a>
      </td>
      <td class="project-actions">
            <a href="projects.html#" class="btn btn-white btn-sm"><i class="fa fa-folder"></i> 查看 </a>
            <a href="projects.html#" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> 编辑 </a>
      </td>
</tr>

补充说明：可以在table标签外面再套一个div标签，并且为这个div标签添加project-list类

---

---

6 注意no-padding类的使用

---

7 添加一条水平线

<div class="hr-line-dashed"></div>

---

---

8

      <div class="social-comment">
            <a href="" class="pull-left">
               <img alt="image" src="img/a8.jpg">
            </a>
      <div class="media-body">
            <a href="#">
                 尤小右
            </a> 一张图学会Javascript，via：
            <br/>
            <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 11</a> -
            <small class="text-muted">8月18日</small>
      </div>