官方文档地址
https://getbootstrap.com/docs/4.4/utilities/embed/
其他文档地址
- http://bs4.vx.link
- https://v4.bootcss.com
- https://getbootstrap.net
嵌入内容元素
embed
iframe
object
video
缩放比率
.embed-responsive-21by9
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-1by1
用法
Step1: 在 嵌入内容元素 的父元素使用上.embed-responsive
类用来应用响应式设计,并且指定一种 缩放比率。
Step2: 嵌入内容元素 中的.embed-responsive-item
类 并非必须,但是官方建议采用它。
iframe
<div class="container">
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="http://bs4.vx.link/index.html?tmpui_page=/pages/utilities"
allowfullscreen></iframe>
</div>
</div>
embed
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<embed class="embed-responsive-item" src="http://bs4.vx.link/index.html?tmpui_page=/pages/utilities"/>
</div>
</div>
object
<div class="container">
<div class="embed-responsive embed-responsive-4by3">
<object class="embed-responsive-item" data="http://bs4.vx.link/index.html?tmpui_page=/pages/utilities"></object>
</div>
</div>
video
<div class="container">
<div class="embed-responsive embed-responsive-1by1">
<video class="embed-responsive-item" controls autoplay>
<source type="video/mp4" src="http://valipl.cp31.ott.cibntv.net/677480f06174871da14656a5c/03000801005DE093AB50A80003E88030C1D16E-4FE2-4439-BFC9-643EED51DBEA.mp4?ccode=0502&duration=1385&expire=18000&psid=34adbb8e627b8a9f9e4922639e594c48&ups_client_netip=78e4c0f8&ups_ts=1575344061&ups_userid=&utid=zCzTEzY43xICASSdNi0oaOPF&vid=XMzI1Mzk2MTc3Ng%3D%3D&vkey=A030f9dec17f83b8b9b7ca6338ec9178d" />
</video>
</div>
</div>
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
<title>05响应式的嵌入内容</title>
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<pre class="pre-scrollable">
embed | iframe | object | video
.embed-responsive
.embed-responsive-21by9
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-1by1
.embed-responsive-item
</pre>
<div class="container">
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="http://bs4.vx.link/index.html?tmpui_page=/pages/utilities"
allowfullscreen></iframe>
</div>
</div>
<hr/>
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<embed class="embed-responsive-item" src="http://bs4.vx.link/index.html?tmpui_page=/pages/utilities"/>
</div>
</div>
<hr/>
<div class="container">
<div class="embed-responsive embed-responsive-4by3">
<object class="embed-responsive-item" data="http://bs4.vx.link/index.html?tmpui_page=/pages/utilities"></object>
</div>
</div>
<hr/>
<div class="container">
<div class="embed-responsive embed-responsive-1by1">
<video class="embed-responsive-item" controls autoplay>
<source type="video/mp4" src="http://valipl.cp31.ott.cibntv.net/677480f06174871da14656a5c/03000801005DE093AB50A80003E88030C1D16E-4FE2-4439-BFC9-643EED51DBEA.mp4?ccode=0502&duration=1385&expire=18000&psid=34adbb8e627b8a9f9e4922639e594c48&ups_client_netip=78e4c0f8&ups_ts=1575344061&ups_userid=&utid=zCzTEzY43xICASSdNi0oaOPF&vid=XMzI1Mzk2MTc3Ng%3D%3D&vkey=A030f9dec17f83b8b9b7ca6338ec9178d" />
</video>
</div>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>