From 5ef2b6561a8409cc26c413e4a152df89a383f0e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 22:47:45 -0700 Subject: realign icons to five cols, fix buttons --- docs/base-css.html | 92 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 61 insertions(+), 31 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 979a87385..618dee29a 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1202,6 +1202,9 @@ For example, <code>section</code> should be wrapped as inline.

Buttons

+ +

Default buttons

+

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

@@ -1249,13 +1252,14 @@ For example, <code>section</code> should be wrapped as inline.
-

Buttons for actions

-

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

-

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

-

Cross browser compatibility

+

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

-

Multiple sizes

+ +
+ + +

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

@@ -1269,29 +1273,51 @@ For example, <code>section</code> should be wrapped as inline.

-
-

Disabled state

-

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

-

+ + +

+ + +

Disabled state

+

Make buttons look unclickable by fading them back 50%.

+ +

Anchor element

+

Add the .disabled class to <a> buttons.

+

Primary link Link

-

- - -

+
+<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+<a href="#" class="btn btn-large disabled">Link</a>
+

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

-

One class, multiple tags

+

Button element

+

Add the disabled attribute to <button> buttons.

+

+ + +

+
+<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button class="btn btn-large" disabled>Button</button>
+
+ + +
+ + +

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

-
-Link - - - + + Link + + + 
 <a class="btn" href="">Link</a>
@@ -1346,6 +1372,10 @@ For example, <code>section</code> should be wrapped as inline.
         
  •  icon-download
    • 
         
  •  icon-upload
    • 
         
  •  icon-inbox
    • 
+      
+    
+    
    
+      
      
         
    •  icon-play-circle
      • 
         
    •  icon-repeat
      • 
         
    •  icon-refresh
      • 
@@ -1353,10 +1383,6 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-lock
      • 
         
    •  icon-flag
      • 
         
    •  icon-headphones
      • 
-      
    
-    
    
-    
    
-      
      
         
    •  icon-volume-off
      • 
         
    •  icon-volume-down
      • 
         
    •  icon-volume-up
      • 
@@ -1378,6 +1404,10 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-align-right
      • 
         
    •  icon-align-justify
      • 
         
    •  icon-list
      • 
+      
    
+    
    
+    
    
+      
      
         
    •  icon-indent-left
      • 
         
    •  icon-indent-right
      • 
         
    •  icon-facetime-video
      • 
@@ -1392,10 +1422,6 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-move
      • 
         
    •  icon-step-backward
      • 
         
    •  icon-fast-backward
      • 
-      
    
-    
    
-    
    
-      
      
         
    •  icon-backward
      • 
         
    •  icon-play
      • 
         
    •  icon-pause
      • 
@@ -1410,6 +1436,10 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-minus-sign
      • 
         
    •  icon-remove-sign
      • 
         
    •  icon-ok-sign
      • 
+      
    
+    
    
+    
    
+      
      
         
    •  icon-question-sign
      • 
         
    •  icon-info-sign
      • 
         
    •  icon-screenshot
      • 
@@ -1431,10 +1461,6 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-leaf
      • 
         
    •  icon-fire
      • 
         
    •  icon-eye-open
      • 
-      
    
-    
    
-    
    
-      
      
         
    •  icon-eye-close
      • 
         
    •  icon-warning-sign
      • 
         
    •  icon-plane
      • 
@@ -1442,6 +1468,10 @@ For example, <code>section</code> should be wrapped as inline.
         
    •  icon-random
      • 
         
    •  icon-comment
      • 
         
    •  icon-magnet
      • 
+      
    
+    
    
+    
    
+      
      
         
    •  icon-chevron-up
      • 
         
    •  icon-chevron-down
      • 
         
    •  icon-retweet
      • 
-- 
cgit v1.2.3