diff options
| author | Mark Otto <[email protected]> | 2012-07-27 15:42:58 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-07-27 15:42:58 -0700 |
| commit | fe6a4b0b5497a78a085e85125f4397a27b7737dc (patch) | |
| tree | 0bd945dfd64e0d472cbb3cefbe416139ac404377 /docs/base-css.html | |
| parent | 16b4ac0d8fd5fd2aa588a8b486b71b449e3821ca (diff) | |
| download | bootstrap-fe6a4b0b5497a78a085e85125f4397a27b7737dc.tar.xz bootstrap-fe6a4b0b5497a78a085e85125f4397a27b7737dc.zip | |
add .btn-block for a full-width button option
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 47 |
1 files changed, 26 insertions, 21 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 4f0df407d..f827380ac 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -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"> +<button class="btn btn-large" type="button">Large button</button> +<button class="btn btn-small" type="button">Small button</button> +<button class="btn btn-mini" type="button">Mini button</button> +</pre> + <p>Create block level buttons—those that span the full width of a parent— 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"><button class="btn btn-large btn-block" type="button">Block level button</button></pre> <h2>Disabled state</h2> @@ -1491,9 +1499,6 @@ For example, <code>section</code> 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><a></code>, <code><button></code>, or <code><input></code> element.</p> <form class="bs-docs-example"> |