From 648c4689273647c321dd6e3979d910282e9a9339 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Oct 2011 23:11:56 -0700 Subject: breaking down the main page into subpages for easier, more comprehensive documentation --- docs/components.html | 705 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 705 insertions(+) create mode 100644 docs/components.html (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html new file mode 100644 index 000000000..0e3f0a223 --- /dev/null +++ b/docs/components.html @@ -0,0 +1,705 @@ + + + + + Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Bootstrap + +
+
+
+ +
+ + +
+

Components

+

Reusable patterns for navigation, alerts, popovers, and much more

+
+ + + +
+
+

Media Displaying images and videos

+
+ +
+
+

Media grid

+

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

+
+
+

Example thumbnails

+

Thumbnails in the .media-grid can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the .span2, .span4, and .span6 column sizes.

+

Large

+ +

Medium

+ +

Small

+ +

Coding them

+

Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.

+
+<ul class="media-grid">
+  <li>
+    <a href="#">
+      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+    </a>
+  </li>
+</ul>
+
+
+
+
+ + + + + + + + + +
+
+

Alerts & Errors Styles for success, warning, and error messages or alerts

+
+ +
+
+

Basic alerts

+

.alert-message

+

One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

+

Get the javascript »

+
+
+
+ × +

Holy guacamole! Best check yo self, you’re not looking too good.

+
+
+ × +

Oh snap! Change this and that and try again.

+
+
+ × +

Well done! You successfully read this alert message.

+
+
+ × +

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

+
+ +

Example code

+
+<div class="alert-message warning">
+  <a class="close" href="#">×</a>
+  <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+</div>
+
+
+
+ +
+
+

Block messages

+

.alert-message.block-message

+

For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

+

Get the javascript »

+
+
+
+ × +

Holy guacamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+
+ Take this action Or do this +
+
+
+ × +

Oh snap! You got an error! Change this and that and try again.

+
    +
  • Duis mollis est non commodo luctus
    • +
  • Nisi erat porttitor ligula
    • +
  • Eget lacinia odio sem nec elit
    • +
+
+ Take this action Or do this +
+
+
+ × +

Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

+
+ Take this action Or do this +
+
+
+ × +

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

+
+ Take this action Or do this +
+
+ +

Example code

+
+<div class="alert-message block-message warning">
+  <a class="close" href="#">×</a>
+  <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <div class="alert-actions">
+    <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+  </div>
+</div>
+
+
+
+
+ + + +
+
+

Popovers Components for displaying content in modals, tooltips, and popovers

+
+
+
+

Modals

+

Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.

+

Get the javascript »

+
+
+
+ +
+
+ × +

Modal Heading

+
+
+

One fine body…

+
+
+ Primary + Secondary +
+
+
+
+
+ + +
+
+

Tooltips

+

Twipsies are super useful for aiding a confused user and pointing them in the right direction.

+

Get the javascript »

+
+
+
+
+

+Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae. +

+
+
+
+
+ + +
+
+

Popovers

+

Use popovers to provide subtextual information to a page without affecting layout.

+

Get the javascript »

+
+
+
+
+
+
+
+

Popover Title

+
+

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+
+
+
+ +
+
+
+
+
+ + + + +
+ + + + + + + + + + + + + + -- cgit v1.2.3 From b4c894961c0b75361ead496f1686eb3cf41c5c97 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Oct 2011 23:24:22 -0700 Subject: address issue #414 and fix up a number of docs loose ends --- 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 0e3f0a223..59273ac19 100644 --- a/docs/components.html +++ b/docs/components.html @@ -548,7 +548,7 @@

Block messages

-

.alert-message.block-message

+

<div class="alert-message block-message">

For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

Get the javascript »

-- cgit v1.2.3 From 19feb1b1ff56db21bc36106e3b57943ca490a912 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Oct 2011 23:25:57 -0700 Subject: fix new navbar in components --- 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 59273ac19..c18d8c113 100644 --- a/docs/components.html +++ b/docs/components.html @@ -158,7 +158,7 @@

Fixed navbar

-
+
Project Name
  • Home
    • -- cgit v1.2.3 From 31ea00304626ea68b758def41769606d4c049671 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2011 21:45:46 -0700 Subject: remove alt tab styles for now, too complicated to accomplish both static and tabble; fix up CSS a bit --- docs/components.html | 47 +++++++---------------------------------------- 1 file changed, 7 insertions(+), 40 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index c18d8c113..73a049298 100644 --- a/docs/components.html +++ b/docs/components.html @@ -245,39 +245,6 @@ <li><a href="#">Contact</a></li> </ul> -

    Alternate tabs

    -

    You can also use tabs that are stacked on either side of an element, or on the bottom.

    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -

    Tabbable tabs

    As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.

    @@ -315,20 +282,20 @@

    Section 1

    -

    Oh hai!

    +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    Section 2

    -

    Oh hai!

    +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    Section 3

    -

    Oh hai!

    +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

-
+
  • Section 1
    • @@ -338,15 +305,15 @@

    Section 1

    -

    Oh hai!

    +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    Section 2

    -

    Oh hai!

    +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    Section 3

    -

    Oh hai!

    +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

-- cgit v1.2.3 From 74dc83f211245dfaf06da9a1b2ad94f51f790be2 Mon Sep 17 00:00:00 2001 From: Raul Riera Date: Mon, 7 Nov 2011 10:22:28 +0100 Subject: Added the view port meta tag for proper responsiveness --- docs/components.html | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 73a049298..c03aac613 100644 --- a/docs/components.html +++ b/docs/components.html @@ -3,6 +3,7 @@ Bootstrap, from Twitter + -- cgit v1.2.3 From 0e6cd670ca0619c663c016c08059530b598e15d3 Mon Sep 17 00:00:00 2001 From: Raul Riera Date: Tue, 8 Nov 2011 20:32:28 +0100 Subject: Removed trailing backslash :) --- 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 c03aac613..bb2f326b4 100644 --- a/docs/components.html +++ b/docs/components.html @@ -3,7 +3,7 @@ Bootstrap, from Twitter - + -- cgit v1.2.3 From 447c9322e96ebd1102115aea01d925536016351a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 29 Nov 2011 23:56:01 -0800 Subject: update all leads on docs pages --- 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 bb2f326b4..c311d20e6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -50,7 +50,7 @@ ================================================== -->

Components

-

Reusable patterns for navigation, alerts, popovers, and much more

+

Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

-- cgit v1.2.3 From f2c40ee24d0caa26e79ed206370858918c603419 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 30 Nov 2011 00:39:38 -0800 Subject: adding step nav to components --- docs/components.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index c311d20e6..833f532d9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -412,6 +412,28 @@
+ +
+
+

Step nav

+

Placeholder for now!

+
+
+
+ +
+
+
+
+
-- cgit v1.2.3 From 6e70d490e1c189518164d7f08035c34e21745715 Mon Sep 17 00:00:00 2001 From: Evan Meagher Date: Fri, 2 Dec 2011 11:37:39 -0800 Subject: Add vertical nav divider example in components doc page. --- docs/components.html | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 833f532d9..ba9542fdb 100644 --- a/docs/components.html +++ b/docs/components.html @@ -180,6 +180,7 @@
    +
  • Dropdown
      -- cgit v1.2.3 From 1d1805ee5cb188f0c70b6a27e227ea6caca62c8e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Dec 2011 11:41:00 -0800 Subject: add jank js for prototyping new topbar to all docs pages --- docs/components.html | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 833f532d9..049908c20 100644 --- a/docs/components.html +++ b/docs/components.html @@ -683,6 +683,17 @@ Lorem ipsum dolar sit amet illo error ipsum verita + + + -- cgit v1.2.3 From 7b810bf9a617e1f02e073aafcc70857dc915ee59 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Dec 2011 12:10:01 -0800 Subject: update js in footer, add max-width to img --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 049908c20..d0456cc74 100644 --- a/docs/components.html +++ b/docs/components.html @@ -687,9 +687,9 @@ Lorem ipsum dolar sit amet illo error ipsum verita -- cgit v1.2.3 From ecbc9ec4a2cbd3f68067b869c328d55e8afc8aa6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Dec 2011 02:03:16 -0800 Subject: updated footers everywhere --- docs/components.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index c8e0a6ab4..b4a88dd07 100644 --- a/docs/components.html +++ b/docs/components.html @@ -674,10 +674,9 @@ Lorem ipsum dolar sit amet illo error ipsum verita ================================================== -->
-- cgit v1.2.3 From 72a536393c2f2aba4f855384e94c4ce09bc2e39c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 19 Dec 2011 22:58:56 -0800 Subject: mostly docs updates, but also some bug fixes per github issues --- docs/components.html | 179 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 115 insertions(+), 64 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index b4a88dd07..56e71b0f7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -58,94 +58,145 @@ ================================================== -->
-

Media Displaying images and videos

+

Thumbnails Grids of images, videos, text, and more

- +
-
-

Media grid

-

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

-
-
-

Example thumbnails

-

Thumbnails in the .media-grid can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the .span2, .span4, and .span6 column sizes.

-

Large

-
+ +
+
+

Why use thumbnails

+

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

+
+
+

Simple, flexible markup

+

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

+
+
+

Uses grid column sizes

+

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

+
+
+ +
+
+

The markup

+

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

+
+<ul class="thumbnails">
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/210x150" alt="">
+    </a>
+  </li>
+  ...
+</ul>
+
+

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

+
+<ul class="thumbnails">
+  <li class="span3">
+    <div class="thumbnail">
+      <img src="http://placehold.it/210x150" alt="">
+      <h5>Thumbnail label</h5>
+      <p>Thumbnail caption right here...</p>
+    </div>
+  </li>
+  ...
+</ul>
+
+
+
+

More examples

+

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

+ -

Small

- -

Coding them

-

Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.

-
-<ul class="media-grid">
-  <li>
-    <a href="#">
-      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
-    </a>
-  </li>
-  <li>
-    <a href="#">
-      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
-    </a>
-  </li>
-</ul>
-
-
+
+
-- cgit v1.2.3 From 8a7abc7493a07935d4d91b2cc56a82523fd53970 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 16:00:50 -0600 Subject: docs updates, forms updated to include error states and more examples, remove text-shadow from gradientbar mixin to fix bug --- docs/components.html | 107 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 94 insertions(+), 13 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 56e71b0f7..11d83c51a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -201,11 +201,33 @@ - -
- + + + + + + + + + + +
+
+

Step nav

+
+
-

Step nav

Placeholder for now!

@@ -486,7 +535,17 @@
- +
+ + + + + -
-

