diff --git a/bootstrap.css b/bootstrap.css index 5fa1067a05..b859657ef0 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sun Jan 8 15:38:44 PST 2012 + * Date: Sun Jan 8 19:32:37 PST 2012 */ html, body { margin: 0; @@ -2525,9 +2525,9 @@ i { padding: 9px 14px 9px; font-size: 15px; line-height: normal; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } .btn.small { padding: 7px 9px 7px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 648efecb7e..3dc0151638 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -445,7 +445,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .btn.active,.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);} .btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} +.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} .btn.small{padding:7px 9px 7px;font-size:11px;} :root .alert-message,:root .btn{border-radius:0 \0;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} diff --git a/docs/base-css.html b/docs/base-css.html index c1cb3fd2dd..29f5d1d197 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1277,152 +1277,6 @@
-

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.

-
-
- -
-

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>
-
-
-
diff --git a/docs/components.html b/docs/components.html index 104bedf54f..f3e8d42a5e 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>
+
+
+
+
+ + + -
+