Bootstrap常用表单组件

来源：互联网发布：淘宝网官方版下载安装编辑：程序博客网时间：2024/06/05 06:14

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>

这里写图片描述

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

1 0