diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 216 |
1 files changed, 176 insertions, 40 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 7504f24699..10a7dc62eb 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Base · Twitter Bootstrap</title> + <title>Base · Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> @@ -58,7 +58,7 @@ <a href="./components.html">Components</a> </li> <li class=""> - <a href="./javascript.html">Javascript</a> + <a href="./javascript.html">JavaScript</a> </li> <li class=""> <a href="./customize.html">Customize</a> @@ -155,14 +155,14 @@ </pre> <h3>Bold</h3> - <p>For emphasizing a snippet of text with <strong>important</strong></p> + <p>For emphasizing a snippet of text with a heavier font-weight.</p> <div class="bs-docs-example"> <p>The following snippet of text is <strong>rendered as bold text</strong>.</p> </div> <pre class="prettyprint"><strong>rendered as bold text</strong></pre> <h3>Italics</h3> - <p>For emphasizing a snippet of text with <em>stress</em></p> + <p>For emphasizing a snippet of text with italics.</p> <div class="bs-docs-example"> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> </div> @@ -509,7 +509,7 @@ For example, <code><section></code> should be wrapped as inlin <h2>Optional classes</h2> - <p>Add any of the follow classes to the <code>.table</code> base class.</p> + <p>Add any of the following classes to the <code>.table</code> base class.</p> <h3><code>.table-striped</code></h3> <p>Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p> @@ -875,25 +875,29 @@ For example, <code><section></code> should be wrapped as inlin <h2>Default styles</h2> <p>Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p> <form class="bs-docs-example"> - <legend>Legend</legend> - <label>Label name</label> - <input type="text" placeholder="Type something…"> - <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> Check me out - </label> - <button type="submit" class="btn">Submit</button> + <fieldset> + <legend>Legend</legend> + <label>Label name</label> + <input type="text" placeholder="Type something…"> + <span class="help-block">Example block-level help text here.</span> + <label class="checkbox"> + <input type="checkbox"> Check me out + </label> + <button type="submit" class="btn">Submit</button> + </fieldset> </form> <pre class="prettyprint linenums"> <form> - <legend>Legend</legend> - <label>Label name</label> - <input type="text" placeholder="Type something…"> - <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> Check me out - </label> - <button type="submit" class="btn">Submit</button> + <fieldset> + <legend>Legend</legend> + <label>Label name</label> + <input type="text" placeholder="Type something…"> + <span class="help-block">Example block-level help text here.</span> + <label class="checkbox"> + <input type="checkbox"> Check me out + </label> + <button type="submit" class="btn">Submit</button> + </fieldset> </form> </pre> @@ -947,7 +951,6 @@ For example, <code><section></code> should be wrapped as inlin <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li> </ul> <form class="bs-docs-example form-horizontal"> - <legend>Legend</legend> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div class="controls"> @@ -1131,20 +1134,22 @@ For example, <code><section></code> should be wrapped as inlin <form class="bs-docs-example"> <div class="input-prepend"> <span class="add-on">@</span> - <input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> + <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <br> <div class="input-append"> - <input class="span2" id="appendedInput" size="16" type="text"> + <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div> </form> <pre class="prettyprint linenums"> <div class="input-prepend"> - <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> + <span class="add-on">@</span> + <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> - <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> + <input class="span2" id="appendedInput" type="text"> + <span class="add-on">.00</span> </div> </pre> @@ -1153,13 +1158,15 @@ For example, <code><section></code> should be wrapped as inlin <form class="bs-docs-example form-inline"> <div class="input-prepend input-append"> <span class="add-on">$</span> - <input class="span2" id="appendedPrependedInput" size="16" type="text"> + <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div> </form> <pre class="prettyprint linenums"> <div class="input-prepend input-append"> - <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> + <span class="add-on">$</span> + <input class="span2" id="appendedPrependedInput" type="text"> + <span class="add-on">.00</span> </div> </pre> @@ -1167,23 +1174,139 @@ For example, <code><section></code> should be wrapped as inlin <p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p> <form class="bs-docs-example"> <div class="input-append"> - <input class="span2" id="appendedInputButton" size="16" type="text"> + <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Go!</button> </div> - <br> + </form> +<pre class="prettyprint linenums"> +<div class="input-append"> + <input class="span2" id="appendedInputButton" type="text"> + <button class="btn" type="button">Go!</button> +</div> +</pre> + <form class="bs-docs-example"> <div class="input-append"> - <input class="span2" id="appendedInputButtons" size="16" type="text"> + <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Search</button> <button class="btn" type="button">Options</button> </div> </form> <pre class="prettyprint linenums"> <div class="input-append"> - <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> + <input class="span2" id="appendedInputButtons" type="text"> + <button class="btn" type="button">Search</button> + <button class="btn" type="button">Options</button> </div> +</pre> + <h4>Button dropdowns</h4> + <p></p> + <form class="bs-docs-example"> + <div class="input-append"> + <input class="span2" id="appendedDropdownButton" type="text"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + </div><!-- /input-append --> + </form> +<pre class="prettyprint linenums"> <div class="input-append"> - <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> + <input class="span2" id="appendedDropdownButton" type="text"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + Action + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> + </div> +</div> +</pre> + + <form class="bs-docs-example"> + <div class="input-prepend"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <input class="span2" id="prependedDropdownButton" type="text"> + </div><!-- /input-prepend --> + </form> +<pre class="prettyprint linenums"> +<div class="input-prepend"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + Action + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> + </div> + <input class="span2" id="prependedDropdownButton" type="text"> +</div> +</pre> + + <form class="bs-docs-example"> + <div class="input-prepend input-append"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <input class="span2" id="appendedPrependedDropdownButton" type="text"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + </div><!-- /input-prepend input-append --> + </form> +<pre class="prettyprint linenums"> +<div class="input-prepend input-append"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + Action + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> + </div> + <input class="span2" id="appendedPrependedDropdownButton" type="text"> + <div class="btn-group"> + <button class="btn dropdown-toggle" data-toggle="dropdown"> + Action + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> + </div> </div> </pre> @@ -1214,6 +1337,17 @@ For example, <code><section></code> should be wrapped as inlin <h3>Control sizing</h3> <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p> + <h4>Block level inputs</h4> + <p>Make any <code><input></code> or <code><textarea></code> element behave like a block level element.</p> + <form class="bs-docs-example" style="padding-bottom: 15px;"> + <div class="controls"> + <input class="input-block-level" type="text" placeholder=".input-block-level"> + </div> + </form> +<pre class="prettyprint linenums"> +<input class="input-block-level" type="text" placeholder=".input-block-level"> +</pre> + <h4>Relative sizing</h4> <form class="bs-docs-example" style="padding-bottom: 15px;"> <div class="controls docs-input-sizes"> @@ -1402,9 +1536,9 @@ For example, <code><section></code> should be wrapped as inlin </div> </div> <div class="control-group info"> - <label class="control-label" for="inputError">Input with info</label> + <label class="control-label" for="inputInfo">Input with info</label> <div class="controls"> - <input type="text" id="inputError"> + <input type="text" id="inputInfo"> <span class="help-inline">Username is taken</span> </div> </div> @@ -1940,12 +2074,14 @@ For example, <code><section></code> should be wrapped as inlin <footer class="footer"> <div class="container"> <p class="pull-right"><a href="#">Back to top</a></p> - <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> - <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> - <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> + <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <ul class="footer-links"> - <li><a href="http://blog.getbootstrap.com">Read the blog</a></li> - <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li> + <li><a href="http://blog.getbootstrap.com">Blog</a></li> + <li class="muted">·</li> + <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> + <li class="muted">·</li> <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li> </ul> </div> |