mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-02 00:06:46 +02:00
Code Issues Releases Wiki Activity

add .btn-block for a full-width button option

Browse Source
This commit is contained in:
Mark Otto
2012-07-27 15:42:58 -07:00
parent 16b4ac0d8f
commit fe6a4b0b54
4 changed files with 71 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
docs/base-css.html
View File

@@ -1439,26 +1439,34 @@ For example, <code>section</code> should be wrapped as inline.
<p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
<hr class="bs-docs-separator">
<h2>Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
<p>
<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-small btn-primary">Primary action</button>
<button type="button" class="btn btn-small">Action</button>
</p>
<p>
<button type="button" class="btn btn-mini btn-primary">Primary action</button>
<button type="button" class="btn btn-mini">Action</button>
</p>
<hr class="bs-docs-separator">
<div class="bs-docs-example">
<p>
<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-small btn-primary">Primary action</button>
<button type="button" class="btn btn-small">Action</button>
</p>
<p>
<button type="button" class="btn btn-mini btn-primary">Primary action</button>
<button type="button" class="btn btn-mini">Action</button>
</p>
</div>
<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 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>
<div class="bs-docs-example">
<div class="well" style="max-width: 400px; margin: 0 auto;">
<button type="button" class="btn btn-large btn-block">Block level button</button>
</div>
</div>
<pre class="prettyprint linenums">&lt;button class="btn btn-large btn-block" type="button"&gt;Block level button&lt;/button&gt;</pre>
<h2>Disabled state</h2>
@@ -1491,9 +1499,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</pre>
<hr class="bs-docs-separator">
<h2>One class, multiple tags</h2>
<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="bs-docs-example">