Bootstrap教程

云闲不收

已于 2022-03-25 17:30:56 修改

阅读量1.3k

点赞数 1

文章标签： bootstrap javascript 前端

于 2022-02-17 18:40:01 首次发布

本文链接：https://blog.youkuaiyun.com/S_ZaiJiangHu/article/details/122989415

版权

介绍

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
移动设备优先是 Bootstrap 3 的最显著的变化。

网格系统

在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用
HTML 和 CSS 的方法。

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12
列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类

col-lg一般用于大屏设备，
(min-width:1200px);

col-md一般用于中屏设备，
(min-width：992px);

col-sm一般用于小屏设备，
(min-width：768px);

col-xs用于超小型设备，
(max-width：768px);

后面跟数字是几，也就是占几份,
比如是4，也就是一行可以显示3个;
或者12，就是一行可以显示1个。

BootStrap table

采用bootstrap框架,可自动适应手机、平板、PC 设备，样式美观

参考文档：
https://www.cnblogs.com/wdlhao/p/6694083.html
https://blog.youkuaiyun.com/jintingbo/article/details/82924330
https://www.cnblogs.com/landeanfen/p/4976838.html
https://www.cnblogs.com/laowangc/p/8875526.html
等

关于使用，一般设置的话四个属性都用到会比较好，这样就可以在不同屏幕上很好的展示。
比如你有了12个section标签，你想让他们在不同屏幕大小的时候有不同的展示方式，大屏时一行显示6个，中屏时一行显示3个，小屏时一行展示2个，超小屏一行展示1个，你就可以在每一个section标签里面这样写:

1、引入

<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2、html

//定义一个table 自己取个id
<table id="my-table" ></table>

3、js请求接口，填充数据

方法1：

$('#my-table').bootstrapTable({
  url: 'data.json'
 });

方法2

//页面加载完毕自动调用这个函数--不一定要在此处调用 按钮也行 能调用出来就好
$(function () {
 //1.初始化Table
 var oTable = new TableInit();//调用构造函数
 oTable.Init();//使用init方法
  
 //2.初始化Button的点击事件
 /* var oButtonInit = new ButtonInit();
 oButtonInit.Init(); */
 });
  
 //声明构造函数
 var TableInit = function () {
        var oTableInit = new Object();//这么写的意义是为了返回一个对象 这个对象包括两个方法
        
        //初始化Table的方法
        oTableInit.Init = function () {
        	//此处定位视图层的节点位置
            $('#my-table').bootstrapTable({
                url: '/VenderManager/TradeList',  //请求后台的URL（*）
                method: 'get',   //请求方式（*） 设置post似乎还要改其他东西
                toolbar: '#toolbar',  //工具按钮用哪个容器
                striped: true,   //是否显示行间隔色
                cache: false,   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,   //是否显示分页（*）
                sortable: false,   //是否启用排序
                sortOrder: "asc",   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                //使用分页，server端返回的数据必须包括rows和total
                sidePagination: "server",  //分页方式：client客户端分页，server服务端分页 （*）
                pageNumber:1,   //初始化加载第一页，默认第一页
                pageSize: 50,   //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                strictSearch: true,
                clickToSelect: true,  //是否启用点击选中行
                height: 460,   //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id",   //每一行的唯一标识，一般为主键列
                cardView: false,   //是否显示详细视图
                detailView: false,   //是否显示父子表
                columns: [{
                    field: 'id',
                    title: '序号'
                }, {
                    field: 'liushuiid',
                    title: '交易编号'
                    //此外还可以定义样式以及formatter函数
                    valign:"middle",
                    align:"center",
                    sortable : true， //需要排序的话改这里
                    formatter:function(value, row, index) {
                       return xxx;
                            },
                        },
                },]
            });
        };

        //得到查询的参数  这个似乎不需要和init一样的形式 普通定义即可
        oTableInit.queryParams = function (params) {
            var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit, //页面大小
                offset: params.offset, //页码
                maxrows: params.limit,
                pageindex:params.pageNumber,
                //其他查询的东西
                portid: $("#portid").val(),
                CardNumber: $("#CardNumber").val(),
                tradetype:$('input:radio[name="tradetype"]:checked').val(),
                success:$('input:radio[name="success"]:checked').val(),
            };
            return temp;
        };
        return oTableInit;
    };

//静态调用的方式
$('#table').bootstrapTable({
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }],
  data: [{
    id: 1,
    name: 'Item 1',
    price: '$1'
  }, {
    id: 2,
    name: 'Item 2',
    price: '$2'
  }]
})
我们还可以通过设置来使用远程URL数据url: 'data1.json'。

$('#table').bootstrapTable({
  url: 'data1.json',
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }]
})
您还可以添加pagination，search和sorting表格，如下表所示。

$('#table').bootstrapTable({
  url: 'data1.json',
  pagination: true,
  search: true,
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }]
})

4、服务端返回参数要求

必须返回rows和total字段，由于服务端返回的数据可能包含data、errno等信息，所以可以使用responseHandler。
使用方法：

//1、这个块中增加一个字段
$('#my-table').bootstrapTable({
……
responseHandler: responseHandler,
……
});

//2增加一个函数
var TableInit = function () {
……
	function responseHandler(res) {
            if (res && res.errno==0) {
                /*$('#total').text(res.data.total);
                $('#amount').text(res.data.stat.amount);
                $('#terminal').text(res.data.stat.terminal);
                $('#payment').text(res.data.stat.payment);
                $('#offline').text(res.data.stat.offline);
                $('#points').text(res.data.stat.points);*/
                return {
                    "rows": res.data.list,
                    "total": res.data.total,
                }
            } else {
                return {
                    "rows": [],
                    "total":0,
                }
            }
    }
……
 }

5、补充

搜索功能

1、视图层定义一个button，为了美观，可以将按钮、查询的参数 用一个table包裹取来
<input v-on:click="search" class="xxx" type="button" value="搜索">

在这里插入图片描述

2、在vue的method块定义一个函数
search: function() {
	//定位到table的节点，然后调用bootstrapTable函数，传参refresh
 	$('#my_table').bootstrapTable('refresh');
 	}

3、在function TableInit(){……}中加入函数
function queryParams (params) {
            var temp = {
            	//这几个似乎是系统自带的
                size : params.limit, // 每页显示数量
                offset : params.offset, // SQL语句起始索引
                sort: params.sort,
                order: params.order,
                //自定义的查询参数写这里
                start_time: $('#start_time').val(),
                end_time: $('#end_time').val(),
            };
            return temp;
        }

动态改变url、列等

动态改变请求参数：$('#my-table').bootstrapTable('refresh',{url:"xxx"});
动态改变column等属性:

$('#my-table').bootstrapTable("refreshOptions",{url:"xxx",columns: [{
xxx});

或者销毁后重新生成

$('#list').bootstrapTable('destroy').bootstrapTable({

其他需要注意的问题

当list为空 total判断不是最后一页的时候会循环重复请求后台接口……