数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学Bootstrap 中响应式视频或幻灯片嵌入示例
Bootstrap 是一个免费的开源框架，也是最著名的 HTML、CSS 和 Javascript 框架之一。它用于用户界面和主题，创建用户在网站或应用程序中看到的内容，它在客户端而不是服务器端使用。
响应式 Web 应用程序会自动适应各种屏幕尺寸。它用于创建响应式移动优先的 Web 应用程序和网站；移动优先指的是先为较小的显示器进行设计，然后再扩展到较大的显示器。因此，您无需担心您的应用程序在不同的设备或不同的屏幕尺寸下无法正常工作。
在 Bootstrap 中，我们有一个名为“embed-responsive”的类用于创建嵌入。书写规则直接应用于父类的元素，即<iframe>、<embed>、<video> 和 <object> 元素。
示例
响应式视频嵌入程序
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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>
结论
在本教程中，我们讨论了 Bootstrap 的定义以及如何在前端开发中使用它来创建响应式嵌入，以使应用程序与不同的屏幕尺寸兼容。我们还查看了一个在 Bootstrap 中创建响应式嵌入的示例，其中我们讨论了 Bootstrap 类“embed-responsive”。我们希望您觉得本教程有所帮助。
更新于：2021年11月26日
453 次查看
广告