diff options
Diffstat (limited to 'docs/css.html')
| -rw-r--r-- | docs/css.html | 339 |
1 files changed, 136 insertions, 203 deletions
diff --git a/docs/css.html b/docs/css.html index 87c8d4f85..25a8134fa 100644 --- a/docs/css.html +++ b/docs/css.html @@ -68,7 +68,7 @@ <!-- Subhead ================================================== --> -<header class="jumbotron subhead" id="overview"> +<header class="bs-docs-jumbotron subhead"> <div class="container"> <h1>CSS</h1> <p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p> @@ -303,7 +303,7 @@ </div> <pre class="prettyprint"><em>rendered as italicized text</em></pre> - <p><span class="label label-info">Heads up!</span> Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p> + <p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p> <h3>Emphasis classes</h3> <p>Convey meaning through color with a handful of emphasis utility classes.</p> @@ -567,8 +567,8 @@ <dd>...</dd> </dl> </pre> + <h5>Auto-truncating</h5> <p> - <span class="label label-info">Heads up!</span> Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout. </p> </section> @@ -588,7 +588,7 @@ For example, <code><section></code> should be wrapped as inline. </div> <pre class="prettyprint linenums"> -For example, <code><section></code> should be wrapped as inline. +For example, <code>&lt;section&gt;</code> should be wrapped as inline. </pre> <h2>Basic block</h2> @@ -601,7 +601,6 @@ For example, <code><section></code> should be wrapped as inlin &lt;p&gt;Sample text here...&lt;/p&gt; </pre> </pre> - <p><span class="label label-info">Heads up!</span> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p> <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p> </section> @@ -1060,20 +1059,7 @@ For example, <code><section></code> should be wrapped as inlin <h2 id="forms-layouts">Optional layouts</h2> - <p>Included with Bootstrap are three optional form layouts for common use cases.</p> - - <h3>Search form</h3> - <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code><input></code> for an extra-rounded text input.</p> - <form class="bs-docs-example form-search"> - <input type="text" class="span3 search-query"> - <button type="submit" class="btn">Search</button> - </form> -<pre class="prettyprint linenums"> -<form class="form-search"> - <input type="text" class="span3 search-query"> - <button type="submit" class="btn">Search</button> -</form> -</pre> + <p>Included with Bootstrap are optional form layouts for common use cases.</p> <h3>Inline form</h3> <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p> @@ -1119,13 +1105,15 @@ For example, <code><section></code> should be wrapped as inlin <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> </div> </div> <div class="control-group"> <div class="controls"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> <button type="submit" class="btn">Sign in</button> </div> </div> @@ -1146,9 +1134,11 @@ For example, <code><section></code> should be wrapped as inlin </div> <div class="control-group"> <div class="controls"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> <button type="submit" class="btn">Sign in</button> </div> </div> @@ -1296,85 +1286,82 @@ For example, <code><section></code> should be wrapped as inlin <h2 id="forms-extending">Extending form controls</h2> <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p> - <h3>Prepended and appended inputs</h3> - <p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p> - - <h4>Default options</h4> - <p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p> + <h3>Input groups</h3> + <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p> + <p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p> <form class="bs-docs-example"> - <div class="input-prepend"> - <span class="add-on">@</span> - <input id="prependedInput" type="text" placeholder="Username"> + <div class="input-group span9"> + <span class="input-group-addon">@</span> + <input type="text" placeholder="Username"> + </div> + <br> + <div class="input-group span6"> + <input type="text"> + <span class="input-group-addon">.00</span> </div> <br> - <div class="input-append"> - <input id="appendedInput" type="text"> - <span class="add-on">.00</span> + <div class="input-group span3"> + <span class="input-group-addon">$</span> + <input type="text"> + <span class="input-group-addon">.00</span> </div> </form> <pre class="prettyprint linenums"> -<div class="input-prepend"> - <span class="add-on">@</span> - <input id="prependedInput" type="text" placeholder="Username"> +<div class="input-group span9"> + <span class="input-group-addon">@</span> + <input type="text" placeholder="Username"> </div> -<div class="input-append"> - <input id="appendedInput" type="text"> - <span class="add-on">.00</span> + +<div class="input-group span6"> + <input type="text"> + <span class="input-group-addon">.00</span> </div> -</pre> - <h4>Combined</h4> - <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p> - <form class="bs-docs-example form-inline"> - <div class="input-prepend input-append"> - <span class="add-on">$</span> - <input 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 id="appendedPrependedInput" type="text"> - <span class="add-on">.00</span> +<div class="input-group span3"> + <span class="input-group-addon">$</span> + <input type="text"> + <span class="input-group-addon">.00</span> </div> </pre> <h4>Buttons instead of text</h4> - <p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p> + <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <form class="bs-docs-example"> - <div class="input-append"> - <input class="span3" id="appendedInputButton" type="text"> - <button class="btn" type="button">Go!</button> + <div class="input-group span7"> + <span class="input-group-btn"> + <button class="btn" type="button">Go!</button> + </span> + <input type="text"> </div> - </form> -<pre class="prettyprint linenums"> -<div class="input-append"> - <input class="span3" id="appendedInputButton" type="text"> - <button class="btn" type="button">Go!</button> -</div> -</pre> - <form class="bs-docs-example"> - <div class="input-append"> - <input class="span3" id="appendedInputButtons" type="text"> - <button class="btn" type="button">Search</button> - <button class="btn" type="button">Options</button> + <br> + <div class="input-group span7"> + <input type="text"> + <span class="input-group-btn"> + <button class="btn" type="button">Go!</button> + </span> </div> </form> <pre class="prettyprint linenums"> -<div class="input-append"> - <input class="span3" id="appendedInputButton" type="text"> - <button class="btn" type="button">Search</button> - <button class="btn" type="button">Options</button> +<div class="input-group span7"> + <span class="input-group-btn"> + <button class="btn" type="button">Go!</button> + </span> + <input type="text"> +</div> + +<div class="input-group span7"> + <input type="text"> + <span class="input-group-btn"> + <button class="btn" type="button">Go!</button> + </span> </div> </pre> <h4>Button dropdowns</h4> <p></p> <form class="bs-docs-example"> - <div class="input-append"> - <input class="span3" id="appendedDropdownButton" type="text"> - <div class="btn-group"> + <div class="input-group span7"> + <div class="input-group-btn 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> @@ -1384,27 +1371,12 @@ For example, <code><section></code> should be wrapped as inlin <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> - </div><!-- /input-append --> - </form> -<pre class="prettyprint linenums"> -<div class="input-append"> - <input id="appendedInputButtons" type="text"> - <input class="span3" 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"> + <input type="text"> + </div><!-- /input-group --> + <br> + <div class="input-group span7"> + <input type="text"> + <div class="input-group-btn 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> @@ -1414,12 +1386,11 @@ For example, <code><section></code> should be wrapped as inlin <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> - <input class="span2" id="prependedDropdownButton" type="text"> - </div><!-- /input-prepend --> + </div><!-- /input-group --> </form> <pre class="prettyprint linenums"> -<div class="input-prepend"> - <div class="btn-group"> +<div class="input-group span7"> + <div class="input-group-btn btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> @@ -1428,48 +1399,12 @@ For example, <code><section></code> should be wrapped as inlin ... </ul> </div> - <input class="span2" id="prependedDropdownButton" type="text"> + <input 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"> +<div class="input-group span7"> + <input type="text"> + <div class="input-group-btn btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> @@ -1483,8 +1418,8 @@ For example, <code><section></code> should be wrapped as inlin <h4>Segmented dropdown groups</h4> <form class="bs-docs-example"> - <div class="input-prepend"> - <div class="btn-group"> + <div class="input-group span7"> + <div class="input-group-btn btn-group"> <button class="btn" tabindex="-1">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> @@ -1499,9 +1434,12 @@ For example, <code><section></code> should be wrapped as inlin </div> <input type="text" class="span3"> </div> - <div class="input-append"> - <input type="text" class="span3"> - <div class="btn-group"> + + <br> + + <div class="input-group span7"> + <input type="text"> + <div class="input-group-btn btn-group"> <button class="btn" tabindex="-1">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> @@ -1517,40 +1455,14 @@ For example, <code><section></code> should be wrapped as inlin </div> </form> <pre class="prettyprint linenums"> -<form> - <div class="input-prepend"> - <div class="btn-group">...</div> - <input type="text" class="span3"> - </div> - <div class="input-append"> - <input type="text" class="span3"> - <div class="btn-group">...</div> - </div> -</form> -</pre> - - <h4>Search form</h4> - <form class="bs-docs-example form-search"> - <div class="input-append"> - <input type="text" class="search-query span3"> - <button type="submit" class="btn">Search</button> - </div> - <div class="input-prepend"> - <button type="submit" class="btn">Search</button> - <input type="text" class="search-query span3"> - </div> - </form> -<pre class="prettyprint linenums"> -<form class="form-search"> - <div class="input-append"> - <input type="text" class="search-query span3"> - <button type="submit" class="btn">Search</button> - </div> - <div class="input-prepend"> - <button type="submit" class="btn">Search</button> - <input type="text" class="search-query span3"> - </div> -</form> +<div class="input-prepend"> + <div class="btn-group">...</div> + <input type="text" class="span3"> +</div> +<div class="input-append"> + <input type="text" class="span3"> + <div class="btn-group">...</div> +</div> </pre> <h3 id="forms-extending-sizes">Control sizing</h3> @@ -1737,6 +1649,43 @@ For example, <code><section></code> should be wrapped as inlin <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> </pre> + <h3>Disabled fieldsets</h3> + <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p> + <form class="bs-docs-example form-inline"> + <fieldset disabled> + <div> + <input type="text" class="span4" placeholder="Disabled input"> + </div> + <div> + <select class="span4"> + <option>Disabled select</option> + </select> + </div> + <div class="checkbox"> + <label> + <input type="checkbox"> Can't check this + </label> + </div> + <button type="submit" class="btn btn-primary">Submit</button> + </fieldset> + </form> +<pre class="prettyprint linenums"> +<form class="form-inline"> + <fieldset disabled> + <input type="text" class="span4" placeholder="Disabled input"> + <select class="span4"> + <option>Disabled select</option> + </select> + <div class="checkbox"> + <label> + <input type="checkbox"> Can't check this + </label> + </div> + <button type="submit" class="btn btn-primary">Submit</button> + </fieldset> +</form> +</pre> + <h3>Validation states</h3> <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p> @@ -1817,7 +1766,7 @@ For example, <code><section></code> should be wrapped as inlin </thead> <tbody> <tr> - <td><button type="button" class="btn">Default</button></td> + <td><button type="button" class="btn btn-default">Default</button></td> <td><code>btn</code></td> <td>Standard gray button with gradient</td> </tr> @@ -1827,11 +1776,6 @@ For example, <code><section></code> should be wrapped as inlin <td>Provides extra visual weight and identifies the primary action in a set of buttons</td> </tr> <tr> - <td><button type="button" class="btn btn-info">Info</button></td> - <td><code>btn btn-info</code></td> - <td>Used as an alternative to the default styles</td> - </tr> - <tr> <td><button type="button" class="btn btn-success">Success</button></td> <td><code>btn btn-success</code></td> <td>Indicates a successful or positive action</td> @@ -1847,11 +1791,6 @@ For example, <code><section></code> should be wrapped as inlin <td>Indicates a dangerous or potentially negative action</td> </tr> <tr> - <td><button type="button" class="btn btn-inverse">Inverse</button></td> - <td><code>btn btn-inverse</code></td> - <td>Alternate dark gray button, not tied to a semantic action or use</td> - </tr> - <tr> <td><button type="button" class="btn btn-link">Link</button></td> <td><code>btn btn-link</code></td> <td>Deemphasize a button by making it look like a link while maintaining button behavior</td> @@ -1928,7 +1867,6 @@ For example, <code><section></code> should be wrapped as inlin <a href="#" class="btn btn-large disabled">Link</a> </pre> <p> - <span class="label label-info">Heads up!</span> We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here. </p> @@ -1971,7 +1909,7 @@ For example, <code><section></code> should be wrapped as inlin <h1>Images</h1> </div> - <p>Add classes to an <code><img></code> element to easily style images in any project.</p> + <p>Add classes to an <code><img></code> element to easily style images in any project. Rounded corners are not available in IE8.</p> <div class="bs-docs-example bs-docs-example-images"> <img data-src="holder.js/140x140" class="img-rounded"> <img data-src="holder.js/140x140" class="img-circle"> @@ -1982,8 +1920,6 @@ For example, <code><section></code> should be wrapped as inlin <img src="..." class="img-circle"> <img src="..." class="img-polaroid"> </pre> - <p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.</p> - </section> @@ -2181,10 +2117,7 @@ For example, <code><section></code> should be wrapped as inlin <i class="glyphicon-search"></i> </pre> <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p> - <p> - <span class="label label-info">Heads up!</span> - When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing. - </p> + <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p> <hr class="bs-docs-separator"> |