Popovers Components for displaying content in modals, tooltips, and popovers

+

Modals

@@ -676,7 +735,17 @@
- +
+ + + + + + + + + +
+
+

Popovers

+
+

Popovers

@@ -721,6 +800,8 @@ Lorem ipsum dolar sit amet illo error ipsum verita
+ +
-- cgit v1.2.3 From 20aecb983838422c7b43e20960b10d4d79fefaa3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 16:22:20 -0600 Subject: updated all docs to jQuery 1.7, move all docs JS to application.js, and move dropdowns css to dedicated file --- docs/components.html | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 11d83c51a..9c683b9b2 100644 --- a/docs/components.html +++ b/docs/components.html @@ -814,18 +814,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita - - - - + -- cgit v1.2.3 From 12a0d69454a2831031035d19237d36d38bb2c2a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2011 18:38:03 -0600 Subject: fix dropdowns in components docs page --- docs/components.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 9c683b9b2..2f359ab57 100644 --- a/docs/components.html +++ b/docs/components.html @@ -22,6 +22,18 @@ + + + + + + + + + + + + @@ -230,7 +242,7 @@

Navbar

Fixed navbar

-
+
Project Name @@ -240,7 +252,7 @@
  • Link
  • Link
  • - Dropdown + Dropdown
    • - - - - - - - - - - - - -- cgit v1.2.3 From efacac0d6c812abffa8a84a48fa760f5f56c92f0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Wed, 21 Dec 2011 18:42:43 -0800 Subject: clean up all the js across all the doc pages --- docs/components.html | 91 +++++++++++++++++++++++----------------------------- 1 file changed, 41 insertions(+), 50 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 56e71b0f7..4d2c60823 100644 --- a/docs/components.html +++ b/docs/components.html @@ -208,7 +208,7 @@

    Navigation

    Fixed navbar

    -
    +
    Project Name @@ -218,7 +218,7 @@
  • Link
  • Link
  • - Dropdown + Dropdown
    • Secondary link
    • Something else here
      • @@ -233,7 +233,7 @@
      • - Dropdown + Dropdown
        • Secondary link
        • Something else here
          • @@ -279,8 +279,8 @@
        • Messages
        • Settings
        • Contact
          • -
        • - Dropdown +
        • + Dropdown
          • Secondary link
          • Something else here
            • @@ -302,11 +302,11 @@

            As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.

            -
              -
            • Section 1
              • -
            • Section 2
              • -
            • Section 3
              • -
            • Section 4
              • +
              @@ -327,21 +327,21 @@
              -
                -
              • Section 1
                • -
              • Section 2
                • -
              • Section 3
                • +
                -
                +

                Section 1

                Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                -
                +

                Section 2

                Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                -
                +

                Section 3

                Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                @@ -350,21 +350,21 @@
                -
                  -
                • Section 1
                  • -
                • Section 2
                  • -
                • Section 3
                  • +
                  -
                  +

                  Section 1

                  Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                  -
                  +

                  Section 2

                  Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                  -
                  +

                  Section 3

                  Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                  @@ -375,24 +375,24 @@
                  -
                  +

                  Oh hai #1!

                  -
                  +

                  Oh hai #2!

                  -
                  +

                  Oh hai #3!

                  -
                  +

                  Oh hai #4!

                  -
                  @@ -733,25 +733,16 @@ Lorem ipsum dolar sit amet illo error ipsum verita - - - - - + + + - - - + + - + + + -- cgit v1.2.3 From 49fb910b11baef4ccfe9270479e8b9bf9e5e7731 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 22 Dec 2011 19:25:29 -0800 Subject: more js cleanup after gnarly merge --- docs/components.html | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 26a657cb5..5b4e788f1 100644 --- a/docs/components.html +++ b/docs/components.html @@ -22,18 +22,6 @@ - - - - - - - - - - - - @@ -768,7 +756,7 @@

                  -Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae. +Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.

                  @@ -811,9 +799,6 @@ Lorem ipsum dolar sit amet illo error ipsum verita
                  - - -
                  + + + + + + + + + + + -- cgit v1.2.3 From 3aba68f832e3406fcd6687ba4687cd339ae3b42d Mon Sep 17 00:00:00 2001 From: Purwandi Date: Fri, 23 Dec 2011 21:39:29 +0700 Subject: Fix id tabs on docs component --- docs/components.html | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 5b4e788f1..c6a349ff4 100644 --- a/docs/components.html +++ b/docs/components.html @@ -358,20 +358,20 @@
                  -
                  +

                  Section 1

                  Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                  -
                  +

                  Section 2

                  Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                  -
                  +

                  Section 3

                  Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                  @@ -381,20 +381,20 @@
                  -
                  +

                  Section 1

                  Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                  -
                  +

                  Section 2

                  Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                  -
                  +

                  Section 3

                  Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

                  @@ -405,24 +405,24 @@
                  -
                  +

                  Oh hai #1!

                  -
                  +

                  Oh hai #2!

                  -
                  +

                  Oh hai #3!

                  -
                  +

                  Oh hai #4!

                  -- cgit v1.2.3 From fec02f50455c87f0e01fe74b1fb2e3cd032ade09 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 15:40:58 -0600 Subject: clean up some css for github issues: input prepend z-index, modals revamped for responsive --- 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 c6a349ff4..fbfa9fb31 100644 --- a/docs/components.html +++ b/docs/components.html @@ -716,7 +716,7 @@

                  Get the javascript »

                  -
                  +
                  -- cgit v1.2.3 From fb9401b355366452d310d39f51224999da4daa82 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 01:34:14 -0800 Subject: tweaks abound, updated prettify styles, new sidenav component started, sprite icons started --- docs/components.html | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index fbfa9fb31..d9d6b10d6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -223,6 +223,38 @@ + +
                  +
                  +

                  Side nav

                  +
                  + +
                  +
                  Your account
                  + +
                  + +
                  +
                  Your account
                  + +
                  +
                  + + +
                  -
                  -
                  Your account
                  - -
                  - -
                  -
                  Your account
                  - +
                  +
                  +
                  +
                  Your account
                  + +
                  +
                  +
                  +
                  +
                  Your account
                  + +
                  +
                  + -- cgit v1.2.3 From 5cb76037ae70ca26a923750ca9441b04d2fbd6a7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jan 2012 23:24:19 -0800 Subject: fixing conflict in dividers in navbar, fix navbar docs, fix search form in navbar --- docs/components.html | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index e57d1fd17..5c25a98a4 100644 --- a/docs/components.html +++ b/docs/components.html @@ -267,7 +267,6 @@

                  Navbar

                  -

                  Fixed navbar

                  @@ -287,11 +286,11 @@
              -
              +
                -
              • +
              • Dropdown
                  @@ -308,15 +307,15 @@
                  -

                  What is it

                  +

                  What is it

                  Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.

                  -

                  Customizable

                  +

                  Customizable

                  All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.

                  -

                  Dropdowns included

                  +

                  Dropdowns included

                  As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <li> tags also support .active for showing current page selection.

                  -- cgit v1.2.3 From cfc2353059df628c67d19a3c5c3ead2cc6051f53 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jan 2012 23:59:22 -0800 Subject: front page docs updated to include old getting started section, update code styles to look like github gists, and lots more docs updates --- docs/components.html | 171 +++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 130 insertions(+), 41 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 5c25a98a4..5bafc5a60 100644 --- a/docs/components.html +++ b/docs/components.html @@ -227,27 +227,27 @@ ================================================== -->
                  -

                  Side nav

                  +

                  Side nav for lists of links

                  +

                  Examples

                  +

                  Side navs can be just links, links with headings, and links with icons.

                  -
                  Your account
                  +
                  Your account
                  + -
                  -
                  -
                  -
                  Your account
                  +
                  +

                  Why use it

                  +

                  +
                  +
                  +

                  Markup

                  +

                  Marking up a side nav is at the core just writing an unordered list of links.

                  +
                  +  <ul class="nav-group">
+    <li class="active">
+      <a class="nav-item" href="#">Home</a>
+    </li>
+    <li><a class="nav-item" href="#">Library</a></li>
+    <li><a class="nav-item" href="#">Help</a></li>
+  </ul>
+
                  +

                  Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.

                  +
                  +  <h6 class="nav-label"></h6>
+  <ul class="nav-group">
+    ...
+  </ul>
+  <h6 class="nav-label"></h6>
+  <ul class="nav-group">
+    ...
+  </ul>
+
                  +
                  @@ -267,10 +295,12 @@

                  Navbar

                  -
                  +

                  Static navbar example

                  +

                  An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

                  +
                  - Project Name + Project name
                  -
                  -

                  What is it

                  -

                  Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.

                  -
                  -
                  -

                  Customizable

                  -

                  All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.

                  +
                  +

                  Navbar scaffolding

                  +

                  The navbar requires only a few divs to structure it well for static or fixed display.

                  +
                  +<div class="navbar navbar-static">
+  <div class="navbar-inner">
+    <div class="container" style="width: auto;">
+      ...
+    </div>
+  </div>
+</div>
+
                  +

                  To make the navbar fixed, swamp the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

                  +
                  +<div class="navbar navbar-fixed">
+  ...
+</div>
+
                  +
                  +

                  Brand name

                  +

                  A simple link to show your brand or project name only requires an anchor tag.

                  +
                  +<a class="brand" href="#">
+  Project name
+</a>
+
                  +
                  +

                  Search form

                  +

                  Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.

                  +
                  +<form class="navbar-search">
+  <input type="text" class="search-query pull-left" placeholder="Search">
+</form>
+
                  -

                  Dropdowns included

                  -

                  As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <li> tags also support .active for showing current page selection.

                  +

                  Nav links

                  +

                  Nav items are simple to add via unordered lists.

                  +
                  +<ul class="nav">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">Link</a></li>
+  <li><a href="#">Link</a></li>
+</ul>
+
                  +

                  Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.

                  +
                  +<ul class="nav">
+  <li class="dropdown">
+    <a href="#"
+          class="dropdown-toggle"
+          data-toggle="dropdown">
+          Account
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+
                  -

                  Note: When using the navbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your <body>.

                  @@ -507,34 +587,39 @@
                  -
                  -

                  Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.

                  -
                  -
                  +
                  +

                  Why use them

                  +

                  Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.

                  + +

                  Examples

                  +

                  A single example shown as it might be displayed across multiple pages.

                  • Home
                  • Home /
                    • -
                  • Middle page
                    • -
                  - +
                  +
                  +

                  Markup

                  +

                  HTML is your standard unordered list with links.

                   <ul class="breadcrumb">
