• 基本实例样式

    • 效果
    • 代码 
      <!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. [dotnet] 封装一个同时支持密码/安全密钥认证的SFTP下载器，简单易用。

    前言 最近在开发订单对账系统,先从各种支付平台获取订单销售数据,然后与公司商城订单数据进行对账兜底.总体上,各个支付平台提供数据的方式分为两类,一般以接口的方式提供实时数据,比如:webservice ...

  2. SQL中关于Join、Inner Join、Left Join、Right Join、Full Join、On、 Where区别

    前言: 今天主要的内容是要讲解SQL中关于Join.Inner Join.Left Join.Right Join.Full Join.On. Where区别和用法,不用我说其实前面的这些基本SQL语 ...

  3. C# 《编写高质量代码改善建议》整理&笔记 --(六)编码规范及习惯

    一.命名规范 1.考虑在命名空间中使用复数 System.AllCollections System.TheCollection 2.用名词和名词组给类型命名 ScoreManager UserCon ...

  4. 轻量级.Net Core服务注册工具CodeDi发布啦

    为什么做这么一个工具 因为我们的系统往往时面向接口编程的,所以在开发Asp .net core项目的时候,一定会有大量大接口及其对应的实现要在ConfigureService注册到ServiceCol ...

  5. 强化学习(十四) Actor-Critic

    在强化学习(十三) 策略梯度(Policy Gradient)中,我们讲到了基于策略(Policy Based)的强化学习方法的基本思路,并讨论了蒙特卡罗策略梯度reinforce算法.但是由于该算法 ...

  6. Asp.NetCore轻松学-部署到 IIS 进行托管

    前言 经过一段时间的学习,终于来到了部署服务这个环节,.NetCore 的部署方式非常的灵活多样,但是其万变不离其宗,所有的 Asp.NetCore 程序都基于端口的侦听,在部署的时候仅需要配置侦听地 ...

  7. Android项目中独立Git项目分库后的编译调试时Gradle的配置

    基于AS开发项目,对于特定的功能模块,往往抽取成独立的库进行管理,然后上传到Marven库中,通过Gradle依赖的方式进行引用. 其优势体现在: 1,独立的Git项目库,模块功能,及职责界定清晰: ...

  8. 入门系列之Scikit-learn在Python中构建机器学习分类器

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由信姜缘 发表于云+社区专栏 介绍 机器学习是计算机科学.人工智能和统计学的研究领域.机器学习的重点是训练算法以学习模式并根据数据进行预 ...

  9. 5.App Inventor 2编程实例--指南针

    本视频来自:https://www.17coding.net 的  国庆特辑——指南针 共3个视频. 注意: 项目名字要使用英文. 项目完成后可以选择“打包APK”—“ 打包APK并下载到电脑”,然后 ...

  10. sed和awk用法

    sed和awk用法 Sed sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为 ...