bootstrap table使用总结（显示图片）

最新推荐文章于 2024-09-08 23:37:17 发布
最新推荐文章于 2024-09-08 23:37:17 发布
阅读量1.4w 收藏 38
点赞数 4

使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法：

因为之前在官网也找了很久的教程，源码感觉隐藏的比较隐秘，其他扩展功能也很难找到，其实都在：http://issues.wenzhixin.net.cn/bootstrap-table/index.html这里面，点击上面的tab可以找到具体的功能实现（特别是extension和issues，之前以为issues不是教程，结果点进去才知道）：

最简单的异步表单

1.html中加入如下代码：

<table id="table"></table>
  • 1

2.javascript

/*bootstrap table*/
$('#table').bootstrapTable({
    url:"/wadmin/permission/doRuleList",//请求数据url
    queryParams: function (params) {
        return {
            offset: params.offset,  //页码
            limit: params.limit,   //页面大小
            search : params.search, //搜索
            order : params.order, //排序
            ordername : params.sort, //排序
        };
    },
    showHeader : true,
    showColumns : true,
    showRefresh : true,
    pagination: true,//分页
    sidePagination : 'server',//服务器端分页
    pageNumber : 1,
    pageList: [5, 10, 20, 50],//分页步进值
    search: true,//显示搜索框
    //表格的列
    columns: [
        {
            field: 'id',//域值
            title: '规则ID',//标题
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : '5%',
        },
        {
            field: 'name',//域值
            title: '唯一英文标识',//标题
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : '30%',
            editable:true,
        },
        {
            field: 'title',//域值
            title: '中文描述',//内容
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : '35%',
            editable:true,
        },
        {
            field: 'status',//域值
            title: '状态',//内容
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : '20%',
            formatter : function (value, row, index) {
                if (row['status'] === 1) {
                    return '正常';
                }
                if (row['status'] === 0) {
                    return '禁用';
                }
                return value;
            }
        }
    ]
});

 

上面代码中，除了url和下面的column需要动态变之外，其他的基本上都是固定的，可以复制粘贴到处使用。因为规则的固定，所以后台的规则也是比较固定的。

3.thinkPHP5.0实现后台（主要是返回total和rows）

controller

public function doRoleRuleList() {
    $id = input("id");
    if (!$id) return "";

    $limit = input("limit");
    $offset = input("offset");
    $search = input("search");
    $order = input("order", "desc");
    $ordername = input("ordername");
    if (!$ordername) {
        $ordername = 'id';
        $order = 'desc';
    }

    $perModel = new PermissionModel();
    $rs = $perModel->doRoleRuleList($id, $offset, $limit, $search, $order, $ordername);

    return json($rs);
}

model

public function doRoleRuleList($id, $offset, $limit, $search, $order, $ordername) {
    $total = Db::connect("dbUser")->table("auth_rule")->where(['status'=>['<>', 0]])->count();
    $auth_group = Db::connect("dbUser")->table("auth_group")->field("id,rules")->where("id", $id)->find();
    $rules ="-1";
    if ($auth_group && $auth_group['rules']) $rules = $auth_group['rules'];

    $rows = Db::connect("dbUser")->table("auth_rule")
        ->field(['id','name','title',"if(id in ({$rules}), 1, 0)"=>'selected'])
        ->where([
            'status'=>['<>', 0],
//                'name|title' => ['like', "%{$search}%"]
        ])
        ->order($ordername." ".$order)
        ->select();


    return ['total'=>$total,'rows'=>$rows];
}

说明图： 
这里写图片描述

复杂表格（行内编辑（编辑文字，下拉选择），样式改变，自定义图标，文件上传），因为js比较复杂，这里先列出代码功能的说明：

1.显示详情使用如下代码： 
表格参数中添加代码

detailView : true,
detailFormatter : function (index, row) {
   var image = '<div class="photos">'
        +'<a target="_blank" href="'+row['jumpUrl']+'"><img alt="image" class="feed-photo" src="'+row['picUrl']+'"></a>'
        +'</div>';
    return image;
}

