Bootstrap——表格、按钮、图像

前言：
Bootstrap为表格、按钮、表单、图像等各种元素提供了不同的样式风格，我们在使用时，只要导入相应的css和js插件，以及引入相应的类名即可，下面介绍一些具体的标签

---

一、表格
1、基础表格（带有下边框）

        <table class="table">
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th></th>
                <th>/th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>

2、斑马线表格（用了css3的结构性选择器，对奇偶行显示不同的颜色）

        <table class="table table-striped">
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th></th>
                <th>/th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>

3、带边框的表格（除了下边框，左右也有）

<table class="table table-bordered">
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th></th>
                <th>/th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>

4、鼠标悬停高亮的表格（鼠标扫过，会变成灰色且变亮）

        <table class="table table-hover">
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th></th>
                <th>/th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>

5、紧凑型表格（只是表格行高变小）

        <table class="table table-condensed">
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th></th>
                <th>/th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>

5、响应式表格（让表格水平滚动以适应小型设备（小于768px））

        <table class="table table-responsive">
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th></th>
                <th>/th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>

以上只是bootstrap中所定义的表格的基本样式，也可以给行添加不同的类名，显示不同的风格，比如.active，.success，.info，.warning，.danger，单词如其名，这些css样式只是颜色不同，其他并无差异。

---

二、按钮
1、基础按钮（显示为灰色）

<button type="button" class="btn">Default</button>

2.默认按钮（显示为白色）

<button type="button" class="btn btn-default">Default</button>

3、主要按钮（深蓝色）

<button type="button" class="btn btn-primary">Primary</button>

4、成功按钮（绿色）

<button type="button" class="btn btn-success">Success</button>

5、信息按钮（淡蓝色）

<button type="button" class="btn btn-info">Info</button>

6、警告按钮（橘黄色）

<button type="button" class="btn btn-warning">Warning</button>

7、危险按钮（红色）

<button type="button" class="btn btn-danger">Danger</button>

8、链接按钮（无边框，只有蓝色文字，鼠标移到上面有下划线）

<button type="button" class="btn btn-link">Link</button>

每一类按钮只是修改了背景颜色，边框颜色和文本颜色，还有input标签，a标签，span标签，div标签都只要加上以上类名都可以成为按钮。除此之外还有一些其他类，.btn-lg超大按钮，.btn-sm小按钮，.btn-xs超小按钮，.btn-block按钮充满整个父容器，.disabled按钮为禁用状态。

---

三、图像
1、响应式图片（主要针对于响应式设计）

<img alt="img-responsive" class="img-responsive" src="images/1.png" />

2、圆形图片（IE8及其以下版本不支持）

<img alt="img-circle" class="img-circle" src="images/1.png" />

3、圆角图片（IE8及其以下版本不支持）

<img alt="img-rounded" class="img-rounded" src="images/1.png" />

4.缩略图片（实现主要依赖与bootstrap的网格系统，按照可视区域的大小来决定显示图片的个数，如下面的结构表示的是在可视区域大于768px的时候，一行显示四个缩略图，小于768px时，一行显示两个缩略图。）

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="images/1.png" >
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="images/1.png" >
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="images/1.png" >
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img alt="100%x180" src="images/1.png" >
            </a>
        </div>
    </div>
</div>

上面的所有图片在使用时都应该设置图片的大小，否则不显示，细心的朋友会注意到，上面都有个alt属性，这个alt属性只能放在img，input，area标签上，具体实现如：.img span{display:none}和.img:hover span{display:block}

---

总结：由于表单元素众多，之后再做总结，以上这些内容只是最基础的样式，如果想设置自己的样式，可以在每个类增加相应的样式，在使用之前一定要引入bootstrap的相关css和js插件，还有就是禁止自己定义的类名和bootstrap定义的类名重名，否则会出错！