1.Bootstrap是什么？
一个用于快u开发web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT 。
给我使用的感觉是对于掌握一般的前端知识就可以学会怎么去使用Bootstrap，它包含了功能强大的内置组件，易于定制，最重要的是它是开源的。
工作中用到是Bootstrap3，学习在线文档https://v3.bootcss.com/
2.如何使用
可以选择在官网下载该文件包，或者使用在线工具库，但是要注意，在线的地址有可能会失效，有一次布局没了觉得很奇怪，查看页面代码发现我继承别人代码全部使用在线的工具库，瞬间心凉凉。为了保险起见还是自己下载个安心些。
注意: Bootstrap插件全部依赖jQuery，必须在Bootstrap之前引入。
3.如何使用它来布局
作为一个前端不是特别好的开发，我用了Bootstrap可视化布局，个人感觉还不错。组件只要拖拽自己想要的样子就可以。https://www.runoob.com/try/bootstrap/layoutit/
通过定义容器的大小，平分为12份（也有24份，23份的，取12份是一打，表示进阶完美的意思），再调整内外边距，最后结合媒体查询，制作出了强大的响应式网格系统。(可以通过重新编译LESS码源来修改12这个数值)。
1.数据行(.row)必须包含在容器(.container)中，以便赋予合适的对其方式和内边距(padding)。
2.在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如：12.
3.通过设置内边距(padding)从而创建列于列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响。
4.不希望相邻的两个列紧靠近在一起，就用offset功能来实现。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3>
h3. 这是一套可视化布局系统.
</h3>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
|
4.多种插件的应用
4.1 Bootstrap-treeView 树形菜单的实际操作总结
1、资源引用
<``script src="bootstrap-treeview.js">script``>`
2、在一个dom元素绑定该组件
<``div id="treeview1">div><br``>`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $('#treeview1').treeview({
data: getTree(),
levels: 5,
color: "#000",
backColor: "#fff",
onhoverColor: "orange",
borderColor: "red",
showBorder: false,
showTags: true,
highlightSelected: true,
selectedColor: "#fff",
selectedBackColor: "darkorange",
});
|
代码截取
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| **初始化数据
$('#treeview1').treeview('collapseAll', {
data : treedata,
silent : false
});
**清空搜索选项**
$('#treeview1').treeview('clearSearch');
**查询功能
var search = function(e) {
var result;
var pattern = $.trim($('#input-search').val());
console.log(pattern)
var reg=/^[1-9]\d*$|^0$/;
if(reg.test(pattern)){
window.alert("搜索内容不可以为纯数字");
$('#input-search').val("");
clear();
}else{
var options = {
ignoreCase: true,
exactMatch: false,
revealResults: true
};
var results = $('#treeview1').treeview('search', [ pattern, options ]);
$.each(results, function (index, result) {
console.log(result)
result.text += '<p>- <span style="color:red;">' + result.text + '</span></p>';
});
}
};
|
对treeview组件的操作参考：
bootstrap treeview树形菜单 动态扩展 连数据库 - 愿生命从容 - 博客园https://www.cnblogs.com/chenhtblog/p/8342534.htmlbootstrap-treeview 扩展addNode方法 动态添加子节点的方法 - CSDN博客https://blog.csdn.net/qq_25628235/article/details/51719917bootstrap treeview 增删改的正确姿势 - CSDN博客https://blog.csdn.net/hotqin888/article/details/54798737/
html页面使用该插件上传图片并显示在轮播图中
1
2
3
| <div class="modal-body" style="height:80%; overflow-y:scroll;">
<input id="input-b5" name="input-b5" type="file" multiple>
</div>
|
JavaScript：删除图片必须要配置的两个属性initialPreview和initialPreviewConfig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
| function init(){
$("#input-b5").fileinput({
'theme': 'fa',
showCaption:true,
showPreview :true,
overwriteInitial: false,
validateInitialCount: true,
initialPreview:array,--->预览时可以看到
language: 'zh',
uploadExtraData:{pictitle:JSON.stringify(jsonstr)},
'uploadUrl': '/FileUpload',
uploadAsync: false,
allowedFileExtensions: ['png', 'jpg','gif'],
hideThumbnailContent:true,
layoutTemplates :{
actionUpload:'',
},
initialPreviewConfig:con,---->预览时可以看到
})
}
配置动态数据需要添加一个函数：
function getImg(dat){
........
return array,con;
}
function setimg(dat){
}
删除时添加的两个函数：
$('#input-b5').on('filebeforedelete', function() {
return new Promise(function(resolve, reject) {
$.confirm({
title: '警告!',
content: '你是否想要删除这个图片?',
type: 'red',
buttons: {
确定: {
btnClass: 'btn-primary text-white',
keys: ['enter'],
action: function(){
resolve();
}
},
取消: function(){
$.alert('图片删除被中止! ');
}
}
});
});
})
$('#input-b5').on('filedeleted', function( event,index ,data,val) {
if(data.status==200){
var picimg=val.picimg;
var a=JSON.parse(picimg).arrs.split("#");
var b="";
for(var i=0;i<a.length;i++){
if(a[i]==JSON.parse(picimg).obj){
b+="";
}else{
b+=a[i]+"#";
}
}
if(b==""){
}else {
b=b.substring(0,b.length-1);
}
setimg(b);
getImg(b);
init();
$('#myModal').modal('hide');
$("#strong").html("图片删除成功");
$('#strong').removeClass("hidden");
window.setTimeout(function() {
$('#strong').addClass("hidden");
}, 2000);
}else{
$("#strong").html("图片删除异常");
$('#strong').removeClass("hidden");
window.setTimeout(function() {
$('#strong').addClass("hidden");
}, 2000);
}
});
|
后端代码
文件上传代码略，基于公司需求增加了删除图片的功能，在前端js函数获取要删除的图片的信息，在后端添加一个删除图片的对应方法。
