mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
fixing up buttons and examples of implementing icons
This commit is contained in:
Mark Otto
parent
a624ac1edf
commit
d02c6957d4
12
docs/assets/css/bootstrap.css
vendored
12
docs/assets/css/bootstrap.css
vendored
@ -6,7 +6,7 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Fri Jan 27 18:48:54 PST 2012
|
||||
* Date: Fri Jan 27 19:45:56 PST 2012
|
||||
*/
|
||||
article,
|
||||
aside,
|
||||
@ -2691,6 +2691,10 @@ button.btn.small, input[type=submit].btn.small {
|
||||
.btn-group + .btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.btn-toolbar {
|
||||
margin-top: 9px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.btn-toolbar .btn-group {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
@ -2769,9 +2773,13 @@ button.btn.small, input[type=submit].btn.small {
|
||||
box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.btn .caret {
|
||||
margin-top: 6px;
|
||||
margin-top: 7px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.btn:hover .caret, .open.btn-group .caret {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.primary .caret,
|
||||
.danger .caret,
|
||||
.info .caret,
|
||||
|
||||
@ -1492,18 +1492,15 @@
|
||||
<li>For buttons to help convey the meaning of an action</li>
|
||||
<li>With links to share context on a user's destination</li>
|
||||
</ul>
|
||||
<p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use <code>.icon</code> class with no other classes:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<i class="icon"></i>
|
||||
</pre>
|
||||
<p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Examples</h3>
|
||||
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<p>Use them in buttons - of all types and sizes.</p>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" style="margin-bottom: 9px">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#"><i class="icon align-left"></i></a>
|
||||
<a class="btn" href="#"><i class="icon align-center"></i></a>
|
||||
@ -1518,7 +1515,7 @@
|
||||
<li><a href="#"><i class="icon trash"></i> Delete</a></li>
|
||||
<li><a href="#"><i class="icon ban-circle"></i> Ban</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#"><i class="icon"></i> Make Admin</a></li>
|
||||
<li><a href="#"><i class="icon"></i> Make admin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -1534,7 +1531,6 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<p>Use them in navigation.</p>
|
||||
<div class="well" style="padding: 8px 0;">
|
||||
<ul class="nav list">
|
||||
<li class="active"><a href="#"><i class="icon white home"></i> Home</a></li>
|
||||
@ -1546,9 +1542,8 @@
|
||||
</div>
|
||||
<div class="span4">
|
||||
<form>
|
||||
<p>Use them with prepended forms.</p>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="prependedInput">Your Email Address:</label>
|
||||
<label class="control-label" for="prependedInput">Email address</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on"><i class="icon envelope"></i></span>
|
||||
@ -1556,20 +1551,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="prependedInput">Your Location:</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on"><i class="icon map-marker"></i></span>
|
||||
<select id="select01">
|
||||
<option>Istanbul</option>
|
||||
<option>London</option>
|
||||
<option>New York</option>
|
||||
<option>Tokyo</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -96,32 +96,29 @@
|
||||
<h3>Button groups</h3>
|
||||
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
|
||||
<p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Left</a>
|
||||
<a class="btn" href="#">Middle</a>
|
||||
<a class="btn" href="#">Right</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well" style="padding: 10px;">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
<a class="btn" href="#">4</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">5</a>
|
||||
<a class="btn" href="#">6</a>
|
||||
<a class="btn" href="#">7</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">8</a>
|
||||
</div>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
<a class="btn" href="#">4</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">5</a>
|
||||
<a class="btn" href="#">6</a>
|
||||
<a class="btn" href="#">7</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">8</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Example markup</h3>
|
||||
@ -165,67 +162,65 @@
|
||||
<div class="span4">
|
||||
<h3>Split button dropdowns</h3>
|
||||
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-toolbar" style="margin-bottom: 9px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Action</a>
|
||||
<a class="btn 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>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
</div> <!-- /well -->
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Action</a>
|
||||
<a class="btn 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>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example markup</h3>
|
||||
|
||||
31
docs/templates/pages/base-css.mustache
vendored
31
docs/templates/pages/base-css.mustache
vendored
@ -1412,7 +1412,7 @@
|
||||
<pre class="prettyprint linenums">
|
||||
<i class="icon search"></i>
|
||||
</pre>
|
||||
<p>There are also styles available for inverted (white) icons, made ready with one extra class:</p>
|
||||
<p>{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<i class="icon white search"></i>
|
||||
</pre>
|
||||
@ -1427,18 +1427,15 @@
|
||||
<li>{{_i}}For buttons to help convey the meaning of an action{{/i}}</li>
|
||||
<li>{{_i}}With links to share context on a user's destination{{/i}}</li>
|
||||
</ul>
|
||||
<p>{{_i}}Essentially, anywhere you can put an <code><i></code> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use <code>.icon</code> class with no other classes:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<i class="icon"></i>
|
||||
</pre>
|
||||
<p>{{_i}}Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>{{_i}}Examples{{/i}}</h3>
|
||||
<p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<p>{{_i}}Use them in buttons - of all types and sizes.{{/i}}</p>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" style="margin-bottom: 9px">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#"><i class="icon align-left"></i></a>
|
||||
<a class="btn" href="#"><i class="icon align-center"></i></a>
|
||||
@ -1453,7 +1450,7 @@
|
||||
<li><a href="#"><i class="icon trash"></i> {{_i}}Delete{{/i}}</a></li>
|
||||
<li><a href="#"><i class="icon ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#"><i class="icon"></i> {{_i}}Make Admin{{/i}}</a></li>
|
||||
<li><a href="#"><i class="icon"></i> {{_i}}Make admin{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -1469,7 +1466,6 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<p>{{_i}}Use them in navigation.{{/i}}</p>
|
||||
<div class="well" style="padding: 8px 0;">
|
||||
<ul class="nav list">
|
||||
<li class="active"><a href="#"><i class="icon white home"></i> {{_i}}Home{{/i}}</a></li>
|
||||
@ -1481,9 +1477,8 @@
|
||||
</div>
|
||||
<div class="span4">
|
||||
<form>
|
||||
<p>{{_i}}Use them with prepended forms.{{_i}}</p>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="prependedInput">{{_i}}Your Email Address:{{/i}}</label>
|
||||
<label class="control-label" for="prependedInput">{{_i}}Email address{{/i}}</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on"><i class="icon envelope"></i></span>
|
||||
@ -1491,20 +1486,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="iconSelect">{{_i}}Your Location:{{/i}}</label>
|
||||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on"><i class="icon map-marker"></i></span>
|
||||
<select id="iconSelect">
|
||||
<option>Istanbul</option>
|
||||
<option>London</option>
|
||||
<option>New York</option>
|
||||
<option>Tokyo</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
153
docs/templates/pages/components.mustache
vendored
153
docs/templates/pages/components.mustache
vendored
@ -31,32 +31,29 @@
|
||||
<h3>{{_i}}Button groups{{/i}}</h3>
|
||||
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.{{/i}}</p>
|
||||
<p>{{_i}}You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.{{/i}}</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">{{_i}}Left{{/i}}</a>
|
||||
<a class="btn" href="#">{{_i}}Middle{{/i}}</a>
|
||||
<a class="btn" href="#">{{_i}}Right{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="well" style="padding: 10px;">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
<a class="btn" href="#">4</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">5</a>
|
||||
<a class="btn" href="#">6</a>
|
||||
<a class="btn" href="#">7</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">8</a>
|
||||
</div>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
<a class="btn" href="#">4</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">5</a>
|
||||
<a class="btn" href="#">6</a>
|
||||
<a class="btn" href="#">7</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">8</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Example markup{{/i}}</h3>
|
||||
@ -100,67 +97,65 @@
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Split button dropdowns{{/i}}</h3>
|
||||
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-toolbar" style="margin-bottom: 9px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">{{_i}}Action{{/i}}</a>
|
||||
<a class="btn 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>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
</div> <!-- /well -->
|
||||
<div class="btn-toolbar" style="margin-top: 18px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">{{_i}}Action{{/i}}</a>
|
||||
<a class="btn 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>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</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>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>{{_i}}Example markup{{/i}}</h3>
|
||||
|
||||
@ -16,6 +16,8 @@
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
margin-top: @baseLineHeight / 2;
|
||||
margin-bottom: @baseLineHeight / 2;
|
||||
.btn-group {
|
||||
display: inline-block;
|
||||
.ie7-inline-block();
|
||||
@ -110,9 +112,14 @@
|
||||
|
||||
// Reposition the caret
|
||||
.btn .caret {
|
||||
margin-top: 6px;
|
||||
margin-top: 7px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.btn:hover .caret,
|
||||
.open.btn-group .caret {
|
||||
.opacity(100);
|
||||
}
|
||||
|
||||
|
||||
// Account for other colors
|
||||
.primary,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user