表格设置bootstrap table样式


通过Bootstrap快速构建表格样式:

(1)外部引入Bootstrap文件

 <link type="text/css" rel="stylesheet" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">

 <script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.css"></script>
 
(2)通过HTML代码,创建一个表格
  
接下来通过外部引入Bootstrap来快速构建表格样式

.table    为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped    在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered    为所有表格的单元格添加边框
.table-hover    在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed    让表格更加紧凑

      除此之外,我们还可以给表格添加背景颜色。具体代码如下

.active    对某一特定的行或单元格应用悬停颜色
.success    表示一个成功的或积极的动作
.warning    表示一个需要注意的警告
.danger    表示一个危险的或潜在的负面动作   

         <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
      <thead> 
              <tr class="active"> 
                  <th>标题一</th> 
                  <th>标题二</th> 
                  <th>标题三</th> 
              </tr> 
          </thead> 
          <tbody>
              <tr class="success">
                  <td>示例一</td>
                  <td>示例一</td>
                  <td>示例一</td></tr>
              <tr class="warning">
                  <td>示例二</td>
                  <td>示例二</td>
                  <td>示例二</td></tr>
              <tr class="danger">
                  <td>示例三</td>
                  <td>示例三</td>
                  <td>示例三</td></tr>
              </tbody>
      </table>    

                 

posted on 2021-03-17 14:53 青蛙學堂 阅读(75) 评论(0)  编辑 收藏 引用 所属分类: HTMLCSSJavaScript

只有注册用户登录后才能发表评论。
<2021年3月>
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910

导航

统计

常用链接

留言簿(7)

随笔分类

随笔档案

收藏夹

青蛙学堂

最新评论

阅读排行榜

评论排行榜