• 基本实例样式

    • 效果
    • 代码 
      <!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. C#之Socket的简单使用

    Socket是一种通信TCP/IP的通讯接口,也就是HTTP的抽象层,就是Socket在Http之上,Socket也就是发动机.实际上,传输层的TCP是基于网络层的IP协议的,而应用层的HTTP协议又 ...

  2. 多线程学习系列二（使用System.Threading）

    一.什么是System.Threading.Thread?如何使用System.Threading.Thread进行异步操作 System.Threading.Thread:操作系统实现线程并提供各种 ...

  3. KnockoutJS知识规整目录

    对于Web开发来讲,前端接触是避免不了的,特别是对于中小公司,没有严格的职位区分,前后端人员互相身兼是常有的事情,使用一些好的框架,能够帮助我们快速开发并完成需要的功能,对于前端的JS框架来讲MVVM ...

  4. .net core 2.0 redis驱动性能比拼

    今天来了三位主角,他们分别是大名鼎鼎的 StackExchange.Redis,无敌轻巧的 CSRedis,中通日处理80亿访问的 NewLife.Redis. 作者从2016年学习.netcore以 ...

  5. Windows核心编程第一章.错误处理

    Windows核心编程第一章,错误处理. 一丶错误处理 1.核心编程学习总结 不管是做逆向,开始做开发.在Windows下.你都需要看一下核心编程这本书.这本书确实写得很好.所以自己在学习这本书的同时 ...

  6. 设计模式 | 简单工厂模式（static factory method）

    按理说应该把书全都看完一遍,再开始写博客比较科学,会有比较全面的认识. 但是既然都决定要按规律更新博客了,只能看完一个设计模式写一篇了. 也算是逼自己思考了,不是看完就过,至少得把代码自己都敲一遍. ...

  7. 基于ArcGISServer进行分页矢量查询的方案进阶

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.    背景 在空间查询中,我们对查询结果要求以分页形式进行展示.G ...

  8. Android项目实战（五十四）：zxing 生成二维码图片去除白色内边距的解决方案

    目录:zxing->encoding->EncodingHandler类 中修改 createQRCode方法 private static final int BLACK = 0xff0 ...

  9. 年轻的工程师如何月入伍万XD

    郑昀:你要跟谁比?关键词:成长,自我管理,自我激励,面试,候选人201806 ——你觉得跟你的 Leader 差在什么地方?——肯定有差距,一个是知识面不如他广,二一个是解决问题不如他老练.——怎么追 ...

  10. 搭建微服务器：express+https+api代理

    概述 最近打算玩一下service worker,但是service worker只能在https下跑,所以查资料自己用纯express搭建了一个微服务器,把过程记录下来,供以后开发时参考,相信对其他 ...