• 基本实例样式

    • 效果
    • 代码 
      <!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. MIP ACCESS细节剖析

    什么是 MIP ACCESS MIP ACCESS 由百度 MIP 团队开发的一种页面访问权限控制机制,能够允许网页发布者在页面元素中定义内容标记,并结合用户访问情况进行综合评价,从而展现或隐藏页面中 ...

  2. 【转】干货，Kubernetes中的Source Ip机制。

    准备工作 你必须拥有一个正常工作的 Kubernetes 1.5 集群,用来运行本文中的示例.该示例使用一个简单的 nginx webserver 回送它接收到的请求的 HTTP 头中的源 IP 地址 ...

  3. 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏

    目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...

  4. 『随笔』.Net 底层 数组[] 的 基本设计探秘 512 子数组

    static void Main(string[] args) { Console.ReadKey(); //初始化数组 不会立即开辟内存字节, 只有实际给数组赋值时 才会开辟内存 // //猜测数组 ...

  5. Asp.NetCore轻松学-使用Docker进行容器化托管

    前言 没有 docker 部署的程序是不完整的,在写了 IIS/Centos/Supervisor 3篇托管介绍文章后,终于来到了容器化部署,博客园里面有关于 docker 部署的文章比比皆是,作为硬 ...

  6. netcore服务程序暴力退出导致的业务数据不一致的一种解决方案（优雅退出）

    一: 问题提出 现如今大家写的netcore程序大多部署在linux平台上,而且服务程序里面可能会做各种复杂的操作,涉及到多数据源(mysql,redis,kafka).成功部署成后台 进程之后,你以 ...

  7. [目录]搭建一个简单的WebGIS应用程序

    “如果一件事情超过自己的能力,自己很难达到,那就像是婴儿跳高,不但没有好处,反而拔苗助长”. 4月份时报名参加了2018年ESRI杯GIS应用开发比赛,到前几天提交了作品.作品很简单,没有那么多复杂深 ...

  8. Hyper-v虚拟机联网配置

    最近想做点练手的项目部署到虚拟机的服务器上,然后关于虚拟机联网问题着实把贫道坑了一把.下面做一下记录防止以后忘了.... 1.新建虚拟交换机 输入交换机名称和选择外部网络,可以看到外部网络的下拉框的选 ...

  9. pytest框架之命令行参数1

    前言 pytest是一款强大的python自动化测试工具,可以胜任各种类型或者级别的软件测试工作.pytest提供了丰富的功能,包括assert重写,第三方插件,以及其他测试工具无法比拟的fixtur ...

  10. Linux 桌面玩家指南：18. 使用 Docker 隔离自己的开发环境和部署环境

    特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...