fix up padding on small buttons, add button examples

This commit is contained in:
Mark Otto 2012-08-17 16:11:52 -07:00
parent f9deb8017a
commit 5b947b8a2f
4 changed files with 22 additions and 5 deletions

View File

@ -2037,6 +2037,7 @@ table .span24 {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
@ -3016,17 +3017,17 @@ button.close {
}
.btn-large [class^="icon-"] {
margin-top: 1px;
margin-top: 2px;
}
.btn-small {
padding: 5px 9px;
padding: 3px 9px;
font-size: 12px;
line-height: 18px;
}
.btn-small [class^="icon-"] {
margin-top: -1px;
margin-top: 0;
}
.btn-mini {

View File

@ -967,7 +967,7 @@ For example, <code>section</code> should be wrapped as inline.
</pre>
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<p>Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.</p>
<form class="bs-docs-example form-inline">
<textarea rows="3"></textarea>
</form>
@ -1445,6 +1445,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<button type="button" class="btn btn-large btn-primary">Primary action</button>
<button type="button" class="btn btn-large">Action</button>
</p>
<p>
<button type="button" class="btn btn-primary">Primary action</button>
<button type="button" class="btn">Action</button>
</p>
<p>
<button type="button" class="btn btn-small btn-primary">Primary action</button>
<button type="button" class="btn btn-small">Action</button>
@ -1457,6 +1461,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<pre class="prettyprint linenums">
&lt;button class="btn btn-large" type="button"&gt;Large button&lt;/button&gt;
&lt;button class="btn btn-small" type="button"&gt;Small button&lt;/button&gt;
&lt;button class="btn" type="button"&gt;Default button&lt;/button&gt;
&lt;button class="btn btn-mini" type="button"&gt;Mini button&lt;/button&gt;
</pre>
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
@ -1740,6 +1745,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
<br><br>
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
@ -1751,6 +1757,8 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
<br><br>
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
</div>
</div>

View File

@ -1382,6 +1382,10 @@
<button type="button" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
<button type="button" class="btn btn-large">{{_i}}Action{{/i}}</button>
</p>
<p>
<button type="button" class="btn btn-primary">{{_i}}Primary action{{/i}}</button>
<button type="button" class="btn">{{_i}}Action{{/i}}</button>
</p>
<p>
<button type="button" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
<button type="button" class="btn btn-small">{{_i}}Action{{/i}}</button>
@ -1394,6 +1398,7 @@
<pre class="prettyprint linenums">
&lt;button class="btn btn-large" type="button"&gt;{{_i}}Large button{{/i}}&lt;/button&gt;
&lt;button class="btn btn-small" type="button"&gt;{{_i}}Small button{{/i}}&lt;/button&gt;
&lt;button class="btn" type="button"&gt;{{_i}}Default button{{/i}}&lt;/button&gt;
&lt;button class="btn btn-mini" type="button"&gt;{{_i}}Mini button{{/i}}&lt;/button&gt;
</pre>
<p>{{_i}}Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.{{/i}}</p>
@ -1677,6 +1682,7 @@
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
<br><br>
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
@ -1688,6 +1694,8 @@
<li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
</ul>
</div>
<br><br>
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
</div>
</div>{{! /bs-docs-example }}

View File

@ -84,7 +84,7 @@
// Small
.btn-small {
padding: 5px 9px;
padding: 3px 9px;
font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 2px;
}