JQuery的概述
什么是JQuery:
JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装.
现在企业的开发中往往不会使用传统的JS进行开发，通常都会使用JS框架进行开发.
JS的常用的框架:
JQuery,ExtJS,DWR,Prototype...
JQuery入门
引入Jquery的js文件
<script src="../../js/jquery-1.11.3.min.js"></script>
// 传统的JS的方式：页面加载的事件只能执行一次.
/*window.onload = function(){
alert("aaa");
}
window.onload = function(){
alert("bbb");
}*/
// JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.
// window.onload 等页面加载完成后执行该方法.
// $(function(){}):等页面的DOM树绘制完成后进行执行.
// $相当于JQuery
$(function(){
alert("aaa");
});
$(function(){
alert("bbb");
});
window.onload = function(){
// 传统JS方式：
var d1 = document.getElementById("d1");
// JS对象的属性和方法:
// d1.innerHTML = "JS对象的属性";
// 将JS对象转成JQ的对象.
$(d1).html("JS对象转成JQ对象");
}
$(function(){
var $d1 = $("#d1");
// $d1.html("JQ对象的属性");
// 转成JS的对象:
// 一种方式
// $d1[0].innerHTML = "将JQ的对象转成JS对象";
// 二种方式:
$d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
});
JQ的效果操作:
* show();
* 使用一: JQ对象.show();
* 使用二: JQ对象.show("slow"); // slow, normal, fast
* 使用三: JQ对象.show(毫秒值); //1000
* 使用四: JQ对象.show(毫秒值, function(){});
* hide();
* 使用一: JQ对象.hide();
* 使用二: JQ对象.hide("slow"); // slow, normal, fast
* 使用三: JQ对象.hide(毫秒值); //1000
* 使用四: JQ对象.hide(毫秒值, function(){});
* slideDown(); 向下滑动
* 使用一: JQ对象.slideDown();
* 使用二: JQ对象.slideDown("slow"); // slow, normal, fast
* 使用三: JQ对象.slideDown(毫秒值); //1000
* 使用四: JQ对象.slideDown(毫秒值, function(){});
* slideUp(); 向下滑动
* 使用一: JQ对象.slideUp();
* 使用二: JQ对象.slideUp("slow"); // slow, normal, fast
* 使用三: JQ对象.slideUp(毫秒值); //1000
* 使用四: JQ对象.slideUp(毫秒值, function(){});
* fadeIn(); 淡入
* 使用一: JQ对象.fadeIn();
* 使用二: JQ对象.fadeIn("slow"); // slow, normal, fast
* 使用三: JQ对象.fadeIn(毫秒值); //1000
* 使用四: JQ对象.fadeIn(毫秒值, function(){});
* fadeOut(); 淡出
* 使用一: JQ对象.fadeOut();
* 使用二: JQ对象.fadeOut("slow"); // slow, normal, fast
* 使用三: JQ对象.fadeOut(毫秒值); //1000
* 使用四: JQ对象.fadeOut(毫秒值, function(){});
* animate(); 自定义动画
* toggle(); 单击切换函数
* JQ对象.toggle(fn1, fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
JQuery的选择器
基本选择器
id选择器
* 用法:$(“#id”)
类选择器
* 用法:$(“.类名”)
元素选择器
* 用法:$(“元素名称”)
通配符选择器
* 用法:$(“*”)
并列选择器
* 用法:$(“选择器,选择器,选择器”)
$(function(){ $("#but1").click(function(){ // alert("aaaa"); $("#one").css("background","#bbffaa"); }); $("#but2").click(function(){ $(".mini").css("background","#bbffaa"); }); $("#but3").click(function(){ $("div").css("background","#bbffaa"); }); $("#but4").click(function(){ $("*").css("background","#bbffaa"); }); $("#but5").click(function(){ $("#two,span,.mini").css("background","#bbffaa"); }); });
层级选择器
后代选择器：使用空格 所有后代包含孙子及以下的元素
子元素选择器：使用> 第一层的元素（儿子）
下一个元素：使用+ 下一个同辈元素
兄弟元素：使用~ 后面所有的同辈元素
<script> $(function(){ // 后代选择器: $("#but1").click(function(){ $("body div").css("background","#bbffaa"); }); // body下的第一层div元素 $("#but2").click(function(){ $("body > div").css("background","#bbffaa"); }); // 查找下一个同辈的元素 $("#but3").click(function(){ $("#three + div").css("background","#bbffaa"); }); $("#but4").click(function(){ $("#two ~ div").css("background","#bbffaa"); }); }); </script>
基本过滤选择器
<script> $(function(){ $("#but1").click(function(){ $("#three div:first").css("background","#bbffaa"); }); $("#but2").click(function(){ $("#three div:last").css("background","#bbffaa"); }); $("#but3").click(function(){ $("div:odd").css("background","#bbffaa"); }); $("#but4").click(function(){ $("div:even").css("background","#bbffaa"); }); $("#but5").click(function(){ $("#three div:eq(1)").css("background","#bbffaa"); }); }); </script>
内容选择器
<script> $(function(){ $("#but1").click(function(){ $("div:contains('1')").css("background","#bbffaa"); }); }); </script>
属性选择器
属性
[attribute]
[attribute=value]
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
<script>
$(function(){
$("#but1").click(function(){
$("div[id]").css("background", "#FF0000");
});
$("#but2").click(function(){
$("div[title='aaa']").css("background", "#0000FF");
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="选择有id属性的div" />
<input type="button" id="but2" value="选择有title属性为aaa的div元素" />
<hr/>
<div id="one">
<div class="mini">
1111
</div>
</div>
<div id="two">
<div class="mini" title="aaa">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini" title="aaa">
555
</div>
<div class="mini">
666
</div>
</div>
<div id="four">
<div class="mini">
777
</div>
<div class="mini">
888
</div>
<div class="mini">
999
</div>
<div class="mini">
000
</div>
</div>
<span id="five">
<div class="mini">
1010
</div>
</span>
</body>
</html>
表单和表单属性选择器
表单
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单对象属性
:enabled
:disabled
:checked
:selected
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../css/style.css" />
<script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background", "#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background", "#0000FF");
$("input[type='text']").css("background", "#0000FF");
});
$("#but3").click(function(){
$("input:checkbox").attr("checked", 'checked');
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="所有的input元素" />
<input type="button" id="but2" value="选择文本框" />
<input type="button" id="but3" value="checkbox选中" />
<hr/>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
<input type="checkbox" checked="checked" />
</form>
</body>
</html>
用例
JQ定时弹出广告
<script>
/*var time ;
$(function(){
// 设置定时 5秒钟执行一个 显示广告的方法：
time = setInterval("showAd()",5000);
});
function showAd(){
// 获得元素：
//$("#adDiv").show(2000);
// $("#adDiv").slideDown(2000);
$("#adDiv").fadeIn(3000);
clearInterval(time);
// 再设置定时 5秒钟隐藏.
time = setInterval("hideAd()",5000);
}
function hideAd(){
//$("#adDiv").hide(2000);
// $("#adDiv").slideUp(2000);
$("#adDiv").fadeOut(3000);
clearInterval(time);
}*/
var time;
$(function(){
// 设置定时5秒钟执行一个,显示广告的方法
time = setInterval("showAd()", 5000);
});
function showAd(){
// 获得元素
$("#adDiv").show(2000);
// $("#adDiv").slideDown(2000);
// $("#adDiv").fadeIn(2000);
clearInterval();
//再设置定时5秒钟隐藏
time = setInterval("hideAd()", 5000);
}
function hideAd(){
$("#adDiv").hide(2000);
// $("#adDiv").slideUp(2000);
// $("#adDiv").fadeOut(2000);
clearInterval(time);
}
</script>
JQ实现隔行换色
JQuery的选择器
* 基本过滤选择器：
* odd ：
* even :
JQuery中添加和移除样式
* 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.
* 如果已经在css文件中事先将样式定义完成了,不能使用css方法了.使用JQ中的CSS类中的方法：
* addClass();
* removeClass();
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/style.css" />
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
/*$("tr:odd").addClass("odd");
$("tr:even").addClass("even");*/
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
</script>
</head>
<body>
<table id="tab1" border="1" width="80%" align="center">
<thead>
<tr>
<td>分类的ID</td>
<td>分类的名称</td>
<td>分类的描述</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>烟酒糖茶</td>
<td>烟酒糖茶</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>5</td>
<td>汽车用品</td>
<td>汽车用品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
JQ完成复选框的全选和全不选
JQuery对属性的操作的方法
* attr();
* 使用方法一：$(“”).attr(“src”);
* 使用方法二：$(“”).attr(“src”,”test.jpg”);
* 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
* removeAttr();
* prop();新版本的方法.
* 使用方法一：$(“”).prop(“src”);
* 使用方法二：$(“”).prop(“src”,”test.jpg”);
* 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass()
* removeClass();
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/style.css" />
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
/*$("tr:odd").addClass("odd");
$("tr:even").addClass("even");*/
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
//复选框全选和全不选
$(function(){
//获得上面的复选框
var $selectAll = $("#selectAll");
// alert($selectAll.attr("checked"));
/*$selectAll.click(function(){
// alert($selectAll.prop("checked"));
if($selectAll.prop("checked") == true){
$(":checkbox[name='ids']").prop("checked", true);
}else{
$(":checkbox[name='ids']").prop("checked", false);
}
});*/
//简化
$("#selectAll").click(function(){
// $(":checkbox[name='ids']").prop("checked", this.checked); // this指向当前点击的对象,this.checked是js中的写法
$(":checkbox[name='ids']").prop("checked", $(this).prop("checked"));
});
});
</script>
</head>
<body>
<table id="tab1" border="1" width="80%" align="center">
<thead>
<tr>
<td><input type="checkbox" id="selectAll"></td>
<td>分类的ID</td>
<td>分类的名称</td>
<td>分类的描述</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ids"></td>
<td>1</td>
<td>手机</td>
<td>手机</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids"></td>
<td>2</td>
<td>电脑</td>
<td>电脑</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids"></td>
<td>3</td>
<td>房子</td>
<td>房子</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids"></td>
<td>4</td>
<td>鞋靴</td>
<td>鞋靴</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids"></td>
<td>5</td>
<td>汽车</td>
<td>汽车</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
JQ完成省市联动
JQuery的DOM操作
* 常用的方法:
* append(); ---在某个元素后添加内容.
* appendTO(); ---将某个元素添加到另一个元素后.
* remove(); ---将某个元素移除.
JQuery的遍历
遍历的方式一：
* $.each(objects,function(i,n){
});
遍历的方式二:
* $(“”).each(function(i,n){
});
$(function(){ var arrs = new Array("张森","张凤","张芙蓉"); // 将这个数组转成JQ的对象使用each方法. /*$(arrs).each(function(i,n){ alert(i+" "+n); });*/ $.each(arrs,function(i,n){ alert(i+" "+n); }); });
<script> $(function(){ // 定义数组： /*var arrs = new Array(5); arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市"); arrs[1] = new Array("南京市","苏州市","扬州市","无锡市"); arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施"); arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市"); arrs[4] = new Array("长春市","吉林市","四平市","延边市");*/ //二维数组 var cities = [ ["杭州市","绍兴市","温州市","义乌市","嘉兴市"], ["南京市","苏州市","扬州市","无锡市"], ["武汉市","襄阳市","荆州市","宜昌市","恩施"], ["石家庄市","唐山市","保定市","邢台市","廊坊市"], ["长春市","吉林市","四平市","延边市"] ]; var $city = $("#city"); //获取代表省份的下拉列表 $("#province").change(function(){ // alert(this.value); // alert($(this).val()); //使用JQ方式 $city.get(0).options.length = 1; var val = this.value; $.each(cities, function(i, n) { if(val == i){ //判断选择的位置 $.each(n, function(j, m) { // alert(j + " " + m); $city.append("<option>" + m + "</option>"); }); } }); }); }); </script>
JQ处理下拉列表的左右选择
// 传统的JS的方式进行实现:
window.onload=function(){
// 添加到右侧:
document.getElementById("addRight").onclick = function(){
// 获得左侧的下拉列表
var selectLeft = document.getElementById("selectLeft");
// 遍历左侧列表中的所有的option元素.
for(var i = selectLeft.options.length - 1;i>=0;i--){
// 判断该元素是否被选中
if(selectLeft.options[i].selected == true){
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
}
}
// 全部到右侧:
document.getElementById("addAll").onclick = function(){
// 获得左侧的下拉列表
var selectLeft = document.getElementById("selectLeft");
// 遍历左侧列表中的所有的option元素.
for(var i = selectLeft.options.length - 1;i>=0;i--){
document.getElementById("selectRight").appendChild(selectLeft.options[i]);
}
}
}
// 使用JQ完成下拉列表左右选择:
$(function(){
// 添加左侧选中的元素到右侧
$("#addRight").click(function(){
// 获得左侧被选中的option元素:
$("#selectLeft option:selected").appendTo("#selectRight");
});
// 添加所有到右侧
$("#addAll").click(function(){
// 获得左侧被选中的option元素:
$("#selectLeft option").appendTo("#selectRight");
});
// 移除右侧被选中元素到左侧:
$("#removeLeft").click(function(){
$("#selectRight option:selected").appendTo("#selectLeft");
});
// 移除右侧被选中元素到左侧:
$("#removeAll").click(function(){
$("#selectRight option").appendTo("#selectLeft");
});
// 双击左侧的的某个元素，移动到右侧:
$("#selectLeft").dblclick(function(){
$("option:selected",this).appendTo("#selectRight");
});
// 双击左侧的的某个元素，移动到右侧:
$("#selectRight").dblclick(function(){
$("option:selected",this).appendTo("#selectLeft");
});
});
JQ完成表单校验
JQuery的查找
* find();
* parent();
* children();
JQuery的事件处理
* trigger和triggerHandler区别：
trigger 这个函数会导致浏览器默认的同名函数的执行。如果用 trigger() 触发一个 ‘submit’ 会导致浏览器提交表单。triggerHandler 不会触发默认的同名函数，只触发JQuery对象集合中第一个元素的事件处理函数。
// 表单校验的操作 $(function(){ // 步骤一：为必填项添加一个 *. $("form input.required").each(function(){ // 获得他的父元素： $(this).parent().append("<b class='high'> *</b>"); }); // 步骤二：获得所有的输入项,为输入项添加一个blur事件. $("form input").blur(function(){ // 获得该元素的父元素： var $parent = $(this).parent(); // 将原有的信息清除掉. $parent.find(".formtips").remove(); // 确定点击的输入项是谁? if($(this).is("#username")){ // 判断用户名是否为空: if(this.value == ""){ // 向文本框后添加一个错误提示. $parent.append("<span class='formtips onError'>用户名不能为空</span>"); }else{ // 向文本框后添加一个正确提示. $parent.append("<span class='formtips onSuccess'>用户名输入正确</span>"); } } if($(this).is("#password")){ // 判断用户名是否为空: if(this.value == ""){ // 向文本框后添加一个错误提示. $parent.append("<span class='formtips onError'>密码不能为空</span>"); }else{ // 向文本框后添加一个正确提示. $parent.append("<span class='formtips onSuccess'>密码输入正确</span>"); } } }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); }); // 为表单添加一个submit事件. $("form").submit(function(){ // 执行表单中blur事件. $("form :input").trigger("blur"); // 获得错误信息的长度. var errorLength = $(".onError").length; if(errorLength > 0){ return false; } }); });
JQuery的ready()加载
BootStrap概述
什么是BootStrap
Bootstrap，来自
Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web
开发更加快捷。它是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
BootStrap可以在那些地方使用:
BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.
BootStrap的使用:
http://www.bootcss.com
BootStrap的全局CSS的容器和栅格
BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.
布局容器：
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
使用.row样式定义栅格的行
定义列:.col-lg-n .col-md-n .col-sm-n .col-xs-n
引入BootStrap
引入BootStrap步骤:
选中当前工程-->点击右键-->导入-->常规下面的文件系统
引入文件
<!-- 引入BootStrap的CSS -->
<link rel="stylesheet" href="../../css/bootstrap.min.css" />
<link rel="stylesheet" href="../../css/bootstrap-theme.min.css" />
<!-- 引入JS-->
<script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="../../js/bootstrap.min.js" ></script>
添加一个<meta>标签
<!-- 根据设备宽度，调整缩放比例 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
BootStrap 栅格案例
<html> <head> <meta charset="utf-8"> <!-- 根据设备宽度，调整缩放比例 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BootStrap的栅格系统</title> <!-- 引入BootStrap的CSS --> <link rel="stylesheet" href="../../css/bootstrap.min.css" /> <link rel="stylesheet" href="../../css/bootstrap-theme.min.css" /> <!-- 引入JS--> <script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="../../js/bootstrap.min.js" ></script> <style> div{ border: 1px solid gray; } </style> </head> <body> <!--<div class="container"> <div class="col-md-6">111</div> <div class="col-md-2">111</div> <div class="col-md-2">111</div> <div class="col-md-2">111</div> <div class="col-md-8"> <div class="row"> <div class="col-md-3">222</div> <div class="col-md-3">222</div> <div class="col-md-3">222</div> <div class="col-md-3">222</div> </div> </div> <div class="col-md-2">111</div> <div class="col-md-1">111</div> <div class="col-md-1">111</div> </div>--> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <h1>关于我们</h1> <p>关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们</p> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h1>友情链接</h1> <p>关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们</p> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h1>社会动态</h1> <p>关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们</p> </div> <div class="col-md-3 col-sm-6 col-xs-12 "> <h1>人间冷暖</h1> <p>关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们</p> </div> <div class="col-md-3 col-sm-6 hidden-xs "> <h1>手机端消失</h1> <p>关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们</p> </div> </div> </div> </body> </html>
BootStrap的表单及按钮
<html> <head> <meta charset="utf-8"> <!-- 根据设备宽度，调整缩放比例 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!-- 引入BootStrap的CSS --> <link rel="stylesheet" href="../../css/bootstrap.min.css" /> <link rel="stylesheet" href="../../css/bootstrap-theme.min.css" /> <!-- 引入JS--> <script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="../../js/bootstrap.min.js" ></script> </head> <body> <form > <table border="0" width="500" align="center"> <tr> <td>用户名</td> <td><input type="text" name="username" class="form-control"></td> </tr> </table> </form> </body> </html>
BootStrap的组件
<html> <head> <meta charset="utf-8"> <!-- 根据设备宽度，调整缩放比例 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!-- 引入BootStrap的CSS --> <link rel="stylesheet" href="../css/bootstrap.min.css" /> <link rel="stylesheet" href="../css/bootstrap-theme.min.css" /> <!-- 引入JS--> <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script> <script type="text/javascript" src="../js/bootstrap.min.js" ></script> </head> <body> <div class="container-fluid"> <div class="row"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="../img/logo2.png" height="35"/></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Java <span class="sr-only">(current)</span></a></li> <li><a href="#">C++</a></li> <li><a href="#">IOS</a></li> <li><a href="#">UI</a></li> <li><a href="#">c#</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">go</a></li> <li><a href="#">PHP</a></li> <li class="disabled"><a href="#">.NET</a></li> <li role="separator" class="divider"></li> <li><a href="#">Python</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <!--<ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <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> </li> </ul>--> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> </div> </body> </html>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="../img/bartlesvillecf.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/okwu-athletics.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/okwu.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/emancipation.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>