Commit 5b947b8a authored by Mark Otto's avatar Mark Otto
Browse files

fix up padding on small buttons, add button examples

parent f9deb801
No related merge requests found
Showing with 22 additions and 5 deletions
+22 -5
......@@ -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 {
......
......@@ -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>
......
......@@ -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 }}
......
......@@ -84,7 +84,7 @@
// Small
.btn-small {
padding: 5px 9px;
padding: 3px 9px;
font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 2px;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment