Bootstrap中的fileinput多图⽚上传及编辑功能
逻辑说明：先从后台获取数据展⽰，然后进⾏编辑。
废话不多说， 直接上代码.
1. 页⾯部分代码：
项⽬LOGO
说明： 其中onchange()为我业务需要， 上传完成后⾃动执⾏⼀个添加事件。 此⽅法可以去掉。
2. 获取初始化数据⽅法：
// 初始化获取原有⽂件
$(function(){
$.ajax({
type : "post",
url : "/eim/project/testFileUpload.do",
dataType : "json",
success : function(data) {
layer.msg('操作成功！');
showPhotos(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
layer.msg('操作失败！');
}
});
});
说明：此处我返回是⼀个 对象数组：List，可以理解为获取⼀个班中所有的学⽣，展⽰头像
3.初始化bootstrap-fileinput 组件：
function showPhotos(djson){
//后台返回json字符串转换为json对象
var reData = eval(djson);
// 预览图⽚json数据组
var preList = new Array();
for ( var i = 0; i < reData.length; i++) {
var array_element = reData[i];
// 此处指针对.txt判断，其余⾃⾏添加
if(array_.indexOf("txt")>0){
// ⾮图⽚类型的展⽰
preList[i]= "
}else{
// 图⽚类型
preList[i]= "";
}
}
Bootstrap⾃学笔记
day01
学习计划——框架(1)Bootstrap 5
(2)AngularJS 12
(3)WebApp 6
(4)JSFramework 6
(5)微信开发 5
⽬标：topspeeder: 350+
WebStorm
1.什么是响应式⽹页——概念
Responsive Web Page：⼀个⽹页，可以根据浏览设备的不同（phone、pad、pc）和特性⽽呈现出不同的布局⽅式——⽬标：都有不错的⽤户浏览体验。
⾯试题：响应式⽹页的构成：(1)流式(Fluid)页⾯布局
(2)可伸缩的图⽚和⽂字
(3)使⽤CSS3 Media Query技术
2.如何测试⼀个响应式⽹页——了解
⽅式1：使⽤真实的物理设备来测试
优势：测试结果真实可靠！
不⾜：需要⼤量购置设备，测试⼯作量太⼤！
⽅式2：使⽤第三⽅的虚拟软件来测试
优势：⽆需购买设备
不⾜：运⾏速度慢，部分不能不易测试，测试结果有待进⼀步的验证。
⽅式3：使⽤Chrome⾃带的设备模拟器来测试
优势：⽅便快捷！！
不⾜：测试结果有待进⼀步的验证！Viewport：视⼝，最早由苹果公司在iOS系统中提出此概念，后来Android系统也引⼊了该概念——这是⼀个移动设备浏览器中专有的概念，PC浏览器不⽀持，会忽略此概念。
没有viewport概念的⼿机浏览器：
视⼝是⼀个虚拟的概念，⽤于显⽰⽹页内容的⼀个窗⼝，其宽和⾼都
可以任意指定。
有了视⼝之后，浏览的效果：
可以实现在较⼩的物理屏幕下，浏览较⼤的⽹页内容——需要⽤户左右滑动3.如何编写⼀个响应式⽹页——重点
(1)在HEAD中声明viewport元标签，并进⾏特殊的设定：
使得Web页⾯在呈现上类似于原⽣的iOS/Android应⽤。
提⽰：移动开发中建议meta必须放在HEAD的最前端。(2)所有的尺⼨和字体⼤⼩都避免使⽤绝对单位（如px），⽤相对单位代替（如：%、auto、em）
(3)使⽤浮动定位(float)
(4)图⽚要实现⾃适应
软酷网官网：
Bootstrap的使用手册及学习笔记
Bootstrap是基于HTML5和CSS3开发的用于前端开发的工具包。关于Bootstrap的介绍和下载，大家可以去搜索查看。Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 的文件类型。因此这一文档类型必须出现在项目的每个页面的开始部分：
2
3 ...
4
HTML中定义的所有标题标签, 从
font-size 是 14px，line-height 是 20px。这些样式应用到了 和所有的段落上。另外，对 (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。 在使用Bootstrap之前必须要将bootstrap.css或者bootstrap.min.css（压缩版）引入到页面中，它定义了Bootstrap的基本样式。如果需要使用Bootstrap提供的组件，要将bootstrap.js或者bootstrap.min.js（压缩版）引入到页面中。因为bootstrap的JS插件需要Jquery的支持，所有在引入bootstrap.js之前必须将Jquery.js也引入到页面上。另外如果你希望你的页面支持响应式布局，必须引入bootstrap-responsive.css或者bootstrap-responsive.min.css（压缩版），它主要提供页面在移动设备上的显示样式支持，需要注意的是bootstrap-responsive.css必须放置在bootstrap.css之后，否则便不具有响应式布局功能。当然在Bootstrap3的版本中，bootstrap.css和bootstrap-responsive.css已经合并了。 一、代码样式 Bootstrap提供了代码样式，用于在页面上展示代码，以此来区分于正文的区别，如果是行内嵌套代码，可以用标签，但是对于代码中的符号要进行转换（是>）例如： For example, should be wrapped as inline.
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，它是一个HTML/CSS框架
Bootstrap提供了优雅的HTML和CSS规范，即动态CSS语言Less
特点：
Bootstrap是基于jQuery框架开发的，并兼容大部分jQuery插件
组成：
Bootstrap中包含了丰富的web组件：
下拉菜单
按钮组
按钮下拉菜单
导航
导航条
面包屑
分页
排版
缩略图
警告对话框
进度条
媒体对象
等等
Javascript插件
Bootstrap自带了13个jQuery插件， 其中包括：
模式对话框
标签页
滚动条
弹出框
等等
Less
Less是一个CSS预处理器，让CSS具有动态性
另一方面，bootstrap是一个快速开发webapp和站点的工具包，这样可以在CSS中使用bootstrap的Less变量、mixed(混合)、nesting(嵌套)等
bootstrap使用:
1. 下载bootstrap: /2.3.2/
2. 在html文档中加载bootstrap相关的文件
3. 简单使用
bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局
布局容器：bootstrap需要为栅格内容和栅格系统包裹一个container 容器，
.container类用于固定宽度并支持响应式布局
.container-fluid类用于100%宽度布局，占据全部视口（viewport）的容器
Class=”row”表示一行
Class=”col-md-n”表示占n列
(2) 移动设备和桌面屏幕
如果不希望在小屏幕设备上，所有列都堆叠在一起，就使用针对超小屏幕和中等屏幕设备所定义的类：即.col-xs-n 和 .col-md-n .col-sm-n
