学习 Bootstrap 5 之 Tables

最新推荐文章于 2024-03-24 13:38:02 发布
最新推荐文章于 2024-03-24 13:38:02 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： Bootstrap 5 文章标签： bootstrap 前端 html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37354060/article/details/122518645
版权

学习 Bootstrap 5 之 表格

表格 (Tables)

Bootstrap 5 官方文档

1. 创建表格

(1). 使用原生的表格标签

在这里插入图片描述

<table>
    <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

(2). 使用Bootstrap 5 的提供的表格标签类

在这里插入图片描述

<table class="table">
    <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

官方提供的写法

<table class="table">
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

(3). 原生与Bootstrap创建出来的表格的对比

在这里插入图片描述

  <table>
    <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>
  <table class="table">
    <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>
  <table class="table">
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
  </table>

两种写法无明显区别

2. 表格颜色样式

(1). 表格颜色样式的效果

样式类
table-primary
table-secondary
table-success
table-danger
table-warning
table-info
table-light
table-dark

效果如下图:
在这里插入图片描述

  <table class="table">
    <thead>
    <tr>
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">第一行</th>
      <td class = "table-primary">table-primary</td>
      <td class = "table-secondary">table-secondary</td>
      <td class = "table-success">table-success</td>
    </tr>
    <tr>
      <th scope="row">第二行</th>
      <td class = "table-danger">table-danger</td>
      <td class = "table-warning">table-warning</td>
      <td class = "table-info">table-info</td>
    </tr>
    <tr>
      <th scope="row">第三行</th>
      <td class = "table-light">table-light</td>
      <td class = "table-dark">table-dark</td>
      <td>默认</td>
    </tr>
    </tbody>
  </table>

(2). 表格颜色样式的使用

1). 用于 <table> 标签

使得整个表格设置为指定的样式

在这里插入图片描述

<table class="table table-success" >
    <thead >
    <tr>
      <th scope="col">#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <th scope="col" >#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tfoot>
  </table>
2). 用于 <thead> <tbody> <tfoot> 标签

使得整个区域内的所有元素都设置为指定的样式
在这里插入图片描述

  <table class="table">
    <thead class = "table-primary">
    <tr>
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody class = "table-secondary">
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
    <tfoot class = "table-danger">
    <tr>
      <th scope="col" >#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tfoot>
  </table>
3). 用于 <th> <tr> <td> 标签

在<th>标签中使用, 整个表头会应用指定的样式
在<tr>标签中使用, 表格该行会应用指定的样式
在<td>标签中使用, 该单元格会应用指定的样式
在这里插入图片描述

  <table class="table">
    <thead>
    <tr class = "table-primary">
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row" class = "table-secondary">#</th>
      <th scope="col" class = "table-secondary">x</th>
      <th scope="col" class = "table-secondary">x</th>
    </tr>
    </tbody>
    <tfoot class = "table-danger">
    <tr  class = "table-danger">
      <th scope="col" >#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tfoot>
  </table>

3. 表格突出样式 (Accented tables)

(1). 表格条纹样式 class = “table-striped”

在<table>标签中使用类 .table-striped, 可以给表格增加条纹样式
在这里插入图片描述

    <table class="table table-striped" >
    <thead>
    <tr class = "table-primary">
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
  </table>

(2). 表格鼠标悬浮样式 class = “table-hover”

  在<table>标签中使用类 .table-hover, 可以给表格增加鼠标悬浮样式, 即当用户鼠标悬浮在表格某列时, 该列会出现深色样式
在这里插入图片描述

  <table class="table table-hover" >
    <thead>
    <tr class = "table-primary">
      <th scope="col" >#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
  </table>

(3). 表格单元格强调样式 class = “table-active”

在<table>标签中使用, 整个表格会应用强调样式
在<thead> <tbody> <tfoot>标签中使用, 整个区域会应用强调样式
在<th>标签中使用, 整个表头会应用强调样式
在<tr>标签中使用, 表格该行会应用强调样式
在<td>标签中使用, 该单元格会应用强调样式
在这里插入图片描述

  <table class="table">
    <thead>
    <tr class = "table-primary">
      <th scope="col" class = "table-active">#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody >
    <tr  class = "table-active">
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
  </table>

4. 表格边框 (Table borders)

(1). 默认边框 class = “table-bordered”

在这里插入图片描述

  <table class="table table-bordered">
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">标题</th>
      <th scope="col">标题</th>
    </tr>
    </thead>
    <tbody >
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    <tr>
      <th scope="row">#</th>
      <th scope="col">x</th>
      <th scope="col">x</th>
    </tr>
    </tbody>
  </table>

(2). 无边框 class = “table-borderless”

在这里插入图片描述

    <table class="table table-borderless">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>

(3). 表格边框样式

样式类
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light
border-dark