可以在detailFormatter进行代码的格式化，以字符串的形式返回即可，实现效果如下：

detailView

2.表格列内容的格式化 
列参数中添加代码

formatter : function (value, row, index) {
    return "<img style='width: 50px;height: 50px;' src='"+value+"' alt=''>"
}

效果如下： 
这里写图片描述

3 . 表格的样式自定义 
列参数中添加带代码

cellStyle : function (value, row, index) {
    return {
        css: {
            "max-width": "300px",
            "word-wrap": "break-word",
            "word-break": "normal"
        }
    };
}

4 . 新增数据 
在js文件中添加如下代码：

$("#btn_add").click(function () {
  $.ajax({
      type : "POST",
      url : "/wadmin/ad/addAd",
      dataType : 'JSON',
      success : function (data) {
          if (data.result != 0) {
              toastr.info("info", data.message);
              return ;
          }
          toastr.success("success", '标签');
          $("#table").bootstrapTable('insertRow', {index:0, row:data.data});
      }
  });

});

绑定的按钮是toolbar里面的，点击如果进行ajax请求，再根据请求的结果自行判断添加

这里写图片描述

5.表格中列格式化成图标并监听事件 
6.文件上传（基于5）

列参数中添加如下代码

{
    field: 'operate',
    title: '操作',
    align: 'center',
    events: operateEvents,
    width : '25%',
    formatter: operateFormatter
}

operateFormatter（这里注意需要添加a标签包住图标，并添加class）

function operateFormatter(value, row, index) {
    return [
        '<a class="using" href="javascript:void(0)" title="Remove">',
        '<i class="fa fa-check"></i>',
        '</a>&nbsp;&nbsp;&nbsp;&nbsp;',
        '<a class="upload" style="cursor: pointer" href="javascript:void(0)" title="Upload">',
        '<label style="cursor: pointer" for="'+row['adId']+'">',
        '<i class="fa fa-upload"></i>',
        '<input type="file" name="adUpload" style="display: none;" class="adUpload" id="'+row['adId']+'" >',
        '</label>',
        '</a>&nbsp;&nbsp;&nbsp;&nbsp;',
        '<a class="remove" href="javascript:void(0)" title="Using">',
        '<i class="fa fa-times"></i>',
        '</a>',
    ].join('');
}

operateEvents（监听事件，注意这里是window.operateEvents）

window.operateEvents = {
    'click .remove': function (e, value, row, index) {
        $.ajax({
            type : "POST",
            url : "/wadmin/ad/deleteAd",
            data : {
                adId : row['adId']
            },
            dataType : 'JSON',
            success : function (data) {
                if (data.result != 0) {
                    toastr.info("info", data.message);
                    return ;
                }
                toastr.success("success", '删除成功');
                $("#table").bootstrapTable('remove', {
                    field: 'adId',
                    values: [row['adId']]
                });
            }
        });

        return false;
    },
    'click .using': function (e, value, row, index) {
        $.ajax({
            type : "POST",
            url : "/wadmin/ad/usingAd",
            data : {
                adId : row['adId']
            },
            dataType : 'JSON',
            success : function (data) {
                if (data.result != 0) {
                    toastr.info("info", data.message);
                    return ;
                }
                toastr.success("success", '使用该广告');
                $("#table").bootstrapTable('refresh');
            }
        });

        return false;
    },
    'click .upload': function (e, value, row, index) {
        $('.adUpload').fileupload({
            url : '/wadmin/ad/adUpload/adId/'+row['adId'],
            dataType: 'json',
            add: function (e, data) {
                data.submit();
            },
            done: function (e, data) {
                var response = data.result;
                if (response.result != 0) {
                    toastr.error(response.message);
                    return false;
                }
                toastr.success("上传成功");
                $("#table").bootstrapTable('refresh');
            }
        });

        return false;
    }
};

实现的效果如下：

这里写图片描述

7.行内编辑 
普通的编辑只需要在列参数中设置即可： 
列参数中添加代码

