From 0f3a073b8dca534e78c09b71999d5a2632e2245d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 21:15:57 -0800 Subject: *really* refactor the buttons and update them all over the docs --- docs/assets/bootstrap.zip | Bin 52308 -> 52307 bytes docs/assets/css/bootstrap.css | 122 +++++++++++++++---------------- docs/assets/css/docs.css | 6 +- docs/base-css.html | 68 ++++++++--------- docs/components.html | 24 +++--- docs/download.html | 8 +- docs/index.html | 4 +- docs/javascript.html | 30 ++++---- docs/templates/pages/base-css.mustache | 68 ++++++++--------- docs/templates/pages/components.mustache | 24 +++--- docs/templates/pages/download.mustache | 8 +- docs/templates/pages/index.mustache | 4 +- docs/templates/pages/javascript.mustache | 30 ++++---- 13 files changed, 198 insertions(+), 198 deletions(-) (limited to 'docs') diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index 930c01937..55b71b927 100644 Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c377d6f97..ec8a5f3ff 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1700,7 +1700,7 @@ table .span12 { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } -.btn.active, .btn:active { +.btn-active, .btn:active { background-image: none; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); @@ -1710,7 +1710,7 @@ table .span12 { color: rgba(0, 0, 0, 0.5); outline: 0; } -.btn.disabled, .btn[disabled] { +.btn-disabled, .btn[disabled] { cursor: default; background-image: none; background-color: #e6e6e6; @@ -1720,7 +1720,7 @@ table .span12 { -moz-box-shadow: none; box-shadow: none; } -.btn.large { +.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; @@ -1728,38 +1728,38 @@ table .span12 { -moz-border-radius: 5px; border-radius: 5px; } -.btn.large .icon { +.btn-large .icon { margin-top: 1px; } -.btn.small { +.btn-small { padding: 5px 9px; font-size: 11px; line-height: 16px; } -.btn.small .icon { +.btn-small .icon { margin-top: -1px; } -.btn.primary, -.btn.primary:hover, -.btn.warning, -.btn.warning:hover, -.btn.danger, -.btn.danger:hover, -.btn.success, -.btn.success:hover, -.btn.info, -.btn.info:hover { +.btn-primary, +.btn-primary:hover, +.btn-warning, +.btn-warning:hover, +.btn-danger, +.btn-danger:hover, +.btn-success, +.btn-success:hover, +.btn-info, +.btn-info:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; } -.btn.primary.active, -.btn.warning.active, -.btn.danger.active, -.btn.success.active, -.btn.info.active { +.btn-primary.active, +.btn-warning.active, +.btn-danger.active, +.btn-success.active, +.btn-info.active { color: rgba(255, 255, 255, 0.75); } -.btn.primary { +.btn-primary { background-color: #006dcc; background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-image: -ms-linear-gradient(top, #0088cc, #0044cc); @@ -1773,17 +1773,17 @@ table .span12 { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } -.btn.primary:hover, -.btn.primary:active, -.btn.primary.active, -.btn.primary.disabled, -.btn.primary[disabled] { +.btn-primary:hover, +.btn-primary:active, +.btn-primary.active, +.btn-primary.disabled, +.btn-primary[disabled] { background-color: #0044cc; } -.btn.primary:active, .btn.primary.active { +.btn-primary:active, .btn-primary.active { background-color: #003399 \9; } -.btn.warning { +.btn-warning { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -ms-linear-gradient(top, #fbb450, #f89406); @@ -1797,17 +1797,17 @@ table .span12 { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } -.btn.warning:hover, -.btn.warning:active, -.btn.warning.active, -.btn.warning.disabled, -.btn.warning[disabled] { +.btn-warning:hover, +.btn-warning:active, +.btn-warning.active, +.btn-warning.disabled, +.btn-warning[disabled] { background-color: #f89406; } -.btn.warning:active, .btn.warning.active { +.btn-warning:active, .btn-warning.active { background-color: #c67605 \9; } -.btn.danger { +.btn-danger { background-color: #da4f49; background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); @@ -1821,17 +1821,17 @@ table .span12 { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } -.btn.danger:hover, -.btn.danger:active, -.btn.danger.active, -.btn.danger.disabled, -.btn.danger[disabled] { +.btn-danger:hover, +.btn-danger:active, +.btn-danger.active, +.btn-danger.disabled, +.btn-danger[disabled] { background-color: #bd362f; } -.btn.danger:active, .btn.danger.active { +.btn-danger:active, .btn-danger.active { background-color: #942a25 \9; } -.btn.success { +.btn-success { background-color: #5bb75b; background-image: -moz-linear-gradient(top, #62c462, #51a351); background-image: -ms-linear-gradient(top, #62c462, #51a351); @@ -1845,17 +1845,17 @@ table .span12 { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } -.btn.success:hover, -.btn.success:active, -.btn.success.active, -.btn.success.disabled, -.btn.success[disabled] { +.btn-success:hover, +.btn-success:active, +.btn-success.active, +.btn-success.disabled, +.btn-success[disabled] { background-color: #51a351; } -.btn.success:active, .btn.success.active { +.btn-success:active, .btn-success.active { background-color: #408140 \9; } -.btn.info { +.btn-info { background-color: #49afcd; background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); @@ -1869,14 +1869,14 @@ table .span12 { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } -.btn.info:hover, -.btn.info:active, -.btn.info.active, -.btn.info.disabled, -.btn.info[disabled] { +.btn-info:hover, +.btn-info:active, +.btn-info.active, +.btn-info.disabled, +.btn-info[disabled] { background-color: #2f96b4; } -.btn.info:active, .btn.info.active { +.btn-info:active, .btn-info.active { background-color: #24748c \9; } button.btn, input[type="submit"].btn { @@ -2008,15 +2008,15 @@ button.btn.small, input[type="submit"].btn.small { opacity: 1; filter: alpha(opacity=100); } -.primary .caret, -.danger .caret, -.info .caret, -.success .caret { +.btn-primary .caret, +.btn-danger .caret, +.btn-info .caret, +.btn-success .caret { border-top-color: #ffffff; opacity: 0.75; filter: alpha(opacity=75); } -.btn.small .caret { +.btn-small .caret { margin-top: 4px; } .alert { diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 026872a34..a5ad9631a 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -73,7 +73,7 @@ hr.soften { line-height: 36px; color: #333; } -.jumbotron .btn { +.jumbotron .btn-large { font-size: 20px; font-weight: normal; padding: 14px 24px; @@ -440,7 +440,7 @@ hr.soften { /* Giant download button */ .download-btn { - margin: 36px 0 108px.i; + margin: 36px 0 108px; } .download p, .download h4 { @@ -455,7 +455,7 @@ hr.soften { .download p { margin-bottom: 18px; } -.btn.xlarge { +.download-btn .btn { display: block; width: auto; padding: 19px 24px; diff --git a/docs/base-css.html b/docs/base-css.html index 5df63b917..ddbbad174 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -832,11 +832,6 @@ For example, <code>section</code> should be wrapped as inline. .form-vertical (not required) Stacked, left-aligned labels over controls - - Horizontal - .form-horizontal - Float left, right-aligned labels on same line as controls - Inline .form-inline @@ -847,6 +842,11 @@ For example, <code>section</code> should be wrapped as inline. .form-search Extra-rounded text input for a typical search aesthetic + + Horizontal + .form-horizontal + Float left, right-aligned labels on same line as controls + @@ -955,7 +955,7 @@ For example, <code>section</code> should be wrapped as inline.
- +
@@ -1048,7 +1048,7 @@ For example, <code>section</code> should be wrapped as inline.
- +
@@ -1172,7 +1172,7 @@ For example, <code>section</code> should be wrapped as inline.
- +
@@ -1215,28 +1215,28 @@ For example, <code>section</code> should be wrapped as inline. Standard gray button with gradient - Primary - .primary + Primary + .btn-primary Provides extra visual weight and identifies the primary action in a set of buttons - Info - .info + Info + .btn-info Used as an alternate to the default styles - Success - .success + Success + .btn-success Indicates a successful or positive action - Warning - .warning + Warning + .btn-warning Indicates caution should be taken with this action - Danger - .danger + Danger + .btn-danger Indicates a dangerous or potentially negative action @@ -1261,24 +1261,24 @@ For example, <code>section</code> should be wrapped as inline.

Multiple sizes

Fancy larger or smaller buttons? Have at it!

- Primary action - Action + Primary action + Action

- Primary action - Action + Primary action + Action

Disabled state

-

For disabled buttons, use .disabled for links and :disabled for <button> elements.

+

For disabled buttons, use .btn-disabled for links and :disabled for <button> elements.

- Primary action - Action + Primary action + Action

- - + +

@@ -1491,8 +1491,8 @@ For example, <code>section</code> should be wrapped as inline.
- User - + User +

Refresh - Checkout - Delete + Checkout + Delete

- Comment - Settings - More Info + Comment + Settings + More Info

diff --git a/docs/components.html b/docs/components.html index 1d70ac476..eb876572d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -198,7 +198,7 @@
- Action + Action
- Danger + Danger
- Success + Success
- Info + Info
- Action - + Action +
- Danger - + Danger +
- Success - + Success +
- Info - + Info +
  • Action
  • Another action
    • diff --git a/docs/download.html b/docs/download.html index e2cc50836..38ebee85f 100644 --- a/docs/download.html +++ b/docs/download.html @@ -91,7 +91,7 @@
    - Toggle all + Toggle all

    1. Chose components Get just the CSS you need @@ -147,7 +147,7 @@
    - Toggle all + Toggle all

    2. Select jQuery plugins Quickly add only the necessary javascript @@ -216,7 +216,7 @@
    - Reset to defaults + Reset to defaults

    3. Customize variables Optionally modify Bootstrap without a compiler @@ -315,7 +315,7 @@

    - Customize and Download + Customize and Download

    What's included?

    Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.

    diff --git a/docs/index.html b/docs/index.html index 66cc0ee48..71c2970a0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -81,8 +81,8 @@

    Bootstrap, from Twitter

    Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

    - View project on GitHub - Download Bootstrap + View project on GitHub + Download Bootstrap

    diff --git a/docs/javascript.html b/docs/javascript.html index 4297fe652..2789198e6 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -214,7 +214,7 @@

    One fine body…

    - Save changes + Save changes Close
@@ -239,11 +239,11 @@

This link and that link should have tooltips on hover.

- Save changes + Save changes Close
- Launch demo modal + Launch demo modal
@@ -292,7 +292,7 @@ <p>One fine body…</p> </div> <div class="modal-footer"> - <a href="#" class="btn primary">Save changes</a> + <a href="#" class="btn btn-primary">Save changes</a> <a href="#" class="btn">Close</a> </div> </div> @@ -802,7 +802,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Example hover popover

Hover over the button to trigger the popover.

- hover for popover + hover for popover

Using bootstrap-popover.js

@@ -917,7 +917,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

- Take this action Or do this + Take this action Or do this

@@ -983,7 +983,7 @@ $('#my-alert').bind('closed', function () { Stateful - @@ -991,16 +991,16 @@ $('#my-alert').bind('closed', function () { Single toggle - + Checkbox
- - - + + +
@@ -1008,9 +1008,9 @@ $('#my-alert').bind('closed', function () { Radio
- - - + + +
@@ -1158,7 +1158,7 @@ $('#my-alert').bind('closed', function () {

Markup

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

-<button class="btn danger" data-toggle="collapse" data-target="#demo">
+<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
   simple collapsible
 </button>
 
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 433a18c88..c000c9c88 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -756,11 +756,6 @@
         .form-vertical ({{_i}}not required{{/i}})
         {{_i}}Stacked, left-aligned labels over controls{{/i}}
       
-      
-        {{_i}}Horizontal{{/i}}
-        .form-horizontal
-        {{_i}}Float left, right-aligned labels on same line as controls{{/i}}
-      
       
         {{_i}}Inline{{/i}}
         .form-inline
@@ -771,6 +766,11 @@
         .form-search
         {{_i}}Extra-rounded text input for a typical search aesthetic{{/i}}
       
+      
+        {{_i}}Horizontal{{/i}}
+        .form-horizontal
+        {{_i}}Float left, right-aligned labels on same line as controls{{/i}}
+      
     
   
 
@@ -879,7 +879,7 @@
             
           
           

-            
+            
             
           

         
@@ -972,7 +972,7 @@
             
           
           

-            
+            
             
           

         
@@ -1096,7 +1096,7 @@
             
           
           

-            
+            
             
           

         
@@ -1139,28 +1139,28 @@
         {{_i}}Standard gray button with gradient{{/i}}
       
       
-        {{_i}}Primary{{/i}}
-        .primary
+        {{_i}}Primary{{/i}}
+        .btn-primary
         {{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
       
       
-        {{_i}}Info{{/i}}
-        .info
+        {{_i}}Info{{/i}}
+        .btn-info
         {{_i}}Used as an alternate to the default styles{{/i}}
       
       
-        {{_i}}Success{{/i}}
-        .success
+        {{_i}}Success{{/i}}
+        .btn-success
         {{_i}}Indicates a successful or positive action{{/i}}
       
       
-        {{_i}}Warning{{/i}}
-        .warning
+        {{_i}}Warning{{/i}}
+        .btn-warning
         {{_i}}Indicates caution should be taken with this action{{/i}}
       
       
-        {{_i}}Danger{{/i}}
-        .danger
+        {{_i}}Danger{{/i}}
+        .btn-danger
         {{_i}}Indicates a dangerous or potentially negative action{{/i}}
       
     
@@ -1185,24 +1185,24 @@
       
{{_i}}Multiple sizes{{/i}}

       
{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}

       

-        {{_i}}Primary action{{/i}}
-        {{_i}}Action{{/i}}
+        {{_i}}Primary action{{/i}}
+        {{_i}}Action{{/i}}
       

       

-        {{_i}}Primary action{{/i}}
-        {{_i}}Action{{/i}}
+        {{_i}}Primary action{{/i}}
+        {{_i}}Action{{/i}}
       

     
     

       
{{_i}}Disabled state{{/i}}

-      
{{_i}}For disabled buttons, use .disabled for links and :disabled for <button> elements.{{/i}}

+      
{{_i}}For disabled buttons, use .btn-disabled for links and :disabled for <button> elements.{{/i}}

       

-        {{_i}}Primary action{{/i}}
-        {{_i}}Action{{/i}}
+        {{_i}}Primary action{{/i}}
+        {{_i}}Action{{/i}}
       

       

-        
-        
+        
+        
       

     

     

@@ -1415,8 +1415,8 @@
           
         

         

-           {{_i}}User{{/i}}
-          
+           {{_i}}User{{/i}}
+          
           

       

          {{_i}}Refresh{{/i}}
-         {{_i}}Checkout{{/i}}
-         {{_i}}Delete{{/i}}
+         {{_i}}Checkout{{/i}}
+         {{_i}}Delete{{/i}}
       

       

-         {{_i}}Comment{{/i}}
-         {{_i}}Settings{{/i}}
-         {{_i}}More Info{{/i}}
+         {{_i}}Comment{{/i}}
+         {{_i}}Settings{{/i}}
+         {{_i}}More Info{{/i}}
       

     
     

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 214478966..e61d83152 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -122,7 +122,7 @@
           
         

         

-          {{_i}}Action{{/i}} 
+          {{_i}}Action{{/i}} 
           
         

         

-          {{_i}}Danger{{/i}} 
+          {{_i}}Danger{{/i}} 
           

       

         

-          {{_i}}Success{{/i}} 
+          {{_i}}Success{{/i}} 
           
         

         

-          {{_i}}Info{{/i}} 
+          {{_i}}Info{{/i}} 
           
         

         

-          {{_i}}Action{{/i}}
-          
+          {{_i}}Action{{/i}}
+          
           
         

         

-          {{_i}}Danger{{/i}}
-          
+          {{_i}}Danger{{/i}}
+          
           

       

         

-          {{_i}}Success{{/i}}
-          
+          {{_i}}Success{{/i}}
+          
           
         

         

-          {{_i}}Info{{/i}}
-          
+          {{_i}}Info{{/i}}
+          
           

@@ -163,11 +163,11 @@
               
{{_i}}This link and that link should have tooltips on hover.{{/i}}

             

             

-              {{_i}}Save changes{{/i}}
+              {{_i}}Save changes{{/i}}
               {{_i}}Close{{/i}}
             

           

-          {{_i}}Launch demo modal{{/i}}
+          {{_i}}Launch demo modal{{/i}}
 
           

 
@@ -216,7 +216,7 @@
     <p>{{_i}}One fine body…{{/i}}</p>
   </div>
   <div class="modal-footer">
-    <a href="#" class="btn primary">{{_i}}Save changes{{/i}}</a>
+    <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
     <a href="#" class="btn">{{_i}}Close{{/i}}</a>
   </div>
 </div>
@@ -726,7 +726,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           
{{_i}}Example hover popover{{/i}}

           
{{_i}}Hover over the button to trigger the popover.{{/i}}

           

-            {{_i}}hover for popover{{/i}}
+            {{_i}}hover for popover{{/i}}
           

           

           
{{_i}}Using bootstrap-popover.js{{/i}}

@@ -841,7 +841,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
             
{{_i}}Oh snap! You got an error!{{/i}}

             
{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

             

-              {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}}
+              {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}}
             

           
           

@@ -907,7 +907,7 @@ $('#my-alert').bind('closed', function () {
              
                {{_i}}Stateful{{/i}}
                
-                  
                 
@@ -915,16 +915,16 @@ $('#my-alert').bind('closed', function () {
              
                {{_i}}Single toggle{{/i}}
                
-                  
+                  
                 
              
              
                {{_i}}Checkbox{{/i}}
                
                   

-                    
-                    
-                    
+                    
+                    
+                    
                   

                
              
@@ -932,9 +932,9 @@ $('#my-alert').bind('closed', function () {
                {{_i}}Radio{{/i}}
                
                   

-                    
-                    
-                    
+                    
+                    
+                    
                   

                
              
@@ -1082,7 +1082,7 @@ $('#my-alert').bind('closed', function () {
           
{{_i}}Markup{{/i}}

           
{{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

           
-<button class="btn danger" data-toggle="collapse" data-target="#demo">
+<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
   {{_i}}simple collapsible{{/i}}
 </button>
 
-- 
cgit v1.2.3