1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-02 00:06:46 +02:00

Improve doc for Button sizes

This commit is contained in:
Erik van der Kolk
2012-08-18 16:36:40 +02:00
parent a3c474c404
commit 41253fb073
2 changed files with 50 additions and 26 deletions

View File

@@ -1460,30 +1460,42 @@ For example, <code>section</code> should be wrapped as inline.
<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>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
<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>
<button type="button" class="btn btn-large btn-primary">Large button</button>
<button type="button" class="btn btn-large">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Primary action</button>
<button type="button" class="btn">Action</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn">Default button</button>
</p>
<p>
<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 btn-primary">Small button</button>
<button type="button" class="btn btn-small">Small button</button>
</p>
<p>
<button type="button" class="btn btn-mini btn-primary">Primary action</button>
<button type="button" class="btn btn-mini">Action</button>
<button type="button" class="btn btn-mini btn-primary">Mini button</button>
<button type="button" class="btn btn-mini">Mini button</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" type="button"&gt;Default button&lt;/button&gt;
&lt;button class="btn btn-mini" type="button"&gt;Mini button&lt;/button&gt;
&lt;p&gt;
&lt;button class="btn btn-large btn-primary" type="button"&gt;Large button&lt;/button&gt;
&lt;button class="btn btn-large" type="button"&gt;Large button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;button class="btn btn-primary" type="button"&gt;Default button&lt;/button&gt;
&lt;button class="btn" type="button"&gt;Default button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;button class="btn btn-small btn-primary" type="button"&gt;Small button&lt;/button&gt;
&lt;button class="btn btn-small" type="button"&gt;Small button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;button class="btn btn-mini btn-primary" type="button"&gt;Mini button&lt;/button&gt;
&lt;button class="btn btn-mini" type="button"&gt;Mini button&lt;/button&gt;
&lt;/p&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">