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定义的类名重名,否则会出错!

-------------本文结束感谢您的阅读-------------