• 基本实例样式

    • 效果
    • 代码 
      <!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. Django：Python3.6.2+Django2.0配置MySQL

    持续学习Django中... Django默认使用的数据库是python自带的SQLlite3,但SQLlite并不适用于大型的项目,因此我将数据库换成了MySQL,下面介绍下Django如何配置数据 ...

  2. [dotnet core]落地微服务特色的DevOps管道，持续集成/部署到kubernetes。

    目录 前言 目标 工具 - 最小的学习成本 方案 - 愿景 1. 持续集成 - CI 2. 持续部署 - CD 部署环境 1. 部署gitlab-runner 2. 注册gitlab-runner 搭 ...

  3. 阿里云Centos7.x MySql安装教程示例

    创建用户 useradd mysql; passwd mysql; 下载(比如:5.5.61) 地址 https://dev.mysql.com/downloads/mysql/5.6.html#do ...

  4. Docker常见故障

    — Docker虚拟化故障 — Docker虚拟化主要有三类故障: 应用故障:应用执行状态与预期不一致. 容器故障:无法正确创建.停止.更新容器等. 集群故障:集群创建失败.更新失败.无法连接等. — ...

  5. C#读写EXCEL单元格的问题

    最近, 我在用C#开发一个EXCEL Add-In的时候,发现了一些害人不浅的坑,特来总结列举如下: 这里我读写EXCEL引用的是using Excel = Microsoft.Office.Inte ...

  6. .net相关知识

    1.简述 private. protected. public. internal 修饰符的访问权限. private :   私有成员, 在类的内部才可以访问. protected : 保护成员,该 ...

  7. 设计模式 | 观察者模式/发布-订阅模式（observer/publish-subscribe）

    定义: 定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使他们能够自动更新自己. 结构:(书中图,侵删) 一个抽象的观察者接口, ...

  8. ArcGIS API for JavaScript 4.x 本地部署之Apache(含Apache官方下载方法)

    IIS.Nginx都说了,老牌的Apache和Tomcat也得说一说(如果喜欢用XAMPP另算) 本篇先说Apache. 安装Apache 这个...说实话,比Nginx难找,Apache最近的版本都 ...

  9. Windows Server 2016-三种方法备份还原DHCP服务器

    方法一:图形化备份还原DHCP: 备份操作: 1.DHCP控制台,属性选择"备份"选项: 2.指定备份路径,默认是C:\Windows\System32\dhcp\ 3.备份完成后 ...

  10. 分布式之 BASE理论

    ------------------------------珍惜眼前的学习机会,当你现在有机会学习各种经验时,一定要倍加珍惜.靠混日子是混不了一辈子的,许多过程都是不能省略的,至少学会这些经验可以让你 ...