.btn-small [class^="icon-"] {
margin-top: -1px;
}
+.btn-mini {
+ padding: 2px 6px;
+ font-size: 11px;
+ line-height: 14px;
+}
.btn-primary,
.btn-primary:hover,
.btn-warning,
</div>
<div class="span4">
<h3>Multiple sizes</h3>
- <p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for two additional sizes.</p>
+ <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
<p>
<button class="btn btn-large btn-primary">Primary action</button>
<button class="btn btn-large">Action</button>
<button class="btn btn-small btn-primary">Primary action</button>
<button class="btn btn-small">Action</button>
</p>
+ <p>
+ <button class="btn btn-mini btn-primary">Primary action</button>
+ <button class="btn btn-mini">Action</button>
+ </p>
<br>
<h3>Disabled state</h3>
<p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></code> elements.</p>
</div>
<div class="span4">
<h3>{{_i}}Multiple sizes{{/i}}</h3>
- <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for two additional sizes.{{/i}}</p>
+ <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
<p>
<button class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
<button class="btn btn-large">{{_i}}Action{{/i}}</button>
<button class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
<button class="btn btn-small">{{_i}}Action{{/i}}</button>
</p>
+ <p>
+ <button class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
+ <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
+ </p>
<br>
<h3>{{_i}}Disabled state{{/i}}</h3>
<p>{{_i}}For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></code> elements.{{/i}}</p>
margin-top: -1px;
}
+// Mini
+.btn-mini {
+ padding: 2px 6px;
+ font-size: @baseFontSize - 2px;
+ line-height: @baseLineHeight - 4px;
+}
+
// Alternate buttons
// --------------------------------------------------