From f5fd5e752329d92d3fde2e3f37f3406db62c400b Mon Sep 17 00:00:00 2001 From: Giuliano Velli Date: Fri, 20 Apr 2012 17:54:51 +0200 Subject: 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: Giuliano Velli --- docs/components.html | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 10b2aec20..4f3b0bace 100644 --- a/docs/components.html +++ b/docs/components.html @@ -101,6 +101,7 @@
  • Badges
  • Typography
  • Thumbnails
    • +
  • Medias
  • Alerts
  • Progress bars
  • Miscellaneous
    • @@ -1680,6 +1681,165 @@ + +
    +
    +

    Medias Layout tools for medias & content

    +
    + +
    +
    +

    Default media

    +

    The default media allow to float a media object (images, video, audio) to the left or right of a content block

    +
    + +
    +

    This is the title

    +

    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.

    +
    +
    +
    + +
    +

    This is the title

    +

    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.

    +
    + +
    +

    This is the title

    +

    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.

    +
    +
    +
    +
    +
    +
    +

    Media list

    +

    With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

    +
      +
    • + +
      +

      This is the title

      +

      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.

      +
      + +
      +

      This is the title

      +

      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.

      +
      +
      +
      +
      • +
    • + +
      +

      This is the title

      +

      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.

      +
      +
      • +
    +
    +
    + +
    +
    +

    Media Box

    +

    Wrap your medias and media lists inside a simple box.

    +
    +
    + +
    +

    This is the title

    +

    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.

    +
    + +
    +

    This is the title

    +

    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.

    +
    +
    +
    +
    +
    + + + +
      +
    • + +
      +

      This is the title

      +

      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.

      +
      + +
      +

      This is the title

      +

      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.

      +
      +
      +
      +
      • +
    • + +
      +

      This is the title

      +

      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.

      +
      +
      • +
    • + +
      +

      This is the title

      +

      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.

      +
      +
      • +
    +
    +
    +

    The markup

    +

    The required markup for medias is light and straightforward. Here's a look at the default setup:

    +
    +<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>
+
    +

    The HTML content needed for a media list

    +
    +<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>
+	</li>
+</ul>	
+
    +

    Use a <div> with a class .media-box to wrap your media (works with media lists too) in a styled box.

    +
    +<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.</p>
+		</div>
+	</div>
+</div>
+
    +
    + +
    +
    + + +
    -- cgit v1.2.3