扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >bootstrap的表格类有哪些
  • 969

0
分享到

bootstrap的表格类有哪些

2024-04-02 19:04:59 969人浏览 安东尼
摘要

本篇文章为大家展示了bootstrap的表格类有哪些，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。bootstrap的表格类有：1、“.table”，基础表格；2、

本篇文章为大家展示了bootstrap的表格类有哪些，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

bootstrap的表格类有：1、“.table”，基础表格；2、“.table-striped”，斑马线表格；3、“.table-bordered”，带边框的表格；4、“ .table-hover”，鼠标悬停高亮的表格等等。

本教程操作环境：windows7系统、bootsrap3.3.7版、DELL G3电脑

Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签描述
<table>为表格添加基础样式。
<thead>表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>表格主体中的表格行的容器元素（<tr>）。
<tr>一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>默认的表格单元格。
<th>特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>关于表格存储内容的描述或总结。

Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

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

基本的表格

如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/CSS/bootstrap.min.css">  
	<script src="Https://cdn.staticfile.org/Jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

结果如下所示：

bootstrap的表格类有哪些

可选的表格类

除了基本的表格标记和 .table class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

条纹表格

通过添加 .table-striped class，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：

实例

<table class="table table-striped">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

结果如下所示：

bootstrap的表格类有哪些

边框表格

通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：

实例

<table class="table table-bordered">
  <caption>边框表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

结果如下所示：

bootstrap的表格类有哪些

悬停表格

通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：

实例

<table class="table table-hover">
  <caption>悬停表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

结果如下所示：

bootstrap的表格类有哪些

精简表格

通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

实例

<table class="table table-condensed">
  <caption>精简表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td></tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td></tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td></tr>
  </tbody></table>

结果如下所示：

bootstrap的表格类有哪些

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

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

这些类可被应用到 <tr>、<td> 或 <th>。

实例

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody></table>

结果如下所示：

bootstrap的表格类有哪些

响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

实例

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table></div>

结果如下所示：

bootstrap的表格类有哪些

上述内容就是bootstrap的表格类有哪些，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网node.js频道。

--结束END--

本文标题: bootstrap的表格类有哪些

本文链接: https://lsjlt.com/news/88131.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • bootstrap的表格类有哪些
    本篇文章为大家展示了bootstrap的表格类有哪些，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。bootstrap的表格类有：1、“.table”，基础表格；2、...
    99+
    2024-04-02
  • bootstrap的表格样式有哪些及怎么实现
    本篇内容介绍了“bootstrap的表格样式有哪些及怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！...
    99+
    2024-04-02
  • bootstrap中的文本类有哪些
    这篇文章主要讲解了“bootstrap中的文本类有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“bootstrap中的文本类有哪些”吧！ ...
    99+
    2024-04-02
  • bootstrap的栅格系统有哪些作用
    本文小编为大家详细介绍“bootstrap的栅格系统有哪些作用”，内容详细，步骤清晰，细节处理妥当，希望这篇“bootstrap的栅格系统有哪些作用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起...
    99+
    2024-04-02
  • bootstrap支持的列表样式有哪些
    这篇文章给大家分享的是有关bootstrap支持的列表样式有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 bootstrap支持6种列表样式：1...
    99+
    2024-04-02
  • bootstrap用哪个表格插件
    本篇内容介绍了“bootstrap用哪个表格插件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2024-04-02
  • Bootstrap3.0中有哪些表格
    本篇内容介绍了“Bootstrap3.0中有哪些表格”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！基本案例为任意<table>标...
    99+
    2023-06-08
  • bootstrap可对表单设置的状态有哪些
    这篇文章主要讲解了“bootstrap可对表单设置的状态有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“bootstrap可对表单设置的状态有哪些”吧！...
    99+
    2024-04-02
  • html表格的作用有哪些
    这篇文章主要介绍“html表格的作用有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html表格的作用有哪些”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • bootstrap有哪些功能
    这篇文章主要介绍“bootstrap有哪些功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“bootstrap有哪些功能”文章能帮助大...
    99+
    2024-04-02
  • HTML表格语法有哪些
    这篇“HTML表格语法有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“HTML表格语法...
    99+
    2024-04-02
  • CSS表格属性有哪些
    这篇文章主要为大家展示了“CSS表格属性有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS表格属性有哪些”这篇文章吧。 属性 刻划 ...
    99+
    2024-04-02
  • html表格标签有哪些
    本篇内容主要讲解“html表格标签有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html表格标签有哪些”吧! html表格标签...
    99+
    2024-04-02
  • mysql表的分区格式有哪些
    这篇文章将为大家详细讲解有关mysql表的分区格式有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。mysql表的分区格式有：1、RANGE分区是基于属于一个给定连续区...
    99+
    2024-04-02
  • Bootstrap对移动设备友好的布局类有哪些
    这篇文章主要介绍“Bootstrap对移动设备友好的布局类有哪些”，在日常操作中，相信很多人在Bootstrap对移动设备友好的布局类有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Bootstrap对移...
    99+
    2023-06-27
  • Bootstrap学习之常用表单组件有哪些
    这篇“Bootstrap学习之常用表单组件有哪些”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“Bootstrap学习之常用表单组件有哪些”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过...
    99+
    2023-06-06
  • html5中列表和表格的区别有哪些
    这篇文章主要介绍“html5中列表和表格的区别有哪些”，在日常操作中，相信很多人在html5中列表和表格的区别有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5中...
    99+
    2024-04-02
  • sass和bootstrap的区别有哪些
    本篇内容主要讲解“sass和bootstrap的区别有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“sass和bootstrap的区别有哪些”吧! ...
    99+
    2024-04-02
  • bootstrap中的data属性有哪些
    这篇文章主要讲解了“bootstrap中的data属性有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“bootstrap中的data属性有哪些”吧！ ...
    99+
    2024-04-02
  • js与bootstrap的区别有哪些
    本篇内容介绍了“js与bootstrap的区别有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作