【Bootstrap V4系列】学习入门教程之 表格(Tables)和画像(Figure)

Bootstrap V4系列 学习入门教程之 表格(Tables)和画像(Figure)

  • 表格(Tables)
    • 一、Examples
    • [二、Table head options 表格头选项](#二、Table head options 表格头选项)
    • [三、Striped rows 条纹行](#三、Striped rows 条纹行)
    • [四、Bordered table 带边框的表格](#四、Bordered table 带边框的表格)
    • [五、Borderless table 无边框表格](#五、Borderless table 无边框表格)
    • [六、Hoverable rows 可悬停行](#六、Hoverable rows 可悬停行)
    • [七、Contextual classes 情境类](#七、Contextual classes 情境类)
  • 画像(Figure)

表格(Tables)

一、Examples

由于表格在日历和日期选择器等第三方小部件中的广泛使用,我们将表格设计为可选择加入。只需将基类.table添加到任何<table>中,然后使用自定义样式或我们包含的各种修饰符类进行扩展。

使用最基本的表标记,以下是Bootstrap中基于.table的表的外观。Bootstrap 4继承了所有表样式,这意味着任何嵌套表都将以与父表相同的方式进行样式设置。

html 复制代码
<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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

页面展示效果:

您还可以使用.table-dark反转颜色------在深色背景上使用浅色文本。

html 复制代码
<table class="table table-dark">
  <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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

页面展示效果:

二、Table head options 表格头选项

与表格和深色表格类似,使用修饰符类.thead-light.thead-dark使<thead>显示为浅灰色或深灰色。

html 复制代码
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
  ...
 </tbody>
</table>  

页面展示效果:

三、Striped rows 条纹行

使用.table-striped<tbody>中的任何表行添加斑马条纹。

html 复制代码
<table class="table table-striped">
  <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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

页面展示效果:

四、Bordered table 带边框的表格

为表格和单元格的所有侧面添加边框。

html 复制代码
<table class="table table-bordered">
  <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>

页面展示效果:

五、Borderless table 无边框表格

为无边框的表格添加.table-borderless

html 复制代码
<table class="table table-borderless">
  <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>

页面展示效果:

六、Hoverable rows 可悬停行

添加.table-hover以在<tbody>内的表行上启用悬停状态。

html 复制代码
<table class="table table-hover">
  <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>

页面展示效果:

七、Contextual classes 情境类

html 复制代码
<div class="bd-example">
    <table class="table">
        <thead>
        <tr>
            <th scope="col">Class</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
        </tr>
        </thead>
        <tbody>
        <tr class="table-active">
            <th scope="row">Active</th>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <th scope="row">Default</th>
            <td>Cell</td>
            <td>Cell</td>
        </tr>

        <tr class="table-primary">
            <th scope="row">Primary</th>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-secondary">
            <th scope="row">Secondary</th>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-success">
            <th scope="row">Success</th>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-danger">
            <th scope="row">Danger</th>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-warning">
            <th scope="row">Warning</th>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-info">
            <th scope="row">Info</th>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-light">
            <th scope="row">Light</th>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-dark">
            <th scope="row">Dark</th>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        </tbody>
    </table>
</div>

页面展示效果:

画像(Figure)

通过 Bootstrap 的画像(figure)组件来显示相关联的图片和文本。

任何时候需要显示一段内容(例如带有可选标题的图片),请使用 <figure> 标签。

.figure、.figure-img.figure-caption 类为 HTML5 的 <figure><figcaption> 元素提供了一些基本样式。<figure> 标签内所包含的图片如果没有明确地设置尺寸的话,请务必为 <img>标签添加 .img-fluid 类,使其支持响应式布局。

html 复制代码
<!--任何时候需要显示一段内容(例如带有可选标题的图片),请使用 <figure> 标签。 -->
<figure class="figure">
    <img src="../images/1.jpg" class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption">A caption for the above image.</figcaption>

</figure>

页面展示效果:

通过使用我们提供的 文本工具类 可以轻松对齐 <figure> 所包含的标题。

html 复制代码
<!--通过使用我们提供的 文本工具类 可以轻松对齐 <figure> 所包含的标题。-->
<figure class="figure">
    <img src="../images/1.jpg" class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>

页面展示效果:

相关推荐
yz-俞祥胜22 分钟前
【疑难杂症】Vue前端下载文件无法打开 已解决
前端·javascript·vue.js
TE-茶叶蛋25 分钟前
前端错误监听与上报框架工作原理,如:Sentry
前端·javascript·sentry
漫谈网络31 分钟前
TypeScript 和 JavaScript核心关系及区别
前端·javascript·typescript
aiweker40 分钟前
python web 开发-Flask-Login使用详解
前端·python·flask
m0_679927201 小时前
练习小项目7:天气状态切换器
前端·javascript·css·html
OK_boom1 小时前
React-改变当前页class默认的样式
前端·javascript·react.js
哎呦你好2 小时前
【background】CSS 背景全解析:从基础属性到视觉魔法
前端·css·人工智能·python
yuanyxh2 小时前
commonmark.js 源码阅读(二) - Inline Parser
前端·javascript·html
韩明君2 小时前
前端学习笔记——Promis.All
前端·笔记·学习
斯~内克2 小时前
Vite + Vue 工程中,为什么需要关注 `postcss.config.ts`?
前端·vue.js·postcss