在这里插入图片描述

 <table class="table table-bordered border-success">
   <thead>
   <tr>
     <th scope="col">#</th>
     <th scope="col">标题</th>
     <th scope="col">标题</th>
   </tr>
   </thead>
   <tbody >
   <tr>
     <th scope="row">#</th>
     <th scope="col">x</th>
     <th scope="col">x</th>
   </tr>
   <tr>
     <th scope="row">#</th>
     <th scope="col">x</th>
     <th scope="col">x</th>
   </tr>
   <tr>
     <th scope="row">#</th>
     <th scope="col">x</th>
     <th scope="col">x</th>
   </tr>
   </tbody>
 </table>

5. 紧凑表格样式 (Small tables)

使用.table-sm类，可以将所有单元格填充减半, 使表格更紧凑。
在这里插入图片描述
上图中, 下方的表格为紧凑的

<div class = "container">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
    <table class="table table-bordered table-sm">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
  </div>

6. 表格内容在垂直方向的排版 (Vertical alignment)

  默认情况下, <thead>标签中的内容是居下的, <tbody>标签中的内容是居顶的
在这里插入图片描述

  <div class = "container">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
  </div>

CSS

  tr {
    height: 100px;
  }
  td {
    height: 50px;
  }

(1). 居上 class = “align-top”

(2). 居中 class = “align-middle”

(3). 居下 class = “align-bottom”

在这里插入图片描述

  <div class = "container">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th scope="col" class = "align-top">align-top</th>
        <th scope="col" class = "align-middle">align-middle</th>
        <th scope="col" class = "align-bottom">align-bottom</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row" class = "align-top">align-top</th>
        <th scope="col" class = "align-middle">align-middle</th>
        <th scope="col" class = "align-bottom">align-bottom</th>
      </tr>
      <tr>
        <th scope="row" class = "align-top">align-top</th>
        <th scope="col" class = "align-middle">align-middle</th>
        <th scope="col" class = "align-bottom">align-bottom</th>
      </tr>
      </tbody>
    </table>
  </div>

CSS

  tr {
    height: 100px;
  }
  td {
    height: 50px;
  }

7. 表格嵌套 (Nesting)

表格中的某个单元格还是一个表格
在这里插入图片描述

  <div class = "container">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">
          <table class="table table-bordered">
            <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">标题</th>
              <th scope="col">标题</th>
            </tr>
            </thead>
            <tbody >
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            </tbody>
          </table>
        </th>
        <th scope="col">
          <table class="table table-bordered">
            <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">标题</th>
              <th scope="col">标题</th>
            </tr>
            </thead>
            <tbody >
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            <tr>
              <th scope="row">#</th>
              <th scope="col">x</th>
              <th scope="col">x</th>
            </tr>
            </tbody>
          </table>
        </th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
  </div>

8. 表格标题 (Captions)

使用<caption>标签设置标题, 默认情况, 标题在最下面
在这里插入图片描述

  <div class = "container">
    <table class="table table-bordered">
      <caption>表格标题</caption>
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
  </div>

(1). 标题在表格上方 class = “caption-top”

  在<table>标签 或 <captain>标签 中使用.caption-top类, 可以让表格标题显示在表格上方
在这里插入图片描述

  <div class = "container">
    <table class="table table-bordered caption-top">
      <caption>表格标题</caption>
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">标题</th>
      </tr>
      </thead>
      <tbody >
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      <tr>
        <th scope="row">#</th>
        <th scope="col">x</th>
        <th scope="col">x</th>
      </tr>
      </tbody>
    </table>
  </div>

(2). 标题在表格下方 (默认方式)

默认情况下, 表格标题显示在表格下方
在这里插入图片描述

9. 响应式表格 (Responsive tables)

(1). 表格宽度总是随视口宽度的变化而变化 class = "table-responsive "

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

(2). 使用断点指定表格宽度变化 .table-responsive{-sm|-md|-lg|-xl|-xxl}

