bootstrap的图片图标及表格

Veröffentlicht am   |  

图片和图标




(请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性)
img-responsive 可以让图片支持响应式布局

<!-- bootstrap 小图标 -->
所有小图标网址：http://getbootstrap.com/components/#glyphicons 
<strong><span class="glyphicon glyphicon-envelope"></span></strong>
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-cloud"></span>
<span class="glyphicon glyphicon-music"></span>
<span class="glyphicon glyphicon-off"></span>
<strong><span class="glyphicon glyphicon-off"></span></strong>

表格



(table-responsive自适应布局)
（table-striped 类可以给 之内的每一行增加斑马条纹样式）
（table-bordered 类为表格和其中的每个单元格增加边框）
（table-hover 类可以让 中的每一行对鼠标悬停状态作出响应）
（table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半）

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
          <tr>
            <th">我是头标题1</th>
            <th>我是头标题2</th>
            <th>我是头标题3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>我是身体的单元格1</td>
            <td>我是身体的单元格2</td>
            <td>我是身体的单元格3</td>
          </tr>
          <tr>
            <td>我是身体的单元格1</td>
            <td>我是身体的单元格2</td>
            <td>我是身体的单元格3</td>
          </tr>
          <tr>
            <td>我是身体的单元格1</td>
            <td>我是身体的单元格2</td>
            <td>我是身体的单元格3</td>
          </tr>
        </tbody>
    </table>
</div>