From c720d951be4481dab684955b7ef1a4ebb03ed0cf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 10 Feb 2012 23:50:45 -0800 Subject: [PATCH] add best practices and re-org the button groups --- docs/assets/bootstrap.zip | Bin 52621 -> 52621 bytes docs/components.html | 38 ++++++++++++++--------- docs/templates/pages/components.mustache | 38 ++++++++++++++--------- 3 files changed, 46 insertions(+), 30 deletions(-) diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index 382cbcef4355395454f904fa7c19f3ed612e510d..0c63fb3636f2d2498712bb8b9bc5e454d805185d 100644 GIT binary patch delta 460 zcmeC3&D=YinJ2)TnT3l11f2IxD{JPzUUqWe8DTCYi2zl$b#RG^eH=_c#WQTd zV(Vl#-aZQwn7oS95h}9zBWEx>NXSjl2rRT#c5|KJDFcv@my;PxRhyHT9>}Bs8UD=N zbp6l}P6lR#{Sa#=KPzwsI|^uoeqp5m*rG;Tn9$qCYOqk&Bo(l!5T`@6Zk%KQ6rAIHAw97UW@B5YO(k%;c1l;!Nv6BI1)yv4I5V zob*N&;5g-vDo}CC0af7UDHn(U)Kp`L9WWCooeo45U^(NBH47|oD9qe`ytj$epcWNb`;PE{lZECutklwFrl}N)nK8lNh)AdAx?*C-8jhrD!BOh zBt@njdnUi!Y{GUL=#f)Wo0Yd*76BRd_>3Kr0MH{! OXPuZJew|!-Rs;a=9J)sU diff --git a/docs/components.html b/docs/components.html index 2a31528ea0..cb41c736ed 100644 --- a/docs/components.html +++ b/docs/components.html @@ -118,14 +118,34 @@

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.

-
-
+

Best practices

+

We recommend the following guidelines for using button groups and toolbars:

+
    +
  • Always use the same element in a single button group, <a> or <button>.
    • +
  • Don't mix buttons of different colors in the same button group.
    • +
  • Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.
    • +
+

Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.

+
+
+

Default example

+

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

Toolbar example

+

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

1 @@ -142,18 +162,6 @@ 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">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 2262830041..62a7083b61 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -42,14 +42,34 @@
     

       
{{_i}}Button groups{{/i}}

       
{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}

-      
{{_i}}You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.{{/i}}

-      

-        

+      
{{_i}}Best practices{{/i}}

+      
{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}

+      
    
+        
  • {{_i}}Always use the same element in a single button group, <a> or <button>.{{/i}}
    • 
+        
  • {{_i}}Don't mix buttons of different colors in the same button group.{{/i}}
    • 
+        
  • {{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}
    • 
+      

+      
{{_i}}Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}

+    

+    

+      
{{_i}}Default example{{/i}}

+      
{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}

+      
+
+<div class="btn-group">
+  <a class="btn" href="#">1</a>
+  <a class="btn" href="#">2</a>
+  <a class="btn" href="#">3</a>
+</div>
+

+      
{{_i}}Toolbar example{{/i}}

+      
{{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}

       

         

           1
@@ -66,18 +86,6 @@
           8
         

       

-    

-    

-      
{{_i}}Example markup{{/i}}

-      
{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}

-
-<div class="btn-group">
-  <a class="btn" href="#">1</a>
-  <a class="btn" href="#">2</a>
-  <a class="btn" href="#">3</a>
-</div>
-

-      
{{_i}}And with a toolbar for multiple groups:{{/i}}

 
 <div class="btn-toolbar">
   <div class="btn-group">