Login.html学习
placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。
该提示会在用户输入值之前显示在输入字段中。
注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email和password。
测试样例参见test/placeholder.html
局部刷新
class="toolbar clearfix"
ToolBar 隐藏掉系统原先的导航栏
clearfix 主要是用在浮动层的父层，而 clear 主要是用在浮动层与浮动层之间，和浮动层同一级，如果想要撑开父层的高度，clear 就要放在最后。
Bootstrap 模态框（Modal）插件
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
如果需要引用该插件功能，需要引入modal.js OR bootstrap.js OR bootstrap.min.js
- 用法：通过 data 属性在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal"，同时设置 data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框（带有 id="identifier"）。
测试样例参见test/Modal.html
function($)
javascript中(function($){...})(jQuery)写法是指的是是匿名函数。
function(arg){...}这也定义了一个匿名函数，参数为arg。
测试样例参见test/AnonymousFunction.html
.navbar-fixed-top使导航条固定在顶部
Index.html学习
Font Awesome 图标
Font Awesome 是一套绝佳的图标字体库和CSS框架。
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
如果需要该插件功能，需要引入font-awesome.css OR font-awesome.min.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>
测试样例参见test/tubiao.html
- 列表图标
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>
- 动态图标
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
- 旋转和翻转的图标
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>
- 图标抖动√
<!-- 测试图标抖动-->
测试<i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
<p> 经测试：图标抖动与bootstrap.min.css；font-awesome.min.css；ace.min.css相关联</p>
测试样例参见test/tubiao2.html
PS:fa-angle-double-down双箭头向下指示的图标，展开操作时用。
任务折叠+进度控制
主要是li标签的循环嵌套，浮于上层的列表需要引入jquery-2.1.4.min.js，bootstrap.min.js以使用dropdown等属性实现展开与折叠特性
进度控制， 除了使用<div style="width:90%" class="progress-bar progress-bar-success"></div>直接控制进度条的长度外，还可以使用如下功能：
<progress value="50" max="100"></progress>以实现进度条的变更控制，从后台获取数据，并计算其百分比并显示在前端。
分别使用progress-bar,progress-bar-warning,progress-bar-danger,progress-bar-success表示其安全与否等级。
测试样例分别参见test/liTag.html, test/progress.html
评论与回复
评论区的滚动：设置定量高度，在文字被排满的情下，自动加入滚动条
<div class="test"></div>
<input type="text" id="test"/><input type='button' value='提交' οnclick="fun()"/>
<script type="text/javascript">
function fun(){
var str = document.getElementById("test").value;
var divs = document.getElementsByTagName("div");
for(i=0;i<divs.length;i++){
if(divs[i].className == "test"){
divs[i].innerHTML += "" +str+"</br>";
}
}}
</script>
可实现评论提交功能。
也可通过与后台交互的方式，如发送post请求，提交给后台，后台审核通过后，通过servlet机制再传送给前端。
测试样例分别参见test/comment.html, test/comment2.html
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
