rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Added Medias code and documentation

Browse Source 
Fix for Issue #1711

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: Giuliano Velli <wpbrains@giusi.org>
This commit is contained in:
Giuliano Velli 2012-04-20 17:54:51 +02:00
parent 6506ede632
commit 4fbb400754
6 changed files with 308 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -114,6 +114,18 @@
padding-left: 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 {
position: absolute;
top: 10px;
@ -169,9 +181,9 @@
width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;

51
docs/assets/css/bootstrap.css vendored
View File

@ -3562,6 +3562,57 @@ a.thumbnail:hover {
.thumbnail .caption {
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 {
padding: 1px 4px 2px;
font-size: 10.998px;

160
docs/components.html
View File

@ -101,6 +101,7 @@
<li><a href="#badges">Badges</a></li>
<li><a href="#typography">Typography</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="#progress">Progress bars</a></li>
<li><a href="#misc">Miscellaneous</a></li>
@ -1680,6 +1681,165 @@
<!-- Medias
================================================== -->
<section id="medias">
<div class="page-header">
<h1>Medias <small>Layout tool for media objects</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
================================================== -->
<section id="alerts">

1
less/bootstrap.less vendored
View File

@ -52,6 +52,7 @@
// Components: Misc
@import "thumbnails.less";
@import "media.less";
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";

68
less/media.less Normal file
View File

@ -0,0 +1,68 @@
// 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;
}
}

14
less/responsive.less
View File

@ -106,6 +106,20 @@
padding-left: 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
.modal {