jQuery & Bootstrap
内容摘要
jQuery：http://www.cnblogs.com/liwenzhou/p/8178806.html
Bootstrap:http://www.cnblogs.com/liwenzhou/p/8214637.html
1. 今日内容
jQuery:
1. 创建标签
使用原生DOM的：
document.createElement("tr")
2. 设置标签的内容
.html()
.text()
3. 文档操作
append
appentTo
prepend
prependTo
after
insertAfter
before
insertBefore
4. 常用事件
5. 事件委派（利用事件冒泡 给一个未来的元素 绑定事件）
jQuery绑定时间唯一需要记住的一个方法:
$("...").on("click", function(){....})
$("tbody").on("click", ".delete", function(){....})
2. Bootstrap
http://www.cnblogs.com/liwenzhou/p/8214637.html
https://v3.bootcss.com/
1. 常用样式
栅格系统
1. row表示一行，通常要放在container里面
2. 列必须放在row中，一行被均分成12列
3. 只有列能做row的直接子元素
col-xx-**
xx取值范围：xs sm md lg
**取值范围：1-12
按钮组
输入框组
进度条
面板
... 其他见文档
2. 常用组件
1. 字体图标
https://fontawesome.com/v4.7.0/
https://fontawesome.com/v4.7.0/examples/
2. 模态框
3. 轮播图
3. 练习
1. 修改dashboard
2. adminLTE --> https://adminlte.io/
全选 反选 取消 示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>上周作业讲解</title>
</head>
<body>
<p><input type="checkbox">1</p>
<p><input type="checkbox">2</p>
<p><input type="checkbox">3</p>
<p><input type="checkbox">4</p>
<p><input type="checkbox">5</p>
<button id="selectAll">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#selectAll").click(function () {
// 全选按钮点击后要做的事儿
// 找到所有的checkbox
// $("input[type='checkbox']")
$(":checkbox").prop("checked", true);
});
// 取消按钮
$("#cancel").click(function () {
// 取消按钮点击后要做的事儿
// 找到所有的checkbox
// $("input[type='checkbox']")
$(":checkbox").prop("checked", false);
});
// 反选按钮
$("#reverse").click(function () {
// 点击反选按钮要做的事儿
var $checkboxEles = $(":checkbox");
for (var i=0;i<$checkboxEles.length;i++){
var currentEle = $checkboxEles[i];
if ($(currentEle).prop("checked")){
$(currentEle).prop("checked", false);
}else {
$(currentEle).prop("checked", true);
}
}
// 先把所有选中的找出来，保存到一个变量
// 把没有选中的找出来，保存在一个变量
});
</script>
</body>
</html>
01jQuery样式操作
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery样式操作</title>
<style>
.c1 {
height: 150px;
width: 150px;
border-radius: 50%;
background-color: red;
}
.c2 {
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<button id="b1">开关</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function () {
$(".c1").toggleClass("c2");
})
</script>
</body>
</html>
02文本操作示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文本操作示例</title>
</head>
<body>
<div id="d1">
<p>div中的p标签 <span>p标签中的span标签</span></p>
</div>
<p>性别：
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
</p>
<input type="text" id="i1">
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
03文档处理
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文档处理</title>
</head>
<body>
<button id="b1">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>喊麦</td>
<td>
<button class="delete">删除</button>
<button>编辑</button>
</td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 找到新增按钮
$("#b1").click(function () {
// 生成一条数据 --> tr
var newTrEle = document.createElement("tr");
$(newTrEle).html("<td>2</td> <td>Alex</td> <td>吹牛逼</td> <td><button class='delete'>删除</button> <button>编辑</button></td>");
// 把新创建的tr追加到tbody的最后
$("tbody").append(newTrEle);
});
// 删除按钮绑定事件
// $(".delete").click(function () {
// // 删除按钮当前行数据
// // $(this) 指的是当前被点击的按钮
// $(this).parent().parent().remove();
// });
// $(".delete").on("click", function () {
// // 删除按钮当前行数据
// // $(this) 指的是当前被点击的按钮
// $(this).parent().parent().remove();
// })
// 使用on方法做事件委派
$("tbody").on("click", ".delete", function () {
// this指向的是实际触发事件的元素
// console.log(this);
$(this).parent().parent().remove();
})
</script>
</body>
</html>
04文档操作小示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文档操作小示例</title>
</head>
<body>
<ul id="u1">
<li>111</li>
<li id="li2">222</li>
<li>333</li>
</ul>
<button class="btn">屠龙宝刀，点击就送！</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(".btn").click(function () {
$(this).clone(true).insertAfter($(this));
// $(this).after($(this).clone());
});
</script>
</body>
</html>
05常用事件之键盘按下和抬起
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>键盘事件示例</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">
<script src="jquery-3.3.1.min.js"></script>
<script>
// 全选
$("#b1").on("click", function () {
$(":checkbox").prop("checked", true);
});
// 取消
$("#b2").on("click", function () {
$(":checkbox").prop("checked", false);
});
// 反选
$("#b3").on("click", function () {
$(":checkbox").each(function () {
var flag = $(this).prop("checked");
$(this).prop("checked", !flag);
})
});
// 按住shift键，批量操作
// 定义全局变量
var flag = false;
// 全局事件，监听键盘shift按键是否被按下
$(window).on("keydown", function (e) {
// alert(e.keyCode);
if (e.keyCode === 16){
flag = true;
}
});
// 全局事件,shift按键抬起时将全局变量置为false
$(window).on("keyup", function (e) {
if (e.keyCode === 16){
flag = false;
}
});
// select绑定change事件
$("table select").on("change", function () {
// 是否为批量操作模式
if (flag) {
var selectValue = $(this).val();
// 找到所有被选中的那一行的select，选中指定值
$("input:checked").parent().parent().find("select").val(selectValue);
}
})
</script>
</body>
</html>
06课上批量操作示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>课上批量操作示例</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">
<script src="jquery-3.3.1.min.js"></script>
<script>
var flag = false;
// shift按键按下的时候 把flag 设置 true
$(window).keydown(function (event) {
// e就代表事件本身
if (event.keyCode === 16){
flag = true;
}
});
// shift按键抬起来的时候 把flag设置成 false
$(window).keyup(function (event) {
if (event.keyCode === 16 ){
flag = false;
}
});
// 给 select 绑定 change 示例
$("select").change(function () {
// 判断当前select 这一行的 checkbox有没有被选中
var currentCheckbox = $(this).parent().parent().find(":checkbox").prop("checked");
if (flag && currentCheckbox){
// 只有在批量操作模式下才进行后续操作
// 取到当前select被选中的值
var selectValue = $(this).val();
// 把所有checkbox被选中的那些行的select设置成相同值
// 对多个jQuery对象做相同的操作时，可以直接写，内部帮我们实现循环
$("input[type='checkbox']:checked").parent().parent().find("select").val(selectValue);
}
});
</script>
</body>
</html>
07hover事件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hover事件</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
background-color: #4d4d4d;
height: 50px;
}
.nav ul {
list-style-type: none;
float: right;
}
.nav li {
line-height: 50px;
float: left;
padding: 0 10px;
color: white;
position: relative;
}
.son {
height: 100px;
width: 200px;
background-color: blue;
position: absolute;
top: 50px;
right: 0;
display: none;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.hover .son {
display: block;
}
</style>
</head>
<body>
<div class="nav clearfix">
<ul class="clearfix">
<li>登录</li>
<li>注册</li>
<li>购物车
<p class="son">空空如也~</p>
</li>
</ul>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(".nav li").hover(
function () {
// 鼠标移上去要做的事儿
$(this).addClass("hover");
},
function () {
// 鼠标移出来要做的事儿
$(this).removeClass("hover");
}
)
</script>
</body>
</html>
08实时input值检测
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">
<script src="jquery-3.3.1.min.js"></script>
<script>
/*
* oninput是HTML5的标准事件
* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
* 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
* oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
* 使用jQuery库的话直接使用on同时绑定这两个事件即可。
* */
$("#i1").on("input propertychange", function () {
console.log($(this).val());
})
</script>
</body>
</html>
09阻止后续事件的执行
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>阻止后续事件的执行</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
// alert($("#b1").val());
// 当文档树读完（渲染完）之后触发执行
$(document).ready(function () {
alert($("#b1").val());
})
</script>
</head>
<body>
<form action="">
<p>姓名：
<input id="username" type="text">
</p>
<p>密码：
<input id="pwd" type="password">
</p>
<p>
<input id="b1" type="submit" value="提交">
</p>
</form>
<script>
$("#b1").on("click", function () {
var flag;
// 点击提交按钮，对用户的输入内容做校验，校验通过才提交
if ($("#username").val().length === 0){
// 没有填用户名，不让提交
flag = false;
}
return flag;
})
</script>
</body>
</html>
10jQuery自带动画效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery自带动画效果</title>
</head>
<body>
<img id="i1" width="500" src="./lp.png" alt="">
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
11点赞示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
12each循环示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>each循环示例</title>
<style>
.c1 {
height: 100px;
background-color: red;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
14Bootstrap示例1
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Bootstrap示例1</title>
<style>
.row div {
border: 1px solid black;
border-bottom: 1px solid green;
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row c1">
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-3 col-xs-3"></div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-5 col-xs-5"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-offset-3 col-md-6"></div>
</div>
<p>海燕，在苍茫的大海上，狂风卷积着乌云！</p>
<p class="lead">海燕，在苍茫的大海上，狂风卷积着乌云！</p>
<p class="lead">
<mark>海燕</mark>
，
<small>在苍茫的大海上</small>
，狂风卷积着乌云！
</p>
<b>加粗吗？<i>不约！</i></b>
<p>Alex dashabi</p>
<p class="text-lowercase">Alex dashabi</p>
<p class="text-uppercase">Alex dashabi</p>
<p class="text-capitalize">Alex dashabi</p>
<address>
<strong>老男孩教育, Inc.</strong><br>
北京市昌平区<br>
汇德商厦 402<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Alex</strong><br>
<a href="mailto:#">alex@oldboyedu.com</a>
</address>
<blockquote>
<p>技术的提升只是凉的积累，思想的提升才是指的飞跃。</p>
<footer>老男孩思想</footer>
</blockquote>
<ul class="list-unstyled">
<li>111</li>
<li>222</li>
</ul>
<ul class="list-inline">
<li>111</li>
<li>222</li>
</ul>
按下<kbd>shift</kbd>,点击select即可实现批量操作！
<pre>print("hello world!")</pre>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alex</td>
<td>吹牛逼</td>
</tr>
<tr>
<td>2</td>
<td>Egon</td>
<td>太长</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>Alex</td>
<td>吹牛逼</td>
</tr>
<tr>
<td class="info">2</td>
<td class="success">Egon</td>
<td class="danger">太长</td>
</tr>
<tr>
<td>1</td>
<td>Alex</td>
<td>吹牛逼</td>
</tr>
<tr>
<td>2</td>
<td>Egon</td>
<td>太长</td>
</tr>
<tr>
<td>1</td>
<td>Alex</td>
<td>吹牛逼</td>
</tr>
<tr>
<td>2</td>
<td>Egon</td>
<td>太长</td>
</tr>
</tbody>
</table>
<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>
<div class="form-group has-error">
<label for="inputHelpBlock">用户名</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">用户名必须大于12位，并且只能是字母数字下划线组成。</span>
</div>
</form>
<img src="./lp.png" alt="..." class="img-rounded">
<img src="./lp.png" alt="..." class="img-circle">
<img src="./lp.png" alt="..." class="img-thumbnail">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
15媒体查询简单示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>媒体查询简单示例</title>
<style>
* {
margin: 0;
padding: 0;
}
.c1 {
height: 500px;
width: 600px;
background-color: red;
}
@media screen and (max-width: 400px) {
.c1 {
background-color: green;
}
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
16登录注册示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>登录注册示例</title>
<style>
body {
background-color: #eee;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 100px">
<h1 class="text-center">请登录</h1>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-8">
<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">密码</label>
<div class="col-sm-8">
<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">记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" class="btn btn-primary btn-block">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
17组件示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<span class="glyphicon glyphicon-search" aria-hidden="true" style="color: green"></span>
<span class="glyphicon glyphicon-bitcoin" aria-hidden="true"></span>
<span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
<i class="fa fa-wechat" style="color: green"></i>
<i class="fa fa-weibo"></i>
<i class="fa fa-plus"></i>
<i class="fa fa-camera-retro"></i>
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
<i class="fa fa-camera-retro fa-5x fa-rotate-90"></i>
<i class="fa fa-camera-retro fa-5x fa-rotate-270"></i>
<i class="fa fa-camera-retro fa-5x fa-flip-vertical"></i>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
</div>
<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
<ul id="myTabs" class="nav nav-pills nav-justified" role="tablist">
<li role="presentation" class="">
<a href="#home" role="tab" data-toggle="tab" >商品详情页</a>
</li>
<li role="presentation" class="">
<a href="#profile" role="tab" data-toggle="tab" >主页</a>
</li>
<li role="presentation" class="">
<a href="#aaa" role="tab" data-toggle="tab" >评价页</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade" id="home" aria-labelledby="home-tab">
<p>商品详情页</p>
</div>
<div role="tabpanel" class="tab-pane fade active in" id="profile" aria-labelledby="profile-tab">
<p>主页</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="aaa" aria-labelledby="dropdown1-tab">
<p>评价页</p>
</div>
</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
18导航条示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Title</title>
<style>
body {
padding-top: 70px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#">Brand</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="#">Link <span class="sr-only">(current)</span></a></li>
<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>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<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>
<h1>震惊！你被绿了！<span class="label label-danger">new</span></h1>
<div class="progress">
<div id="p1" class="progress-bar progress-bar-striped active progress-bar-success" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0%
</div>
</div>
<button id="b1">点我开始下线！</button>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="http://www.luffycity.com"></iframe>
</div>
<div style="height: 1000px;background-color: red"></div>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
var n = 0;
var t;
function changeWidth() {
n += 1;
$("#p1").css("width", n+"%").text(n+"%");
if (n >= 100){
// 进度条走完了,删除定时器
clearInterval(t);
t = undefined;
}
}
$("#b1").on("click", function () {
//
if (!t){
t = setInterval(changeWidth, 100);
}
})
</script>
</body>
</html>
19轮播图示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<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="./banner_1.jpg" alt="...">
<div class="carousel-caption">
Bootstrap真简单！
</div>
</div>
<div class="item">
<img src="./banner_2.jpg" alt="...">
<div class="carousel-caption">
Bootstrap好容易！
</div>
</div>
<div class="item">
<img src="./banner_3.jpg" alt="...">
<div class="carousel-caption">
<h1>Bootstrap好神奇！</h1>
</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>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 1000
})
</script>
</body>
</html>
20模态框示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<button data-toggle="modal" data-target="#myModal">点我弹出！</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<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>
</form>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$('#myModal').modal({
backdrop:false,
keyboard: false
})
</script>
</body>
</html>
浙公网安备 33010602011771号
点我返回顶部