Bootstrap表格插件Bootstrap Table配置教程

设置Bootstrap Table表格样式并隔行变色

设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题、隔行变色等样式,你也可以自定义样式把你的样式类名传进去。

table-bordered设置表格边框

    $('#table').bootstrapTable({
            columns: columns,
            data: getData(),
            classes: "table table-bordered", //这里设置表格样式
            height:400  
        });

table-striped设置隔行变色

    $('#table').bootstrapTable({
            columns: columns,
            data: getData(),
            classes: "table table-bordered table-striped", //table-striped表示隔行变色
            height:400  
        });

table-sm设置表格更精致

    $('#table').bootstrapTable({
            columns: columns,
            data: getData(),
            classes: "table table-bordered table-striped table-sm", // 设置table-sm样式
            height:400  
        });

table-dark设置表格为黑色主题

    $('#table').bootstrapTable({
            columns: columns,
            data: getData(),
            classes: "table table-bordered table-striped table-sm table-dark",  
            height:400  
        });

完整代码

在线试一试

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" />
    <script src="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"></script>
    <title>Bootstrap Table入门例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
        .fixed-table-header {
            border-right: solid 1px #ddd;
            border-top: solid 1px #ddd;
        }
            .fixed-table-header table  {
                border-top: solid 0px #ddd !important;
                margin-top:-1px;
            }
    </style>
</head>
<body >
    <div class="table-demo">
        <table id="table"></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            field: 'StockNum',
            title: 'Item 库存'
        }];
 
        //bootstrap table初始化数据
        $('#table').bootstrapTable({
            columns: columns,
            data: getData(),
            classes: "table table-bordered table-striped table-sm table-dark", //这里设置表格样式
            height:400  
        });


        function getData()
        {
            var data = [];


            for (var i = 0; i < 50; i++)
            {
                var item = {
                    Id: i,
                    ProductName: '苹果',
                    StockNum: '200'
                };


                data.push(item);
            };


            return data;


        }


    </script>
</body>
</html>
Catalog
快速入门 bootstrap table方法 bootstrap table事件 bootstrap table下载 基础配置 row Attributes设置行属性 custom Sort自定义排序 table Cache缓存数据 content Type设置 response Handler total/Data Field JSON格式 escape显示html标签 idField和selectItemName cardView卡片视图模式 detailView详情视图模式 icons图标相关设置 本地化中文设置 列相关设置 columns基础设置 sortable列排序 column选择操作列 column列属性列表 分页设置 bootstrap table服务端分页 table Method 方式设置 data Type数据格式 custom AJAX 自定义ajax bootstrap table前端分页 bootstrap table查询搜索 smartDisplay作用 分页时保持选择状态 工具栏相关 showHeader显示头部 showFooter显示底部 showColumns开启列刷选 showPaginationSwitch分页 showRefresh刷选按钮 showFullscreen toolbar工具栏设置 样式设置 固定表头并美化表头 设置表格样式隔行变色 rowStyle设置行样式 theadClasses设置表头样式 footerStyle底部样式