内容：content
专栏：column
元素：element
页头：header
登录条：loginbar
标志：logo
侧栏：sidebar
广告：banner
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
滚动：scroll
页面主体：main
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
热点：hot
新闻：news
下载：download
注册：register
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendlink
页脚：footer
版权：copyright
/*********************默认样式.css*************************************************/
body,ul,h1,h2,h3,h4,h5,h6,p,ol,dl,dt,dd,input,form,select,form,input,textarea{ margin:0; padding:0; font-family:"微软雅黑"} li{ list-style:none} a{ text-decoration:none} a:hover {text-decoration:none;color:#4c4c4c;}a:active{text-decoration:none;color:#4c4c4c;} a:visited {text-decoration:none;color:#4c4c4c;} img{ border:none; display:block;} .clear{ zoom:1} .clear:after{ content:""; display:block; clear:both;} /*********************end 默认样式.css*************************************************/
元素嵌入式：
<a href=”#”style=”color:blue;font-size:12px”>
内嵌文件样式：
<style type=”text/css”>
a{
color:red
}
</style>
外部样式表：
<link rel="stylesheet" type="text/css" href="cunzhang.css" >
<meta http-equiv="X-UA-Compatitle" content="IE=edge"/>
a:link,a:visited{}未与已连接
text-decoration:none; 设置下划线
font-weight 属性设置文本的厚度。
overflow:hidden;隐藏溢出
border-radius: 15px 15px 0 0;圆角
设置全屏元素及其父元素height:100%
将html、body标签设置height:100%
(注意：height:100%随其父元素的高度而变化)
#container,.sections,.section{ height: 100%; } html,body{ height: 100%; }
使背景位于屏幕中心
#section0,#section1,#section2,#section3{ background-color: #000; background-size: cover; background-position: 50% 50%; text-align: center; color: white; }
如果设置横屏效果，则需要设置
N个内用页面：
float:left;
width:25%;
父元素设置width为400%;
<input type=”text”id=”address”value=请输入邮箱地址/>
<input type=”text”id=”address”value=请输入邮箱地址/>
当鼠标获得焦点时，清空值
$(“address”).focus(function(){
var txt_value = $(this).val();
if(txt_value==请输入邮箱地址){
$(this.val(“”);
}
});
当地址框失去焦点时，如果地址框的值为空，则将地址框的值设置为请输入邮箱地址
$(“address”).blur(function(){
var txt_value = $(this).val();
if(txt_value==””){
$(this).val(请输入邮箱地址)；
}
})
浮动会使元素塌陷。也就是说，被浮动元素的父元素没有高度。例如，一个父元素含有浮动元素，它塌陷到零高度。
添加浮动元素后div设置clear: both; height:0,overflow:hidden
使用clearfix;
设置父元素浮动；
/*------摘要：常用的去除浮动的方法。
用空标签清除浮动。我用了很久的方法，空标签可以是div也可以是P标签。我习惯用<P>，足够短，有很多人用<hr>，只需要另外 去除边框，但理论上可以是任何标签。这样，在需要去除浮动父级元素中的所有浮动元素后，添加这样的标签来去除浮动，并定义它CSS代 码：clear:both。该方法的缺点是增加了无意义的结构元素。
用额外的标签去除浮动(闭合浮动元素)W3C推荐的 做法。至于使用<br />元素还是空<div></div>可根据自己的喜好选择(当然也可以使用其他块级元素)。但要注意 是，<br />它本身就有表现，它会有更多的变化，所以设置它heigh为0，隐藏它的表现。因此，在大多数情况下使用空使用空气<div>比较合 适。
2、使用overflow属性。该方法有效地解决了通过空标签元素去除浮动而不增加无意代码的缺点。该方法仅在需要去除浮动元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用width:100%。
不过使用overflow它可能会影响页面性能，而且这种影响是不确定的，你最好在多个浏览器上测试你的页面；
3、使用after清除伪对象的浮动。 该方法仅适用于非IE浏览器 。具体写作方法可参考以下示例。使用时应注意以下几点。1、该方法必须在需要去除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像 素；二、content属性是必要的，但其值可以是空的。当蓝色理想地讨论这种方法时content属性值设为.但我发现空也可以。
这三种方法各有优缺点，使用时要选择最好的。个人习惯于第一种，稳定可靠。
参考链接：http://www.cnblogs.com/engzheng126/archive/2012/05/19/2508778.html
------*/
position: absolute; 绝对定位
position: relative; 相对定位
position: fixed;
list-style-image:url(../images/i_bg.gif);
vertical-align:middle;
list-style: none
overflow:hidden;
text-decoration:underline;
cursor:pointer;
outline:none;
min-height:123px;(IE6不支持)
_height:123px;(IE6专属)
opacity:0.5
box-shadow: 0 1vh 2vh #3887cd;
border-radius: 15px 15px 0 0;
-webkit-text-stroke: 2px #fff;
.mydiv{ width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333; filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=3);/*ie*/ -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/ -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/ box-shadow:2px 2px 10px #909090;/*opera或ie9*/ }
color: #F6F6F6;
text-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3);
#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */ }
#grad { background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法 */ }
#grad { background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */ }
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
outline: medium;
响应式网页设计:rem、em设置网页字体大小自适应
em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。
比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）
当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。
但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：
html{font-size:62.5%; /* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} p{font-size:14px;font-size:1.4rem;}
需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%，还是设置为 font-size:62.5%，如果你引入了 CSS 预处理工具那么自然可以使用默认值，如果由于其他原因使用 font-size:62.5% 也无可厚非，完全可以在 body 中重置回你需要的默认 font-size。
display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
对非A标签使用hover, ie8-不支持
<script src=”style.js”>
</script>
<script src=" http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
$(".sidebar li").each((r){//遍历 $().click((){//点击 $(".sidebar li").css("color","");//清空样式 $().css("color","#108cee");//赋予样式 $(".content li").hide();//所有关联样式隐藏 $(".content li").eq(r).show();//赋予关联样式显示 }) }); $(".sidebar li").eq(0).trigger("click");//默认选中第一个
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
$(document).ready() 方法允许我们在文档完全加载完后执行函数。
$function(){}//启动就加载
我们将使用前一章中的三个相同的方法来设置内容：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>
</html>
我们将使用前一章中的三个相同的方法来设置内容：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html()：
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
().bind('click',function(){ ('#search-suggest').hide(); });
bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
unbind取消绑定
向元素附加数据，然后取回该数据：
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
on()方法
描述：在选定的元素上绑定一个或多个事件处理函数
events一个或多个空格分隔的事件类型，例如click keydown。
selector 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素，如果为null，那么被选中的元素总是能触发事件。
data事件触发时，要传递给处理函数的event.data。
handler(eventObject)事件触发时，执行的函数。
val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数，则返回被选元素的当前值。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("input:text").val(function(n,c){
return c + " Gates";
});
});
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" value="Bill" /></p>
<button>设置文本域的值</button>
</body>
</html>
attr() 方法设置或返回被选元素的属性值。
根据该方法不同的参数，其工作方式也有所差异。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width","180");
});
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 属性</button>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width",function(n,v){
return v-50;
});
});
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>减少图像的宽度 50 像素</button>
</body>
</html>
<input type=”text” id=”address” value=”请输入邮箱地址”/>
鼠标获取焦点时，将值清空
$(“address”).focus(function(){
var txt_value = $(this).val();
if(txt_value==”请输入邮箱地址”){
$(this.val(“”);
}
});
地址框失去焦点时，如果地址框的值为空，则将地址框的值设置为“请输入邮箱地址”
$(“address”).blur(function(){
var txt_value = $(this).val();
if(txt_value==””){
$(this).val(“请输入邮箱地址”);
}
})
$(".btn1").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
获取元素偏移位置方法offset() 方法
offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
语法
$(selector).offset(function(index,oldoffset))
| function(index,oldoffset) | 规定返回被选元素新偏移坐标的函数。 · index - 可选。接受选择器的 index 位置 · oldvalue - 可选。接受选择器的当前坐标。 |
例：
<script> $('#search_input').bind('keyup',function(){ //绑定输入事件 var searchText = $(‘#search_input’).val(); $.get(‘http://api.bing.com/qsonhs.aspx?q=’+searchText,function(d){ var d = d.AS.Results[0].Suggests; var html=’’; for(var i=0;i<d.length;i++){ html+=’<li>’+d[i].Txt+''</li>’; } $(‘search-result’).html(html); $('search-suggest').show().css({ //显示位置为修改后的位置（即偏移位置） top:$('#search-from').offset().top, left:$('#search-from').offset().left, position:'absolute' }); },’json’); }); </script>
(function($){
//do something
})(jQuery);
作用：避免全局依赖
避免第三方破坏
兼容jQuery操作符$和jQuery
即给jQuery命名空间下添加新的全局函数，也称为静态方法。
jQuery.myPlugin=function(){
//do something
}
例如：$.Ajax()、$.exteng()
即挂在jQuery原型下的方法，这样通过选择器获取的jQuery对象实例也能共享该方法，也称为动态方法。
$.fn.myPlugin=function(){
//do something
};
这里的$.fn===$.prototype
例如：addClass()、attr()等，需要创建实例来调用
$(“div”).next().addClass()….
$.fn.myPlugin=function(){
return this.each(function(){
//do something
});
};
代码说明
-return this 返回当前对象，来维护插件的链式调用
-each 循环实现每个元素的访问
$.fn.MyPlugin=function(){
var me=$(this),
instance=me.data(“myPlugin”);
if(!instence){
me.data(“myPlugin”,(instance=new myPlugin()));
}
};
代码说明
如果实例存在则不再重新创建实例
利用data()来存放插件对象的实例
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
().ready(function(){ ("#from_apply").validate({ :{ :{ :true,//必填: true } } }); });
Ajax发送请求的url地址与服务器地址必须是同一域名下
$(function(){
//元素绑定全局ajaxStart事件
$(“#divMsg”).ajaxStart(function(){
$(this).show().html(“正在发送登陆请求。。。”);
})
//元素绑定全局ajaxStop
$(“#divMsg”).ajaxStop(function(){
$(this).show().html(“请求处理已完成。。。”).hide();
})
$(“#Button1”).click(function(){//按钮点击事件
var $name = $(“#txtName”);//用户名
var $pass = $(“#txtPass”);//密码
if($name.val()!=””&&$pass.val!=””){
UserLogin($name.val(),$pass.val());//。。。
}else{
if($name.val()==””){}
alert(“用户名不能为空!”);
$name.focus();//获取焦点
return false;//阻止程序往下走
}else{
alert(“密码不能为空!”);
$pass.focus();
return false;
}
}
})
});
function UserLogin(name,pass){
$.ajax({
type:”GET”,
url:”index.php”,
data:”action=Login&d=” + new Date() + “&name=”+name+”&pass”+pass,
success:function(data){
if(data==”1”){
window.location = “ChatMain.html”;
}else{
alert(“用户名或密码错误！”);
return false;
}
}
});
}
控制Div高度为滚动
css:overflow-y:scroll;
$(function(){
$(“#Button1”).click(function(){//按钮点击事件
var $content = $(“#txtContent”);//发送内容
i
SendContent($content.val());
}else{
alert(“发送不能为空！”);
$content.focus();
return false;
}
});
})
发送内容函数
function SendContent(content){
$.ajax({
type:”GET”,
url:”index.php”,
data:”action=SendContent&d=” + new Date() + “&content” + content,
success:function(data){
if(data==”1”){
GetMessageLite();
$(“#txtContent”).val(“”);
}else{
alert(“发送失败！”);
return false;
}
}
});
}
//显示表情图标，并将表情图标ID号码显示在文本框。
var $a=”<img src=’url’ />”;
$(“#c”).html($a);
function InitFace(){
var strHTML = “”;
for (var I =1;i<=10;i++){
strHTML +=”<img src=”Face/”+i+”.gif ’id=’”+i+”’/>;
}
$(“#divFace”).html(strHTML);
}
InitFace();
$(“table tr td img”).click(function(){
//表情图标单击事件
var strContent = $(“#txtContent”).val()+”<: + this.id + ”:>”;
$(“#txtContent”).val(strContent);
})
.get(url,callback,'json');
语法
$(selector).get(url,data,success(response,status,xhr),dataType)
| url | 必需。规定将请求发送的哪个 URL。 |
| Data | 可选。规定连同请求发送到服务器的数据。 |
| success(response,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数： · response - 包含来自请求的结果数据 · status - 包含请求的状态 · xhr - 包含 XMLHttpRequest 对象 |
| dataType | 可选。规定预计的服务器响应的数据类型。 默认地，jQuery 将智能判断。 可能的类型： · "xml" · "html" · "text" · "script" · "json" · "jsonp" |
('document').delegate('li','click','fn');
().delegate('li','click',function(){ var keyword =(this).text();.='http://cn.bing.com/search?q='+keyword; });
1<title> 标题 强调重点即可，重要的关键词放在前面，不要重复出现，每个页面的title不要相同 2<meta keywords>关键词 列举几个关键词即可，不要过分堆积 3<meta description>网页描述 要高度概括网页的内容，不要过长，也不要过分堆积关键词，每个页面的description要不同
4语义化代码（html标签都有自己的意义，在适当的位置用适当的标签） 包括 1）.H1—H6标签多用于标题 2）.UL标签多用于无序列表 3）.OL标签多用于有序列表 4）.DL标签用于定义数据列表 5）.em、label表示强调 div、span是html标签中最没有语义的（导航栏的代码比较，见课件，尽量用css表现样式，避免用html标签来表现样式） 尽量用ul li 这类的标签描述导航 5.细节 <a>标签，设置title，以及如果不希望爬虫跑出去的话，设置rel为nofollow。 <h1> 推荐使用。h1优先级最高，如果嫌大可以css样式控制大小。 注意<br >只用于文本格式的换行 用<caption>第一表格标题 <img> 标签应使用alt说明 <label><em>与 <b><i>：label和em显示效果分别与<b>和<i>相同，但是前两者都有强调作用，权重大，后两者权重小。所以不希望强调的地方就使用后两者而非前两者。 重要内容HTML代码放在最前面，可以使用css等具体控制在页面渲染中的位置。 重要内容不要用JS输出 尽量不要使用iframe框架 谨慎使用display:none;（小蜘蛛会过 滤.掉的） （ 使用Z-Index使暂时不显示的代码隐 藏，或者设置为浏览器显示范围外） 不断精简代码
减少 HTTP 请求
使用CDN（内容分发网络）
添加Expire/Cache-Control头
expire设置本地缓存的时间
cache-control设置本地缓存
启用Gzip压缩
将css放在页面最上面
将script放在页面最下面
避免在CSS中使用Expressions...
把JavaScript和CSS都放到外部
减少DNS查询
压缩 JavaScript 和 CSS
避免重定向
移除重复的脚本
配置实体标签（ETag）
使 AJAX 缓存
Yslow网站性能优化工具
安装Yslow工具
<meta name="viewport" content="width =device-width, initial-scale=1, maximum-scale=1"/>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
- THE END -