kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

*really* refactor the buttons and update them all over the docs

This commit is contained in:
Mark Otto 2012-01-30 21:15:57 -08:00
parent 21bebe77fe
commit 0f3a073b8d
18 changed files with 232 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

122
docs/assets/css/bootstrap.css vendored
View File

@ -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 {

6
docs/assets/css/docs.css
View File

@ -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;

68
docs/base-css.html
View File

@ -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, &lt;code&gt;section&lt;/code&gt; 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, &lt;code&gt;section&lt;/code&gt; 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, &lt;code&gt;section&lt;/code&gt; 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, &lt;code&gt;section&lt;/code&gt; 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, &lt;code&gt;section&lt;/code&gt; 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, &lt;code&gt;section&lt;/code&gt; 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>&lt;button&gt;</code> elements.</p>
<p>For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</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, &lt;code&gt;section&lt;/code&gt; 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, &lt;code&gt;section&lt;/code&gt; 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">

24
docs/components.html
View File

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

8
docs/download.html
View File

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

4
docs/index.html
View File

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

30
docs/javascript.html
View File

@ -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 @@
&lt;p&gt;One fine body…&lt;/p&gt;
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn primary"&gt;Save changes&lt;/a&gt;
&lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
&lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
@ -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">
&lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt;
&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
simple collapsible
&lt;/button&gt;

68
docs/templates/pages/base-css.mustache vendored
View File

@ -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>&lt;button&gt;</code> elements.{{/i}}</p>
<p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</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">

24
docs/templates/pages/components.mustache vendored
View File

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

8
docs/templates/pages/download.mustache vendored
View File

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

4
docs/templates/pages/index.mustache vendored
View File

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

30
docs/templates/pages/javascript.mustache vendored
View File

@ -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 @@
&lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;a href="#" class="btn primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
&lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
&lt;a href="#" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
@ -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">
&lt;button class="btn danger" data-toggle="collapse" data-target="#demo"&gt;
&lt;button class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
{{_i}}simple collapsible{{/i}}
&lt;/button&gt;

2
examples/fluid-reverse.html
View File

@ -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 &raquo;</a></p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div class="row-fluid">
<div class="span4">

2
examples/fluid.html
View File

@ -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 &raquo;</a></p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div class="row-fluid">
<div class="span4">

2
examples/hero.html
View File

@ -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 &raquo;</a></p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<!-- Example row of columns -->

10
less/button-groups.less
View File

@ -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;
}

52
less/buttons.less
View File

@ -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);
}