<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="yy" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#yy" data-slide-to="0" class="active"></li>
<li data-target="#yy" data-slide-to="1"></li>
<li data-target="#yy" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img2.baidu.com/it/u=2553588069,3529009468&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" >
<div class="carousel-caption">
<h3>猫和老鼠</h3>
</div>
</div>
<div class="carousel-item">
<img src="https://img1.baidu.com/it/u=433516993,2979929181&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" >
<div class="carousel-caption">
<h3>猫和老鼠</h3>
</div>
</div>
<div class="carousel-item">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnetdisk.moyublog.com%2Ffree_wallpapers_files%2Frrumjgozzd1.jpg&refer=http%3A%2F%2Fnetdisk.moyublog.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673602368&t=4ba60961db66eb4254d30b46d344f7a7">
<div class="carousel-caption">
<h3>猫和老鼠</h3>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#yy" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#yy" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<a class="navbar-brand" href="#">首页</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="2.html">小问卷</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
其他角色
</a>
<div class="dropdown-menu">
<a class="dropdown-item-text" href="https://baike.baidu.com/item/%E6%B3%B0%E8%8F%B2/12641838?fromModule=lemma_inlink">泰菲</a>
<a class="dropdown-item-text" href="https://baike.baidu.com/item/%E5%9B%BE%E5%A4%9A%E7%9B%96%E6%B4%9B?fromModule=lemma_inlink">图多盖洛</a>
<a class="dropdown-item-text" href="https://baike.baidu.com/item/%E8%8E%B1%E7%89%B9%E5%AE%81?fromModule=lemma_inlink">莱特宁</a>
<a class="dropdown-item-text" href="https://baike.baidu.com/item/%E5%B8%83%E5%A5%87/12632271?fromModule=lemma_inlink">布奇</a>
<a class="dropdown-item-text" href="https://baike.baidu.com/item/%E6%89%98%E6%99%AE%E6%96%AF/12632241?fromModule=lemma_inlink">托普斯</a>
</div>
</li>
</ul>
<button type="button" class="btn " data-toggle="modal" data-target="#myModal">
动画片段
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>小片段<span class="badge badge-secondary">New</span></h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<a href="https://www.bilibili.com/video/av755031220/?vd_source=95a89c8795c0260c497ef9c6d8e5e8c9">【童年记忆】猫和老鼠经典片段剪辑-Tom And Jerry</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</nav>
<div class="container mt-3">
<div class="media border p-3">
<div class="media-body">
<h1 ><strong>猫和老鼠</strong></h1>
<p>《猫和老鼠》（Tom and Jerry）是米高梅电影公司于1939年制作的一部长篇喜剧家庭动画，
该片由威廉·汉纳、约瑟夫·巴伯拉编写，弗雷德·昆比制作，首部剧集《甜蜜的家》于1940年2月10日在美国首播。
《猫和老鼠》以闹剧为特色，描绘了一对水火不容的冤家：汤姆和杰瑞猫鼠之间的战争，
片中的汤姆经常使用狡诈的诡计来对付杰瑞，而杰瑞则时常利用汤姆诡计中的漏洞逃脱他的迫害并给予报复 。</p>
</div>
<img src="https://img2.baidu.com/it/u=796411772,3600409902&fm=253&fmt=auto&app=138&f=JPEG?w=250&h=350" alt="John Doe"style="width:200px;">
</div>
</div>
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>没用!</strong> 点叉叉！虽然没用但是可以点。
</div>
</div>
</div>
</div>
<br />
<div class="jumbotron jumbotron-fluid">
<div class="container">
<p class="lead">我觉得杰瑞更厉害</p>
<br>
<strong>汤姆</strong>
<div class="progress">
<div class="progress-bar bg-dark progress-bar-striped" style="width:60%"></div>
</div>
<br>
<strong>杰瑞</strong>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
</div>
</div>
<br />
<div class="container">
<a href="#demo" class="btn btn-primary" data-toggle="collapse">获奖记录</a>
<div id="demo" class="collapse">
<strong> 获奖记录</strong>
<img src="图片.png" />
</div>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
<a href="#" title="yy" data-toggle="popover" data-trigger="hover" data-content="啥也没有">来啊</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
bootstrap作业-计算机2101余晓泉.zip
需积分: 0 130 浏览量
2022-12-16
14:16:41
上传
评论
收藏 2.86MB ZIP 举报
bootstrap作业-计算机2101余晓泉.zip （9个子文件） 
bootstrap作业-计算机2101余晓泉 源代码 
2.html 2KB
图片.png 110KB index.html 6KB 日记和总结 日记 
A4F5D74322E496A220608E1DFAA48007.jpg 523KB 18EA2916DA86712B2D5E25E9349BAC51.jpg 425KB A77D29508EE04C2242816AAEB1DF9FF8.jpg 474KB D88B7413F49D5384EB5C36F967A42121.jpg 450KB 总结 5ABD6F264D376554A00F5248E0BCC61F.jpg 529KB B12C6761FA9888815E48C573D44A1EA4.jpg 449KB资源评论
