From: Mark Otto Date: Mon, 11 Jun 2012 04:00:20 +0000 (-0700) Subject: rewrite the split button dropdowns section X-Git-Tag: v2.1.0~2^2~281 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=c90c66e61f5e3f09a46d63cd79086c7b2ab6db5c;p=thirdparty%2Fbootstrap.git rewrite the split button dropdowns section --- diff --git a/docs/components.html b/docs/components.html index 4d7b6d3bb1..c96e4aa034 100644 --- a/docs/components.html +++ b/docs/components.html @@ -196,87 +196,83 @@

Button dropdown menus Built on button groups to provide contextual menus

-

Button dropdowns

-

Overview and examples

+

Overview and examples

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

-
-
- - -
-
- - -
-
- - -
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- -

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 dropdown-toggle" data-toggle="dropdown" href="#">
@@ -291,188 +287,191 @@
 
   
Works with all button sizes

   
Button dropdowns work at any size. your button sizes to .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

+  

+
 
-  
Overview and examples

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

-  

-    

-      
-      
-      
-    

-    

-      
-      
-      
-    

-    

-      
-      
-      
-    

-  

-  

-    

-      
-      
-      
-    

-    

-      
-      
-      
-    

-    

-      
-      
-      
-    

+  

+    

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+    

   

-  

-    

-      
-      
-      
-    

-  

-  
Sizes

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

-  

-    

-      
-      
-      
-    

-  

-  

-    

-      
-      
-      
-    

-  

-  

-    

-      
-      
-      
-    

-  

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

 
-  
Example markup

-  
We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.

+  
Sizes

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

+  

+    

+      

+        
+        
+        
+      

+    

+    

+      

+        
+        
+        
+      

+    

+    

+      

+        
+        
+        
+      

+    

+  

 
 <div class="btn-group">
-  <button class="btn">Action</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
+  <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">
@@ -480,31 +479,34 @@
   </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.

-  

-    

-      
-      
-      
-    

-    

-      
-      
-      
-    

+  

+    

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+    

   

 
 <div class="btn-group dropup">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 3001102a8f..cf40248afb 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -119,87 +119,83 @@
     
{{_i}}Button dropdown menus{{/i}} {{_i}}Built on button groups to provide contextual menus{{/i}}

   

 
-  
{{_i}}Button dropdowns{{/i}}

 
-  
{{_i}}Overview and examples{{/i}}

+  
{{_i}}Overview and examples{{/i}}

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

-  

-    

-      
-      
-    

-    

-      
-      
-    

-    

-      
-      
-    

-  

-  

-    

-      
-      
-    

-    

-      
-      
-    

-    

-      
-      
-    

-    

-      
-      
-    

-  

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

-  
{{_i}}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.{{/i}}

+  

+    

+      

+        
+        
+      

+      

+        
+        
+      

+      

+        
+        
+      

+      

+        
+        
+      

+      

+        
+        
+      

+      

+        
+        
+      

+      

+        
+        
+      

+    

+  
{{! /example }}
 
 <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -214,188 +210,191 @@
 
   
{{_i}}Works with all button sizes{{/i}}

   
{{_i}}Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.{{/i}}

-  

-    

-      
-      
-    

-    

-      
-      
-    

-    

-      
-      
-    

-  

+  

+    

+      

+        
+        
+      

+      

+        
+        
+      

+      

+        
+        
+      

+    

+  
{{! /example }}
 
   
{{_i}}Requires javascript{{/i}}

   
{{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

   
{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}

 
-  

 
-  
{{_i}}Split button dropdowns{{/i}}

+  

 
-  
{{_i}}Overview and examples{{/i}}

+
+  
{{_i}}Split button dropdowns{{/i}}

   
{{_i}}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.{{/i}}

-  

-    

-      
-      
-      
-    

-    

-      
-      
-      
-    

-    

-      
-      
-      
-    

-  

-  

-    

-      
-      
-      
-    

-    

-      
-      
-      
-    

-    

-      
-      
-      
-    

-  

-  

-    

-      
-      
-      
-    

-  

-  
{{_i}}Sizes{{/i}}

-  
{{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

-  

-    

-      
-      
-      
-    

-  

-  

-    

-      
-      
-      
-    

-  

-  

-    

-      
-      
-      
-    

-  

+  

+    

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+    

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

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

-  
{{_i}}We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.{{/i}}

+  
{{_i}}Sizes{{/i}}

+  
{{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

+  

+    

+      

+        
+        
+        
+      

+    

+    

+      

+        
+        
+        
+      

+    

+    

+      

+        
+        
+        
+      

+    

+  
{{! /example }}
 
 <div class="btn-group">
-  <button class="btn">{{_i}}Action{{/i}}</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
+  <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
+  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
@@ -403,32 +402,35 @@
   </ul>
 </div>
 

+
   
{{_i}}Dropup menus{{/i}}

   
{{_i}}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.{{/i}}

-  

-    

-      
-      
-      
-    

-    

-      
-      
-      
-    

-  

+  

+    

+      

+        
+        
+        
+      

+      

+        
+        
+        
+      

+    

+  
{{! /example }}
 
 <div class="btn-group dropup">
   <button class="btn">{{_i}}Dropup{{/i}}</button>