BootStrap2学习日记7---表格

基本表

代码：

<div class="container">
<h1 class="page-header">基本表</h1>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>科目</th>
        <th>分数</th>
        <th>学分</th>
        <th>指导老师</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数学</td>
        <td>100</td>
        <td>5</td>
        <td>高斯</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>100</td>
        <td>5</td>
        <td>高斯</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>100</td>
        <td>5</td>
        <td>高斯</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>100</td>
        <td>5</td>
        <td>高斯</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>100</td>
        <td>5</td>
        <td>高斯</td>
      </tr>
    </tbody>
  </table>
</div>

效果：

在table标签的class属性添加“table-striped”效果如图：

添加"table-border"：

添加“table-condensed”和“table-bordered”压缩表格：

这些样式类可以综合使用