上QQ阅读APP看书,第一时间看更新
5.8 嵌入
在页面中通常使用<iframe>、<embed>、<video>、<object>标签来嵌入视频、图像、幻灯片等。在Bootstrap 4中不仅可以使用这些标签,还添加了一些相关的样式类,以便在任意设备上能友好地扩展显示这些内容。
下面通过一个嵌入图片的示例来说明。
首先使用一个div包裹插入标签<iframe>,在div中添加.embed-responsive类和.embed-responsive-16by9类。然后直接使用<iframe>标签的src属性引用本地的一张图片即可。
■ .embed-responsive:实现同比例的收缩。
■ .embed-responsive-16by9:定义16:9的长宽比例。还有.embed-responsive-21by9、.embed-responsive-3by4、.embed-responsive-1by1可以选择。
【例5.24】嵌入示例。
在IE 11浏览器中运行结果如图5-28所示。
图5-28 嵌入效果