1.Bootstrap介绍
程序员不擅长美化，但界面对美观有一定要求。前端技术里有很多免费的UI库（由设计师和工程师合作，把线程功能和样式封装成半成品，根据需要拿来半成品，拼成需要的页面）。
bootstrap就是UI库的一种。
1.1 Bootstrap历史
1.Bootstrap 最初是由就职于 Twitter 的一个设计师和一个工程师创造的，现在，Bootstrap 已经成为了这个世界上最流行的前端开发框架和开源项目。
设计师指UI设计者 工程师即程序员
2.首个版本发布于 2011年8月19日（星期五），目前已经发布了超过20个版本，包括 v2 和 v3 两次重构。
3.在 Bootstrap 2 版本，整个框架添加了对响应式布局的支持，但是，这是作为一个可选的样式表而提供的。
响应式布局：多端展示(一个东西在手机，电脑，平板都要看)需求兴起之后的概念。若用像素定大小，分辨率很大，同样的像素就显示很小。故，用电脑显示（1080p)为标准，放到手机上（横向分辨率不到1000，纵向2000左右），一个100x100的块，在手机上就会变得很大。故，响应式布局是通过检测当前使用的设备和分辨率，横向和纵向分别给一种展示方式，且根据显示屏的宽度对内容重新构成排布。
即预先将排布方式设置好，不同的设备给对应的显示。
bootstrap中用栅格系统实现响应式布局。
4.Bootstrap 3 再一次重构了整个框架，并将“移动设备优先”这一理念深刻的融入到整个框架中。
套壳的App，如发布山寨游戏的平台，如一刀999。手机端做好，PC端实际也做好了。程序员最多两天搞明白套壳App。
1.2Bootstrap特点
1.跨设备（通过响应式布局兼容不同设备），跨浏览器（浏览器内核：html，css，js代码由浏览器解析并绘制到浏览器主体界面，这一过程由不同浏览器内核做的。不同浏览器内核写上去的东西不一定完全一样，没有人定制该标准。目前存在的内核，都在往一起靠拢，谷歌内核，火狐内核。ie抛弃自己的内核，使用谷歌内核。谷歌内核自己一套，公开版一套）
可以兼容所有现代浏览器，包括比较诟病的IE7、8
比如：中国有些医院，政府机构还在用很老的电脑设备，很老的系统，浏览器也是很久以前的。比如：XP系统，上面还在用ie8浏览器，ie8内核还不是谷歌内核。相同的代码在不同的内核显示效果可能不同，前端程序员就得调兼容性，看浏览器哪个内核，使用代码进行调整。
浏览器兼容性问题，是前端比较麻烦的问题。
但UI库已处理好，按UI库写法写好，兼容性问题就可解决掉。
2.响应布局
不但支持PC端的各种分辨率，还支持移动端pad,手机屏幕的响应式切换显示。
3.提供的全面的组件
bootstrap提供了实用性很强的组件，包括：导航，标签，工具条，按钮等供开发者使用
4.包含jquery插件
Bootstrap提供了很多实用性的JQuery插件，这些插件方便开发者实现WEB中各种常规特效。所以Bootstrap依赖于JQuery（bootstrap要用就得倒进jquery）
注：不同的UI库基于不同的javascript扩展库再进行扩展的。
5.支持html5 css3
HTML5标签和CSS3属性，都可以很好的支持
1.3 Bootstrap下载使用
1.输入网址 < Bootstrap中文网> 进入官网，点击下载，下载用于生产环境的 Bootstrap。
2.解压后，有css（样式。带map的是另一种加载方式，要其它工具，不需要，删掉；带theme的是主体的意思，一般也没用，删掉；剩下bootstrap.css和bootstrap.min.css,带min表示压缩，也删除。留下bootstrap.css即可），fonts（字体和图标，不用删），js（npm.js暂时不用，删除；剩两个，将压缩的删除）三个目录。
（大部分UI库都是这样的要求，一个css文件，一个js文件，还有字体图标文件）
3.在HBuilder X里新建一个空白项目，将三个目录复制进来。
（注：fonts目录和css目录是同级目录，相对的目录结构不要变，因为css里对字体图标有引用，且代码里使用的相对路径）
4.在该项目里创建一个文件，使用bootstrap。
2.Bootstrap详解
2.1 Bootstrap栅格系统
1.栅格介绍
1.Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
2.栅格是Bootstrap的核心所在
3.栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。行与列的布局很像table的使用方式，bootstrap吸取了table的优点，使用div+css进行布局（css不需要自己再写，用UI库提供的样式）
//container页面布局容器，页面布局基本要求，加container。（不加也能通过，但做整体布局必须加）
//之后加行和列。默认一行12个列
//列是从左到右排，即屏幕宽度，不同宽度屏幕允许对排列方式自己发生改变。
<div class="container">
<div class="row">
<div class="col-md-6">left</div>
<div class="col-md-6">right</div>
</div>
</div>
使用bootstrap流式栅格系统：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入bootstrap的css样式-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!--先排满一行，一行最多12列-->
<div class="col-lg-1">div</div> <!--col是column缩写，lg分辨率，最后一个是占几格-->
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
<div class="col-lg-1">div</div>
</div>
<div class="row">
<div class="col-lg-6">div</div>
<div class="col-lg-6">div</div>
</div>
<!--屏幕较大时。有两行，第一行12个div，第二行2个div。若将屏幕变小，即改变分辨率，14个div将从上往下排列，
即按照默认规则去排。故，设置的东西失效。如何让屏幕显示出需要的效果，此时要在里面加其它样式。-->
</body>
</html>
如何做到响应式布局：
<body>
<div class="container-fluid">
<div class="row">
<!--加入col-md-x，变成中等屏幕时，效果仍是一行12个div；同理加入col-sm-x,是小屏幕 -->
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
<div class="col-lg-1" col-md-1>div</div>
</div>
<div class="row">
<div class="col-lg-6" col-md-5>div</div>
<div class="col-lg-6" col-md-7>div</div>
</div>
</body>
行嵌套情况：
<div class="row">
<!--每个列占5个格，要求在每个列里再分两列，占相同格。
在内部嵌套,里面还按12个格算-->
<div class="col-lg-5">
<div class="row">
<div class="col-lg-6">div</div>
<div class="col-lg-6">div</div>
</div>
</div>
<div class="col-lg-5">div</div>
</div>
列偏移属性：
<div class="row">
<!--offset偏移，整体向右移一格-->
<div class="col-lg-5 col-lg-offset-1">
<div class="row">
<div class="col-lg-6">div</div>
<div class="col-lg-6">div</div>
</div>
</div>
<div class="col-lg-5">div</div>
</div>
当前格右移：
<div class="row">
<!--push，当前格右移一格-->
<div class="col-lg-5 col-lg-push-1">
<div class="row">
<div class="col-lg-6">div</div>
<div class="col-lg-6">div</div>
</div>
</div>
<div class="col-lg-5">div</div>
</div>
pull，当前格左移一格:
<div class="row">
<!--pull，当前格左移一格-->
<div class="col-lg-5 col-lg-pull-1">
<div class="row">
<div class="col-lg-6">div</div>
<div class="col-lg-6">div</div>
</div>
</div>
<div class="col-lg-5">div</div>
</div>
总结：
<!--
栅格系统
可以完成响应式布局
container 网页端布局容器 两边有留白 （网页端使用）
container-fluid 流式布局 没有留白 适合竖屏 （手机端使用）
row 行
col-lg-1 col-分辨率大小-占几格
每行默认最大12列 可以不排满 但是不要超过12
行嵌套情况 嵌套在内部的行还按12格算
col-lg-offset-1 列偏移(向右整体移动)
col-lg-push-1 当前格右移
col-lg-pull-1 当前格左移
-->
以上在bootstrap官网都有，最上面的全局css样式。
2.栅格原理
Bootstrap会检测窗口宽度，根据具有特征的几种宽度可以动态改变显示效果
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
2.2Bootstrap样式
以下官网都有，讲一些常用的：
1.表格
将自己写的表格变成bootstrap中的表格，只需加class属性，属性值为table。
<table class="table"> ... </table>
加斑马线：
<table class="table table-striped"> ... </table>
带边框：
<table class="table table-bordered"> ... </table>
在颜色控制上，用颜色突出表格某行或某列：
<!-- On rows --> <tr class="active">...</tr> 灰 <tr class="success">...</tr> 绿 <tr class="warning">...</tr> 黄 <tr class="danger">...</tr> 红 <tr class="info">...</tr> 蓝 <!-- On cells (`td` or `th`) --> <tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td> </tr>
2.表单
以前写一些标签，再放一些框，让他们对齐。（之前让table将其对齐）
这里用div，并加class="form-group"
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
上面是描述在上，框在下。还有描述在左，框在右：（其他不变，在form加class="form-inline"）
<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form>
水平排列的表单（标签和框在一排）：
<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>
多行文本：（多了圆边和选中变蓝）
<textarea class="form-control" rows="3"></textarea>
添加额外的图标：（做效验）
<div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> </div>
(现在是绿色，由has-success决定；图标由glyphicon-ok决定；没用的属性 ariadescribedby="inputSuccess2Status"，aria-hidden="true"，给视觉有障碍的人语音播报。
第二个span也是配合语音播报)故，最后有用的：
<div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2" > <span class="glyphicon glyphicon-ok form-control-feedback" ></span> </div>
（一个lable，一个输入框，一个小图标）
3.按钮
提交按钮也可直接用button标签：(后加type="submit"。和input的区别：不是通过value属性表示文字，而是直接写在标签中间)
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
（关于样式，a标签，input标签或者button标签都可使用按钮样式，按钮样式为class="btn btn-default"，默认的按钮）
按钮也可选不同的颜色：
<!-- Standard button --> <button type="button" class="btn btn-default">（默认样式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首选项）Primary</button> 深蓝 <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> 绿 <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> 浅蓝 <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> 黄 <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危险）Danger</button> 红 <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（链接）Link</button> 链接样式
按钮还有尺寸，激活状态等
4.图片
图片有带圆边的，圆圈的，带外框的。
5.辅助类
2.3 Bootstrap组件
Bootstrap组件需要配合bootstrap提供的js bootstrap的js依赖于jquery
1.字体图标
图标都是由设计师，组织或者公司设计出来卖钱的。看到图标样式大概就能猜到作用。bootstrap里的图标是免费提供的。
使用方法：
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
2.下拉菜单
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
（div里套了一个按钮，按钮里放了一个图标<span class="caret"></span>，图标是箭头。下面是ul+li）
（点击没反应是因为从组件开始，到插件，必须引入bootstrap的js）
引入js：
<script src="./js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
但bootstrap的js依赖于jquery，应先引入jquery：
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
3.按钮式下拉菜单
4.输入框组
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span> </div> <label for="basic-url">Your vanity URL</label> <div class="input-group"> <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div>
其实是前后加图标：
<span class="input-group-addon">$</span> <span class="input-group-addon">.00</span>
5.导航
通常是ul+li：
<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul>
路径导航，一般是ol+li：
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol>
（路径导航的另一个名称：面包屑）
6.导航条 等等
2.4 Bootstrap内置插件
注意：Bootstrap官方文档中例子非常完善，可以直接从官方文档中查找需要使用的样式、组件和插件
有些插件是第三方做的，官方觉得不错，吸收进来。
1.模态框
其它ui库里可能叫对话框。效果：由一个按钮触发，产生一个盖板，将整个页面盖起来。然后出现一个面板，有一些信息，用户读取，输入，点击保存或关闭。
<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
（由一个按钮和一堆div构成。由按钮触发div的显示，且div悬浮在元素上，故按钮与元素间要有一个对应关系，通过 按钮上的data-target="#myModal"对应div里的id部分，触发模态框。
div部分，class="modal-content是内容，套了头，体，脚三部分。弹出的模态框两横线间的部分是body，上下部分分别为head和foot。foot部分有关闭和保存按钮。
可改变头部内容，改成添加人员信息，身体部分加几个输入框。将信息填完，点击保存按钮，信息就传入了后台。身体部分也可以放table，展示一些数据。）
2.标签页
3.工具提示
4.弹出框
5.警告框
alter（"警告框"）;不建议使用。那如何给用用户提示信息，自己画div，且要加上关闭的功能：
<div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
6.轮播图 等等
在carousel中。
<div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>
7.进度条
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div>
2.5Bootstrap合作插件
Bootstrap官网上也有很多合作的项目（首页bootstrap相关优质项目推荐）。
比如后期可能用到的：Moment.js----------javascript日期处理类库
moment().format('MMMM Do YYYY, h:mm:ss a'); // 四月 4日 2022, 1:34:51 下午
moment().format('dddd'); // 星期一
moment().format("MMM Do YY"); // 4月 4日 22
moment().format('YYYY [escaped] YYYY'); // 2022 escaped 2022
moment().format(); // 2022-04-04T13:34:51+08:00
Bootstrap有很多基于bootstrap开发的插件 需要单独下载js文件
如日期选择、开关按钮、下拉菜单、富文本编辑器等
2.6 Bootstrap工具
ibootstrap - Bootstrap可视化布局系统 可视化工具
注意：使用此工具时注意是否跟使用的bootstrap版本匹配
有了这个东西，页面布局不用凭空去想，将布局弄好，直接下载代码即可。
若觉得还不够省事。官网有一些网页的案例，但有些收费。在官网最上面网站实例栏。找和自己 要做的东西有百分之七十，八十相似的网页，直接下载下来，图片文字一改即可。
公司里没有美工（UI设计团队时，就是这么做的）
2.7Bootstrap未合作插件
还有一些官方未吸纳的插件
比如：bootstrap treeview 树形菜单
bootstrap select下拉菜单，用起来比官网的更加方便快捷。
3. 图表插件
bootstrap官网合作插件中的chart.js，开源的html5图表工具。
图表常用的有Bar charts（柱图），Line charts（折线图），Other charts（饼图）。
但文档是纯英文，故用echars，不是官网合作插件。
echars已被Apache组织收走，是百度开发的。服务器在国外，故会有点慢。
下载echars，一般选择在线定制，选择图表，坐标系，组件等，需要的勾上（如果是老的项目，勾上兼容ie8。svg渲染是指用矢量图绘制图表。普通图，将分辨率扩大，多个像素显示一个点，会有毛边和锯齿。矢量图，放大后线条会重新绘制，每次放大都会产生一张新的图，一般和地图相关）。
下载echars会很慢，还有另一个网站BootCDN，该网站作用：将一些常用的前端技术的代码放在bootstrap服务器。若想加载一些js或css文件，直接用绝对路径访问该服务器。这里想访问echars，输入echars，然后找核心文件，即echars.js或echars.min.js。在HBuilder X里新建文件，用绝对路径引入该文件路径即可。
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.js"></script>
使用echars：
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。
<body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
// document.getElementById('main')获得该元素
// echarts是js提供的对象，调用init（）方法初始化
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据，是简化的json格式，只在纯前端使用。
//在echars里是使用json格式配置 项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
//setOption（）设置选项，将配置好的json对象传入
myChart.setOption(option);
</script>
</body>
</html>
对于选项是什么意思，echars官方最上面的文档里有配置项手册可查。但配置项手册东西太多，单词可能都认不全。配置项手册里还有示例，可从这里找到与自己要做的功能接近的图，在此图基础上修改。此时遇到不清楚的地方，再查配置项手册。
（总结：官网找与要做的效果接近的图，在示例里。修改此图，不懂得查配置项手册。最后将代码复制到html文档。）
补充：Apache（阿帕奇）软件基金会，是专门为运作一个开源软件项目的 Apache 的团体提供支持的非盈利性组织，这个开源软件项目就是 Apache 项目。很多免费公开的项目都以被Apache软件基金会组织吸收进去为荣。能被该组织吸收，则说明软件已强大到了一定地步，有很高的知名度，有很多人在用。
用的很多免费jar包都属于该组织。
4.课后作业
用bootstrap构建一个管理系统主页
529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