-  <li><a href="#">Home</a> <span class="divider">/</span></li>
-  <li><a href="#">Middle page</a> <span class="divider">/</span></li>
-  <li><a href="#">Another one</a> <span class="divider">/</span></li>
-  <li class="active">You are here</li>
+  <li>
+    <a href="#">Home</a> <span class="divider">/</span>
+  </li>
+  <li>
+    <a href="#">Library</a> <span class="divider">/</span>
+  </li>
+  <li class="active">
+    <a href="#">Data</a>
+  </li>
 </ul>
                  @@ -545,13 +630,14 @@ +================================================== + +COMMENTED OUT AND NOT SUPPORTED AT THIS TIME. +

                  Step nav

                  - -

                  Placeholder for now!

                  @@ -571,8 +657,8 @@
                  -
                  +--> @@ -682,6 +768,9 @@
                  + +
                  +
                  -- cgit v1.2.3 From 3eb80591b2c8bb2850caf27da7d6b8c8b747063a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Oko=C5=84ski?= Date: Sat, 26 Nov 2011 19:41:17 +0100 Subject: Progress bars --- docs/components.html | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 5bafc5a60..0974a233f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -925,6 +925,47 @@ Lorem ipsum dolar sit amet illo error ipsum verit
                  + +
                  +
                  +

                  Progress bars ... for indicating progress

                  +
                  +
                  +
                  +

                  Basic bars

                  +

                  Default look of progress bars. Absolute minimum.

                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +

                  Striped bars

                  +

                  Bars with stripes painted.

                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +

                  Active state

                  +

                  Animated stripes! Not on Opera, though :(

                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  +
                  -- cgit v1.2.3 From 95c88a2953d6493050192f9c99c8e5597e591ac3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 04:40:32 -0800 Subject: scratch that, tweaking dropdowns in tabs --- 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 5bafc5a60..baeccd6ed 100644 --- a/docs/components.html +++ b/docs/components.html @@ -427,7 +427,7 @@
                • Settings
                • Contact
                • - Dropdown + Dropdown
                  • Secondary link
                  • Something else here
                    • -- cgit v1.2.3 From 1438b14f74fc30c3b9bd63bd54d3bcfe5ce33c3c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 15:52:57 -0800 Subject: overhauled docs to include example markup, add language around browser support and classes --- docs/components.html | 81 ++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 60 insertions(+), 21 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 8be1f824a..ce16c8092 100644 --- a/docs/components.html +++ b/docs/components.html @@ -929,43 +929,82 @@ Lorem ipsum dolar sit amet illo error ipsum verit ================================================== -->
                    -

                    Progress bars ... for indicating progress

                    +

                    Progress bars For loading, redirecting, or action status

                    + +

                    Examples and markup

                    -
                    -

                    Basic bars

                    -

                    Default look of progress bars. Absolute minimum.

                    -
                    -
                    +
                    +

                    Basic

                    +

                    Default progress bar with a vertical gradient.

                    -
                    +
                    +
                    +<div class="progress">
+  <div class="bar"
+       style="width: 60%;"></div>
+</div>
+
                    -
                    -
                    -
                    -

                    Striped bars

                    -

                    Bars with stripes painted.

                    -
                    -
                    +
                    +

                    Striped

                    +

                    Uses a gradient to create a striped effect.

                    +
                    +<div class="progress info
+     striped">
+  <div class="bar"
+       style="width: 20%;"></div>
+</div>
+
                    -
                    -
                    -
                    -

                    Active state

                    -

                    Animated stripes! Not on Opera, though :(

                    -
                    -
                    +
                    +

                    Animated

                    +

                    Takes the striped example and animates it.

                    +
                    +<div class="progress danger
+     striped active">
+  <div class="bar"
+       style="width: 40%;"></div>
+</div>
+
                    + +

                    Options and browser support

                    +
                    +
                    +

                    Additional colors

                    +

                    Progress bars utilize some of the same classes as buttons and alert messages for quick styling.

                    +
                      +
                    • .info
                      • +
                    • .success
                      • +
                    • .danger
                      • +
                    +

                    Alternatively, you can customize the LESS files and roll your own colors and sizes.

                    +
                    +
                    +

                    Behavior

                    +

                    Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

                    +

                    If you use the .active class, your .striped progress bars will animate the stripes left to right.

                    +
                    +
                    +

                    Browser support

                    +

                    Progress bars use CSS3 gradients, transitions, and animations to achieve all theire effects. These features are not supported in IE7-8 or older versions of Firefox.

                    +

                    Opera does not support animations at this time.

                    +
                    +
                    +
                    + +
                    -- cgit v1.2.3 From 2948d1c3b247a5aff1fd1f15cf72540e3f492f57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 20:40:28 -0800 Subject: overhaul the entire tabs component structure and docs; remove side nav and make it a nav list to build on new .nav base class --- docs/components.html | 837 +++++++++++++++++++++++++++------------------------ 1 file changed, 438 insertions(+), 399 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index ce16c8092..eb9932473 100644 --- a/docs/components.html +++ b/docs/components.html @@ -54,397 +54,218 @@ - -
                    +
                    -

                    Thumbnails Grids of images, videos, text, and more

                    +

                    Nav, tabs, and pills Highly customizable list-style navigation

                    +

                    Lightweight defaults Same markup, different classes

                    -
                    -

                    Default thumbnails

                    -

                    By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

                    -
                      -
                    • - - - -
                      • -
                    • - - - -
                      • -
                    • - - - -
                      • -
                    • - - - -
                      • +
                      +

                      Powerful base class

                      +

                      All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.

                      +

                      Why tabs and pills

                      +

                      Tabs and pills in Bootstrap are built on a <ul> with the same core HTML, a list of links. Swap between tabs or pills with only a class.

                      +

                      Both options are great for sub-sections of content or navigating between pages of related content.

                      +
                      +
                      +

                      Basic tabs

                      +

                      Take a regular <ul> of links and add .tabs:

                      + +
                      +<ul class="nav tabs">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">...</a></li>
+  <li><a href="#">...</a></li>
+</ul>
+
                      -
                      -

                      Highly customizable

                      -

                      With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

                      -
                        -
                      • -
                        - -
                        -
                        Thumbnail label
                        -

                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                        -

                        Action Action

                        -
                        -
                        -
                        • -
                      • -
                        - -
                        -
                        Thumbnail label
                        -

                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                        -

                        Action Action

                        -
                        -
                        -
                        • +
                        +

                        Basic pills

                        +

                        Take that same HTML, but use .pills instead:

                        + +
                        +<ul class="nav pills">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">...</a></li>
+  <li><a href="#">...</a></li>
+</ul>
+
                      +

                      Stackable Make tabs or pills vertical

                      -

                      Why use thumbnails

                      -

                      Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

                      +

                      How to stack 'em

                      +

                      As tabs and pills are horizontal by default, just add a second class, .stacked, to make them appear vertically stacked.

                      -

                      Simple, flexible markup

                      -

                      Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

                      -
                      -
                      -

                      Uses grid column sizes

                      -

                      Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

                      -
                      -
                      - -
                      -
                      -

                      The markup

                      -

                      As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

                      +

                      Stacked tabs

                      + 
                      -<ul class="thumbnails">
-  <li class="span3">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/210x150" alt="">
-    </a>
-  </li>
+<ul class="nav tabs stacked">
   ...
 </ul>
                      -

                      For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

                      +
                      +
                      +

                      Stacked pills

                      + 
                      -<ul class="thumbnails">
-  <li class="span3">
-    <div class="thumbnail">
-      <img src="http://placehold.it/210x150" alt="">
-      <h5>Thumbnail label</h5>
-      <p>Thumbnail caption right here...</p>
-    </div>
-  </li>
+<ul class="nav pills stacked">
   ...
 </ul>
                      -
                      -

                      More examples

                      -

                      Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

                      - -
                      -
                      - -
                    - - - - -
                    -
                    -

                    Autocomplete

                    -
                    - -
                    - - - - - - - - - -
                    -
                    -

                    Side nav for lists of links

                    +

                    Dropdowns For advanced nav components

                    -
                    -

                    Examples

                    -

                    Side navs can be just links, links with headings, and links with icons.

                    -
                    - -
                    Your account
                    - -
                    Your account
                    - -
                    -
                    -
                    -

                    Why use it

                    -

                    +
                    +

                    Rich menus made easy

                    +

                    Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.

                    +

                    Head over to the Javascript page to read the docs on initializing dropdowns in Bootstrap.

                    -
                    -

                    Markup

                    -

                    Marking up a side nav is at the core just writing an unordered list of links.

                    +
                    +

                    Tabs with dropdowns

                    + 
                    -  <ul class="nav-group">
-    <li class="active">
-      <a class="nav-item" href="#">Home</a>
-    </li>
-    <li><a class="nav-item" href="#">Library</a></li>
-    <li><a class="nav-item" href="#">Help</a></li>
-  </ul>
+<ul class="nav tabs">
+  <li class="dropdown">
+    <a class="dropdown-toggle" 
+       data-toggle="dropdown"
+       href="#">
+        Dropdown
+        <b class="caret"></b>
+      </a>
+    <ul class="dropdown-menu">
+      <!-- links -->
+    </ul>
+  </li>
+</ul>
                    -

                    Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.

                    +
                    +
                    +

                    Pills with dropdowns

                    + 
                    -  <h6 class="nav-label"></h6>
-  <ul class="nav-group">
-    ...
-  </ul>
-  <h6 class="nav-label"></h6>
-  <ul class="nav-group">
-    ...
-  </ul>
+<ul class="nav pills">
+  <li class="dropdown">
+    <a class="dropdown-toggle" 
+       data-toggle="dropdown"
+       href="#">
+        Dropdown
+        <b class="caret"></b>
+      </a>
+    <ul class="dropdown-menu">
+      <!-- links -->
+    </ul>
+  </li>
+</ul>
                    - -
                    - - - - - -
                    -
                    -

                    Tabs and pills

                    -
                    -
                    -
                    -

                    Create simple secondary navigation with a <ul>. Swap between tabs or pills by adding the appropriate class.

                    -

                    Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.

                    -
                    -
                    -

                    Basic tabs example

                    -

                    Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a tabs plugin that can be used to integrate the latter.

                    - -
                    -<ul class="tabs">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
-  <li><a href="#">Settings</a></li>
-  <li><a href="#">Contact</a></li>
-</ul>
-
                    + + + + +

                    Tabbable tabs

                    As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.

                    @@ -543,37 +364,119 @@
                  • - -

                  In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.

                  -
                  -

                  Basic pills example

                  - + + + + + +
                  @@ -629,39 +532,6 @@ - - - -
                -
              -- cgit v1.2.3 From d0eecc85f89fd258a2e58d7be06a8b6068da90e4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 21:18:14 -0800 Subject: remove tabbable stuff to try new approach --- docs/components.html | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 934a90fbc..e0ce81297 100644 --- a/docs/components.html +++ b/docs/components.html @@ -258,7 +258,24 @@
              - +

              Tabbable tabs

              +
              +
              +

              What's included

              +

              Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles:

              +
                +
              • top (default)
                • +
              • right
                • +
              • bottom
                • +
              • left
                • +
              +

              Changing between them is easy and only requires changing very little markup.

              +
              +
              +
              +
              +
              +
              -- cgit v1.2.3 From 22e0c5f7c8c092531b111b6042a7d7ee87d406b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 22:06:44 -0800 Subject: redoing the tabs on bottom, left, and right --- docs/components.html | 186 +++++++++++++++++++++++++++------------------------ 1 file changed, 99 insertions(+), 87 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index e0ce81297..6fca1268f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -258,7 +258,7 @@
              -

              Tabbable tabs

              +

              Tabbable nav Bring tabs to life via javascript

              What's included

              @@ -270,116 +270,128 @@
            • left

            Changing between them is easy and only requires changing very little markup.

            +
            +

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

            +

            Get the javascript →

            -
            -
            -
            -
            -
    • - - - - - - - -

    Tabbable tabs

    -

    As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.

    - +
    +

    Tabbable example

    +

    To make tabs tabbable, wrap the .tabs in another div with class .tabbable.

    -
      +
      -

      Oh hai #1!

      +

      I'm in Section 1.

      -

      Oh hai #2!

      +

      Howdy, I'm in Section 2.

      -

      Oh hai #3!

      -
      -
      -

      Oh hai #4!

      +

      What up girl, this is Section 3.

      -
    +
    +
    +

    Straightforward markup

    +

    Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

    +
    +<div class="tabbable">
+  <ul class="nav tabs">
+    <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
+    <li><a href="#2" data-toggle="tab">Section 2</a></li>
+  </ul>
+  <div class="tab-content">
+    <div class="tab-pane active" id="1">
+      <p>I'm in Section 1.</p>
+    </div>
+    <div class="tab-pane" id="2">
+      <p>Howdy, I'm in Section 2.</p>
+    </div>
+  </div>
+</div>
+
    +
    +
    -
    -
    -
    - -
    -
    -

    Section 1

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 2

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 3

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    +

    Tabbable in any direction

    +
    + +
    +

    Tabs on the bottom

    +

    Flip the order of the HTML and add a class to put tabs on the bottom.

    +
    +
    +
    +

    I'm in Section A.

    -
    -
    -
    - -
    -
    -

    Section 1

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 2

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 3

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    -
    - -
    + +
    +
    +
    +

    Tabs on the left

    +

    Swap the class to put tabs on the left.

    +
    +
    -
    -

    Oh hai #1!

    -
    -
    -

    Oh hai #2!

    +
    +

    I'm in Section A.

    -
    -

    Oh hai #3!

    +
    +

    Howdy, I'm in Section B.

    -
    -

    Oh hai #4!

    +
    +

    What up girl, this is Section C.

    -
    +
    +
    +

    Tabs on the right

    +

    Swap the class to put tabs on the right.

    +
    + -
    +
    +
    +

    I'm in Section A.

    +
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    +
    +
    +
    +
    +
    -- cgit v1.2.3 From d170224457581b6ab7305b29b4e2a15cb50ab853 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 23:21:40 -0800 Subject: fix progress bars by removing border and negative margins --- docs/components.html | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 6fca1268f..bd8753401 100644 --- a/docs/components.html +++ b/docs/components.html @@ -346,6 +346,16 @@
  • Section 3
    • +
    +<div class="tabbable tabs-bottom">
+  <ul class="nav tabs">
+    ...
+  </ul>
+  <div class="tab-content">
+    ...
+  </div>
+</div>
+

    Tabs on the left

    @@ -368,6 +378,16 @@
    +
    +<div class="tabbable tabs-left">
+  <ul class="nav tabs">
+    ...
+  </ul>
+  <div class="tab-content">
+    ...
+  </div>
+</div>
+

    Tabs on the right

    @@ -390,6 +410,16 @@
    +
    +<div class="tabbable tabs-right">
+  <ul class="nav tabs">
+    ...
+  </ul>
+  <div class="tab-content">
+    ...
+  </div>
+</div>
+
    -- cgit v1.2.3 From b14426c176689c314a339eaaec389c015e3d33ec Mon Sep 17 00:00:00 2001 From: Purwandi Date: Sun, 8 Jan 2012 17:44:19 +0700 Subject: Added example sidebar navigation with icon in docs --- docs/components.html | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index bd8753401..560d5b566 100644 --- a/docs/components.html +++ b/docs/components.html @@ -256,7 +256,35 @@
    - +
    +
    +

    Sidebar navigation with icon

    +
    + +
    +
    +
    +

    Simple markup

    +
    +<ul class="nav list">
+  <li class="nav-header">List header</li>
+  <li class="active"><a href="#"><i class="home"></i> Home</a></li>
+  <li><a href="#"><i class="download"></i> Downloads</a></li>
+  <li><a href="#"><i class="film"></i> Movies</a></li>
+  ...
+</ul>
+
    +
    +

    Tabbable nav Bring tabs to life via javascript

    -- cgit v1.2.3 From 2376da40fb020289bcec4d2fe49ca2dc6f4eae97 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 03:11:51 -0800 Subject: cleanup organization of tabbable nav section --- docs/components.html | 53 +++++++++++++--------------------------------------- 1 file changed, 13 insertions(+), 40 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index bd8753401..3208e2390 100644 --- a/docs/components.html +++ b/docs/components.html @@ -262,23 +262,13 @@

    What's included

    -

    Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles:

    -
      -
    • top (default)
      • -
    • right
      • -
    • bottom
      • -
    • left
      • -
    +

    Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

    Changing between them is easy and only requires changing very little markup.

    -
    -

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

    -

    Get the javascript →

    -
    +

    Tabbable example

    To make tabs tabbable, wrap the .tabs in another div with class .tabbable.

    -
    +
    -
    -

    Straightforward markup

    -

    Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

    +
    +
    +

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

    +

    Get the javascript →

    +
    +
    + +

    Straightforward markup

    +

    Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

     <div class="tabbable">
   <ul class="nav tabs">
@@ -315,8 +312,6 @@
   </div>
 </div>
    -
    -

    Tabbable in any direction

    @@ -809,28 +804,6 @@ - -
    -
    -

    Autocomplete

    -
    - -
    - - - - - - - -
    -- cgit v1.2.3 From 21eb2dac8a650ba13dabb41fd2d221ff918cdd30 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 03:18:48 -0800 Subject: add icons in nav list example and markup --- docs/components.html | 36 ++++++++++++++++++++++++++++++++---- 1 file changed, 32 insertions(+), 4 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 3208e2390..2a9d15846 100644 --- a/docs/components.html +++ b/docs/components.html @@ -222,9 +222,12 @@

    Application-style navigation

    Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

    Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.

    +

    With icons

    +

    Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.

    -

    Example sidebar navigation

    +

    Example nav list

    +

    Take a list of links and add class="nav list":

    • List header
      • @@ -237,9 +240,6 @@
    • Help
    -
    -
    -

    Simple markup

     <ul class="nav list">
   <li class="nav-header">
@@ -253,6 +253,34 @@
   </li>
   ...
 </ul>
+
    +
    +
    +

    Example with icons

    +

    Same example, but with <i> tags for icons.

    +
    + +
    +
    +<ul class="nav list">
+  ...
+  <li>
+    <a href="#">
+      <i class="book"></i>
+      Library
+    </a>
+  </li>
+  ...
+</ul>
    -- cgit v1.2.3 From 0d62778b28147f599015489d281e749893907087 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 13:22:20 -0800 Subject: correct navbar scaffolding code snippet --- 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 2a9d15846..0c70ef168 100644 --- a/docs/components.html +++ b/docs/components.html @@ -506,7 +506,7 @@ 
     <div class="navbar navbar-static">
   <div class="navbar-inner">
-    <div class="container" style="width: auto;">
+    <div class="container">
       ...
     </div>
   </div>
-- 
cgit v1.2.3


From dbe5e666af51a4d85923c1a7754da1c929dfc249 Mon Sep 17 00:00:00 2001
From: Maik Schreiber 
Date: Mon, 9 Jan 2012 00:02:13 +0100
Subject: fix 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 0c70ef168..104bedf54 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -512,7 +512,7 @@
   </div>
 </div>
    -

    To make the navbar fixed, swamp the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

    +

    To make the navbar fixed, swap the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

     <div class="navbar navbar-fixed">
   ...
-- 
cgit v1.2.3


From 83c0896999c91f4d85bb75434f4a4ecfaff07fe0 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 8 Jan 2012 21:48:07 -0800
Subject: updated js pages to put examples first

---
 docs/components.html | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 163 insertions(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 104bedf54..f3e8d42a5 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -55,9 +55,171 @@
 
 
 
+  
+  
    
+    
    
+      
    Button groups Join buttons for more toolbar-like functionality
    
+    
    
+    
    
+      
    
+        
    Button groups
    
+        
    Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.
    
+        
    You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.
    
+        
    
+          
    
+            Left
+            Middle
+            Right
+          
    
+        
    
+        
    
+          
    
+            
    
+              1
+              2
+              3
+              4
+            
    
+            
    
+              5
+              6
+              7
+            
    
+            
    
+              8
+            
    
+          
    
+        
    
+
+      
    
+      
    
+        
    Example markup
    
+        
    Here's how the HTML looks for a standard button group built with anchor tag buttons:
    
+
    +<div class="btn-group">
+  <a class="btn" href="#">1</a>
+  <a class="btn" href="#">2</a>
+  <a class="btn" href="#">3</a>
+</div>
+
    
+      
    And with a toolbar for multiple groups:
    
+
    +<div class="btn-toolbar">
+  <div class="btn-group">
+    ...
+  </div>
+</div>
+
    
+      
    
+      
    
+        
    Checkbox and radio flavors
    
+        
    Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.
    
+        
    Get the javascript »
    
+        
    
+        
    Heads up
    
+        
    CSS for button groups is in a separate file, button-groups.less.
    
+      
    
+    
    
+  
    
+
+
+
+  
+  
    
+    
    
+      
    Split button dropdowns Built on button groups to provide contextual menus
    
+    
    
+    
    
+      
    
+        
    Split button dropdowns
    
+        
    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.
    
+        
    
+          
    
+            
    
+              Action
+              
+              
+            
            
+            
    
+              Action
+              
+              
+            
         
+            
    
+              Danger
+              
+              
+            
    
+          
    
+          
    
+            
    
+              Success
+              
+              
+            
    
+            
    
+              Info
+              
+              
+            
    
+          
    
+        
     
+      
    
+      
    
+        
    Example markup
    
+        
    Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.
    
+
    +<div class="btn-group">
+  <a class="btn" href="#">Action</a>
+  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+    <span class="caret"></span>
+  </a>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
    
+      
    
+    
    
+  
    
+  
+
+
 
-
    
+
 
 
-
-
    
-  
    
-    
    Modals 
    
-  
    
-  
    
-    
    
-      
    Modals
    
-      
    Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.
    
-      
    Get the javascript »
    
-    
    
-    
    
-      
    
-        
-        
    
-          
    
-            ×
-            
    Modal Heading
    
-          
    
-          
    
-            
    One fine body…
    
-          
    
-          
    
-            Primary
-            Secondary
-          
    
-        
    
-      
    
-    
    
-  
    
-
-
    
-
-
-
-
-
-
-
-
-
-
    
-  
    
-    
    Popovers 
    
-  
    
-
-  
    
-    
    
-      
    Popovers
    
-      
    Use popovers to provide subtextual information to a page without affecting layout.
    
-      
    Get the javascript »
    
-    
    
-    
    
-      
    
-         
    
-          
    
-            
    
-            
    
-              
    Popover Title
    
-              
    
-                
    Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
    
-              
    
-            
    
-          
    
-          
-        
    
-      
    
-    
    
-  
    
-
    
 
 
-- 
cgit v1.2.3


From 6f2f947a4309a8fdeb7067612447c0f1a15dcfd9 Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Wed, 11 Jan 2012 21:42:55 -0800
Subject: add build tool for js +  rename twipsy to tooltip + lots of little
 doc cleanup

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index ee1634cca..873bbf682 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -147,7 +147,7 @@
                 
  • 
                 
  • Separated link
    • 
               
-                    
+            
             
    
               Action
               
@@ -158,7 +158,7 @@
                 
  • 
                 
  • Separated link
    • 
               
-            
         
+            
             
    
               Danger
               
@@ -214,7 +214,7 @@
       
    
     
   
    
-  
+
 
 
    
+-->
     
    
       
    Tabs on the bottom
    
       
    Flip the order of the HTML and add a class to put tabs on the bottom.
    
@@ -1035,7 +1035,7 @@
    - +
    @@ -1195,7 +1195,7 @@ - + -- cgit v1.2.3 From 391248c0e3ba9b00b0b4a02e4d94475e9ae9877a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jan 2012 15:29:16 -0800 Subject: nuke uber footer, bring back topbar dropdowns --- docs/components.html | 72 +++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 66 insertions(+), 6 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 873bbf682..b9d75edbe 100644 --- a/docs/components.html +++ b/docs/components.html @@ -34,11 +34,71 @@ Bootstrap @@ -127,7 +187,7 @@ -
    +

    Split button dropdowns Built on button groups to provide contextual menus

    -- cgit v1.2.3 From 11be9cd16370ecd15d227917d98ff63eccae68ae Mon Sep 17 00:00:00 2001 From: Purwandi Date: Fri, 13 Jan 2012 14:57:21 +0700 Subject: Fix id anchor javascript --- docs/components.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index b9d75edbe..fa3dc5a20 100644 --- a/docs/components.html +++ b/docs/components.html @@ -80,13 +80,13 @@
      -
    • Transition
      • -
    • Modal
      • -
    • Dropdown
      • +
    • Transition
      • +
    • Modal
      • +
    • Dropdown
    • Scrollspy
      • -
    • Tab
      • -
    • Tooltip
      • -
    • Popover
      • +
    • Tab
      • +
    • Tooltip
      • +
    • Popover
    • Alert
    • Button
    • Collapse
      • -- cgit v1.2.3 From 7b321e9c1fbd5ff124cb190f1375a78b132fb9cb Mon Sep 17 00:00:00 2001 From: Purwandi Date: Fri, 13 Jan 2012 15:03:23 +0700 Subject: Remove sidebar with icon from my own repo --- docs/components.html | 30 +----------------------------- 1 file changed, 1 insertion(+), 29 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 08a1a7b57..fa3dc5a20 100644 --- a/docs/components.html +++ b/docs/components.html @@ -506,35 +506,7 @@ -
      -
      -

      Sidebar navigation with icon

      -
      - -
      -
      -
      -

      Simple markup

      -
      -<ul class="nav list">
-  <li class="nav-header">List header</li>
-  <li class="active"><a href="#"><i class="home"></i> Home</a></li>
-  <li><a href="#"><i class="download"></i> Downloads</a></li>
-  <li><a href="#"><i class="film"></i> Movies</a></li>
-  ...
-</ul>
-
      -
      -
      +

      Tabbable nav Bring tabs to life via javascript

      -- cgit v1.2.3 From a4b107bf879d47db0a6e036814f5aeee4316d36c Mon Sep 17 00:00:00 2001 From: Chris Gunther Date: Sat, 14 Jan 2012 15:15:24 -0500 Subject: fix navbar links to scaffolding > grid system --- 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 fa3dc5a20..55a007f90 100644 --- a/docs/components.html +++ b/docs/components.html @@ -40,7 +40,7 @@ -- cgit v1.2.3 From f82fb2a1976060b2d0b71c3e6ad20f6d7a7772f7 Mon Sep 17 00:00:00 2001 From: Chris Gunther Date: Sat, 14 Jan 2012 15:18:59 -0500 Subject: fix navbar links to base CSS > typography --- 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 55a007f90..223f27584 100644 --- a/docs/components.html +++ b/docs/components.html @@ -51,7 +51,7 @@
        -
      • Type
        • +
      • Typography
      • Tables
      • Forms
      • Buttons
        • -- cgit v1.2.3 From b723db1e42b6450acdc02ee8086da51ac16fcef6 Mon Sep 17 00:00:00 2001 From: Chris Gunther Date: Sat, 14 Jan 2012 15:21:09 -0500 Subject: fix section ID for pagination --- 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 223f27584..e11a7decf 100644 --- a/docs/components.html +++ b/docs/components.html @@ -844,7 +844,7 @@ -
    • @@ -1159,7 +1160,7 @@ -
      +

      Progress bars For loading, redirecting, or action status

      -- cgit v1.2.3 From f587e81b7d72e47b16bf808c721c3dfe45ae1062 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 16:18:15 -0800 Subject: rewrite alert messages to use less code, combine the look of default and block messages, simplify docs --- docs/components.html | 131 +++++++++++++++++++++++---------------------------- 1 file changed, 60 insertions(+), 71 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index fa3dc5a20..9fc987508 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1058,101 +1058,90 @@ ================================================== -->
      -

      Alerts & Errors Styles for success, warning, and error messages or alerts

      +

      Alerts Styles for success, warning, and error messages

      - + +

      Lightweight defaults

      -
      -

      Basic alerts

      -

      .alert-message

      -

      One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

      -

      Get the javascript »

      +
      +

      Rewritten base class

      +

      With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.

      +

      Single alert message

      +

      For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to .block-alert.

      +
      +

      Goes great with javascript

      +

      Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

      +

      Get the plugin »

      -
      -
      - × -

      Holy guacamole! Best check yo self, you’re not looking too good.

      -
      -
      - × -

      Oh snap! Change this and that and try again.

      -
      -
      +
      +

      Example alerts

      +

      Wrap your message and an optional close icon in a div with simple class.

      +
      × -

      Well done! You successfully read this alert message.

      + Warning! Best check yo self, you’re not looking too good.
      -
      +
      +<div class="alert">
+  <a class="close">×</a>
+  <strong>Warning!</strong> Best check yo self, you’re not looking too good.
+</div>
+
      +

      Easily extend the standard alert message with two optional classes: .block-alert for more padding and text controls and .alert-heading for a matching heading.

      +
      × -

      Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

      +

      Warning!

      +

      Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      - -

      Example code

      -<div class="alert-message warning">
+<div class="alert block-alert">
   <a class="close">×</a>
-  <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+  <h4 class="alert-heading">Warning!</h4>
+  Best check yo self, you’re not...
 </div>
      -
      - -
      +
      - +

      Contextual alternatives Add optional classes to change an alert's connotation

      -
      -

      Block messages

      -

      <div class="alert-message block-message">

      -

      For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

      -

      Get the javascript »

      -
      -
      -
      - × -

      Holy guacamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      -
      - Take this action Or do this -
      -
      -
      +
      +

      Error or danger

      +
      × -

      Oh snap! You got an error! Change this and that and try again.

      -
        -
      • Duis mollis est non commodo luctus
        • -
      • Nisi erat porttitor ligula
        • -
      • Eget lacinia odio sem nec elit
        • -
      -
      - Take this action Or do this -
      + Oh snap! Change a few things up and try submitting again.
      -
      +
      +<div class="alert error-alert">
+  ...
+</div>
+
      +
      +
      +

      Success

      +
      × -

      Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

      -
      - Take this action Or do this -
      + Well done! You successfully read this important alert message.
      -
      +
      +<div class="alert success-alert">
+  ...
+</div>
+
      +
      +
      +

      Information

      +
      × -

      Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

      -
      - Take this action Or do this -
      + Heads up! This alert needs your attention, but it’s not super important.
      - -

      Example code

      -<div class="alert-message block-message warning">
-  <a class="close">×</a>
-  <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-  <div class="alert-actions">
-    <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
-  </div>
+<div class="alert info-alert">
+  ...
 </div>
      -
      +
      +
      -- cgit v1.2.3 From 6d916763f82be8c2d4f87842275170c12bea72ec Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 20:54:37 -0800 Subject: adding the pager component after rewriting the pagination docs and css --- docs/components.html | 106 +++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 85 insertions(+), 21 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f934ac68e..e88bd777c 100644 --- a/docs/components.html +++ b/docs/components.html @@ -847,63 +847,127 @@ ================================================== -->
      -

      Pagination

      +

      Pagination Two options for paging through content

      +

      Multi-page pagination

      -
      -

      Pagination

      -

      Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.

      +
      +

      When to use

      +

      Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

      +

      Stateful page links

      +

      Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

      +

      Flexible alignment

      +

      Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

      -
      +
      +

      Examples

      +

      The default pagination component is flexible and works in a number of variations.

      + - +
      +

      Markup

      +

      Wrapped in a <div>, pagination is just a <ul>.

       <div class="pagination">
   <ul>
-    <li class="prev disabled"><a href="#">&larr; Previous</a></li>
-    <li class="active"><a href="#">1</a></li>
+    <li><a href="#">Prev</a></li>
+    <li class="active">
+      <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 class="next"><a href="#">Next &rarr;</a></li>
+    <li><a href="#">Next</a></li>
   </ul>
 </div>
      +

      Pager For quick previous and next links

      +
      +
      +

      About pager

      +

      The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

      +
      +
      +

      Default example

      +

      By default, the pager centers links.

      + +
      +<ul class="pager">
+  <li>
+    <a href="#">Previous</a>
+  </li>
+  <li>
+    <a href="#">Next</a>
+  </li>
+</ul>
+
      +
      +
      +

      Aligned links

      +

      Alternatively, you can align each link to the sides:

      + +
      +<ul class="pager">
+  <li>
+    <a href="#">&larr; Older</a>
+  </li>
+  <li>
+    <a href="#">Newer &rarr;</a>
+  </li>
+</ul>
+
      +
      +
      -- cgit v1.2.3 From 8ceea1f559fb432fc12df32153911de89caea36f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 11:26:06 -0800 Subject: fix some ie7 bugs, improve dropdowns for ie due to lack of a shadow, fix pager example code --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index e88bd777c..83a024456 100644 --- a/docs/components.html +++ b/docs/components.html @@ -958,10 +958,10 @@ 
     <ul class="pager">
-  <li>
+  <li class="previous">
     <a href="#">&larr; Older</a>
   </li>
-  <li>
+  <li class="next">
     <a href="#">Newer &rarr;</a>
   </li>
 </ul>
-- 
cgit v1.2.3


From fe160261e460903cae251de25eaf41f236bd051e Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 15 Jan 2012 11:30:24 -0800
Subject: normalize the alert classes to match last night's flip for form and
 table classes

---
 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 83a024456..c9390272d 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1132,7 +1132,7 @@
       
    Rewritten base class
    
       
    With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.
    
       
    Single alert message
    
-      
    For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to .block-alert.
    
+      
    For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to .alert-block.
    
       
    
       
    Goes great with javascript
    
       
    Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.
    
@@ -1151,14 +1151,14 @@
   <strong>Warning!</strong> Best check yo self, you’re not looking too good.
 </div>
    -

    Easily extend the standard alert message with two optional classes: .block-alert for more padding and text controls and .alert-heading for a matching heading.

    -
    +

    Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

    +
    ×

    Warning!

    Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    -<div class="alert block-alert">
+<div class="alert alert-block">
   <a class="close">×</a>
   <h4 class="alert-heading">Warning!</h4>
   Best check yo self, you’re not...
@@ -1171,36 +1171,36 @@
   
    
     
    
       
    Error or danger
    
-      
    
+      
    
         ×
         Oh snap! Change a few things up and try submitting again.
       
    
 
    -<div class="alert error-alert">
+<div class="alert alert-error">
   ...
 </div>
 
    
     
    
     
    
       
    Success
    
-      
    
+      
    
         ×
         Well done! You successfully read this important alert message.
       
    
 
    -<div class="alert success-alert">
+<div class="alert alert-success">
   ...
 </div>
 
    
     
    
     
    
       
    Information
    
-      
    
+      
    
         ×
         Heads up! This alert needs your attention, but it’s not super important.
       
    
 
    -<div class="alert info-alert">
+<div class="alert alert-info">
   ...
 </div>
 
    
-- 
cgit v1.2.3


From 127c0d0b52c52227dcd3f346d371e5cd4219a08f Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 15 Jan 2012 13:12:29 -0800
Subject: make dl and child elements less specific

---
 docs/components.html | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index c9390272d..1343a4279 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -865,33 +865,29 @@
       
    The default pagination component is flexible and works in a number of variations.
    
       
       
       
-- 
cgit v1.2.3


From f1a88eede391cbb4beaadce60768a351724d7633 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 16 Jan 2012 17:27:30 -0800
Subject: fix js link in docs nav, restyle accordion with new css

---
 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 1343a4279..dd7f098b5 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -81,7 +81,7 @@
                 
               
               
      
-                
    • Transition
      • 
+                
    • Overview
      • 
                 
    • Modal
      • 
                 
    • Dropdown
      • 
                 
    • Scrollspy
      • 
-- 
cgit v1.2.3


From 4d098a7f8e2a39e7eb9baf36087e0c9856205413 Mon Sep 17 00:00:00 2001
From: Ben Oberkfell 
Date: Wed, 18 Jan 2012 00:37:24 -0600
Subject: typo fix in component docs

---
 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 1343a4279..bc7d335c8 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1278,7 +1278,7 @@
           
    
           
    
             
    Browser support
    
-            
    Progress bars use CSS3 gradients, transitions, and animations to achieve all theire effects. These features are not supported in IE7-8 or older versions of Firefox.
    
+            
    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.
    
             
    Opera does not support animations at this time.
    
           
    
         
    
-- 
cgit v1.2.3


From 0523c053a79430b3dab775fab2d572841f743c5a Mon Sep 17 00:00:00 2001
From: Olivier Laviale 
Date: Sun, 22 Jan 2012 21:45:20 +0100
Subject: Fixed typo

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 mode change 100644 => 100755 docs/components.html

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
old mode 100644
new mode 100755
index 7d0593874..984e8c76d
--- a/docs/components.html
+++ b/docs/components.html
@@ -1128,7 +1128,7 @@
       
    Rewritten base class
    
       
    With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.
    
       
    Single alert message
    
-      
    For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to .alert-block.
    
+      
    For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.
    
       
    
       
    Goes great with javascript
    
       
    Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.
    
-- 
cgit v1.2.3


From a7bf0295fbf3ce9abc1ca44680f4a6eaf17339b5 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 23 Jan 2012 11:55:04 -0800
Subject: remove dropdowns, add in sub nav instead

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 984e8c76d..47efee5ac 100755
--- a/docs/components.html
+++ b/docs/components.html
@@ -34,71 +34,20 @@
           Bootstrap
           
         
    
@@ -112,6 +61,17 @@
       
    
         
    Components
    
         
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
+        
       
    
 
 
-- 
cgit v1.2.3


From ea8f5883fd58ff5e356944e4a93543c05abf2220 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 23 Jan 2012 12:04:48 -0800
Subject: clean up subnav aesthetics

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 47efee5ac..8cd76bedc 100755
--- a/docs/components.html
+++ b/docs/components.html
@@ -63,13 +63,13 @@
         
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
         
       
-- 
cgit v1.2.3


From f764aee4b919c28974dba7b91edac9a04172ba25 Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Mon, 23 Jan 2012 14:14:16 -0800
Subject: add templates for doc generation

---
 docs/components.html | 51 +++++++++++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 22 deletions(-)
 mode change 100755 => 100644 docs/components.html

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
old mode 100755
new mode 100644
index 984e8c76d..ea58cecb8
--- a/docs/components.html
+++ b/docs/components.html
@@ -7,7 +7,7 @@
     
     
 
-    
+    
     
@@ -18,10 +18,11 @@
     
 
     
-    
-    
-    
-    
+    
+    
+    
+    
+
   
 
   
@@ -33,8 +34,8 @@
         
    
           Bootstrap
           
             
-            
  • 
+            
  • 
               
                 Base CSS
                 
@@ -75,7 +76,7 @@
                 
  • Progress bars
    • 
               
             
-            
  • 
+            
  • 
               
                 Javascript plugins
                 
@@ -95,7 +96,7 @@
                 
  • Typeahead
    • 
               
             
-            
  • 
+            
  • 
               
                 Using LESS
               
@@ -107,13 +108,12 @@
 
     
    
 
-      
-      
    
-        
    Components
    
-        
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
-      
    
-
+
+
    
+  
    Components
    
+  
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
+
    
 
 
   
       
+
     
    
 
+
     
     
-    
+    
+    
     
     
+    
+    
     
-    
     
+    
     
+    
+    
+    
+    
+    
     
   
 
-- 
cgit v1.2.3


From b4b1ef68398b68dcdfa29465d06cd76d6bf2c49d Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Mon, 23 Jan 2012 15:17:32 -0800
Subject: rebuild with new templates

---
 docs/components.html | 110 ++++++++++++---------------------------------------
 1 file changed, 25 insertions(+), 85 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index ee14526e5..4a1e4fc6f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -27,82 +27,30 @@
 
   
 
-    
     
    
       
    
         
    
           Bootstrap
           
         
    
@@ -111,33 +59,24 @@
 
     
    
 
-<<<<<<< HEAD
-
-
    
-  
    Components
    
-  
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
-
    
-=======
-      
-      
    
-        
    Components
    
-        
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
-        
-      
    
+  
+  
    
+    
    Components
    
+    
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
+    
+  
    
 
->>>>>>> a074087034716804610637a5ad9cc0447a2cccb2
 
 
   
       
    
         
    Back to top
    
-- 
cgit v1.2.3


From 82de03b67cf729291ea5a73741e44838a42940f8 Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Mon, 23 Jan 2012 19:55:00 -0800
Subject: start wrapping text in {{_i}} for translation

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 4a1e4fc6f..9d28b9e06 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -22,11 +22,10 @@
     
     
     
-
   
 
   
-
+  
   
     
    
-- 
cgit v1.2.3


From 37b38fe2a0cf34142eb617a1e6db155849cf55ac Mon Sep 17 00:00:00 2001
From: Pete Hopkins 
Date: Tue, 24 Jan 2012 12:49:30 -0500
Subject: Spelling and typos in components.html and javascript.html

---
 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 8cd76bedc..e3d67aad5 100755
--- a/docs/components.html
+++ b/docs/components.html
@@ -1086,7 +1086,7 @@
   
    
     
    
       
    Rewritten base class
    
-      
    With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.
    
+      
    With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.
    
       
    Single alert message
    
       
    For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.
    
       
    
-- 
cgit v1.2.3


From fecd4ddd135a893f2c5c103d565e9d1ab110d247 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 24 Jan 2012 14:25:30 -0800
Subject: docs updates to make the getting started section more responsive,
 updated the benefits to be clearer and swap x for checkmark

---
 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 3a15541c4..9d28b9e06 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1088,7 +1088,7 @@
   
    
     
    
       
    Rewritten base class
    
-      
    With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.
    
+      
    With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.
    
       
    Single alert message
    
       
    For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.
    
       
    
-- 
cgit v1.2.3


From 672ba4c2fd9a42d4f178e795ebc162cce81bbc2f Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 24 Jan 2012 19:19:50 -0800
Subject: update the subnav on all pages

---
 docs/components.html | 263 +++++++++++++++++++++++++--------------------------
 1 file changed, 130 insertions(+), 133 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 9d28b9e06..50c615fb9 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -58,11 +58,12 @@
 
     
    
 
-  
-  
    
-    
    Components
    
-    
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
+
+
    
+  
    Components
    
+  
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
+  
    
     
-  
    
+  
    
+
 
 
 
-  
-  
    
-    
    
-      
    Button groups Join buttons for more toolbar-like functionality
    
-    
    
-    
    
-      
    
-        
    Button groups
    
-        
    Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.
    
-        
    You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.
    
-        
    
+
+
    
+  
    
+    
    Button groups Join buttons for more toolbar-like functionality
    
+  
    
+  
    
+    
    
+      
    Button groups
    
+      
    Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.
    
+      
    You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.
    
+      
    
+        
    
+          Left
+          Middle
+          Right
+        
    
+      
    
+      
    
+        
    
           
    
-            Left
-            Middle
-            Right
+            1
+            2
+            3
+            4
           
    
-        
    
-        
    
-          
    
-            
    
-              1
-              2
-              3
-              4
-            
    
-            
    
-              5
-              6
-              7
-            
    
-            
    
-              8
-            
    
+          
    
+            5
+            6
+            7
+          
    
+          
    
+            8
           
    
         
    
-
       
    
-      
    
-        
    Example markup
    
-        
    Here's how the HTML looks for a standard button group built with anchor tag buttons:
    
+
+    
    
+    
    
+      
    Example markup
    
+      
    Here's how the HTML looks for a standard button group built with anchor tag buttons:
    
 
     <div class="btn-group">
   <a class="btn" href="#">1</a>
@@ -134,95 +136,95 @@
   </div>
 </div>
 
    
-      
    
-      
    
-        
    Checkbox and radio flavors
    
-        
    Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.
    
-        
    Get the javascript »
    
-        
    
-        
    Heads up
    
-        
    CSS for button groups is in a separate file, button-groups.less.
    
-      
    
     
    
-  
    
+    
    
+      
    Checkbox and radio flavors
    
+      
    Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.
    
+      
    Get the javascript »
    
+      
    
+      
    Heads up
    
+      
    CSS for button groups is in a separate file, button-groups.less.
    
+    
    
+  
    
+
    
 
 
 
-  
-  
    
-    
    
-      
    Split button dropdowns Built on button groups to provide contextual menus
    
+
+
    
+  
    
+    
    Split button dropdowns Built on button groups to provide contextual menus
    
+  
    
+  
    
+    
    
+      
    Split button dropdowns
    
+      
    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.
    
+      
    
+        
    
+          
    
+            Action
+            
+            
+          
    
+          
    
+            Action
+            
+            
+          
    
+          
    
+            Danger
+            
+            
+          
    
+        
    
+        
    
+          
    
+            Success
+            
+            
+          
    
+          
    
+            Info
+            
+            
+          
    
+        
    
+      
     
     
    
-    
    
-      
    
-        
    Split button dropdowns
    
-        
    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.
    
-        
    
-          
    
-            
    
-              Action
-              
-              
-            
    
-            
    
-              Action
-              
-              
-            
    
-            
    
-              Danger
-              
-              
-            
    
-          
    
-          
    
-            
    
-              Success
-              
-              
-            
    
-            
    
-              Info
-              
-              
-            
    
-          
    
-        
     
-      
    
-      
    
-        
    Example markup
    
-        
    Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.
    
+    
    
+      
    Example markup
    
+      
    Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.
    
 
     <div class="btn-group">
   <a class="btn" href="#">Action</a>
@@ -234,9 +236,9 @@
   </ul>
 </div>
 
    
-      
    
     
    
-  
    
+  
    
+
    
 
 
 
@@ -528,11 +530,6 @@
 
   
    Tabbable in any direction
    
   
    
-
     
    
       
    Tabs on the bottom
    
       
    Flip the order of the HTML and add a class to put tabs on the bottom.
    
-- 
cgit v1.2.3


From 4a6d9106b8f92a85a528971c70f132c32b6c43cf Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 24 Jan 2012 19:36:42 -0800
Subject: fix the thumbnails more examples section

---
 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 50c615fb9..d823998d9 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1038,7 +1038,7 @@
       
      
         
    • 
           
-            
+            
           
         
      • 
         
    • 
-- 
cgit v1.2.3


From b8fa6cfacf61a02ab769b9031253c7b06111fa7c Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 01:22:29 -0800
Subject: move css builder and downloader to dedicated page, start to update
 remaining sections on LESS docs page

---
 docs/components.html | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index d823998d9..c1cec739c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -51,6 +51,9 @@
             
    • 
               Using LESS
             
      • 
+            
    • 
+              Download
+            
      • 
           
    
         
    
       
    
@@ -65,15 +68,15 @@
   
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
   
    
     
   
    
 
-- 
cgit v1.2.3


From 9553b1e3e9457a48b6da3724c906a36f935aa526 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 10:02:52 -0800
Subject: update docs to include separate responsive css, update docs to
 highlight proper file name, updated makefile to build responsive separately

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index c1cec739c..e52780183 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -14,6 +14,7 @@
 
     
     
+    
     
     
 
-- 
cgit v1.2.3


From 1fa3eab20c827d0300cd4a4bb50e2c28e16a2872 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 10:19:29 -0800
Subject: fix location of favicon

---
 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 e52780183..0833cbf6b 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -19,7 +19,7 @@
     
 
     
-    
+    
     
     
     
-- 
cgit v1.2.3


From 97bad784b5b8fe4ea871a7d4d8c3f5714c26e2ee Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 10:50:08 -0800
Subject: update remaining icons in docs

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 0833cbf6b..5991cba36 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -452,13 +452,13 @@
       
    
         
       
     
 
    -- 
cgit v1.2.3


From fd3c6733a2d7b8f3afa3fc8511162e23ad1ac412 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 11:11:22 -0800
Subject: missing icon class in code example

---
 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 5991cba36..a7a447084 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -466,7 +466,7 @@
   ...
   <li>
     <a href="#">
-      <i class="book"></i>
+      <i class="icon book"></i>
       Library
     </a>
   </li>
-- 
cgit v1.2.3


From 25519bacd56ee2507cdde727d85458e5e5ef7949 Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Wed, 25 Jan 2012 11:25:35 -0800
Subject: rebuild + add spy to template

---
 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 a7a447084..56c5280db 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -25,7 +25,7 @@
     
   
 
-  
+  
   
   
-- 
cgit v1.2.3


From e877d125d7a2c673fec4e63600c2d8544c3128f6 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2012 20:02:32 -0800
Subject: fix button group shadows, update js docs to fix alert js file link

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 56c5280db..2ccfd26e6 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -70,7 +70,7 @@
   
    
     
      
       
    • Button groups
      • 
-      
    • Button dropdowns
      • 
+      
    • Combo buttons
      • 
       
    • Nav, tabs, pills
      • 
       
    • Navbar
      • 
       
    • Breadcrumbs
      • 
@@ -156,9 +156,9 @@
 
 
-
      
+
      
   
      
-    
      Split button dropdowns Built on button groups to provide contextual menus
      
+    
      Combo buttons Built on button groups to provide contextual dropdown menus
      
   
      
   
      
     
      
-- 
cgit v1.2.3


From 0ef4b6419fd83170dd62049a2850c5e8466635c9 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 26 Jan 2012 10:00:09 -0800
Subject: overhaul frontpage jumbotron, add js for twitter buttons back in, fix
 up some form ids and classes, straighten out the use of primary button
 variable

---
 docs/components.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 2ccfd26e6..49f3f8369 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -27,6 +27,7 @@
 
   
   
+  
   
     
      
@@ -1248,6 +1249,7 @@
 
       
      
 
+
      
       
      
@@ -1260,9 +1262,11 @@
     
    
 
 
-    
+
+    
     
-    
+    
     
     
     
-- 
cgit v1.2.3


From b260544de02788bc921c4c713df0f754d96c5a27 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 26 Jan 2012 15:54:04 -0800
Subject: fix links to apple touch icons

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 49f3f8369..252e1a0c3 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -20,9 +20,9 @@
 
     
     
-    
-    
-    
+    
+    
+    
   
 
   
-- 
cgit v1.2.3


From ed64276e5be1bbf808f2ab1451aa02522cc3aff0 Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Thu, 26 Jan 2012 22:05:45 -0800
Subject: move doc building into base make method + build bootstrap to doc
 assets

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 252e1a0c3..eba49449f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -13,8 +13,8 @@
     
 
     
-    
-    
+    
+    
     
     
 
-- 
cgit v1.2.3


From e8647c1b118d2c726a8987e9a41aad82da972b57 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 27 Jan 2012 13:20:02 -0800
Subject: huuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuge update
 to doces and stuff

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index eba49449f..7efa889b8 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -30,7 +30,7 @@
   
   
-    
    
+    
    
       
    
         
    
           Bootstrap
@@ -71,7 +71,7 @@
   
    
     
    
-      
    To make the navbar fixed, swap the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.
    
+      
    To make the navbar fixed, swap the .navbar-static class for .navbar-fixed-top. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.
    
 
    -<div class="navbar navbar-fixed">
+<div class="navbar navbar-fixed-top">
   ...
 </div>
 
    
-- 
cgit v1.2.3


From 6fd1e9f4c0903ae4ff4f57bd3cb193ee0ed2b9ad Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Fri, 27 Jan 2012 13:36:31 -0800
Subject: rebuil update layout

---
 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 7efa889b8..cf5fcb928 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -54,7 +54,7 @@
               Using LESS
             
    • 
             
  • 
-              Download
+              Customize
             
    • 
           
         
    
-- 
cgit v1.2.3


From d02c6957d44761c35121cb88af727802ce4d9e5e Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 27 Jan 2012 19:49:56 -0800
Subject: fixing up buttons and examples of implementing icons

---
 docs/components.html | 153 +++++++++++++++++++++++++--------------------------
 1 file changed, 74 insertions(+), 79 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index cf5fcb928..6ebf6a4f0 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -96,32 +96,29 @@
       
    Button groups
    
       
    Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.
    
       
    You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.
    
-      
    
+      
    
         
    
           Left
           Middle
           Right
         
    
       
    
-      
    
-        
    
-          
    
-            1
-            2
-            3
-            4
-          
    
-          
    
-            5
-            6
-            7
-          
    
-          
    
-            8
-          
    
+      
    
+        
    
+          1
+          2
+          3
+          4
+        
    
+        
    
+          5
+          6
+          7
+        
    
+        
    
+          8
         
    
       
    
-
     
    
     
    
       
    Example markup
    
@@ -165,67 +162,65 @@
     
    
       
    Split button dropdowns
    
       
    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.
    
-      
    
-        
    
-          
    
-            Action
-            
-            
-          
    
-          
    
-            Action
-            
-            
-          
    
-          
    
-            Danger
-            
-            
-          
    
-        
    
-        
    
-          
    
-            Success
-            
-            
-          
    
-          
    
-            Info
-            
-            
-          
    
-        
    
-      
     
+      
    
+        
    
+          Action
+          
+          
+        
    
+        
    
+          Action
+          
+          
+        
    
+        
    
+          Danger
+          
+          
+        
    
+      
    
+      
    
+        
    
+          Success
+          
+          
+        
    
+        
    
+          Info
+          
+          
+        
    
+      
    
     
    
     
    
       
    Example markup
    
-- 
cgit v1.2.3


From cb8606f2c84adb57c82dd7bd401574a2376ff952 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 27 Jan 2012 22:52:45 -0800
Subject: adding wells and close icon to the docs under misc in components,
 with a new subnav style

---
 docs/components.html | 229 ++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 171 insertions(+), 58 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 6ebf6a4f0..a52558220 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -70,15 +70,27 @@
   
    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
    
   
    
     
   
    
 
@@ -927,6 +939,66 @@
 
 
 
+
+
    
+  
    
+    
    Inline labels Label and annotate text
    
+  
    
+  
+    
+      
+        
+        
+      
+    
+    
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+    
+  
    LabelsMarkup
    
+          Default
+        
+          <span class="label">Default</span>
+        
    
+          New
+        
+          <span class="label success">New</span>
+        
    
+          Warning
+        
+          <span class="label warning">Warning</span>
+        
    
+          Important
+        
+          <span class="label important">Important</span>
+        
    
+          Info
+        
+          <span class="label info">Info</span>
+        
    
+
    
+
+
+
 
 
    
@@ -1168,32 +1240,32 @@
 
 
-      
    
-        
    
-          
    Progress bars For loading, redirecting, or action status
    
-        
    
+
    
+  
    
+    
    Progress bars For loading, redirecting, or action status
    
+  
    
 
-        
    Examples and markup
    
-        
    
-          
    
-            
    Basic
    
-            
    Default progress bar with a vertical gradient.
    
-            
    
-              
    
-            
    
+  
    Examples and markup
    
+  
    
+    
    
+      
    Basic
    
+      
    Default progress bar with a vertical gradient.
    
+      
    
+        
    
+      
    
 
     <div class="progress">
   <div class="bar"
        style="width: 60%;"></div>
 </div>
 
    
-          
    
-          
    
-            
    Striped
    
-            
    Uses a gradient to create a striped effect.
    
-            
    
-              
    
-            
    
+    
    
+    
    
+      
    Striped
    
+      
    Uses a gradient to create a striped effect.
    
+      
    
+        
    
+      
    
 
     <div class="progress info
      striped">
@@ -1201,13 +1273,13 @@
        style="width: 20%;"></div>
 </div>
 
    
-          
    
-          
    
-            
    Animated
    
-            
    Takes the striped example and animates it.
    
-            
    
-              
    
-            
    
+    
    
+    
    
+      
    Animated
    
+      
    Takes the striped example and animates it.
    
+      
    
+        
    
+      
    
 
     <div class="progress danger
      striped active">
@@ -1215,34 +1287,75 @@
        style="width: 40%;"></div>
 </div>
 
    
-          
    
-        
    
+    
    
+  
    
+
+  
    Options and browser support
    
+  
    
+    
    
+      
    Additional colors
    
+      
    Progress bars utilize some of the same classes as buttons and alert messages for quick styling.
    
+      
      
+        
    • .info
      • 
+        
    • .success
      • 
+        
    • .danger
      • 
+      
    
+      
    Alternatively, you can customize the LESS files and roll your own colors and sizes.
    
+    
    
+    
    
+      
    Behavior
    
+      
    Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
    
+      
    If you use the .active class, your .striped progress bars will animate the stripes left to right.
    
+    
    
+    
    
+      
    Browser support
    
+      
    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.
    
+      
    Opera does not support animations at this time.
    
+    
    
+  
    
+
+
    
+
+
+
+
+
+
+
    
+  
    
+    
    Miscellaneous Wells, badges, and close icon
    
+  
    
+  
    
+    
    
+      
    Wells
    
+      
    Use the well as a simple effect on an element to give it an inset effect.
    
+      
    
+        Look, I'm in a well!
+      
    
+
    +<div class="well">
+  ...
+</div>
+
    
+    
    
+    
+    
    
+      
    Close icon
    
+      
    Use the generic close icon for dismissing content like modals and alerts.
    
+      
    ×
    
+
    <a class="close">&times;</a>
    
+    
    
+  
    
+
    
+
+
 
-        
    Options and browser support
    
-        
    
-          
    
-            
    Additional colors
    
-            
    Progress bars utilize some of the same classes as buttons and alert messages for quick styling.
    
-            
      
-              
    • .info
      • 
-              
    • .success
      • 
-              
    • .danger
      • 
-            
    
-            
    Alternatively, you can customize the LESS files and roll your own colors and sizes.
    
-          
    
-          
    
-            
    Behavior
    
-            
    Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
    
-            
    If you use the .active class, your .striped progress bars will animate the stripes left to right.
    
-          
    
-          
    
-            
    Browser support
    
-            
    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.
    
-            
    Opera does not support animations at this time.
    
-          
    
-        
    
 
-      
    
 
 
      
 
    -<div class="tabbable tabs-bottom">
+<div class="tabbable tabs-below">
   <ul class="nav tabs">
     ...
   </ul>
-- 
cgit v1.2.3


From 23e076c1bb73c4950d473cb36218937b2607bc13 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 28 Jan 2012 15:09:23 -0800
Subject: add in a navbar button for toggling the nav items

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 1d5cbc926..f584d90bd 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -33,6 +33,11 @@
     
    
       
    
         
    
+          
+            
+            
+            
+          
           Bootstrap
           
    
-    
    
+    
    
     
    
       
    Nav links
    
       
    Nav items are simple to add via unordered lists.
    
@@ -763,9 +770,9 @@
   </li>
 </ul>
    -

    Get the javascript →

    -
    - +

    Get the javascript →

    + +
    -- cgit v1.2.3 From 99ac6ca08ed27126d2ad1dd4d0e820205aab9c48 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:39:36 -0800 Subject: update components page to include docs for the new navbar collapse feature, re-add responsive.less to downloader --- docs/components.html | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 950d1f35c..710e7de77 100644 --- a/docs/components.html +++ b/docs/components.html @@ -467,7 +467,7 @@
    • List header
      • -
    • Home
      • +
    • Home
    • Library
    • Applications
    • Another list header
      • @@ -740,6 +740,33 @@ <input type="text" class="search-query pull-left" placeholder="Search"> </form> +

      Optional responsive variation

      +

      Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.

      +
      +<div class="navbar navbar-static">
+  <div class="navbar-inner">
+    <div class="container">
+      
+      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
+      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+        <span class="i-bar"></span>
+        <span class="i-bar"></span>
+        <span class="i-bar"></span>
+      </a>
+      
+      <!-- Be sure to leave the brand out there if you want it shown -->
+      <a class="brand" href="#">Project name</a>
+
+      <!-- Everything you want hidden at 940px or less, place within here -->
+      <div class="nav-collapse">
+        <!-- .nav, .navbar-search, .navbar-form, etc -->
+      </div>
+
+    </div>
+  </div>
+</div>
+
      +

    Nav links

    -- cgit v1.2.3 From 59d9983ebcc889b5e5626d672311e92657bfe3e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:03:14 -0800 Subject: updates to responsive and docs for responsive navbar --- docs/components.html | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 710e7de77..f9f8db057 100644 --- a/docs/components.html +++ b/docs/components.html @@ -766,6 +766,9 @@ </div> </div> +
    + Heads up! The responsive navbar requires the collapse plugin. +
    -- cgit v1.2.3 From 487dbfdda4692e3212f13d5e6282d7818b4c9934 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:14:51 -0800 Subject: namespace progress bars and labels classes --- docs/components.html | 42 +++++++++++++++++++----------------------- 1 file changed, 19 insertions(+), 23 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f9f8db057..52483572e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1007,34 +1007,34 @@ - New + New - <span class="label success">New</span> + <span class="label label-success">New</span> - Warning + Warning - <span class="label warning">Warning</span> + <span class="label label-warning">Warning</span> - Important + Important - <span class="label important">Important</span> + <span class="label label-important">Important</span> - Info + Info - <span class="label info">Info</span> + <span class="label label-info">Info</span> @@ -1307,12 +1307,12 @@

    Striped

    Uses a gradient to create a striped effect.

    -
    + 
    -<div class="progress info
-     striped">
+<div class="progress progress-info
+     progress-striped">
   <div class="bar"
        style="width: 20%;"></div>
 </div>
@@ -1321,12 +1321,12 @@
     
    
       
    Animated
    
       
    Takes the striped example and animates it.
    
-      
    
+      
    
         
    
       
    
 
    -<div class="progress danger
-     striped active">
+<div class="progress progress-danger
+     progress-striped active">
   <div class="bar"
        style="width: 40%;"></div>
 </div>
@@ -1338,18 +1338,18 @@
   
    
     
    
       
    Additional colors
    
-      
    Progress bars utilize some of the same classes as buttons and alert messages for quick styling.
    
+      
    Progress bars utilize some of the same class names as buttons and alerts for similar styling.
    
       
      
-        
    • .info
      • 
-        
    • .success
      • 
-        
    • .danger
      • 
+        
    • .progress-info
      • 
+        
    • .progress-success
      • 
+        
    • .progress-danger
      • 
       
    
       
    Alternatively, you can customize the LESS files and roll your own colors and sizes.
    
     
    
     
    
       
    Behavior
    
       
    Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
    
-      
    If you use the .active class, your .striped progress bars will animate the stripes left to right.
    
+      
    If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.
    
     
    
     
    
       
    Browser support
    
@@ -1398,10 +1398,6 @@
    - - - -