前端开发(最终篇)
前端开发(最终篇)
命名规则
原生js代码查找时，绑定标签的变量名推荐使用 'xxxEle'命名格式
jQuery在进行上述操作时，推荐使用 '$xxxEle'命名
因为两个对象虽然都是绑定了标签，但是对象本身是不一样的
原生js就是标签本身，jQuery是一个数组
jQuery数组[0]才是标签本身，所以区别命名以却分不同对象
jQuery操作标签
1.class操作
jQuery的class操作和DOM的class操作，功能一样，但是语法相对来说显得非常简单
jQuery和DOM操作标签比较
| jQuery | DOM | 功能 |
|---|---|---|
| addClass() | classList.add() | 添加类 |
| removeClass() | classList.remove() | 删除类 |
| hasClass() | classList.contains() | 判断类中是否有该值 |
| toggleClass() | classList.toggle() | 有则删除，无则添加 |
2.样式操作
jQuery:
$标签对象.css('样式名','样式值')
eg：
$divEle.css('background-color','red')
DOM:
标签对象.style.样式名 = '样式值'
eg：
divEle.style.background-color = 'red'
3.位置操作
'''
jQuery不可以直接使用window，因为window是js原生标签，需先转换成jQuery标签，转换公式：
jQuery>js原生:jQuery对象[0]
js原生>jQuery:$(js原生对象)
'''
$(window).scollTop() 获取右侧滚动条距离顶端偏移量
$(window).scollLeft() 获取下方滚动条距离左端偏移量
4.文本值操作
| jQuery | DOM | 功能 |
|---|---|---|
| text() | innerText | 输入，获取标签的内容 |
| html() | innerHTML | 输入，获取标签内容和标签类型 |
| val() | value | 输入，获取标签值 |
| 转成js原生调用files | files | 获取文件类型 |
括号内写了值就是设置，不写就是获取
5.属性操作
# 方法
attr() 获取属性值
removeAttr() 移除属性值
eg:
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个
$('div').attr({'name':'jason','pwd':123}) # 批量设置多个
$('div').removeAttr('class') # 批量移除
'''除第一个外，其他的都是批量操作'''
"""
获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()
prop('checked') 结果是布尔值
prop('checked',false) 动态设置
"""
6.文档处理
# 内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
# 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
# 清空内容
$('body').empty()
7.事件操作
# js绑定事件
标签对象.事件名 = 触发效果
标签内写:事件名 = '触发效果'
eg：
divEle.onClick = function(){alert('点我干嘛')}
<div onClick = 'click()'></div>
<script>
function click(){
alert('点我干嘛')
}
</script>
# jQuery绑定事件
jQuery对象.事件名(触发效果)
jQuery对象.on('事件名',触发效果)
eg:
divEle.click(function(){alert('点我干嘛')})
divEle.on('click',function(){alert('点我干嘛')})
# 克隆操作
<button id="d1">是兄弟就来砍我!!!</button>
<script>
$('#d1').click(function () {
// $('body').append($(this).clone()) // 仅克隆标签
$('body').append($(this).clone(true)) // 克隆标签和事件
})
</script>
8.悬浮事件
'''悬浮事件用来监听鼠标移动到标签上和移走的时间'''
eg:
$('p').hover(function () {alert(123)})
'''此方法会触发两次,鼠标移上来和移走各处发一次'''
# 内部写两个方法，中间逗号隔开，系统默认移来执行第一个，移走执行第二个
$('p').hover(
function () {alert('移上来了')},
function () {alert('移走了')}
)
9.值监听事件
'''用来监听值的变换'''
eg:
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val()) //每输一个值输出一次
})
</script>
10.组织后续事件
"""
如果给已经有事件的标签绑定事件 那么会依次执行
如果想要取消后续时间的执行 可以使用两种方式阻止
"""
1.方式1(推荐使用)
$('#d1').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
2.方式2(自带关键字)
$('#d1').click(function (e) {
alert(123)
e.preventDefault()
})
11.事件冒泡
"""
在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象
"""
方式1
return false
方式2
e.stopPropagation()
12.事件委托
"""
针对动态创建的标签 提前写好的事件默认是无法生效的
这使我们可以通过事件委托，将事件和标签选择器绑定，从而实现动态标签生效的目的
"""
$('body').on('事件类型','选择器',function(){})
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
13.动画效果
hide
show
slideUp
slideDown
fadeIn
fadeOut
animate
| 方法 | 效果 |
|---|---|
| hide(时间) | 标签从右下角逐渐消失 |
| show(时间) | 标签从左上角逐渐出现 |
| slideUp(时间) | 标签从下往上收回 |
| slideDown(时间) | 标签从上往下展开 |
| fadeIn(时间) | 规定时间内淡入 |
| fadeOut(时间) | 规定时间内淡出 |
| animate（样式） | 自定义动画 |
前端框架
# bootstrap框架
内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可
# bootstrap版本
推荐使用v3版本
# 基本使用
必须先导入后使用
1.本地导入
2.cdn导入
bootcdn
bootstrap需要使用jQuery来实现动态效果
# 文件组成
bootstrap需要导入两个文件
一个是css文件
一个是js文件
"""使用前端框架 几乎不需要自己写css 只需要写class即可"""
布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="background-color: red;height: 300px"></div>
<div class="container-fluid" style="background-color: red;height: 300px"></div>
</body>
</html>
效果展示
栅格系统
'''
bootstrap帮我们把页面均匀横向分成了12等份，需要几份类参数里面可以自定义
'''
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份(电脑屏幕),n最大为12
# 栅格参数可以做到响应式布局xs sm md lg...
'''同一行里，最多可以分成12份，我们在取用的时候要算好，不能超过12，超过了会顺延到下一行会导致页面错乱'''
如果一行十二份用不完 可以调整位置
col-md-offset-3
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="background-color: red;height: 300px">
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
<div class="col-md-1" style="border: 5px solid black;height: 300px"></div>
</div>
</body>
</html>
效果展示
表格样式
# 表格样式
class="table table-hover table-striped table-bordered"
# 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr class="active">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>刘知兵</td>
<td>1500</td>
<td>男</td>
</tr>
<tr class="warning">
<td>张窟窿</td>
<td>1500</td>
<td>男</td>
</tr>
<tr class="info">
<td>关傲天</td>
<td>1500</td>
<td>男</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
效果展示
表单样式
.pull-left 左浮
.pull-right 右浮
class='form-control'
针对radio和checkbox不能加!!!
加了会变得特别大
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<form action="">
<p>账号:<input type="text" name="username" class="form-control"></p> <!--text 普通单行文本框,name 给获得的数据取的名字-->
<p>密码:<input type="text" name="password" class="form-control"></p>
<p>性别:
男:<input type="radio" name="sex" value="male" checked> <!--radio 单选框，checked 默认选择 value，按钮值-->
女:<input type="radio" name="sex" value="female">
</p>
<p>爱好:
游戏:<input type="checkbox" name="hobby" value="game"> <!--checkbox 多选框-->
音乐:<input type="checkbox" name="hobby" value="music">
睡觉:<input type="checkbox" name="hobby" value="sleep">
</p>
<p>生日:<input type="date" name="birthday" class="form-control"></p> <!--date 时间选择器-->
<p>邮箱:<input type="email" name="email" class="form-control"></p> <!--email 邮箱过滤-->
<p>个人简介:<textarea name="grjj" cols="30" rows="10" class="form-control"></textarea></p> <!--textarea 多行文本框 cols长 rows宽-->
<p>单个文件:<input type="file" name="file" class="form-control"> </p> <!-- file 文件输入 multiple 多个文件-->
<p>多个文件: <input type="file" multiple name="more_file" class="form-control"></p>
<p>籍贯:<select name="addr" class="form-control"> <!--select 下拉框-->
<option value="bj">北京</option> <!--option 下拉框的每个元素-->
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select></p>
<p><input type="submit" value="点我提交" class="form-control"></p> <!--submit 提交按钮-->
<button class="form-control">点我也可以提交</button> <!--button 按钮 也可提交-->
<p><input type="reset" value="清空" class="form-control"></p> <!--reset 清空输入按钮-->
<p><input type="button" value="普通按钮" class="form-control"></p> <!--button 普通按钮-->
</form>
</div>
</body>
</html>
效果展示
按钮与图片
# 按钮样式
class = 'btn'
# 按钮颜色
class = 'btn-info'
class = 'btn-danger'
class = 'btn-warning'
class = 'btn-primary'
class = 'btn-success'
# 按钮尺寸
class = 'btn-sm' # 小号按钮
class = 'btn-lg' # 大号按钮
class = 'btn-block' # 占整行
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div>
<button class="btn btn-info">点我试试</button>
<button class="btn btn-danger">点我试试</button>
<button class="btn btn-warning">点我试试</button>
<button class="btn btn-primary">点我试试</button>
<button class="btn btn-success">点我试试</button>
</div>
<div>
<button class="btn-sm">点我试试</button>
<button class="btn-lg">点我试试</button>
<button class="btn-block">点我试试</button>
</div>
</div>
</body>
</html>
效果展示
其他样式
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default">
<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>
<form class="navbar-form navbar-left">
<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 class="container">
<div>
<h1><span class="glyphicon glyphicon-music"></span>来点音乐</h1>
</div>
<div class="jumbotron">
<h1>美女荷官,在线发牌!</h1>
<p>快来加入</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
效果展示
练习
1.回到顶部案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
#back-top{
background-color: white;
width: 100px;
height: 100px;
position: fixed;
right: 0;
bottom: 100px;
text-align: center;
line-height: 50px;
display: none;
}
</style>
</head>
<body>
<div style="height: 2000px;background-color: red">
<button id="back-top">回到顶部</button>
</div>
<script>
$(window).scroll(function (){
if ($(window).scrollTop()>100){
$('#back-top').css('display','block')
}else {
$('#back-top').css('display','none')
}
})
$('#back-top').click(function (){
document.body.scrollTop = document.documentElement.scrollTop = 0
})
</script>
</body>
</html>
2.全选功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<p>爱好:
游戏:<input type="checkbox" name="hobby" value="game"> <!--checkbox 多选框-->
音乐:<input type="checkbox" name="hobby" value="music">
睡觉:<input type="checkbox" name="hobby" value="sleep">
全选:<input type="checkbox" name="hobby" value="all" id="all">
</p>
</div>
<script>
$('#all').click(function (){
if ($('#all').is(':checked') == true){
$('input').prop('checked',true)
}
// alert('dadas')
})
</script>
</body>
</html>
3.删除单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘知兵</td>
<td>1500</td>
<td>男</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>张窟窿</td>
<td>1500</td>
<td>男</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>关傲天</td>
<td>1500</td>
<td>男</td>
<td><button>删除</button></td>
</tr>
</tbody>
</table>
<script>
$('button').click(function () {
var index = $(this).index()
$('tbody tr:eq('+index+')').remove()
})
</script>
</body>
</html>
4.使用bootstrap搭建一个界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default">
<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>
<form class="navbar-form navbar-left">
<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 class="container">
<div class="jumbotron">
<h1>高清妹子头像</h1>
<p>免费下载</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
<div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://img2.baidu.com/it/u=535790725,1148347184&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-8">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>女</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
效果展示
浙公网安备 33010602011771号