editable : true,
  • 1

需要下拉编辑的，使用如下代码：

editable: {
   type: 'select',
   source: [ //0->无广告，1->静态不可点击，2->静态可点击，3->动态不可点击，4->动态可点击
       {value: 0, text: '无广告'},
       {value: 1, text: '静态不可点击'},
       {value: 2, text: '静态可点击'},
       {value: 3, text: '动态不可点击'},
       {value: 4, text: '动态可点击'},
   ]
}

这里还有一些行内编辑的样式是需要导入第三方lib的，比如说如果要实现行内时间的编辑，需要下载导入combodate.js ，然后添加如下代码（这些js文件后面会给出的，也可以去官网下载最新版）：

editable: {
    type: 'combodate',
    viewformat: 'YYYY-MM-DD HH:mm:ss',
    template: 'YYYY-MM-DD HH:mm:ss',
    format: 'YYYY-MM-DD HH:mm:ss',
    combodate: {
        minuteStep: 1,
        secondStep: 1,
        maxYear: 5000,
        minYear: 2016,
    }
}

然后再表格参数中添加如下代码监听事件：

onEditableSave: function (field, row, oldValue, $el) {
   $.ajax({
        type: "post",
        url: "/wadmin/ad/updateAdInfo",
        dataType : 'json',
        data: row,
        success: function (data, status) {
            if (status == "success" && data.result == 0) {
                toastr.success('更新成功');
                if (field == 'jumpUrl') {
                    $('#table').bootstrapTable("refresh");
                }
                return true;
            } else {
                toastr.info(data.message);
                $('#table').bootstrapTable("refresh");
            }
        },
        error: function () {
            alert("Error");
        },
        complete: function () {

        }

    });
}

实现的效果如下： 
这里写图片描述

这里写图片描述

这里写图片描述

其中，调用bootstraptable的一些方法可以动态更新表格（增删改等），用法如下：

$("#table").bootstrapTable('insertRow', {index:0, row:data.data});
$("#table").bootstrapTable('remove', {
    field: 'adId',
    values: [row['adId']]
});
$("#table").bootstrapTable('refresh');
$("#table").bootstrapTable('updateCell', {
    index : index,
    field: 'status',
    value: row['status'] ? 0 : 1
});

因为引入的js和css库有点多，而且需要实现行内编辑的话需要需要引入的js文件比较难找，下面给出下载地址（密码：jjdk）：

http://pan.baidu.com/s/1bpiRObt

完整代码

html

<div id="toolbar" class="btn-group">
    <button id="btn_add" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增广告
    </button>
</div>
<table id="table"></table>

javascript

/**
 * Created by raid on 2016/12/28.
 */
