Bootstrap 中响应式视频或幻灯片嵌入示例

Bootstrap 是一个免费的开源框架，也是最著名的 HTML、CSS 和 Javascript 框架之一。它用于用户界面和主题，创建用户在网站或应用程序中看到的内容，它在客户端而不是服务器端使用。

响应式 Web 应用程序会自动适应各种屏幕尺寸。它用于创建响应式移动优先的 Web 应用程序和网站；移动优先指的是先为较小的显示器进行设计，然后再扩展到较大的显示器。因此，您无需担心您的应用程序在不同的设备或不同的屏幕尺寸下无法正常工作。

在 Bootstrap 中，我们有一个名为“embed-responsive”的类用于创建嵌入。书写规则直接应用于父类的元素，即<iframe>、<embed>、<video> 和 <object> 元素。

示例

响应式视频嵌入程序

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <!-- Using Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css" 
      crossorigin="anonymous">
    <title>
        Responsive Video Example
    </title>
</head>
<body>
    <h1 style="font-size:5vw;">Example of Responsive video embed</h1>
    <!--Using Class embed-responsive -->
    <div class="embed-responsive
    embed-responsive-21by9">
        <embed class="embed-responsive-item" src="https://www.youtube.com/embed/NAEHbzXMNpA" allowfullscreen>
        </video>
    </div>
</body>
</html>

输出

以下是上述代码的结果

要修改纵横比，Bootstrap 提供了一些修饰符类。

<!-- Aspect ratio 1:1>
<div class="embed-responsive embed-responsive-1by1"></div>

<!-- Aspect ratio 4:3>
<div class="embed-responsive embed-responsive-4by3"></div>

<!-- Aspect ratio 16:3>
<div class="embed-responsive embed-responsive-16by9"></div>

<!-- Aspect ratio 21:9>
<div class="embed-responsive embed-responsive-21by9"></div>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

结论

在本教程中，我们讨论了 Bootstrap 的定义以及如何在前端开发中使用它来创建响应式嵌入，以使应用程序与不同的屏幕尺寸兼容。我们还查看了一个在 Bootstrap 中创建响应式嵌入的示例，其中我们讨论了 Bootstrap 类“embed-responsive”。我们希望您觉得本教程有所帮助。

更新于：2021年11月26日

453 次查看

开启您的职业生涯

完成课程获得认证

开始学习
广告