Skip to content

B
bootstrap
Commit f5fd5e75 authored by Giuliano Velli's avatar Giuliano Velli
Browse files
Options

Added Medias code and documentation 

Added media.less and edited bootstrap.less and responsive.less to manage media components.

Added a section to the documentation (Media, in components.html) outlining how Medias work. Edited bootstrap.css and bootstrap-responsive.css to add the code for the demos
Signed-off-by: default avatarGiuliano Velli <wpbrains@giusi.org>
parent 6506ede6
Show whitespace changes
Inline Side-by-side
Showing with 308 additions and 2 deletions
docs/assets/css/bootstrap-responsive.css
View file @ f5fd5e75
...@@ -114,6 +114,18 @@ ...@@ -114,6 +114,18 @@
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
.media .pull-left,
.media .pull-right {
float: none;
display: block;
margin-bottom: 10px;
}
.media .pull-left {
margin-right: 0;
}
.media .pull-right {
margin-left: 0;
}
.modal { .modal {
position: absolute; position: absolute;
top: 10px; top: 10px;
......
docs/assets/css/bootstrap.css
View file @ f5fd5e75
...@@ -3562,6 +3562,57 @@ a.thumbnail:hover { ...@@ -3562,6 +3562,57 @@ a.thumbnail:hover {
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;
} }
.media,
.media-body {
overflow: hidden;
*overflow: visible;
zoom: 1;
}
.media {
margin-bottom: 10px;
}
.media .media {
margin-top: 20px;
}
.media .pull-left {
margin-right: 10px;
}
.media .pull-right {
margin-left: 10px;
}
.media .media-object {
display: block;
}
.medias {
margin-top: 20px;
margin-left: 0;
list-style-type: none;
}
.medias .media {
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.medias > .media:last-child {
margin: 0;
border-bottom: none;
}
.medias > .media .media {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.media-box {
margin-bottom: 19px;
padding: 10px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.09);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.label { .label {
padding: 1px 4px 2px; padding: 1px 4px 2px;
font-size: 10.998px; font-size: 10.998px;
......
docs/components.html
View file @ f5fd5e75
...@@ -101,6 +101,7 @@ ...@@ -101,6 +101,7 @@
<li><a href="#badges">Badges</a></li> <li><a href="#badges">Badges</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
<li><a href="#thumbnails">Thumbnails</a></li> <li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#medias">Medias</a></li>
<li><a href="#alerts">Alerts</a></li> <li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li> <li><a href="#progress">Progress bars</a></li>
<li><a href="#misc">Miscellaneous</a></li> <li><a href="#misc">Miscellaneous</a></li>
...@@ -1680,6 +1681,165 @@ ...@@ -1680,6 +1681,165 @@
<!-- Medias
================================================== -->
<section id="medias">
<div class="page-header">
<h1>Medias <small>Layout tools for medias &amp; content</small></h1>
</div>
<div class="row">
<div class="span6">
<h2>Default media</h2>
<p>The default media allow to float a media object (images, video, audio) to the left or right of a content block</p>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
<div class="span6">
<h2>Media list</h2>
<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
<ul class="medias">
<li class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</div>
</div>
</li>
<li class="media">
<a class="pull-right" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="span6">
<h2>Media Box</h2>
<p>Wrap your medias and media lists inside a simple box.</p>
<div class="media-box">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
<ul class="medias media-box">
<li class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</li>
<li class="media">
<a class="pull-right" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</li>
<li class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/64x64"></a>
<div class="media-body">
<h4>This is the title</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</li>
</ul>
</div>
<div class="span6">
<h2>The markup</h2>
<p>The required markup for medias is light and straightforward. Here's a look at the default setup:</p>
<pre class="prettyprint linenums">
&lt;div class="media"&gt;
&lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="http://placehold.it/64x64"&gt;&lt;/a&gt;
&lt;div class="media-body"&gt;
&lt;h4&gt;This is the title&lt;/h4&gt;
&lt;p&gt;Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>The HTML content needed for a media list</p>
<pre class="prettyprint linenums">
&lt;ul class="medias"&gt;
&lt;li class="media"&gt;
&lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="http://placehold.it/64x64"&gt;&lt;/a&gt;
&lt;div class="media-body"&gt;
&lt;h4&gt;This is the title&lt;/h4&gt;
&lt;p&gt;Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>Use a <code>&lt;div&gt;</code> with a class <code>.media-box</code> to wrap your media (works with media lists too) in a styled box.</p>
<pre class="prettyprint linenums">
&lt;div class="media-box"&gt;
&lt;div class="media"&gt;
&lt;a class="pull-left" href="#"&gt;&lt;img class="media-object" src="http://placehold.it/64x64"&gt;&lt;/a&gt;
&lt;div class="media-body"&gt;
&lt;h4&gt;This is the title&lt;/h4&gt;
&lt;p&gt;Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
<!-- Alerts & Messages <!-- Alerts & Messages
================================================== --> ================================================== -->
<section id="alerts"> <section id="alerts">
......
less/bootstrap.less
View file @ f5fd5e75
...@@ -52,6 +52,7 @@ ...@@ -52,6 +52,7 @@
// Components: Misc // Components: Misc
@import "thumbnails.less"; @import "thumbnails.less";
@import "media.less";
@import "labels.less"; @import "labels.less";
@import "badges.less"; @import "badges.less";
@import "progress-bars.less"; @import "progress-bars.less";
......
less/media.less 0 → 100644
View file @ f5fd5e75
// COMMON STYLES
// -------------
.media, .media-body {
overflow:hidden;
*overflow:visible;
zoom:1;
}
.media {
margin-bottom: 10px;
}
.media .media {
margin-top: 20px;
}
.media .pull-left {
margin-right: 10px;
}
.media .pull-right {
margin-left: 10px;
}
.media .media-object {
display: block;
}
// Media list
.medias {
margin-top: 20px;
margin-left: 0;
list-style-type: none;
}
.medias .media {
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.medias > .media:last-child {
margin: 0;
border-bottom: none;
}
.medias > .media .media {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
// Media box
.media-box {
margin-bottom: 19px;
padding: 10px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.09);
.border-radius(4px);
.box-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
}
@media (max-width: 480px) {
.media .pull-left,
.media .pull-right {
float: none;
display: block;
margin-bottom: 10px;
}
.media .pull-left {
margin-right: 0;
}
.media .pull-right {
margin-left: 0;
}
}
\ No newline at end of file
less/responsive.less
View file @ f5fd5e75
...@@ -107,6 +107,20 @@ ...@@ -107,6 +107,20 @@
padding-right: 10px; padding-right: 10px;
} }
// Medias
.media .pull-left,
.media .pull-right {
float: none;
display: block;
margin-bottom: 10px;
}
.media .pull-left {
margin-right: 0;
}
.media .pull-right {
margin-left: 0;
}
// Modals // Modals
.modal { .modal {
position: absolute; position: absolute;
......
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