$(function () {
    window.operateEvents = {
        'click .remove': function (e, value, row, index) {
            $.ajax({
                type : "POST",
                url : "/wadmin/ad/deleteAd",
                data : {
                    adId : row['adId']
                },
                dataType : 'JSON',
                success : function (data) {
                    if (data.result != 0) {
                        toastr.info("info", data.message);
                        return ;
                    }
                    toastr.success("success", '删除成功');
                    $("#table").bootstrapTable('remove', {
                        field: 'adId',
                        values: [row['adId']]
                    });
                }
            });

            return false;
        },
        'click .using': function (e, value, row, index) {
            $.ajax({
                type : "POST",
                url : "/wadmin/ad/usingAd",
                data : {
                    adId : row['adId']
                },
                dataType : 'JSON',
                success : function (data) {
                    if (data.result != 0) {
                        toastr.info("info", data.message);
                        return ;
                    }
                    toastr.success("success", '使用该广告');
                    $("#table").bootstrapTable('refresh');
                }
            });

            return false;
        },
        'click .upload': function (e, value, row, index) {
            $('.adUpload').fileupload({
                url : '/wadmin/ad/adUpload/adId/'+row['adId'],
                dataType: 'json',
                add: function (e, data) {
                    data.submit();
                },
                done: function (e, data) {
                    var response = data.result;
                    if (response.result != 0) {
                        toastr.error(response.message);
                        return false;
                    }
                    toastr.success("上传成功");
                    $("#table").bootstrapTable('refresh');
                }
            });

            return false;
        }
    };


    /*bootstrap table*/
    $('#table').bootstrapTable({
        url:"/wadmin/ad/doAdList",//请求数据url
        toolbar : "#toolbar",
        // toolbarAlign : "right",
        queryParams: function (params) {
            return {
                offset: params.offset,  //页码
                limit: params.limit,   //页面大小
                search : params.search, //搜索
                order : params.order, //排序
                ordername : params.sort, //排序
            };
        },
        detailView : true,
        detailFormatter : function (index, row) {
            var image = '<div class="photos">'
                +'<a target="_blank" href="'+row['jumpUrl']+'"><img alt="image" class="feed-photo" src="'+row['picUrl']+'"></a>'
                +'</div>';
            return image;
        },
        showHeader : true,
        showColumns : true,
        showRefresh : true,
        pagination: true,//分页
        sidePagination : 'server',//服务器端分页
        pageNumber : 1,
        pageList: [5, 10, 20, 50],//分页步进值
        search: true,//显示搜索框
        //表格的列
        columns: [
            {
                field: 'adId',//域值
                title: '广告ID',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : '5%',
            },
            {
                field: 'picUrl',//域值
                title: '图片',//标题
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : '15%',
                formatter : function (value, row, index) {
                    return "<img style='width: 50px;height: 50px;' src='"+value+"' alt=''>"
                }
            },
            {
                field: 'jumpUrl',//域值
                title: '跳转链接',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : '10%',
                editable : true,
                cellStyle : function (value, row, index) {
                    return {
                        css: {
                            "max-width": "300px",
                            "word-wrap": "break-word",
                            "word-break": "normal"
                        }
                    };
                }
            },
            {
                field: 'adDesc',//域值
                title: '描述',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : '10%',
                editable : true,
            },
            {
                field: 'displayType',//域值
                title: '表现形式',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : '10%',
                editable: {
                    type: 'select',
                    source: [ //0->无广告，1->静态不可点击，2->静态可点击，3->动态不可点击，4->动态可点击
                        {value: 0, text: '无广告'},
                        {value: 1, text: '静态不可点击'},
                        {value: 2, text: '静态可点击'},
                        {value: 3, text: '动态不可点击'},
                        {value: 4, text: '动态可点击'},
                    ]
                }
            },
            {
                field: 'displaySeconds',//域值
                title: '时间',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : '5%',
                editable : true,
            },
            {
                field: 'scope',//域值
                title: '影响范围',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : '10%',
                editable: {
                    type: 'select',
                    source: [ //0->全国
                        {value: 0, text: '全国'},
                    ]
                }
            },
            {
                field: 'userType',//域值
                title: '影响群体',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : '5%',
                editable: {
                    type: 'select',
                    source: [ //0->全部
                        {value: 0, text: '全部'},
                    ]
                }
            },
            {
                field: 'status',//域值
                title: '状态',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : '10%',
                formatter : function (value, row, index) {
                    return value==1||value=='1' ? '正在使用' : '没有使用';
                }
            },
            {
                field: 'addTime',//域值
                title: '时间',//内容
                visible: true,//false表示不显示
                sortable: true,//启用排序
                width : '10%',
            }
            ,{
                field: 'operate',
                title: '操作',
                align: 'center',
                events: operateEvents,
                width : '25%',
                formatter: operateFormatter
            }
        ],
        onEditableSave: function (field, row, oldValue, $el) {
            $.ajax({
                type: "post",
                url: "/wadmin/ad/updateAdInfo",
                dataType : 'json',
                data: row,
                success: function (data, status) {
                    if (status == "success" && data.result == 0) {
                        toastr.success('更新成功');
                        if (field == 'jumpUrl') {
                            $('#table').bootstrapTable("refresh");
                        }
                        return true;
                    } else {
                        toastr.info(data.message);
                        $('#table').bootstrapTable("refresh");
                    }
                },
                error: function () {
                    alert("Error");
                },
                complete: function () {

                }

            });
        }
    });

    $("#btn_add").click(function () {
        $.ajax({
            type : "POST",
            url : "/wadmin/ad/addAd",
            dataType : 'JSON',
            success : function (data) {
                if (data.result != 0) {
                    toastr.info("info", data.message);
                    return ;
                }
                toastr.success("success", '标签');
                $("#table").bootstrapTable('insertRow', {index:0, row:data.data});
            }
        });

    });

    function operateFormatter(value, row, index) {
        return [
            '<a class="using" href="javascript:void(0)" title="Remove">',
            '<i class="fa fa-check"></i>',
            '</a>&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a class="upload" style="cursor: pointer" href="javascript:void(0)" title="Upload">',
            '<label style="cursor: pointer" for="'+row['adId']+'">',
            '<i class="fa fa-upload"></i>',
            '<input type="file" name="adUpload" style="display: none;" class="adUpload" id="'+row['adId']+'" >',
            '</label>',
            '</a>&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a class="remove" href="javascript:void(0)" title="Using">',
            '<i class="fa fa-times"></i>',
            '</a>',
        ].join('');
    }
});
尼古拉骚
关注
bootstraptable 汇总_bootstrap-table使用总结
weixin_39569753的博客
12-18 459
1、下载：https://github.com/wenzhixin/bootstrap-table2、文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/3、引用：4、基本用法：js里：1 $('#table').bootstrapTable({2 columns: [{3 field: 'id',4 title: 'Ite...
bootstraptable 居中_bootstrap table表格内容居中对齐
weixin_29746595的博客
12-30 1656
在开发项目的时候，发现了一款JS组件系列——表格组件神器，官方文档也比较简单，总结了一些常遇到的问题实现一个简单的表格和分页，内容居中对齐图片.pngDashboard | Nadhif - Responsive Admin Template/* 表格样式 */.table>tbody>tr>td {border: 0px;text-align: center;}.bootstr...
bootstrap 图片预览
01-06
bootstrap 图片预览
关于bootstrap Table工具栏图标丢失的真正原因
最新发布
landgis的博客
09-08 526
上述代码可以看出，bootstrap-table是根据不同的bootstrap版本确定图标显示方式，我采用fontawesome图标，干脆直接把 bootstrap5: 'bi'改成 bootstrap5: 'fa'在fontawesome4.7版本中好像没有了 refresh: 'fa-sync',图标。直接修改为fa fa-search，其他图标请自己测试是否存在，修改后的代码为。在网上搜索了很多解决图标的文章，但因水平有限，不得其所。到此告一段落，文字处理的简陋，就是为了将问题记录下来。
bootstrapTable里如何显示图片
热门推荐
qq_29072049的博客
03-30 1万+
$('#productTable').bootstrapTable({       columns: [     { checkbox:true}, { field: 'companyImage', title: '公司logo', formatter:function(value,row,index){ var s; if(row.companyImage!=null){ var url = ...
bootstrap学习(七):跟着宝哥学java：bootstrap表格显示图片
跟着宝哥学java的博客
05-04 1504
bootstrap学习(七):跟着宝哥学java：bootstrap表格显示图片
bootstrap列表js
huangbaokang的博客
09-21 675
$(function() { load(); });function load() { $('#exampleTable') .bootstrapTable( { method : 'get', // 服务器数据的请求方式 get or post
BootStrapTable显示图片，点击查看
qq_39224721的博客
05-11 2742
table表格 { field: 'iconUrl', title: '图片链接', //定义点击之后放大图片的事件 events: 'operateEvents', formatter: function (value, row, index) { var s = '<a class="view" href="javascript:void(0)">' + '<img style="width:300;height:40px;" src="'+value+'"
bootstrap总结与例子
08-02
24. **响应式工具** (`responsive utilities`): `.d-none`, `.d-block`, `.d-table`, `.d-flex` 等响应式类根据屏幕尺寸显示或隐藏元素。 25. **自定义Bootstrap**：通过Sass变量和混合功能，可以定制Bootstrap的...
Bootstrap 小实验，img标签，显示不出来图片。已解决！
自强不息，厚德载物，未来可期
03-17 5791
在做这个bootstrap小实验的时候，碰到一个问题，就是插入到的img标签，无法显示图片，关于src的引入，我查阅了相关的资料，在这里总结下： src引入图片路径两种主要的方式： 绝对路径 相对路径 比如在我这次实验的工程里面，我在写入相对路径的时候，很明显是没有问题的哦，但是图片显示不出来. 从图中可以看出，相对路径是 src="../build/Template/assets/i...
bootstraptable插件的使用技巧及最佳实践
# 1. 认识Bootstrap Table插件 ...- **响应式设计**：Bootstrap Table能够自动适应不同的设备和屏幕大小，确保在桌面、平板和手机等各种环境下都能正常显示和交互。 - **丰富的功能**：Bootstrap Tab
Bootstrap响应式图片展示模板
08-11
Bootstrap响应式图片展示模板，便捷，使用方便
使用bootstrap写的关于table表格的显示和折叠效果
11-14
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
Bootstrap之表格，按钮，表单和图片的样式
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-06 6900
Bootstrap之表格，按钮，表单和图片的样式本文中，都是结合本人的学习Bootstrap时所做的练习，来理解通过内置的 CSS 定义，Bootstrap的表格，按钮，表单和图片是如何来显示各种丰富效果的。 一. 表格 基本格式<table class="table">
bootstrap-table 单元格图片轮播
遇见一个人流泪的博客
03-28 1927
onClickCell: function(value, row){ if(value == &quot;goodsImgs&quot;){ var imgs = []; for(var i=0; i&lt;row.length; i++){ var img = { &quot;alt&quot;: row[i].image.imgNo,
使用jquery+bootstrap搭建一个可以在表格内以分页形式显示的图片列表 点击弹出大图 弹出层显示大图 点击小图显示大图
weixin_45466657的博客
10-20 619
昨天在完善自己写的小demo的时候遇到一个需求，我需要在表格内其中的一列显示多张图片，对前端经验很少的我开始犯难，后来找了几篇大佬的博客，自己琢磨了一会，捣鼓出了一个还算可以的显示方式 可以完成的一些功能 1.点击后弹出层显示 2.自动绑定点击事件，绑定显示图片路径 3.点击其余部位消失 先看下html的代码 <body> <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7)
Bootstrap--响应式显示图片信息列表
weixin_33892359的博客
04-11 518
HTML布局 <link href="~/Content/StyleSheet1.css" rel="stylesheet" /> <div class="row"> <div class="col-sm-2 col-md-2" style="min-height:400px;border:1px #eee4e4 solid; border-radi...
Bootstrap——表格、按钮、图像
Picking_up_stones的博客
10-14 2475
前言： Bootstrap为表格、按钮、表单、图像等各种元素提供了不同的样式风格，我们在使用时，只要导入相应的css和js插件，以及引入相应的类名即可，下面介绍一些具体的标签一、表格 1、基础表格 <table class="table"> <thead> <tr> <th></th>
bootstrap展示导入的图片_bootstraptable添加图片及显示图片，保存图片的物理路径...
weixin_31530761的博客
01-26 1147
研究了两三个小时，解决了C#保存图片物理路径，并显示在bootstrap上的问题，终于解决了前端代码如下：@using System.Text@using System.Web.Optimization@using WarehouseManage.Model.Dto@model Base_GoodsDto@{ViewBag.Title = "添加物料";Layout = "~/Views/Shar...
BootStrap全局CSS样式实战教程：栅格系统与图片应用
总结以上内容，本节资源将引导初学者从零开始，逐步掌握BootStrap框架中全局CSS样式的使用方法，包括基本元素样式、表格、表单和文本工具的使用，以及如何利用栅格系统来布局图片和其他视觉内容。通过学习本节内容，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值