Bootstrap3实用教程
3.20 响应式内嵌元素
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

导航

导航条

面包屑导航

分页导航

标签

徽章

巨幕

页头

缩略图

警告框

进度条

媒体对象

列表组

面板

响应式内嵌元素

想让你的<iframe><embed><video><object>等内嵌元素具有响应式特性吗?这也很简单。只需将你的内嵌元素放入一个.embed-responsive 容器中,并指定一个屏幕比例(16:9,或4:3)即可,Bootstrap根据被嵌入内容的外部容器宽度,自动创建一个固定的比例,从而让浏览器自动确定视频或 slideshow 的尺寸,并能在各种设备上进行缩放。

如果你希望内嵌元素的最终样式与其他属性相匹配,还可以为内嵌元素添加一个的.embed-responsive-item类。如:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

温馨提示:请不需要为<iframe>元素设置frameborder="0"属性,因为Bootstrap已经替你这样做了!

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验