.table-responsive{-sm|-md|-lg|-xl|-xxl}

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>
_ZestyJt
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap学习笔记之初识bootstrap
10-22
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集。本文给大家介绍bootstrap学习笔记之初识bootstrap，感兴趣的朋友一起学习吧
教程：如何使用 Bootstrap 5 构建简单的管理仪表板界面
allway2的博客
11-11 2302
在今天的教程中，我想向你们展示如何使用 Bootstrap 5 创建一个非常简单的管理仪表板界面。现在，您已经使用 Bootstrap 5 完成了一个简单的管理仪表板界面的构建。让我们继续看仪表板的最后一部分，即页脚。仪表板的页脚是显示对导航较少的页面（如隐私策略、协议条款、联系人等）的引用的好方法。现在，您的项目中已包含 Bootstrap 5，您可以开始构建管理仪表板界面。现在，您还有一个带有表格的小部件，您可以在其中添加用户、事务等内容。您将在本教程中创建的最后一个小部件将是具有图表的小部件。
vue.js——学习计划表
最新发布
weixin_74878822的博客
03-24 3726
id:'1',subject:'Vue.js前端实战开发',content:'学习指令，例如v-if、v-for、v-model等',place:'自习室',},])</script>上述代码中，list数组表示渲染表格区域所需的数据，id属性表示序号，subject属性表示学习科目，content属性表示学习内容，place属性表示学习地点，status属性表示学习计划的完成状态，若属性值为false，表示“未完成”，若属性值为true表示“已完成”。
bootstrap系列-5.BooStrap表格
cdc8596的博客
08-24 281
bootstrap系列讲解
bootstrap5基本使用
Crayonxin2000的博客
01-29 6834
bootstrap虽然没有Vue强大，但是对于新手快速建造精美的web有着非常大的帮助。我觉得bootstrap5更像是一个组件库，对于小型网页来说非常的nice。组件库非常精美、简洁。而且上手很快。非常的高兴的是官方文档很详细，不仅有详细的api文档，而且有完善的示例，对新手来说，一个例子胜过千字文。...
自学bootstrap5—表格
wseeyouagain的博客
11-11 456
表格 <!DOCTYPE html> <html> <head> <!-- <meta name="viewport" content="width=device-width,initial-scale=1"> --> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" /> <meta charset="utf-8">
Bootstrap5 表格讲解
qq_65552364的博客
06-02 2111
目录一、基础表格二、表格颜色三、活动类表格四、条纹表格五、带边框表格六、无边框表格七、响应式表格 对于这个基础表格的写法，想必大家也非常熟悉，我们来看一下代码吧 而类.table为我们很好的修改了表格的样式，例如默认宽度为100%，内容之间的间距及底部边框，使我们在创建表格的时候更加方便在bootstrap5中设置了8种颜色样式，图中英文即为设置该种颜色所需要的类名 通过指定意义的颜色类名还可以为整个表格添加颜色样式 通过指定意义的颜色类名还可以为表头、表注添加颜色样式 关
Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色
weixin_33991727的博客
03-17 1194
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
bootstrap5 tab切换选项卡最简示例。
gztrljh
01-09 2262
官网那个看着很多多余的标签。。。我把多余的去掉后就看着清楚多了 <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#home">文章</a>
table-responsive响应式表格,手机端表格自适应
nuanpang的博客
12-12 1125
【代码】table-responsive响应式表格,手机端表格自适应。
Bootstrap 5-表格
m0_73839298的博客
09-16 250
特征：表格添加滚动条（当它在水平方向上太大时，达到一定数量时才会出现滚动条，35个th或35td就会出现滚动条)• table-secondary （不太重要的动作，灰色)• table-active（将悬停颜色，行/列均可以，灰色)• table-light （浅灰色表格或表格行背景)• table table-bordered（带边框的表格）• table-dark （深灰色表格或表格行背景)• table-hover（表格有悬停效果的行）• table-striped（表格条纹行）
开启BootStrap学习之旅
09-02
当下最流行的前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢，你如果也喜欢Bootstrap前端开发框架，不要错过这次旅行
bootstrap学习笔记-html5
12-22
bootstrap学习笔记-html5 各类简单案例，适合初学者
炫酷半透明Bootstrap5管理员后台模版
04-03
一个完全响应式的 Bootstrap 5 管理仪表板模板。它使用 bootstrap 5 框架、HTML5、CSS 和 JQuery 构建。它适用于所有主要的网络浏览器、台式机和所有智能手机设备。这是一个非常易于定制且对开发人员友好的模板。它...
两套bootstrap5框架后台管理模板 - Amdash
09-07
Amdash是基于Bootstrap5框架实现的后台管理模板。它有多个仪表盘样式，工作在所有主要浏览器、桌面和所有智能手机设备上。非常易于定制和开发人员友好的HTML5模板。集合与最新jQuery UI组件和bootstrap插件。它可以...
Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、 按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类
linjun的博客
07-25 2757
Bootstrap5的html模板、Bootstrap5 CDN、Bootstrap5（、表格、图像、 按钮、加载、进度条、Flex字体图标）、条纹的进度条、边框类
WEB前端网页设计-Bootstrap5 表格
君逍遥o
04-30 1896
WEB前端网页设计-Bootstrap5 表格
6、表格
QilanAllen的博客
05-21 362
表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。 Bootstrap为表格不同的样式风格提供了不同的类名，主要包括： .table：基础表格 .table-striped：斑马线表格 .table-bordered：带边框的表格 .table-hover：鼠标悬停高亮的表格 .table-condensed：紧凑型表格 .table-responsive：响应式表格 一、基础表格 在Bootstrap中，对于基础表格
bootstrap中table的使用
weixin_43487532的博客
07-24 3141
bootstrap、java实现数据表单展示
如何学习Bootstrap
06-06
5. 定制化：学习如何根据自己的需求定制化Bootstrap，例如修改颜色、字体、样式等，以及自定义组件和插件。 在学习Bootstrap时，可以通过阅读官方文档、查看在线教程、观看视频教程、参加培训班等方式进行学习。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值