06_bootstrap

1 需求

代码简单
界面不丑
学习成本低

2 简介

Bootstrap_ 是 Twitter 推出的前端开发的开源工具包。

具体控件长什么样，全靠设 class。

bootstrap 都是基于 jquery 的。

bootstrap 主要需要引用 css 和 js 两个文件。

3 具体用法

3.1 Blog 博客

3.2 Chart 画图

https://chartjs.bootcss.com/docs/

3.3 Table 表

https://getbootstrap.com/docs/5.1/content/tables/

3.4 SlideBar 侧栏

3.5 Model 弹框

关键字 Modal

模态框（Modal）是覆盖在父窗体上的子窗体。

引例程为 bootstrap5，请注意与 js 版本匹配

具体方法：https://www.runoob.com/bootstrap5/bootstrap5-modal.htmll

需要在调出它的控件中设置形如

1
2
3

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
xxx
</button>

框中内容形如：

<div class="modal" id="myModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<!-- 模态框头部 -->
			<div class="modal-header">
				<h4 class="modal-title">模态框标题</h4>
				<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
			</div>
			<!-- 模态框内容 -->
			<div class="modal-body">
				模态框内容..
			</div>
			<!-- 模态框底部 -->
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>

注意要将 class 设置为模态框 modal

关模态框

1	$('#myModal').modal('hide')；

显示框

1	$('#myModal').modal('show');

3.6 bootstrap-table

官方文档：[https://bootstrap-table.com/][https://bootstrap-table.com/]

它之所以要从 url 取数据是因为，在分页的情况下，每次只取其中 N 条数据

table 带参 bootstrap table配置参数例子

Table 用法

<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>BootStrap Table使用</title>
<!--    @*1、Jquery组件引用*@-->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!--    @*2、bootstrap组件引用*@-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<!--    @*3、bootstrap table组件以及中文包的引用*@-->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<!--{#     推荐用这种方式，比较灵活#}-->
<div style="width: 80%;margin: 0 auto">
    <table id="table" ></table>
</div>
<!--{#     1.先定义一个空表#}-->
<!--{#     2.用js初始化表，并填充数据#}-->
<script type="text/javascript">
    $(function () {
        $('#table').bootstrapTable({
            url: '/jsondata',  // 请求数据源的路由
            dataType: "json",
            pagination: true, //前端处理分页
            singleSelect: false,//是否只能单选
            search: true, //显示搜索框，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pageNumber: 1, //初始化加载第10页，默认第一页
            pageSize: 10, //每页的记录行数（*）
            pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
            strictSearch: true,//设置为 true启用 全匹配搜索，false为模糊搜索
            showColumns: true, //显示内容列下拉框
            showRefresh: true, //显示刷新按钮
            minimumCountColumns: 2, //当列数小于此值时，将隐藏内容列下拉框
            clickToSelect: true, //设置true， 将在点击某行时，自动勾选rediobox 和 checkbox
            height: 500, //表格高度，如果没有设置height属性，表格自动根据记录条数决定表格高度#}
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            showToggle: true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: true, //是否显示父子表，设置为 true 可以显示详细页面模式,在每行最前边显示+号#}
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            columns: [{  //定义表头,这个表头必须定义,下边field后边跟的字段名字必须与后端传递的字段名字相同.如:id、name、price
// 　　　　　　　　　　　　　　　　跟后端的字段名id  name price是完全一样的.
                field: 'id',
                title: '序号',
                align: 'center',  //对齐方式，居中
                width: '200px'  // 可以写各种样式#}
            }, {
                field: 'name',
                title: '名称',
                align: 'center'
            }, {
                field: 'price',
                title: '价格',
                align: 'center',

            }, {
                title: '操作',
                field: 'id',
                align: 'center',
                formatter: function (value, row, index) {
                    var e = '<a href="#" mce_href="#" onclick="edit(\'' + row.id + '\')">编辑</a> ';  //row.id为每行的id
                    var d = '<a href="#" mce_href="#" onclick="del(\'' + row.id + '\')">删除</a> ';
                    return e + d;
                }
            }
            ],
        });
    });
</script>
</body>
</html>

还可以通过以下方法再加参数（它与 "url:" 平级）：

queryParams: function (params) {
     params.search = document.getElementById('dept_text').value;
     params.test = '888'
     return params;
},

4 示例

https://getbootstrap.com/docs/5.1/examples/

5 风格

https://themes.getbootstrap.com/

一般都卖 49$

5.1 加一个看着差不多的边框

1
2
3

<div class="container mt-3">
内容
<div>

6 边框

影响元素之间的间距是可以通过 style 的 margin 或 padding 属性来实现，在 bootstrap 中使用 m-x 和 p-x 来设置：

class 名	等价的 style
m-0	等价于{margin:0!important}
m-1	等价于{margin:0.25rem!important}
m-2	等价于{margin:0.5rem!important}
m-3	等价于{margin:1rem!important}
m-4	等价于{margin:1.5rem!important}
m-5	等价于{margin:3rem!important}
m-auto	等价于{margin:auto!important}

class 名	等价的 style
p-0	等价于{padding:0!important}
p-1	等价于{padding:0.25rem!important}
p-2	等价于{padding:0.5rem!important}
p-3	等价于{padding:1rem!important}
p-4	等价于{padding:1.5rem!important}
p-5	等价于{padding:3rem!important}
p-auto	等价于{padding:auto!important}

如需要调整具体的上下左右，可使用 mt-n,mb-n,mr-n,ml-n，padding 同理。

7 栅栏布局

class 名	说明
.col-xs-*	超小屏幕手机 (<768px)
.col-sm-*	小屏幕平板 (≥768px)
.col-md-*	中等屏幕桌面显示器 (≥992px)
.col-lg-*	大屏幕大桌面显示器 (≥1200px)

8 BootStrap 的 Flex 布局

一般不直接设定 style，而使用 class 方法设置。它的名称和 style 名字很类似。

https://www.runoob.com/bootstrap4/bootstrap4-flex.html

9 其它说明

Bootstrap 插件全部依赖 jQuery
Grunt 用于编译

10 问题与解答

10.1 问题一

问题：
- bootstrap 皮肤是买的么
解答：
- ??