mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-30 15:24:08 +03:00
Code Activity

move responsive embed to utilities docs, update the nav to dedupe things

Browse Source
This commit is contained in:
Mark Otto
2015-04-17 21:07:09 -07:00
parent 80239a3da4
commit 81fb03406e
3 changed files with 29 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/responsive-embed.md
-30
View File
@@ -1,30 +0,0 @@
---
layout: page
title: Responsive embed
---
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
{% example html %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
{% endexample %}
Aspect ratios can be customized. There are two available in Bootstrap, 16x9 and 4x3 (two of the most common for video).
{% highlight html %}
<!-- 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>
{% endhighlight %}
docs/components/utilities.md
+28
View File
@@ -221,3 +221,31 @@ Utilize the `.text-hide` class or mixin to help replace an element's text conten
@include text-hide;
}
{% endhighlight %}
### Responsive embeds
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
{% example html %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
{% endexample %}
Aspect ratios can be customized. There are two available in Bootstrap, 16x9 and 4x3 (two of the most common for video).
{% highlight html %}
<!-- 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>
{% endhighlight %}