javascript - 如何让bootstrap 4卡组件全屏?
问题描述
这是我的代码:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
#gg{
display:none;
}
video {
transform: scale(-1, 1);
object-fit: cover;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body class="p-1">
<div class="border-top border-primary container-fluid d-flex flex-column">
<div class="row">
<div class="border-left border-bottom border-primary col-6 h4 p-1 mb-0">
Self View
</div>
<div class="border-left border-bottom border-right border-primary col-6 h4 p-1 mb-0">
Remote View
</div>
</div>
<div class="row">
<div class="border-left border-bottom border-primary col-6 p-1">
<div class="card text-white">
<video id="selfView" autoplay muted class="card-img" style="max-height:25vh;height:auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="align-items-center bg-secondary card-footer d-flex flex-row
h4 justify-content-between mb-0 p-1">
<div class="muteBtn">🔇<span class="elapseTime"></span></div>
<div class="minMaxBtn">⛶</div>
</div>
</div>
</div>
<div class="border-left border-bottom border-primary border-right col-6 p-1">
</div>
</div>
</body>
</html>
我想实现媒体播放器的最大化功能。所以,我想知道如何让卡片组件全屏显示。
我尝试执行以下操作,但不起作用:
- 将 h-100,w-100 类添加到卡片组件
- 将 card-fullscreen 类添加到卡片组件
除此之外,面板组件已从 Bootstrap 4 中删除。因此,我无法使用面板组件。
解决方案
您可以在下面查看类 full_screen。我在按钮上使用简单的 onclick 函数实现您的代码,使其全屏显示,第二次单击它将恢复正常。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
#gg{
display:none;
}
video {
transform: scale(-1, 1);
object-fit: cover;
}
.full_screen {
width: 100%;
position: fixed;
height: 100%;
top: 0;
left: 0;
z-index: 100;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
let clicked = false;
function myFunction() {
let media_card = document.getElementById("media_wrapper");
if (clicked) {
media_card.classList.add("full_screen");
} else {
media_card.classList.remove("full_screen");
}
clicked = !clicked;
}
</script>
</head>
<body class="p-1">
<div class="border-top border-primary container-fluid d-flex flex-column">
<div class="row">
<div class="border-left border-bottom border-primary col-6 h4 p-1 mb-0">
Self View
</div>
<div class="border-left border-bottom border-right border-primary col-6 h4 p-1 mb-0">
Remote View
</div>
</div>
<div class="row">
<div class="border-left border-bottom border-primary col-6 p-1">
<div class="card text-white" id="media_wrapper">
<video id="selfView" autoplay muted class="card-img" style="max-height:25vh;height:auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="align-items-center bg-secondary card-footer d-flex flex-row
h4 justify-content-between mb-0 p-1">
<div id="muteBtn">🔇<span class="elapseTime"></span></div>
<div id="minMaxBtn" onclick="myFunction()">⛶</div>
</div>
</div>
</div>
<div class="border-left border-bottom border-primary border-right col-6 p-1">
</div>
</div>
</div>
</body>
</html>
推荐阅读
- dataframe - 检查一个 Dask 数据帧中的值是否在另一个 Dask 数据帧中
- c# - 如果结果是 MultiBulk,如何从 RedisResult 中检索值
- javascript - 使用 jquery 从值设置模式中的单选按钮
- postgresql - 将 .txt 文件导入到 postgresql
- javascript - 视频 API 未按预期执行 onReady
- ios - SwiftUI 不会显示自定义字体
- postgresql - 如何使用 Hibernate + Dropwizard + Guice 为 DI 和 Spring Data JPA 设置每个请求的事务隔离?
- python - 程序不断失败 bc of list index out of range 错误
- javascript - NodeJS + MySql 嵌套查询
- elasticsearch - 按最新时间戳分组日志,按天