directory search
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
characters

通过创建可在任何设备上缩放的固有比率,根据父级的宽度创建响应式视频或幻灯片嵌入。

关于

规则被直接施加到<iframe><embed><video><object>元件;.embed-responsive-item如果要为其他属性的样式进行匹配,可以使用明确的后代类。

专家提示!你不需要包含frameborder="0"在你的<iframe>s中,因为我们会为你覆盖。

示例

将任何嵌入内容嵌入到具有纵横比<iframe>的父元素中.embed-responsive.embed-responsive-item并非严格要求,但鼓励使用。

<div class="embed-responsive embed-responsive-16by9">  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe></div>

纵横比

宽高比可以使用修饰符类自定义。

<!-- 21:9 aspect ratio --><div class="embed-responsive embed-responsive-21by9">  <iframe class="embed-responsive-item" src="..."></iframe></div><!-- 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><!-- 1:1 aspect ratio --><div class="embed-responsive embed-responsive-1by1">  <iframe class="embed-responsive-item" src="..."></iframe></div>
Previous article: Next article: