fix up padding on small buttons, add button examples
This commit is contained in:
parent
f9deb8017a
commit
5b947b8a2f
|
@ -2037,6 +2037,7 @@ table .span24 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
|
margin-top: 1px;
|
||||||
*margin-right: .3em;
|
*margin-right: .3em;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
vertical-align: text-top;
|
vertical-align: text-top;
|
||||||
|
@ -3016,17 +3017,17 @@ button.close {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-large [class^="icon-"] {
|
.btn-large [class^="icon-"] {
|
||||||
margin-top: 1px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-small {
|
.btn-small {
|
||||||
padding: 5px 9px;
|
padding: 3px 9px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-small [class^="icon-"] {
|
.btn-small [class^="icon-"] {
|
||||||
margin-top: -1px;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-mini {
|
.btn-mini {
|
||||||
|
|
|
@ -967,7 +967,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h3>Textarea</h3>
|
<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">
|
<form class="bs-docs-example form-inline">
|
||||||
<textarea rows="3"></textarea>
|
<textarea rows="3"></textarea>
|
||||||
</form>
|
</form>
|
||||||
|
@ -1445,6 +1445,10 @@ For example, <code>section</code> should be wrapped as inline.
|
||||||
<button type="button" class="btn btn-large btn-primary">Primary action</button>
|
<button type="button" class="btn btn-large btn-primary">Primary action</button>
|
||||||
<button type="button" class="btn btn-large">Action</button>
|
<button type="button" class="btn btn-large">Action</button>
|
||||||
</p>
|
</p>
|
||||||
|
<p>
|
||||||
|
<button type="button" class="btn btn-primary">Primary action</button>
|
||||||
|
<button type="button" class="btn">Action</button>
|
||||||
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<button type="button" class="btn btn-small btn-primary">Primary action</button>
|
<button type="button" class="btn btn-small btn-primary">Primary action</button>
|
||||||
<button type="button" class="btn btn-small">Action</button>
|
<button type="button" class="btn btn-small">Action</button>
|
||||||
|
@ -1457,6 +1461,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<button class="btn btn-large" type="button">Large button</button>
|
<button class="btn btn-large" type="button">Large button</button>
|
||||||
<button class="btn btn-small" type="button">Small button</button>
|
<button class="btn btn-small" type="button">Small button</button>
|
||||||
|
<button class="btn" type="button">Default button</button>
|
||||||
<button class="btn btn-mini" type="button">Mini button</button>
|
<button class="btn btn-mini" type="button">Mini button</button>
|
||||||
</pre>
|
</pre>
|
||||||
<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
|
<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
|
||||||
|
@ -1740,6 +1745,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||||
<a class="btn" href="#"><i class="icon-align-right"></i></a>
|
<a class="btn" href="#"><i class="icon-align-right"></i></a>
|
||||||
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
|
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
<br><br>
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
|
<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>
|
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||||
|
@ -1751,6 +1757,8 @@ For example, <code>section</code> should be wrapped as inline.
|
||||||
<li><a href="#"><i class="i"></i> Make admin</a></li>
|
<li><a href="#"><i class="i"></i> Make admin</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<br><br>
|
||||||
|
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</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 btn-primary">{{_i}}Primary action{{/i}}</button>
|
||||||
<button type="button" class="btn btn-large">{{_i}}Action{{/i}}</button>
|
<button type="button" class="btn btn-large">{{_i}}Action{{/i}}</button>
|
||||||
</p>
|
</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>
|
<p>
|
||||||
<button type="button" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
|
<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>
|
<button type="button" class="btn btn-small">{{_i}}Action{{/i}}</button>
|
||||||
|
@ -1394,6 +1398,7 @@
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button>
|
<button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button>
|
||||||
<button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button>
|
<button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button>
|
||||||
|
<button class="btn" type="button">{{_i}}Default button{{/i}}</button>
|
||||||
<button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button>
|
<button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button>
|
||||||
</pre>
|
</pre>
|
||||||
<p>{{_i}}Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.{{/i}}</p>
|
<p>{{_i}}Create block level buttons—those that span the full width of a parent— 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-right"></i></a>
|
||||||
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
|
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
<br><br>
|
||||||
<div class="btn-group">
|
<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" 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>
|
<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>
|
<li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<br><br>
|
||||||
|
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>{{! /bs-docs-example }}
|
</div>{{! /bs-docs-example }}
|
||||||
|
|
||||||
|
|
|
@ -84,7 +84,7 @@
|
||||||
|
|
||||||
// Small
|
// Small
|
||||||
.btn-small {
|
.btn-small {
|
||||||
padding: 5px 9px;
|
padding: 3px 9px;
|
||||||
font-size: @baseFontSize - 2px;
|
font-size: @baseFontSize - 2px;
|
||||||
line-height: @baseLineHeight - 2px;
|
line-height: @baseLineHeight - 2px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue