Bootstrap的table类的使用

最新推荐文章于 2022-11-26 21:06:27 发布

翻译最新推荐文章于 2022-11-26 21:06:27 发布 · 916 阅读

文章标签：

#bootstrap

框架同时被 2 个专栏收录

3 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

本文介绍了Bootstrap框架中table类的多种用法，包括基本的table元素使用、奇数行背景设置、边框显示、鼠标悬停效果、行间距调整及单元格背景颜色改变等，特别强调了在不同设备上的响应式设计。

Bootstrap中table类的使用

一、Bootstrap的介绍：Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

二、Bootstrap的引用： 将Bootstrap的css包中的bootstrap.min.css文件拷入网页的css中并引入。

三、Bootstrap的使用：

(一)、table类的使用。

1、table将按照table元素的大小均匀分布里面的td元素。如：

  <table class="table">
      <tr>
          <td>姓名</td>
          <td>年龄</td>
          <td>职业</td>
      </tr>
  </table>
2、table-striped可以使奇数行的背景设为灰色。如：
  <table class="table table-striped">
      <tr>
          <td>姓名</td>
          <td>年龄</td>
          <td>职业</td>
      </tr>
  </table>
3、table-bordered可以使边框显示。如：
  <table class="table table-bordered">
      <tr>
          <td>姓名</td>
          <td>年龄</td>
          <td>职业</td>
      </tr>
  </table>
4、table-hover可以使鼠标悬停的行的背景变为灰色。如：
  <table class="table table-hover table-bordered">
      <tr>
          <td>姓名</td>
          <td>年龄</td>
          <td>职业</td>
      </tr>
  </table>
5、table-condensed可以使行间距变小。如：
<table class="table table-hover table-bordered table-condensed">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>职业</td>
    </tr>
</table>
6、在td的class中加入：①active②success③warning④danger可以改变单元格的背景颜色。
7、
–这样做在小屏幕上看的时候会自动出现水平滚动条，大屏幕自动消失