diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 930c0193771388436ce2fdf0d88dea3bec6f7bf6..55b71b927eff8660ef284fd2b2883b1dcb1d2ae1 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 c377d6f976c635f74d5ca9ca4ae1ccead5b966ba..ec8a5f3ff611a9b55e195b33e1c5a3c71c47660d 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 026872a34532592640f65b79aef2bd16c0ebb2b9..a5ad9631add29075bae184a01ddbb2863c88b0c0 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 5df63b917df046e960a081628e0b94451cf74c4e..ddbbad174ca8f9f1c931d116d670bd978df4ba0a 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.
<td><code>.form-vertical</code> <span class="muted">(not required)</span></td>
<td>Stacked, left-aligned labels over controls</td>
</tr>
- <tr>
- <th>Horizontal</th>
- <td><code>.form-horizontal</code></td>
- <td>Float left, right-aligned labels on same line as controls</td>
- </tr>
<tr>
<th>Inline</th>
<td><code>.form-inline</code></td>
@@ -847,6 +842,11 @@ For example, <code>section</code> should be wrapped as inline.
<td><code>.form-search</code></td>
<td>Extra-rounded text input for a typical search aesthetic</td>
</tr>
+ <tr>
+ <th>Horizontal</th>
+ <td><code>.form-horizontal</code></td>
+ <td>Float left, right-aligned labels on same line as controls</td>
+ </tr>
</tbody>
</table>
@@ -955,7 +955,7 @@ For example, <code>section</code> should be wrapped as inline.
</div>
</div>
<div class="form-actions">
- <button type="submit" class="btn primary">Save changes</button>
+ <button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
@@ -1048,7 +1048,7 @@ For example, <code>section</code> should be wrapped as inline.
</div>
</div>
<div class="form-actions">
- <button type="submit" class="btn primary">Save changes</button>
+ <button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
@@ -1172,7 +1172,7 @@ For example, <code>section</code> should be wrapped as inline.
</div>
</div>
<div class="form-actions">
- <button type="submit" class="btn primary">Save changes</button>
+ <button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
@@ -1215,28 +1215,28 @@ For example, <code>section</code> should be wrapped as inline.
<td>Standard gray button with gradient</td>
</tr>
<tr>
- <td><a class="btn primary" href="#">Primary</a></td>
- <td><code>.primary</code></td>
+ <td><a class="btn btn-primary" href="#">Primary</a></td>
+ <td><code>.btn-primary</code></td>
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
</tr>
<tr>
- <td><a class="btn info" href="#">Info</a></td>
- <td><code>.info</code></td>
+ <td><a class="btn btn-info" href="#">Info</a></td>
+ <td><code>.btn-info</code></td>
<td>Used as an alternate to the default styles</td>
</tr>
<tr>
- <td><a class="btn success" href="#">Success</a></td>
- <td><code>.success</code></td>
+ <td><a class="btn btn-success" href="#">Success</a></td>
+ <td><code>.btn-success</code></td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
- <td><a class="btn warning" href="#">Warning</a></td>
- <td><code>.warning</code></td>
+ <td><a class="btn btn-warning" href="#">Warning</a></td>
+ <td><code>.btn-warning</code></td>
<td>Indicates caution should be taken with this action</td>
</tr>
<tr>
- <td><a class="btn danger" href="#">Danger</a></td>
- <td><code>.danger</code></td>
+ <td><a class="btn btn-danger" href="#">Danger</a></td>
+ <td><code>.btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
@@ -1261,24 +1261,24 @@ For example, <code>section</code> should be wrapped as inline.
<h3>Multiple sizes</h3>
<p>Fancy larger or smaller buttons? Have at it!</p>
<p>
- <a href="#" class="btn large primary">Primary action</a>
- <a href="#" class="btn large">Action</a>
+ <a href="#" class="btn btn-large btn-primary">Primary action</a>
+ <a href="#" class="btn btn-large">Action</a>
</p>
<p>
- <a href="#" class="btn small primary">Primary action</a>
- <a href="#" class="btn small">Action</a>
+ <a href="#" class="btn btn-small btn-primary">Primary action</a>
+ <a href="#" class="btn btn-small">Action</a>
</p>
</div>
<div class="span4">
<h3>Disabled state</h3>
- <p>For disabled buttons, use <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
+ <p>For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
<p>
- <a href="#" class="btn large primary disabled">Primary action</a>
- <a href="#" class="btn large disabled">Action</a>
+ <a href="#" class="btn btn-large btn-primary btn-disabled">Primary action</a>
+ <a href="#" class="btn btn-large btn-disabled">Action</a>
</p>
<p>
- <button class="btn large primary disabled" disabled="disabled">Primary action</button>
- <button class="btn large" disabled>Action</button>
+ <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary action</button>
+ <button class="btn btn-large" disabled>Action</button>
</p>
</div>
<div class="span4">
@@ -1491,8 +1491,8 @@ For example, <code>section</code> should be wrapped as inline.
<a class="btn" href="#"><i class="icon align-justify"></i></a>
</div>
<div class="btn-group">
- <a class="btn primary" href="#"><i class="icon white user"></i> User</a>
- <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-primary" href="#"><i class="icon white user"></i> User</a>
+ <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon trash"></i> Delete</a></li>
@@ -1504,13 +1504,13 @@ For example, <code>section</code> should be wrapped as inline.
</div>
<p>
<a class="btn" href="#"><i class="icon refresh"></i> Refresh</a>
- <a class="btn success" href="#"><i class="icon white shopping-cart"></i> Checkout</a>
- <a class="btn danger" href="#"><i class="icon white trash"></i> Delete</a>
+ <a class="btn btn-success" href="#"><i class="icon white shopping-cart"></i> Checkout</a>
+ <a class="btn btn-danger" href="#"><i class="icon white trash"></i> Delete</a>
</p>
<p>
- <a class="btn large" href="#"><i class="icon comment"></i> Comment</a>
- <a class="btn small" href="#"><i class="icon cog"></i> Settings</a>
- <a class="btn small info" href="#"><i class="icon white info-sign"></i> More Info</a>
+ <a class="btn btn-large" href="#"><i class="icon comment"></i> Comment</a>
+ <a class="btn btn-small" href="#"><i class="icon cog"></i> Settings</a>
+ <a class="btn btn-small btn-info" href="#"><i class="icon white info-sign"></i> More Info</a>
</p>
</div>
<div class="span4">
diff --git a/docs/components.html b/docs/components.html
index 1d70ac4766f8d5c84aeb5fd4b80cc72fe45cca77..eb876572d62a449d7615e8d63a8394218b6381e7 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -198,7 +198,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
+ <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -208,7 +208,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#">Danger <span class="caret"></span></a>
+ <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">Danger <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -220,7 +220,7 @@
</div>
<div class="btn-toolbar">
<div class="btn-group">
- <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#">Success <span class="caret"></span></a>
+ <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">Success <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -230,7 +230,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#">Info <span class="caret"></span></a>
+ <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">Info <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -275,8 +275,8 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn primary" href="#">Action</a>
- <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-primary" href="#">Action</a>
+ <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -286,8 +286,8 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn danger" href="#">Danger</a>
- <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-danger" href="#">Danger</a>
+ <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -299,8 +299,8 @@
</div>
<div class="btn-toolbar">
<div class="btn-group">
- <a class="btn success" href="#">Success</a>
- <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-success" href="#">Success</a>
+ <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -310,8 +310,8 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn info" href="#">Info</a>
- <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-info" href="#">Info</a>
+ <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
diff --git a/docs/download.html b/docs/download.html
index e2cc5083620ffc3e8997ff88a935ecf3baca1405..38ebee85f7f2770b96e72061102b81e48db45f9d 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -91,7 +91,7 @@
<section class="download" id="components">
<div class="page-header">
- <a class="btn small pull-right toggle-all" href="#">Toggle all</a>
+ <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
1. Chose components
<small>Get just the CSS you need</small>
@@ -147,7 +147,7 @@
<section class="download" id="plugins">
<div class="page-header">
- <a class="btn small pull-right toggle-all" href="#">Toggle all</a>
+ <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
2. Select jQuery plugins
<small>Quickly add only the necessary javascript</small>
@@ -216,7 +216,7 @@
<section class="download" id="variables">
<div class="page-header">
- <a class="btn small pull-right toggle-all" href="#">Reset to defaults</a>
+ <a class="btn btn-small pull-right toggle-all" href="#">Reset to defaults</a>
<h1>
3. Customize variables
<small>Optionally modify Bootstrap without a compiler</small>
@@ -315,7 +315,7 @@
</h1>
</div>
<div class="download-btn">
- <a class="btn xlarge primary" href="#">Customize and Download</a>
+ <a class="btn btn-primary" href="#">Customize and Download</a>
<h4>What's included?</h4>
<p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
</div>
diff --git a/docs/index.html b/docs/index.html
index 66cc0ee48b818280b5cdbb4fa748c6d55815db23..71c2970a05cba67b90e169c4b38160e1ab4d521b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -81,8 +81,8 @@
<h1>Bootstrap, from Twitter</h1>
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
<p class="download-info">
- <a href="https://github.com/twitter/bootstrap/" class="btn primary large">View project on GitHub</a>
- <a href="assets/bootstrap.zip" class="btn large">Download Bootstrap</a>
+ <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">View project on GitHub</a>
+ <a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap</a>
</p>
</div>
diff --git a/docs/javascript.html b/docs/javascript.html
index 4297fe652146ec384bb7cca059029a78dbed598b..2789198e65faca7415b4fe9c1a49496692ed5363 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -214,7 +214,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>
@@ -239,11 +239,11 @@
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</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" data-dismiss="modal" >Close</a>
</div>
</div>
- <a data-toggle="modal" href="#myModal" class="btn primary large">Launch demo modal</a>
+ <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
<hr>
@@ -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) {
<h2>Example hover popover</h2>
<p>Hover over the button to trigger the popover.</p>
<div class="well">
- <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
+ <a href="#" class="btn btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
</div>
<hr>
<h2>Using bootstrap-popover.js</h2>
@@ -917,7 +917,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4 class="alert-heading">Oh snap! You got an error!</h4>
<p>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.</p>
<p>
- <a class="btn danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ <a class="btn btn-danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</p>
</div>
<hr>
@@ -983,7 +983,7 @@ $('#my-alert').bind('closed', function () {
<tr>
<td>Stateful</td>
<td>
- <button id="fat-btn" data-loading-text="loading..." class="btn primary">
+ <button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
Loading State
</button>
</td>
@@ -991,16 +991,16 @@ $('#my-alert').bind('closed', function () {
<tr>
<td>Single toggle</td>
<td>
- <button class="btn primary" data-toggle="button">Single Toggle</button>
+ <button class="btn btn-primary" data-toggle="button">Single Toggle</button>
</td>
</tr>
<tr>
<td>Checkbox</td>
<td>
<div class="btn-group" data-toggle="buttons-checkbox">
- <button class="btn primary">Left</button>
- <button class="btn primary">Middle</button>
- <button class="btn primary">Right</button>
+ <button class="btn btn-primary">Left</button>
+ <button class="btn btn-primary">Middle</button>
+ <button class="btn btn-primary">Right</button>
</div>
</td>
</tr>
@@ -1008,9 +1008,9 @@ $('#my-alert').bind('closed', function () {
<td>Radio</td>
<td>
<div class="btn-group" data-toggle="buttons-radio">
- <button class="btn primary">Left</button>
- <button class="btn primary">Middle</button>
- <button class="btn primary">Right</button>
+ <button class="btn btn-primary">Left</button>
+ <button class="btn btn-primary">Middle</button>
+ <button class="btn btn-primary">Right</button>
</div>
</td>
</tr>
@@ -1158,7 +1158,7 @@ $('#my-alert').bind('closed', function () {
<h3>Markup</h3>
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
<pre class="prettyprint linenums">
-<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 433a18c885dd863474fd1bdf0b53e8f529907afe..c000c9c88c1acf2ccf1b024831ea92fc4fe20b39 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -756,11 +756,6 @@
<td><code>.form-vertical</code> <span class="muted">({{_i}}not required{{/i}})</span></td>
<td>{{_i}}Stacked, left-aligned labels over controls{{/i}}</td>
</tr>
- <tr>
- <th>{{_i}}Horizontal{{/i}}</th>
- <td><code>.form-horizontal</code></td>
- <td>{{_i}}Float left, right-aligned labels on same line as controls{{/i}}</td>
- </tr>
<tr>
<th>{{_i}}Inline{{/i}}</th>
<td><code>.form-inline</code></td>
@@ -771,6 +766,11 @@
<td><code>.form-search</code></td>
<td>{{_i}}Extra-rounded text input for a typical search aesthetic{{/i}}</td>
</tr>
+ <tr>
+ <th>{{_i}}Horizontal{{/i}}</th>
+ <td><code>.form-horizontal</code></td>
+ <td>{{_i}}Float left, right-aligned labels on same line as controls{{/i}}</td>
+ </tr>
</tbody>
</table>
@@ -879,7 +879,7 @@
</div>
</div>
<div class="form-actions">
- <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+ <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</fieldset>
@@ -972,7 +972,7 @@
</div>
</div>
<div class="form-actions">
- <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+ <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</fieldset>
@@ -1096,7 +1096,7 @@
</div>
</div>
<div class="form-actions">
- <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+ <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</fieldset>
@@ -1139,28 +1139,28 @@
<td>{{_i}}Standard gray button with gradient{{/i}}</td>
</tr>
<tr>
- <td><a class="btn primary" href="#">{{_i}}Primary{{/i}}</a></td>
- <td><code>.primary</code></td>
+ <td><a class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</a></td>
+ <td><code>.btn-primary</code></td>
<td>{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}</td>
</tr>
<tr>
- <td><a class="btn info" href="#">{{_i}}Info{{/i}}</a></td>
- <td><code>.info</code></td>
+ <td><a class="btn btn-info" href="#">{{_i}}Info{{/i}}</a></td>
+ <td><code>.btn-info</code></td>
<td>{{_i}}Used as an alternate to the default styles{{/i}}</td>
</tr>
<tr>
- <td><a class="btn success" href="#">{{_i}}Success{{/i}}</a></td>
- <td><code>.success</code></td>
+ <td><a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a></td>
+ <td><code>.btn-success</code></td>
<td>{{_i}}Indicates a successful or positive action{{/i}}</td>
</tr>
<tr>
- <td><a class="btn warning" href="#">{{_i}}Warning{{/i}}</a></td>
- <td><code>.warning</code></td>
+ <td><a class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</a></td>
+ <td><code>.btn-warning</code></td>
<td>{{_i}}Indicates caution should be taken with this action{{/i}}</td>
</tr>
<tr>
- <td><a class="btn danger" href="#">{{_i}}Danger{{/i}}</a></td>
- <td><code>.danger</code></td>
+ <td><a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a></td>
+ <td><code>.btn-danger</code></td>
<td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
</tr>
</tbody>
@@ -1185,24 +1185,24 @@
<h3>{{_i}}Multiple sizes{{/i}}</h3>
<p>{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}</p>
<p>
- <a href="#" class="btn large primary">{{_i}}Primary action{{/i}}</a>
- <a href="#" class="btn large">{{_i}}Action{{/i}}</a>
+ <a href="#" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</a>
+ <a href="#" class="btn btn-large">{{_i}}Action{{/i}}</a>
</p>
<p>
- <a href="#" class="btn small primary">{{_i}}Primary action{{/i}}</a>
- <a href="#" class="btn small">{{_i}}Action{{/i}}</a>
+ <a href="#" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</a>
+ <a href="#" class="btn btn-small">{{_i}}Action{{/i}}</a>
</p>
</div>
<div class="span4">
<h3>{{_i}}Disabled state{{/i}}</h3>
- <p>{{_i}}For disabled buttons, use <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.{{/i}}</p>
+ <p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.{{/i}}</p>
<p>
- <a href="#" class="btn large primary disabled">{{_i}}Primary action{{/i}}</a>
- <a href="#" class="btn large disabled">{{_i}}Action{{/i}}</a>
+ <a href="#" class="btn btn-large btn-primary btn-disabled">{{_i}}Primary action{{/i}}</a>
+ <a href="#" class="btn btn-large btn-disabled">{{_i}}Action{{/i}}</a>
</p>
<p>
- <button class="btn large primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
- <button class="btn large" disabled>{{_i}}Action{{/i}}</button>
+ <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
+ <button class="btn btn-large" disabled>{{_i}}Action{{/i}}</button>
</p>
</div>
<div class="span4">
@@ -1415,8 +1415,8 @@
<a class="btn" href="#"><i class="icon align-justify"></i></a>
</div>
<div class="btn-group">
- <a class="btn primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
- <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
+ <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon pencil"></i> {{_i}}Edit{{/i}}</a></li>
<li><a href="#"><i class="icon trash"></i> {{_i}}Delete{{/i}}</a></li>
@@ -1428,13 +1428,13 @@
</div>
<p>
<a class="btn" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
- <a class="btn success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
- <a class="btn danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
+ <a class="btn btn-success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
+ <a class="btn btn-danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
</p>
<p>
- <a class="btn large" href="#"><i class="icon comment"></i> {{_i}}Comment{{/i}}</a>
- <a class="btn small" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
- <a class="btn small info" href="#"><i class="icon white info-sign"></i> {{_i}}More Info{{/i}}</a>
+ <a class="btn btn-large" href="#"><i class="icon comment"></i> {{_i}}Comment{{/i}}</a>
+ <a class="btn btn-small" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
+ <a class="btn btn-small btn-info" href="#"><i class="icon white info-sign"></i> {{_i}}More Info{{/i}}</a>
</p>
</div>
<div class="span4">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 21447896633f20aabf483f35b550d305745077a9..e61d83152ddd4a055092a053ce44d1701c4583e2 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -122,7 +122,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Action{{/i}} <span class="caret"></span></a>
+ <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Action{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -132,7 +132,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Danger{{/i}} <span class="caret"></span></a>
+ <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Danger{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -144,7 +144,7 @@
</div>
<div class="btn-toolbar">
<div class="btn-group">
- <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Success{{/i}} <span class="caret"></span></a>
+ <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Success{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -154,7 +154,7 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Info{{/i}} <span class="caret"></span></a>
+ <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Info{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -199,8 +199,8 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn primary" href="#">{{_i}}Action{{/i}}</a>
- <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-primary" href="#">{{_i}}Action{{/i}}</a>
+ <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -210,8 +210,8 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn danger" href="#">{{_i}}Danger{{/i}}</a>
- <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a>
+ <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -223,8 +223,8 @@
</div>
<div class="btn-toolbar">
<div class="btn-group">
- <a class="btn success" href="#">{{_i}}Success{{/i}}</a>
- <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a>
+ <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
@@ -234,8 +234,8 @@
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <a class="btn info" href="#">{{_i}}Info{{/i}}</a>
- <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn btn-info" href="#">{{_i}}Info{{/i}}</a>
+ <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index 4cc3244f50f704cfabfbdec3535753586a088267..9160e895bd69795d299cd784587172eb1063265e 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -15,7 +15,7 @@
<section class="download" id="components">
<div class="page-header">
- <a class="btn small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
+ <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
<h1>
{{_i}}1. Chose components{{/i}}
<small>{{_i}}Get just the CSS you need{{/i}}</small>
@@ -71,7 +71,7 @@
<section class="download" id="plugins">
<div class="page-header">
- <a class="btn small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
+ <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
<h1>
{{_i}}2. Select jQuery plugins{{/i}}
<small>{{_i}}Quickly add only the necessary javascript{{/i}}</small>
@@ -140,7 +140,7 @@
<section class="download" id="variables">
<div class="page-header">
- <a class="btn small pull-right toggle-all" href="#">{{_i}}Reset to defaults{{/i}}</a>
+ <a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Reset to defaults{{/i}}</a>
<h1>
{{_i}}3. Customize variables{{/i}}
<small>{{_i}}Optionally modify Bootstrap without a compiler{{/i}}</small>
@@ -239,7 +239,7 @@
</h1>
</div>
<div class="download-btn">
- <a class="btn xlarge primary" href="#">{{_i}}Customize and Download{{/i}}</a>
+ <a class="btn btn-primary" href="#">{{_i}}Customize and Download{{/i}}</a>
<h4>{{_i}}What's included?{{/i}}</h4>
<p>{{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}</p>
</div>
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 5ef0c680a87fe4947861c56f6bcba4801143dd09..f7cadc081476d72ac409ffe5ab0dee4a3d4da8b0 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -5,8 +5,8 @@
<h1>{{_i}}Bootstrap, from Twitter{{/i}}</h1>
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
<p class="download-info">
- <a href="https://github.com/twitter/bootstrap/" class="btn primary large">{{_i}}View project on GitHub{{/i}}</a>
- <a href="assets/bootstrap.zip" class="btn large">{{_i}}Download Bootstrap{{/i}}</a>
+ <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
+ <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap{{/i}}</a>
</p>
</div>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index f8fdec8eacfd229ff0c39f9be61654c9fc454d7f..9b787fb1ba3353bf9816fe38d188fd376ea68427 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -138,7 +138,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>
@@ -163,11 +163,11 @@
<p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/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" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
</div>
</div>
- <a data-toggle="modal" href="#myModal" class="btn primary large">{{_i}}Launch demo modal{{/i}}</a>
+ <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
<hr>
@@ -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) {
<h2>{{_i}}Example hover popover{{/i}}</h2>
<p>{{_i}}Hover over the button to trigger the popover.{{/i}}</p>
<div class="well">
- <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a>
+ <a href="#" class="btn btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a>
</div>
<hr>
<h2>{{_i}}Using bootstrap-popover.js{{/i}}</h2>
@@ -841,7 +841,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
<p>{{_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}}</p>
<p>
- <a class="btn danger small" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn small" href="#">{{_i}}Or do this{{/i}}</a>
+ <a class="btn btn-danger small" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn small" href="#">{{_i}}Or do this{{/i}}</a>
</p>
</div>
<hr>
@@ -907,7 +907,7 @@ $('#my-alert').bind('closed', function () {
<tr>
<td>{{_i}}Stateful{{/i}}</td>
<td>
- <button id="fat-btn" data-loading-text="loading..." class="btn primary">
+ <button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
{{_i}}Loading State{{/i}}
</button>
</td>
@@ -915,16 +915,16 @@ $('#my-alert').bind('closed', function () {
<tr>
<td>{{_i}}Single toggle{{/i}}</td>
<td>
- <button class="btn primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
+ <button class="btn btn-primary" data-toggle="button">{{_i}}Single Toggle{{/i}}</button>
</td>
</tr>
<tr>
<td>{{_i}}Checkbox{{/i}}</td>
<td>
<div class="btn-group" data-toggle="buttons-checkbox">
- <button class="btn primary">{{_i}}Left{{/i}}</button>
- <button class="btn primary">{{_i}}Middle{{/i}}</button>
- <button class="btn primary">{{_i}}Right{{/i}}</button>
+ <button class="btn btn-primary">{{_i}}Left{{/i}}</button>
+ <button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
+ <button class="btn btn-primary">{{_i}}Right{{/i}}</button>
</div>
</td>
</tr>
@@ -932,9 +932,9 @@ $('#my-alert').bind('closed', function () {
<td>{{_i}}Radio{{/i}}</td>
<td>
<div class="btn-group" data-toggle="buttons-radio">
- <button class="btn primary">{{_i}}Left{{/i}}</button>
- <button class="btn primary">{{_i}}Middle{{/i}}</button>
- <button class="btn primary">{{_i}}Right{{/i}}</button>
+ <button class="btn btn-primary">{{_i}}Left{{/i}}</button>
+ <button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
+ <button class="btn btn-primary">{{_i}}Right{{/i}}</button>
</div>
</td>
</tr>
@@ -1082,7 +1082,7 @@ $('#my-alert').bind('closed', function () {
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.{{/i}}</p>
<pre class="prettyprint linenums">
-<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>
diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html
index aa2a77489f3b015ba127ac94d339f1e3b022566e..2812e2152713eace825edd351c47eb06cce82b95 100644
--- a/examples/fluid-reverse.html
+++ b/examples/fluid-reverse.html
@@ -60,7 +60,7 @@
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
- <p><a class="btn primary large">Learn more »</a></p>
+ <p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row-fluid">
<div class="span4">
diff --git a/examples/fluid.html b/examples/fluid.html
index 738c5205812d70ddff76c44dd33a3ca0b9929442..57ee5b09189cd5df4d649e691875bb288a83a2c6 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -82,7 +82,7 @@
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
- <p><a class="btn primary large">Learn more »</a></p>
+ <p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row-fluid">
<div class="span4">
diff --git a/examples/hero.html b/examples/hero.html
index 1fa39922f0760d3a9aec72edbece6f022768aa32..f6d97481c925e65d94bb6f0f898e0d15cd708e15 100644
--- a/examples/hero.html
+++ b/examples/hero.html
@@ -56,7 +56,7 @@
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
- <p><a class="btn primary large">Learn more »</a></p>
+ <p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<!-- Example row of columns -->
diff --git a/less/button-groups.less b/less/button-groups.less
index 7367103caa00c7fda497b74e114b91cce3f2eefb..4b0523df2952ee19d89a1e447e8104ab1e12f2df 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -130,10 +130,10 @@
// Account for other colors
-.primary,
-.danger,
-.info,
-.success {
+.btn-primary,
+.btn-danger,
+.btn-info,
+.btn-success {
.caret {
border-top-color: @white;
.opacity(75);
@@ -141,7 +141,7 @@
}
// Small button dropdowns
-.btn.small .caret {
+.btn-small .caret {
margin-top: 4px;
}
diff --git a/less/buttons.less b/less/buttons.less
index ce725cd4b0fc64a69861e056fb14fbacbbd93639..48cfa7560da0d9fd2e7699258636d8f1d4baa4b6 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -44,7 +44,7 @@
}
// Active state
-.btn.active,
+.btn-active,
.btn:active {
background-image: none;
@shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
@@ -56,7 +56,7 @@
}
// Disabled state
-.btn.disabled,
+.btn-disabled,
.btn[disabled] {
cursor: default;
background-image: none;
@@ -70,23 +70,23 @@
// --------------------------------------------------
// Large
-.btn.large {
+.btn-large {
padding: 9px 14px;
font-size: @baseFontSize + 2px;
line-height: normal;
.border-radius(5px);
}
-.btn.large .icon {
+.btn-large .icon {
margin-top: 1px;
}
// Small
-.btn.small {
+.btn-small {
padding: 5px 9px;
font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 2px;
}
-.btn.small .icon {
+.btn-small .icon {
margin-top: -1px;
}
@@ -96,47 +96,47 @@
// Set text color
// -------------------------
-.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,.25);
color: @white
}
// Provide *some* extra contrast for those who can get it
-.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,.75);
}
// Set the backgrounds
// -------------------------
-.btn.primary {
+.btn-primary {
.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
}
// Warning appears are orange
-.btn.warning {
+.btn-warning {
.buttonBackground(lighten(@orange, 15%), @orange);
}
// Danger and error appear as red
-.btn.danger {
+.btn-danger {
.buttonBackground(#ee5f5b, #bd362f);
}
// Success appears as green
-.btn.success {
+.btn-success {
.buttonBackground(#62c462, #51a351);
}
// Info appears as a neutral blue
-.btn.info {
+.btn-info {
.buttonBackground(#5bc0de, #2f96b4);
}