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">&times;</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">&times;</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构建一个管理系统主页

第二阶段（day07）bootstrap相关推荐

最新麦子学院Web前端项目实战 Web前端开发从入门到精通33G完整版
课程介绍下载地址:百度网盘一共超过33G的整套麦子学院Web前段视频教程,共分为4大阶段循序渐进的进行逐步深入的解读,从基础知识入门到后期的项目实战开发对于想从事Web前端学习和开发工作的朋友来 ...
day07 书城项目第二阶段
day07 书城项目第二阶段第一章不带数据库的注册登录 1. 实现步骤创建动态Web工程将第一版书城的静态资源拷贝到web文件夹中统一页面的基础访问路径使用静态数据进行登录校验使用完成注 ...
【Web前端第二阶段--Bootstrap】Day05
[Web前端第二阶段–Bootstrap]Day05 第一章 [Web前端第二阶段–Html]Day01 第二章 [Web前端第二阶段–Html]Day02 第三章 [Web前端第二阶段–CSS]Da ...
基于SSM+Layui+Bootstrap实现学校教师技能大赛评分系统
项目编号:BS-GX-009 开发工具:IDEA /Eclipse 数据库:MYSQL5.7+Redis 前端开发:Layui+Bootstrap 后端开发:SSM开发框架功能需求: 总共分为三个阶 ...
bootstrap 图片轮询_消息通知功能之前端Ajax定时轮询_后端接口获取数据一
2021春节即将来临,在此之际debug抽空撸了一套类似"QQ空间"."微信朋友圈"PC版的互联网社交软件系统,并将其录制成了视频,特此分享给诸位进行学习,以 ...
Day07 后台管理与发布文章
Day07 后台管理与发布文章源代码: https://github.com/LToddy/blog 技术交流群:630398887(欢迎一起吹牛) 写在前面的话:如果你实在不会写页面,复制粘贴你会 ...
第二阶段-javaweb
第二阶段-javaweb 第二阶段学习内容:单元测试,xml文件操作,数据库,jdbc,反射与内省,mybatis基础,HTML,JavaScript,通信协议与Tomcat服务器,HTTP协议与Se ...
SpringCloud配置文件 application.yml和 bootstrap.yml区别，执行顺序
说在前面 SpringBoot默认支持properties和YAML两种格式的配置文件.前者格式简单,但是只支持键值对.如果需要表达列表,最好使用YAML格式.SpringBoot支持自动加载约定名称 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...

第二阶段（day07）bootstrap

1.Bootstrap介绍

2.Bootstrap详解

3. 图表插件

4.课后作业

第二阶段（day07）bootstrap相关推荐

最新文章

热门文章