From 4fbb400754986b969b40fc12eacfd332ace1a174 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 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 --- 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..f30a3348d 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 tool for media objects

    +
    + +
    +
    +

    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 From 61332d727e6e1d67def803b2f8d61047d79db0cc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 7 Sep 2012 11:34:05 -0700 Subject: fixes #5020: submenu support in dropup --- docs/components.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f47aecbf1..3272f29d0 100644 --- a/docs/components.html +++ b/docs/components.html @@ -182,6 +182,24 @@ +
    + + 
    -- 
cgit v1.2.3


From 2c8eff0eecb92b7e1b585afe3b59bf907a3e3a78 Mon Sep 17 00:00:00 2001
From: Brian Campbell 
Date: Wed, 12 Sep 2012 14:10:03 -0600
Subject: Updated pagination to support .pagination-large, .pagination-small,
 .pagination-mini matching button sizes. Updated related docs.

---
 docs/components.html | 99 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 3272f29d0..487dceac4 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1473,6 +1473,105 @@
           
    
 
 
+          
    Sizes
    
+          
    Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.
    
+          
    
+            
+            
+            
+            
+          
    
+
    +<div class="pagination pagination-large">
+  <ul>
+    <li><a href="#">«</a></li>
+    <li><a href="#">1</a></li>
+    <li><a href="#">2</a></li>
+    <li><a href="#">3</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">5</a></li>
+    <li><a href="#">»</a></li>
+  </ul>
+</div>
+<div class="pagination">
+  <ul>
+    <li><a href="#">«</a></li>
+    <li><a href="#">1</a></li>
+    <li><a href="#">2</a></li>
+    <li><a href="#">3</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">5</a></li>
+    <li><a href="#">»</a></li>
+  </ul>
+</div>
+<div class="pagination pagination-small">
+  <ul>
+    <li><a href="#">«</a></li>
+    <li><a href="#">1</a></li>
+    <li><a href="#">2</a></li>
+    <li><a href="#">3</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">5</a></li>
+    <li><a href="#">»</a></li>
+  </ul>
+</div>
+<div class="pagination pagination-mini">
+  <ul>
+    <li><a href="#">«</a></li>
+    <li><a href="#">1</a></li>
+    <li><a href="#">2</a></li>
+    <li><a href="#">3</a></li>
+    <li><a href="#">4</a></li>
+    <li><a href="#">5</a></li>
+    <li><a href="#">»</a></li>
+  </ul>
+</div>
+
    
+
+
+          
    
+
+
           
    Options
    
 
           
    Disabled and active states
    
-- 
cgit v1.2.3


From 595e1a189c1911ada7c4bd4c769c28b1741611ac Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 13 Sep 2012 10:07:57 -0700
Subject: fixes #5119: javascript in navbar typo

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 3272f29d0..61bfc98e3 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -58,7 +58,7 @@
                 Components
               
               
  • 
-                Javascript
+                JavaScript
               
    • 
               
  • 
                 Customize
-- 
cgit v1.2.3


From 2ead9a5bc34608c982f06391a55fa82cbd856701 Mon Sep 17 00:00:00 2001
From: Martin Bean 
Date: Fri, 14 Sep 2012 14:06:15 +0100
Subject: Standardized spelling of 'JavaScript'; added icons to file trees

---
 docs/components.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 61bfc98e3..d4211b470 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -113,7 +113,7 @@
           
 
           
    Example
    
-          
    Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown javascript plugin.
    
+          
    Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
    
           
    
             
    
               
    
           
    
 
-          
    Requires javascript
    
+          
    Requires JavaScript
    
           
    Button dropdowns require the Bootstrap dropdown plugin to function.
    
-          
    In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.
    
+          
    In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.
    
 
 
           
    
@@ -687,7 +687,7 @@

    • Disabled state

    -

    For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.

    +

    For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless custom JavaScript is implemented to prevent those clicks.

    • Clickable link
      • @@ -746,7 +746,7 @@

      Dropdowns

      -

      Add dropdown menus with a little extra HTML and the dropdowns javascript plugin.

      +

      Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

      Tabs with dropdowns

      @@ -911,7 +911,7 @@

      To make tabs fade in, add .fade to each .tab-pane.

      Requires jQuery plugin

      -

      All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

      +

      All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the JavaScript docs page.

      Tabbable in any direction

      @@ -1157,7 +1157,7 @@

      Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

      Using dropdowns

      -

      Add dropdowns and dropups to the nav with a bit of markup and the dropdowns javascript plugin.

      +

      Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.

       <ul class="nav">
   <li class="dropdown">
@@ -1171,7 +1171,7 @@
   </li>
 </ul>
      -

      Visit the javascript dropdowns documentation for more markup and information on calling dropdowns.

      +

      Visit the JavaScript dropdowns documentation for more markup and information on calling dropdowns.

      Text

      Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

      @@ -1973,7 +1973,7 @@

      Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

      <button type="button" class="close" data-dismiss="alert">×</button>
      -

      Dismiss alerts via javascript

      +

      Dismiss alerts via JavaScript

      Use the alerts jQuery plugin for quick and easy dismissal of alerts.

      -- cgit v1.2.3 From 143fef9f95daca088c1a910fccd07f2b520d8b0b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Sep 2012 18:15:39 -0700 Subject: overhaul the docs and css to merge into 2.1.2 since this was against master --- docs/components.html | 141 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f47aecbf1..0605fe8a9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -98,6 +98,7 @@
    • Thumbnails
    • Alerts
    • Progress bars
      • +
    • Media object
    • Misc
    @@ -1927,6 +1928,7 @@ +
    @@ -2029,6 +2031,7 @@ +
    @@ -2175,6 +2178,144 @@ + +
    +
    +

    Media object

    +
    +

    Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

    + +

    Default example

    +

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

    +
    +
    + + + +
    +

    Media heading

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

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

    + 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. +
    +
    +
    +
    +
    +
    +<div class="media">
+  <a class="pull-left" href="#">
+    <img class="media-object" src="http://placehold.it/64x64">
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">Media heading</h4>
+    ...
+
+    <!-- Nested media object -->
+    <div class="media">
+      ...
+    </div>
+  </div>
+</div>
+
    + + +
    + + +

    Media list

    +

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

    +
    +
      +
    • + + + +
      +

      Media heading

      +

      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.

      + +
      + + + +
      +

      Nested media heading

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

      Nested media heading

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

      Nested media heading

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

      + 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. +
      +
      • +
    +
    +
    +<ul class="media-list">
+  <li class="media">
+    <a class="pull-left" href="#">
+      <img class="media-object" src="http://placehold.it/64x64">
+    </a>
+    <div class="media-body">
+      <h4 class="media-heading">Media heading</h4>
+      ...
+
+      <!-- Nested media object -->
+      <div class="media">
+        ...
+     </div>
+    </div>
+  </li>
+</ul>
+
    + +
    + + + + -- cgit v1.2.3 From 2769241aeb5e9eba4a34ddbd9d495f7f8271e360 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Sep 2012 20:56:20 -0700 Subject: add new vars for common font-sizes and paddings with large, small, and mini components; resize pagination and buttons to better match each other --- docs/components.html | 114 ++++++++++++++++----------------------------------- 1 file changed, 35 insertions(+), 79 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 2db1189a9..b5d39b7be 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1474,21 +1474,47 @@
    -

    Sizes

    -

    Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

    +

    Options

    + +

    Disabled and active states

    +

    Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

    -