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.

    -