diff options
Diffstat (limited to 'docs/templates/pages/base-css.mustache')
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 200 |
1 files changed, 167 insertions, 33 deletions
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index cc83e0d733..e0a0280687 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -89,14 +89,14 @@ </pre> <h3>{{_i}}Bold{{/i}}</h3> - <p>{{_i}}For emphasizing a snippet of text with <strong>important</strong>{{/i}}</p> + <p>{{_i}}For emphasizing a snippet of text with a heavier font-weight.{{/i}}</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>{{_i}}Italics{{/i}}</h3> - <p>{{_i}}For emphasizing a snippet of text with <em>stress</em>{{/i}}</p> + <p>{{_i}}For emphasizing a snippet of text with italics.{{/i}}</p> <div class="bs-docs-example"> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> </div> @@ -446,7 +446,7 @@ <h2>{{_i}}Optional classes{{/i}}</h2> - <p>{{_i}}Add any of the follow classes to the <code>.table</code> base class.{{/i}}</p> + <p>{{_i}}Add any of the following classes to the <code>.table</code> base class.{{/i}}</p> <h3><code>{{_i}}.table-striped{{/i}}</code></h3> <p>{{_i}}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).{{/i}}</p> @@ -812,25 +812,29 @@ <h2>{{_i}}Default styles{{/i}}</h2> <p>{{_i}}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.{{/i}}</p> <form class="bs-docs-example"> - <legend>Legend</legend> - <label>{{_i}}Label name{{/i}}</label> - <input type="text" placeholder="{{_i}}Type something…{{/i}}"> - <span class="help-block">{{_i}}Example block-level help text here.{{/i}}</span> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Check me out{{/i}} - </label> - <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> + <fieldset> + <legend>Legend</legend> + <label>{{_i}}Label name{{/i}}</label> + <input type="text" placeholder="{{_i}}Type something…{{/i}}"> + <span class="help-block">{{_i}}Example block-level help text here.{{/i}}</span> + <label class="checkbox"> + <input type="checkbox"> {{_i}}Check me out{{/i}} + </label> + <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> + </fieldset> </form>{{! /example }} <pre class="prettyprint linenums"> <form> - <legend>{{_i}}Legend{{/i}}</legend> - <label>{{_i}}Label name{{/i}}</label> - <input type="text" placeholder="{{_i}}Type something…{{/i}}"> - <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Check me out{{/i}} - </label> - <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> + <fieldset> + <legend>{{_i}}Legend{{/i}}</legend> + <label>{{_i}}Label name{{/i}}</label> + <input type="text" placeholder="{{_i}}Type something…{{/i}}"> + <span class="help-block">Example block-level help text here.</span> + <label class="checkbox"> + <input type="checkbox"> {{_i}}Check me out{{/i}} + </label> + <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> + </fieldset> </form> </pre> @@ -884,7 +888,6 @@ <li>{{_i}}Wrap any associated controls in <code>.controls</code> for proper alignment{{/i}}</li> </ul> <form class="bs-docs-example form-horizontal"> - <legend>Legend</legend> <div class="control-group"> <label class="control-label" for="inputEmail">{{_i}}Email{{/i}}</label> <div class="controls"> @@ -1068,20 +1071,22 @@ <form class="bs-docs-example"> <div class="input-prepend"> <span class="add-on">@</span> - <input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"> + <input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}"> </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="{{_i}}Username{{/i}}"> + <span class="add-on">@</span> + <input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}"> </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> @@ -1090,13 +1095,15 @@ <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> @@ -1104,23 +1111,139 @@ <p>{{_i}}Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</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>{{_i}}Button dropdowns{{/i}}</h4> + <p>{{_i}}{{/i}}</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">{{_i}}Action{{/i}} <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</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"> + {{_i}}Action{{/i}} + <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">{{_i}}Action{{/i}} <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</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"> + {{_i}}Action{{/i}} + <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">{{_i}}Action{{/i}} <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</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">{{_i}}Action{{/i}} <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</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"> + {{_i}}Action{{/i}} + <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"> + {{_i}}Action{{/i}} + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + ... + </ul> + </div> </div> </pre> @@ -1151,6 +1274,17 @@ <h3>{{_i}}Control sizing{{/i}}</h3> <p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p> + <h4>{{_i}}Block level inputs{{/i}}</h4> + <p>{{_i}}Make any <code><input></code> or <code><textarea></code> element behave like a block level element.{{/i}}</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>{{_i}}Relative sizing{{/i}}</h4> <form class="bs-docs-example" style="padding-bottom: 15px;"> <div class="controls docs-input-sizes"> @@ -1339,9 +1473,9 @@ </div> </div> <div class="control-group info"> - <label class="control-label" for="inputError">{{_i}}Input with info{{/i}}</label> + <label class="control-label" for="inputInfo">{{_i}}Input with info{{/i}}</label> <div class="controls"> - <input type="text" id="inputError"> + <input type="text" id="inputInfo"> <span class="help-inline">{{_i}}Username is taken{{/i}}</span> </div> </div> |