• 基本实例样式

    • 效果
    • 代码 
      <!DOCTYPE html>
      
<html lang="en">
      
<head>
      
    <meta charset="UTF-8">
      
    <title>用户管理页面</title>

    <!-- Bootstrap core CSS -->
      
    <link href="css/bootstrap.min.css" rel="stylesheet">
      
    <link href="css/dashboard.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
      
    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
      
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
      
</head>
      
<body>

    <!-- container自适应 -->
      
    <div class="container">
      
        <!-- 为表格添加基础样式 ，.table为任意<table>添加基本样式 -->
      
        <table class="table">
      
            <!-- 表格标题行的容器元素，用来识别表格列 -->
      
            <thead>
      
                <tr>
      
                    <!-- 特殊的表格单元格，用来识别行或列 -->
      
                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                </tr>
      
            </thead>
      
            <!-- 表格主题中的表格行的容器元素 -->
      
            <tbody>
      
                <!-- 一组出现在单行单元格的容器元素 -->
      
                <tr>
      
                    <!-- 默认的表格单元格 -->
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                </tr>
      
                <tr>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                </tr>
      
            </tbody>
      
        </table>
      
    </div>

</body>
      
</html>
  • 条纹状表格
    • 效果
    • 代码 
      <!DOCTYPE html>
      
<html lang="en">
      
<head>
      
    <meta charset="UTF-8">
      
    <title>用户管理页面</title>

    <!-- Bootstrap core CSS -->
      
    <link href="css/bootstrap.min.css" rel="stylesheet">
      
    <link href="css/dashboard.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
      
    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
      
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
      
</head>
      
<body>

    <div class="container">
      
        <!-- .table-striped可以给tbody之内的每一行添加斑马条纹样式 -->
      
        <table class="table table-striped">

            <thead>
      
                <tr>

                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                </tr>
      
            </thead>

            <tbody>

                <tr>

                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                </tr>
      
                <tr>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                </tr>
      
            </tbody>
      
        </table>
      
    </div>

</body>
      
</html>
  • 带边框表格
    • 效果
    • 代码 
      <!DOCTYPE html>
      
<html lang="en">
      
<head>
      
    <meta charset="UTF-8">
      
    <title>用户管理页面</title>

    <!-- Bootstrap core CSS -->
      
    <link href="css/bootstrap.min.css" rel="stylesheet">
      
    <link href="css/dashboard.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
      
    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
      
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
      
</head>
      
<body>
      
    <div class="container">
      
        <!--
      
            .table-bordered为表格和其中的每个单元格增加边框
      
        -->
      
        <table class="table table-bordered">

            <thead>
      
                <tr>

                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                    <th>测试标题</th>
      
                </tr>
      
            </thead>

            <tbody>

                <tr>

                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                </tr>
      
                <tr>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                    <td>测试内容</td>
      
                </tr>
      
            </tbody>
      
        </table>
      
    </div>

</body>
      
</html>

bootstrap实现表格的更多相关文章

  1. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  2. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

  3. C# bootstrap之表格动态绑定值

    这段时间研究了下bootstrap,打算从表格开始学习,实现动态绑定值,在网上找了挺多例子,但是很少有写全的,要不就太复杂,实现效果后总结一下,直接拷贝过去可以用. 第一步:先去官网上下载bootst ...

  4. BootStrap的表格加载json数据，并且可以搜索，选择

    2018.4.11日更新,8号的时候我推荐去官网下载,但是那个版本不知道为什么我无法使用 $table.bootstrapTable('getSelections'); 无论如何...然后我尝试着更换 ...

  5. Bootstrap关于表格

    1.Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格. ☑  .table:基础表格 ☑  .table-striped:斑马线表格 ☑  .table-bordere ...

  6. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  7. bootstrap 分页表格插件

    找了两个table的插件,一个是bootstrap table ,另一个是bootstrap-paginator 这里只介绍 bootstrap table 插件 使用及简单案例 文档介绍:http: ...

  8. 转载：Bootstrap之表格checkbox复选框全选

    转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...

  9. Bootstrap之表格checkbox复选框全选

    效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class="table table-bordered table-hov ...

  10. Bootstrap Table 表格参数详解

    表格参数 名称   标签   类型   默认   描述   - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-class ...

随机推荐

  1. numpy C语言源代码调试（二）

    前一篇已经介绍,可以使用gdb进行调试,但是本人不太习惯gdb的文本界面,所以希望找一个比较好用的gdb的前端gui调试器. 想到的第一个是一个非常老的调试工具,DDD. DDD - Data Dis ...

  2. boostrap中模态框显示在阴影之下

    boostrap中模态框显示在阴影之下 出现这种情况的原因我开始也搞了很久,问题出现在哪里呢? 有事问百度,在百度上查了一下资料,他们主要的解决办法:是 修改标签的z-index属性的值, 我试着改了 ...

  3. openlayers4 入门开发系列之地图空间查询篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  4. IIS web搭建之虚拟主机

    IIS web搭建之虚拟主机 虚拟目录:能将一个网站的文件分散存储在同一个计算机的不同目录和其他计算机. 使用虚拟目录的好处: 1.将数据分散保存到不同的磁盘或者计算机上,便于分别开发和维护. 2.当 ...

  5. Windows提示 错误: RPC 服务器不可用 解决方法。

    试验环境: 本地主机:win10  ip:192.168.0.10 远程主机: win2008 R2   ip:192.168.1.128 我想要通过systeminfo去获取远程主机的系统信息,但是 ...

  6. python3 进一步了解装饰器 NLP第四条

    还是先来抄一段NLP第四条: 四,只有感官经验塑造出来的世界,没有绝对的真实世界   每个人运用自己的感觉器官把资料摄入(摄入过程),由于感官运用是主观地有选择性的,因此不能,亦不需要把所有资料捕获. ...

  7. .NET Core 必备安全措施

    .NET Core大大简化了.NET应用程序的开发.它的自动配置和启动依赖大大减少了开始一个应用所需的代码和配置量,本文目的是介绍如何创建更安全的.NET Core应用程序. 1.在生产中使用HTTP ...

  8. Web地图呈现原理

    地图投影 对于接触互联网地图的同学来说,最开始接触的恐怕就是坐标转换的过程了.由于地球是个近似椭球的形状,有各种各样的椭球模型来模拟地球,最著名的也就是GPS系统使用的WGS84椭球了.但是这些椭球体 ...

  9. 关于：未能加载文件或程序集“ICSharpCode.SharpZipLib”或它的某一个依赖项异常的解决方案

    问题: 今天项目迁移忽然又个ICSharpCode.SharpZipLib.dll 程序包丢失了,于是我在网上下载一个这样的包,结果程序运行就提示:未能加载文件或程序集“ICSharpCode.Sha ...

  10. [Inside HotSpot] C1编译器优化：条件表达式消除

    1. 条件传送指令 日常编程中有很多根据某个条件对变量赋不同值这样的模式,比如: int cmov(int num) { int result = 10; if(num<10){ result ...