diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 30fb6de1a4..cf075b0a7a 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -441,13 +441,17 @@ h6 small { } h1, -h2 { +h2, +h3 { margin-top: 20px; margin-bottom: 10px; line-height: 40px; } -h3, +h3 { + line-height: 30px; +} + h4, h5, h6 { diff --git a/docs/components.html b/docs/components.html index 49db6f6bbd..fdc317e8c8 100644 --- a/docs/components.html +++ b/docs/components.html @@ -174,7 +174,6 @@

Button groups

-

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Single button group

@@ -263,12 +262,12 @@

Button dropdown menus

+

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. Requires the Bootstrap dropdown plugin.

- -

Overview and examples

-

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

+

Single or split button

+

Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.

-
+
-
-
-
-<div class="btn-group">
-  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-    Action
-    <span class="caret"></span>
-  </a>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-
+
-

Works with all button sizes

-

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

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

Requires JavaScript

-

Button dropdowns require the Bootstrap dropdown plugin to function.

-

In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.

- - -
- - -

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.

-
@@ -440,6 +379,18 @@ 
+<-- Single button -->
+<div class="btn-group">
+  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+    Action
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
+<-- Split button -->
 <div class="btn-group">
   <button class="btn">Action</button>
   <button class="btn dropdown-toggle" data-toggle="dropdown">
@@ -451,13 +402,12 @@
 </div>
-

Sizes

-

Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

+

Works with all button sizes

+

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

-
+
- - +
-
-
- - +
-
-
- - +
-
-<div class="btn-group">
-  <button class="btn btn-mini">Action</button>
-  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-
-

Dropup menus

-

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

+

Dropup buttons

+

Trigger dropdown menus above elements by adding .dropup to the parent.

-
+
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 791ecb854e..2513fcc3e7 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -106,7 +106,6 @@

Button groups

-

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Single button group

@@ -195,12 +194,12 @@

Button dropdown menus

+

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. Requires the Bootstrap dropdown plugin.

- -

Overview and examples

-

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

+

Single or split button

+

Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.

-
+
-
-
{{! /example }} -
-<div class="btn-group">
-  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-    Action
-    <span class="caret"></span>
-  </a>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-
+
-

Works with all button sizes

-

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

-
-
-
- - -
-
- - -
-
- - -
-
-
{{! /example }} - -

Requires JavaScript

-

Button dropdowns require the Bootstrap dropdown plugin to function.

-

In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.

- - -
- - -

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.

-
@@ -370,8 +309,20 @@
-
{{! /example }} + 
+<-- Single button -->
+<div class="btn-group">
+  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+    Action
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
+<-- Split button -->
 <div class="btn-group">
   <button class="btn">Action</button>
   <button class="btn dropdown-toggle" data-toggle="dropdown">
@@ -383,13 +334,12 @@
 </div>
-

Sizes

-

Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

+

Works with all button sizes

+

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

-
+
- - +
-
-
- - +
-
-
- - +
{{! /example }} -
-<div class="btn-group">
-  <button class="btn btn-mini">Action</button>
-  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-
-

Dropup menus

-

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

+

Dropup buttons

+

Trigger dropdown menus above elements by adding .dropup to the parent.

-
+
diff --git a/less/button-groups.less b/less/button-groups.less index c2b9f3608d..b6c052ca41 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -23,6 +23,7 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { .clear_float(); + .btn-group { float: left; } diff --git a/less/type.less b/less/type.less index 29062be48e..4387bfabfe 100644 --- a/less/type.less +++ b/less/type.less @@ -65,12 +65,15 @@ h1, h2, h3, h4, h5, h6 { } h1, -h2 { +h2, +h3 { margin-top: @line-height-base; margin-bottom: @line-height-base / 2; line-height: @line-height-base * 2; } -h3, +h3 { + line-height: @line-height-base * 1.5; +} h4, h5, h6 {