Skip to content

B
bootstrap
Commit 705ff7f2 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Moving the embed to it's own CSS file, moving the docs to the Components page... 

Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs
parent 12c619f5
Expand all Show whitespace changes
Inline Side-by-side
Showing with 125 additions and 112 deletions
dist/css/bootstrap-rtl.css
View file @ 705ff7f2
......@@ -6344,6 +6344,35 @@ a.list-group-item-danger.active:focus {
border-bottom-color: #ebccd1;
}
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
padding-bottom: 75%;
}
.well {
min-height: 20px;
padding: 19px;
......@@ -7085,34 +7114,6 @@ button.close {
position: fixed;
}
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.embed-responsive.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
padding-bottom: 75%;
}
@-ms-viewport {
width: device-width;
}
......
dist/css/bootstrap-rtl.min.css
View file @ 705ff7f2
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/bootstrap.css
View file @ 705ff7f2
......@@ -5104,6 +5104,31 @@ a.list-group-item-danger.active:focus {
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #ebccd1;
}
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
padding-bottom: 75%;
}
.well {
min-height: 20px;
padding: 19px;
......@@ -5742,30 +5767,6 @@ button.close {
.affix {
position: fixed;
}
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.embed-responsive.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
padding-bottom: 75%;
}
@-ms-viewport {
width: device-width;
}
......
dist/css/bootstrap.css.map
View file @ 705ff7f2
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ 705ff7f2
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/_includes/nav-components.html
View file @ 705ff7f2
......@@ -138,4 +138,5 @@
<li><a href="#panels-list-group">With list groups</a>
</ul>
</li>
<li><a href="#responsive-embed">Responsive embed</a></li>
<li><a href="#wells">Wells</a></li>
docs/_includes/nav-css.html
View file @ 705ff7f2
......@@ -103,7 +103,6 @@
<li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
<li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
<li><a href="#helper-classes-image-replacement">Image replacement</a></li>
<li><a href="#helper-classes-embeds-responsive">Embeds responsive</a></li>
</ul>
</li>
<li>
......
docs/assets/css/docs.css
View file @ 705ff7f2
......@@ -1212,7 +1212,7 @@ h1[id] {
*/
.bs-glyphicons {
margin: 0 -19px 20px -16px;
margin: 0 -10px 20px;
overflow: hidden;
}
.bs-glyphicons-list {
......
docs/assets/css/docs.min.css
View file @ 705ff7f2
This diff is collapsed.
docs/assets/js/customize.min.js
View file @ 705ff7f2
This diff is collapsed.
docs/components.html
View file @ 705ff7f2
......@@ -3025,6 +3025,34 @@ body { padding-bottom: 70px; }
<!-- Responsive embeds
================================================== -->
<div class="bs-docs-section">
<h1 id="responsive-embed" class="page-header">Responsive embed</h1>
<p>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.</p>
<p>Rules are directly apply to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code> and <code>&lt;object&gt;</code> elements, optionally use of an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
<p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code>&lt;iframe&gt;</code>s as we override that for you.</p>
<div class="bs-example">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>
{% 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 %}
</div>
<!-- Wells
================================================== -->
<div class="bs-docs-section">
......
docs/css.html
View file @ 705ff7f2
......@@ -2570,22 +2570,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
.heading {
.text-hide();
}
{% endhighlight %}
<h3 id="helper-classes-embeds-responsive">Embeds responsive</h3>
<p>Allows browsers to determine videos or slideshow dimensions based on the width of their containing block to create an intrinsic ratio that will properly scale on any device.</p>
<p>Rules are directly apply to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code> and <code>&lt;object&gt;</code> elements, optionally use of an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
{% 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 %}
</div>
......
docs/dist/css/bootstrap-rtl.min.css
View file @ 705ff7f2
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/dist/css/bootstrap.css.map
View file @ 705ff7f2
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ 705ff7f2
This source diff could not be displayed because it is too large. You can view the blob instead.
less/bootstrap.less
View file @ 705ff7f2
......@@ -35,6 +35,7 @@
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";
......
less/responsive-embed.less 0 → 100644
View file @ 705ff7f2
// Embeds responsive
//
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.embed-responsive-item,
iframe,
embed,
object {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
// Modifier class for 16:9 aspect ratio
&.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
// Modifier class for 4:3 aspect ratio
&.embed-responsive-4by3 {
padding-bottom: 75%;
}
}
less/utilities.less
View file @ 705ff7f2
......@@ -54,39 +54,3 @@
.affix {
position: fixed;
}
// Embeds responsive
// -------------------------
// Credit: Nicolas Gallagher
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.embed-responsive-item,
iframe,
embed,
object {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
}
// Modifier class for 16:9 aspect ratio
&.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
// Modifier class for 4:3 aspect ratio
&.embed-responsive-4by3 {
padding-bottom: 75%;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment