mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

fixing up buttons and examples of implementing icons

Browse Source
This commit is contained in:
Mark Otto
2012-01-27 19:49:56 -08:00
parent a624ac1edf
commit d02c6957d4
6 changed files with 177 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/templates/pages/components.mustache
Vendored
+74 -79
View File
@@ -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>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.{{/i}}</p>
<p>{{_i}}You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</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>