mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-23 13:43:11 +02:00
Code Issues Releases Wiki Activity

adding button groups and toolbars like a boss

Browse Source
This commit is contained in:
Mark Otto
2011-09-29 02:21:02 -07:00
parent f54568fa31
commit 0a6d8c30db
5 changed files with 210 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
docs/index.html
View File

@@ -898,7 +898,7 @@
<div class="span-one-third">
<h3></h3>
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Search form</h2>
@@ -911,7 +911,7 @@
</form>
</div><!--/well-->
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Inline form</h2>
@@ -928,7 +928,7 @@
</form>
</div><!--/well-->
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Horizontal form</h2>
@@ -1032,7 +1032,7 @@
</fieldset>
</form>
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Vertical form</h2>
@@ -1075,7 +1075,82 @@
</fieldset>
</form>
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Buttons</h2>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
</div>
<div class="span12">
<h3>Example buttons</h3>
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, and select <code>&lt;input&gt;</code> elements. Here’s how it looks:</p>
<div class="well" style="padding: 14px 19px;">
<button class="btn primary">Primary</button>&nbsp;<button class="btn">Default</button>&nbsp;<button class="btn info">Info</button>&nbsp;<button class="btn success">Success</button>&nbsp;<button class="btn danger">Danger</button>
</div>
<h3>Alternate sizes</h3>
<p>Fancy larger or smaller buttons? Have at it!</p>
<div class="well">
<a href="#" class="btn large primary">Primary action</a>
<a href="#" class="btn large">Action</a>
</div>
<div class="well" style="padding: 16px 19px;">
<a href="#" class="btn small primary">Primary action</a>
<a href="#" class="btn small">Action</a>
</div>
<h3>Disabled state</h3>
<p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
<h4>Links</h4>
<div class="well">
<a href="#" class="btn large primary disabled">Primary action</a>
<a href="#" class="btn large disabled">Action</a>
</div>
<h4>Buttons</h4>
<div class="well">
<button class="btn large primary disabled" disabled="disabled">Primary action</button>&nbsp;<button class="btn large" disabled>Action</button>
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Button groups</h2>
</div>
<div class="span12">
<h3>Example</h3>
<div class="well">
<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">
<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>
<a class="btn" href="#">5</a>
</div>
<div class="btn-group">
<a class="btn" href="#">6</a>
<a class="btn" href="#">7</a>
<a class="btn" href="#">8</a>
</div>
<div class="btn-group">
<a class="btn" href="#">9</a>
</div>
<div class="btn-group">
<a class="btn" href="#">10</a>
</div>
</div>
</div>
</div>
</div><!-- /row -->
</section>