diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/base-css.html | 242 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 242 |
2 files changed, 328 insertions, 156 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 3ea3bdce3..363f91a02 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -417,10 +417,10 @@ For example, <code>section</code> should be wrapped as inline. </pre> <pre class="prettyprint linenums" style="margin-bottom: 9px;"> <pre> - &lt;p&gt;Sample text here...&lt;/p&gt; +&lt;p&gt;Sample text here...&lt;/p&gt; </pre> </pre> - <p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p> + <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> @@ -802,6 +802,7 @@ For example, <code>section</code> should be wrapped as inline. </table> <pre class="prettyprint linenums"> <table> + <caption>…</caption> <thead> <tr> <th>…</th> @@ -834,14 +835,15 @@ For example, <code>section</code> should be wrapped as inline. <legend>Legend</legend> <label>Label name</label> <input type="text" placeholder="Type something…"> - <p class="help-block">Example block-level help text here.</p> + <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> </form> <pre class="prettyprint linenums"> -<form class="well"> +<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> @@ -853,7 +855,7 @@ For example, <code>section</code> should be wrapped as inline. </pre> - <hr class="bs-docs-separator"></hr> + <hr class="bs-docs-separator"> <h2>Optional layouts</h2> @@ -904,15 +906,15 @@ For example, <code>section</code> should be wrapped as inline. <form class="bs-docs-example form-horizontal"> <legend>Legend</legend> <div class="control-group"> - <label class="control-label" for="">Email</label> + <label class="control-label" for="inputEmail">Email</label> <div class="controls"> - <input type="text" placeholder="Email"> + <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> - <label class="control-label" for="">Password</label> + <label class="control-label" for="inputPassword">Password</label> <div class="controls"> - <input type="password" placeholder="Password"> + <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> @@ -927,15 +929,15 @@ For example, <code>section</code> should be wrapped as inline. <pre class="prettyprint linenums"> <form class="form-horizontal"> <div class="control-group"> - <label class="control-label" for="">Email</label> + <label class="control-label" for="inputEmail">Email</label> <div class="controls"> - <input type="text" placeholder="Email"> + <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> - <label class="control-label" for="">Password</label> + <label class="control-label" for="inputPassword">Password</label> <div class="controls"> - <input type="password" placeholder="Password"> + <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> @@ -950,7 +952,7 @@ For example, <code>section</code> should be wrapped as inline. </pre> - <hr class="bs-docs-separator"></hr> + <hr class="bs-docs-separator"> <h2>Supported form controls</h2> @@ -972,7 +974,7 @@ For example, <code>section</code> should be wrapped as inline. <textarea rows="3"></textarea> </form> <pre class="prettyprint linenums"> -<textarea id="textarea" rows="3"></textarea> +<textarea rows="3"></textarea> </pre> <h3>Checkboxes and radios</h3> @@ -1045,7 +1047,7 @@ For example, <code>section</code> should be wrapped as inline. <option>5</option> </select> <br> - <select> + <select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> @@ -1062,7 +1064,7 @@ For example, <code>section</code> should be wrapped as inline. <option>5</option> </select> -<select> +<select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> @@ -1072,7 +1074,7 @@ For example, <code>section</code> should be wrapped as inline. </pre> - <hr class="bs-docs-separator"></hr> + <hr class="bs-docs-separator"> <h2>Extending form controls</h2> @@ -1082,7 +1084,7 @@ For example, <code>section</code> should be wrapped as inline. <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 a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p> + <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> <form class="bs-docs-example"> <div class="input-prepend"> <span class="add-on">@</span> @@ -1155,8 +1157,14 @@ For example, <code>section</code> should be wrapped as inline. </form> <pre class="prettyprint linenums"> <form class="form-search"> - <input type="text" class="span2 search-query"> - <button type="submit" class="btn">Search</button> + <div class="input-append"> + <input type="text" class="span2 search-query"> + <button type="submit" class="btn">Search</button> + </div> + <div class="input-prepend"> + <input type="text" class="span2 search-query"> + <button type="submit" class="btn">Search</button> + </div> </form> </pre> @@ -1175,12 +1183,12 @@ For example, <code>section</code> should be wrapped as inline. </div> </form> <pre class="prettyprint linenums"> -<input class="input-mini" type="text"> -<input class="input-small" type="text"> -<input class="input-medium" type="text"> -<input class="input-large" type="text"> -<input class="input-xlarge" type="text"> -<input class="input-xxlarge" type="text"> +<input class="input-mini" type="text" placeholder=".input-mini"> +<input class="input-small" type="text" placeholder=".input-small"> +<input class="input-medium" type="text" placeholder=".input-medium"> +<input class="input-large" type="text" placeholder=".input-large"> +<input class="input-xlarge" type="text" placeholder=".input-xlarge"> +<input class="input-xxlarge" type="text" placeholder=".input-xxlarge"> </pre> <p> <span class="label label-info">Heads up!</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input. @@ -1217,9 +1225,18 @@ For example, <code>section</code> should be wrapped as inline. </div> </form> <pre class="prettyprint linenums"> -<input class="span1" type="text"> -<input class="span2" type="text"> -<input class="span3" type="text"> +<input class="span1" type="text" placeholder=".span1"> +<input class="span2" type="text" placeholder=".span2"> +<input class="span3" type="text" placeholder=".span3"> +<select class="span1"> + ... +</select> +<select class="span2"> + ... +</select> +<select class="span3"> + ... +</select> </pre> <p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p> @@ -1245,10 +1262,14 @@ For example, <code>section</code> should be wrapped as inline. </div> </form> <pre class="prettyprint linenums"> +<div class="controls"> + <input class="span5" type="text" placeholder=".span5"> +</div> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1"> </div> +... </pre> <h3>Uneditable inputs</h3> @@ -1282,7 +1303,7 @@ For example, <code>section</code> should be wrapped as inline. <input type="text"> <span class="help-inline">Inline help text</span> </form> <pre class="prettyprint linenums"> -<span class="help-inline">Inline help text</span> +<input type="text"><span class="help-inline">Inline help text</span> </pre> <h4>Block help</h4> @@ -1291,11 +1312,11 @@ For example, <code>section</code> should be wrapped as inline. <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> </form> <pre class="prettyprint linenums"> -<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> +<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> </pre> - <hr class="bs-docs-separator"></hr> + <hr class="bs-docs-separator"> <h2>Form control states</h2> @@ -1306,9 +1327,9 @@ For example, <code>section</code> should be wrapped as inline. <form class="bs-docs-example form-inline"> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused..."> </form> - <pre class="prettyprint linenums"> - <input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."> - </pre> +<pre class="prettyprint linenums"> +<input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."> +</pre> <h3>Disabled inputs</h3> <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> @@ -1439,39 +1460,54 @@ 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"> -<button class="btn btn-large" type="button">Large button</button> -<button class="btn btn-small" type="button">Small button</button> -<button class="btn" type="button">Default button</button> -<button class="btn btn-mini" type="button">Mini button</button> +<p> + <button class="btn btn-large btn-primary" type="button">Large button</button> + <button class="btn btn-large" type="button">Large button</button> +</p> +<p> + <button class="btn btn-primary" type="button">Default button</button> + <button class="btn" type="button">Default button</button> +</p> +<p> + <button class="btn btn-small btn-primary" type="button">Small button</button> + <button class="btn btn-small" type="button">Small button</button> +</p> +<p> + <button class="btn btn-mini btn-primary" type="button">Mini button</button> + <button class="btn btn-mini" type="button">Mini button</button> +</p> </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 10px;"> - <button type="button" class="btn btn-large btn-primary btn-block">Block level button</button> + <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button> <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> +<pre class="prettyprint linenums"> +<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> +<button class="btn btn-large btn-block" type="button">Block level button</button> +</pre> <h2>Disabled state</h2> @@ -1514,15 +1550,11 @@ For example, <code>section</code> should be wrapped as inline. </form> <pre class="prettyprint linenums"> <a class="btn" href="">Link</a> -<button class="btn" type="submit"> - Button -</button> -<input class="btn" type="button" - value="Input"> -<input class="btn" type="submit" - value="Submit"> +<button class="btn" type="submit">Button</button> +<input class="btn" type="button" value="Input"> +<input class="btn" type="submit" value="Submit"> </pre> - <p>As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code><input type="submit"></code> for your button.</p> + <p>As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code><input type="submit"></code> for your button.</p> </section> @@ -1535,16 +1567,17 @@ For example, <code>section</code> should be wrapped as inline. <h1>Images</h1> </div> - <p>Simple classes to easily style images in any project. Heads up: <code>.img-rounded</code> and <code>.img-circle</code> don't work in IE7-8.</p> + <p>Add the <code>.img-rounded</code>, <code>.img-circle</code> or <code>.img-polaroid</code> class to a <code><img></code> element to easily style images in any project.</p> + <p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> don't work in IE7-8.</p> <div class="bs-docs-example bs-docs-example-images"> <img src="http://placehold.it/140x140" class="img-rounded"> <img src="http://placehold.it/140x140" class="img-circle"> <img src="http://placehold.it/140x140" class="img-polaroid"> </div> <pre class="prettyprint linenums"> - <img src="..." class="img-rounded"> - <img src="..." class="img-circle"> - <img src="..." class="img-polaroid"> +<img src="..." class="img-rounded"> +<img src="..." class="img-circle"> +<img src="..." class="img-polaroid"> </pre> @@ -1737,30 +1770,66 @@ For example, <code>section</code> should be wrapped as inline. <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> <h4>Buttons</h4> + + <h6>Button group in a button toolbar</h6> <div class="bs-docs-example"> - <div class="btn-toolbar" style="margin-bottom: 9px"> + <div class="btn-toolbar"> <div class="btn-group"> <a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="icon-align-justify"></i></a> </div> - <br><br> - <div class="btn-group"> - <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a> - <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> - <li><a href="#"><i class="icon-trash"></i> Delete</a></li> - <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> - <li class="divider"></li> - <li><a href="#"><i class="i"></i> Make admin</a></li> - </ul> - </div> - <br><br> - <a class="btn btn-small" href="#"><i class="icon-star"></i></a> </div> </div> +<pre class="prettyprint linenums"> +<div class="btn-toolbar"> + <div class="btn-group"> + + <a class="btn" href="#"><i class="icon-align-left"></i></a> + <a class="btn" href="#"><i class="icon-align-center"></i></a> + <a class="btn" href="#"><i class="icon-align-right"></i></a> + <a class="btn" href="#"><i class="icon-align-justify"></i></a> + </div> +</div> +</pre> + + <h6>Dropdown in a button group</h6> + <div class="bs-docs-example"> + <div class="btn-group"> + <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a> + <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> + <li><a href="#"><i class="icon-trash"></i> Delete</a></li> + <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> + <li class="divider"></li> + <li><a href="#"><i class="i"></i> Make admin</a></li> + </ul> + </div> + </div> +<pre class="prettyprint linenums"> +<div class="btn-group"> + <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a> + <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> + <li><a href="#"><i class="icon-trash"></i> Delete</a></li> + <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> + <li class="divider"></li> + <li><a href="#"><i class="i"></i> Make admin</a></li> + </ul> +</div> +</pre> + + <h6>Button</h6> + <div class="bs-docs-example"> + <a class="btn btn-small" href="#"><i class="icon-star"></i></a> + </div> +<pre class="prettyprint linenums"> +<a class="btn btn-small" href="#"><i class="icon-star"></i></a> +</pre> + <h4>Navigation</h4> <div class="bs-docs-example"> @@ -1773,6 +1842,14 @@ For example, <code>section</code> should be wrapped as inline. </ul> </div> </div> +<pre class="prettyprint linenums"> +<ul class="nav nav-list"> + <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> + <li><a href="#"><i class="icon-book"></i> Library</a></li> + <li><a href="#"><i class="icon-pencil"></i> Applications</a></li> + <li><a href="#"><i class="i"></i> Misc</a></li> +</ul> +</pre> <h4>Form fields</h4> <form class="bs-docs-example form-horizontal"> @@ -1785,6 +1862,15 @@ For example, <code>section</code> should be wrapped as inline. </div> </div> </form> +<pre class="prettyprint linenums"> +<div class="control-group"> + <label class="control-label" for="inputIcon">Email address</label> + <div class="controls"> + <div class="input-prepend"> + <span class="add-on"><i class="icon-envelope"><i><span><input class="span2" id="inputIcon" type="text"> + </div> +</div> +</pre> </section> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 4cc21e975..f2fb96b4b 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -354,10 +354,10 @@ </pre> <pre class="prettyprint linenums" style="margin-bottom: 9px;"> <pre> - &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt; +&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt; </pre> </pre> - <p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p> + <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p> <p>{{_i}}You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}</p> </section> @@ -739,6 +739,7 @@ </table> <pre class="prettyprint linenums"> <table> + <caption>…</caption> <thead> <tr> <th>…</th> @@ -771,14 +772,15 @@ <legend>Legend</legend> <label>{{_i}}Label name{{/i}}</label> <input type="text" placeholder="{{_i}}Type something…{{/i}}"> - <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p> + <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> </form>{{! /example }} <pre class="prettyprint linenums"> -<form class="well"> +<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> @@ -790,7 +792,7 @@ </pre> - <hr class="bs-docs-separator"></hr> + <hr class="bs-docs-separator"> <h2>{{_i}}Optional layouts{{/i}}</h2> @@ -841,15 +843,15 @@ <form class="bs-docs-example form-horizontal"> <legend>Legend</legend> <div class="control-group"> - <label class="control-label" for="">{{_i}}Email{{/i}}</label> + <label class="control-label" for="inputEmail">{{_i}}Email{{/i}}</label> <div class="controls"> - <input type="text" placeholder="{{_i}}Email{{/i}}"> + <input type="text" id="inputEmail" placeholder="{{_i}}Email{{/i}}"> </div> </div> <div class="control-group"> - <label class="control-label" for="">{{_i}}Password{{/i}}</label> + <label class="control-label" for="inputPassword">{{_i}}Password{{/i}}</label> <div class="controls"> - <input type="password" placeholder="{{_i}}Password{{/i}}"> + <input type="password" id="inputPassword" placeholder="{{_i}}Password{{/i}}"> </div> </div> <div class="control-group"> @@ -864,15 +866,15 @@ <pre class="prettyprint linenums"> <form class="form-horizontal"> <div class="control-group"> - <label class="control-label" for="">{{_i}}Email{{/i}}</label> + <label class="control-label" for="inputEmail">{{_i}}Email{{/i}}</label> <div class="controls"> - <input type="text" placeholder="{{_i}}Email{{/i}}"> + <input type="text" id="inputEmail" placeholder="{{_i}}Email{{/i}}"> </div> </div> <div class="control-group"> - <label class="control-label" for="">{{_i}}Password{{/i}}</label> + <label class="control-label" for="inputPassword">{{_i}}Password{{/i}}</label> <div class="controls"> - <input type="password" placeholder="{{_i}}Password{{/i}}"> + <input type="password" id="inputPassword" placeholder="{{_i}}Password{{/i}}"> </div> </div> <div class="control-group"> @@ -887,7 +889,7 @@ </pre> - <hr class="bs-docs-separator"></hr> + <hr class="bs-docs-separator"> <h2>{{_i}}Supported form controls{{/i}}</h2> @@ -909,7 +911,7 @@ <textarea rows="3"></textarea> </form> <pre class="prettyprint linenums"> -<textarea id="textarea" rows="3"></textarea> +<textarea rows="3"></textarea> </pre> <h3>{{_i}}Checkboxes and radios{{/i}}</h3> @@ -982,7 +984,7 @@ <option>5</option> </select> <br> - <select> + <select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> @@ -999,7 +1001,7 @@ <option>5</option> </select> -<select> +<select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> @@ -1009,7 +1011,7 @@ </pre> - <hr class="bs-docs-separator"></hr> + <hr class="bs-docs-separator"> <h2>{{_i}}Extending form controls{{/i}}</h2> @@ -1019,7 +1021,7 @@ <p>{{_i}}Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.{{/i}}</p> <h4>{{_i}}Default options{{/i}}</h4> - <p>{{_i}}Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.{{/i}}</p> + <p>{{_i}}Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.{{/i}}</p> <form class="bs-docs-example"> <div class="input-prepend"> <span class="add-on">@</span> @@ -1092,8 +1094,14 @@ </form>{{! /example }} <pre class="prettyprint linenums"> <form class="form-search"> - <input type="text" class="span2 search-query"> - <button type="submit" class="btn">{{_i}}Search{{/i}}</button> + <div class="input-append"> + <input type="text" class="span2 search-query"> + <button type="submit" class="btn">{{_i}}Search{{/i}}</button> + </div> + <div class="input-prepend"> + <input type="text" class="span2 search-query"> + <button type="submit" class="btn">{{_i}}Search{{/i}}</button> + </div> </form> </pre> @@ -1112,12 +1120,12 @@ </div> </form> <pre class="prettyprint linenums"> -<input class="input-mini" type="text"> -<input class="input-small" type="text"> -<input class="input-medium" type="text"> -<input class="input-large" type="text"> -<input class="input-xlarge" type="text"> -<input class="input-xxlarge" type="text"> +<input class="input-mini" type="text" placeholder=".input-mini"> +<input class="input-small" type="text" placeholder=".input-small"> +<input class="input-medium" type="text" placeholder=".input-medium"> +<input class="input-large" type="text" placeholder=".input-large"> +<input class="input-xlarge" type="text" placeholder=".input-xlarge"> +<input class="input-xxlarge" type="text" placeholder=".input-xxlarge"> </pre> <p> <span class="label label-info">{{_i}}Heads up!{{/i}}</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input. @@ -1154,9 +1162,18 @@ </div> </form> <pre class="prettyprint linenums"> -<input class="span1" type="text"> -<input class="span2" type="text"> -<input class="span3" type="text"> +<input class="span1" type="text" placeholder=".span1"> +<input class="span2" type="text" placeholder=".span2"> +<input class="span3" type="text" placeholder=".span3"> +<select class="span1"> + ... +</select> +<select class="span2"> + ... +</select> +<select class="span3"> + ... +</select> </pre> <p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}</p> @@ -1182,10 +1199,14 @@ </div> </form> <pre class="prettyprint linenums"> +<div class="controls"> + <input class="span5" type="text" placeholder=".span5"> +</div> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1"> </div> +... </pre> <h3>{{_i}}Uneditable inputs{{/i}}</h3> @@ -1219,7 +1240,7 @@ <input type="text"> <span class="help-inline">Inline help text</span> </form> <pre class="prettyprint linenums"> -<span class="help-inline">Inline help text</span> +<input type="text"><span class="help-inline">Inline help text</span> </pre> <h4>{{_i}}Block help{{/i}}</h4> @@ -1228,11 +1249,11 @@ <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> </form> <pre class="prettyprint linenums"> -<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> +<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> </pre> - <hr class="bs-docs-separator"></hr> + <hr class="bs-docs-separator"> <h2>{{_i}}Form control states{{/i}}</h2> @@ -1243,9 +1264,9 @@ <form class="bs-docs-example form-inline"> <input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"> </form> - <pre class="prettyprint linenums"> - <input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"> - </pre> +<pre class="prettyprint linenums"> +<input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"> +</pre> <h3>{{_i}}Disabled inputs{{/i}}</h3> <p>{{_i}}Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.{{/i}}</p> @@ -1376,39 +1397,54 @@ <h2>{{_i}}Button sizes{{/i}}</h2> - <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p> + <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.{{/i}}</p> <div class="bs-docs-example"> <p> - <button type="button" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button> - <button type="button" class="btn btn-large">{{_i}}Action{{/i}}</button> + <button type="button" class="btn btn-large btn-primary">{{_i}}Large button{{/i}}</button> + <button type="button" class="btn btn-large">{{_i}}Large button{{/i}}</button> </p> <p> - <button type="button" class="btn btn-primary">{{_i}}Primary action{{/i}}</button> - <button type="button" class="btn">{{_i}}Action{{/i}}</button> + <button type="button" class="btn btn-primary">{{_i}}Default button{{/i}}</button> + <button type="button" class="btn">{{_i}}Default button{{/i}}</button> </p> <p> - <button type="button" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button> - <button type="button" class="btn btn-small">{{_i}}Action{{/i}}</button> + <button type="button" class="btn btn-small btn-primary">{{_i}}Small button{{/i}}</button> + <button type="button" class="btn btn-small">{{_i}}Small button{{/i}}</button> </p> <p> - <button type="button" class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button> - <button type="button" class="btn btn-mini">{{_i}}Action{{/i}}</button> + <button type="button" class="btn btn-mini btn-primary">{{_i}}Mini button{{/i}}</button> + <button type="button" class="btn btn-mini">{{_i}}Mini button{{/i}}</button> </p> </div> <pre class="prettyprint linenums"> -<button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button> -<button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button> -<button class="btn" type="button">{{_i}}Default button{{/i}}</button> -<button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button> +<p> + <button class="btn btn-large btn-primary" type="button">{{_i}}Large button{{/i}}</button> + <button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button> +</p> +<p> + <button class="btn btn-primary" type="button">{{_i}}Default button{{/i}}</button> + <button class="btn" type="button">{{_i}}Default button{{/i}}</button> +</p> +<p> + <button class="btn btn-small btn-primary" type="button">{{_i}}Small button{{/i}}</button> + <button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button> +</p> +<p> + <button class="btn btn-mini btn-primary" type="button">{{_i}}Mini button{{/i}}</button> + <button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button> +</p> </pre> <p>{{_i}}Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.{{/i}}</p> <div class="bs-docs-example"> <div class="well" style="max-width: 400px; margin: 0 auto 10px;"> - <button type="button" class="btn btn-large btn-primary btn-block">{{_i}}Block level button{{/i}}</button> + <button type="button" class="btn btn-large btn-block btn-primary">{{_i}}Block level button{{/i}}</button> <button type="button" class="btn btn-large btn-block">{{_i}}Block level button{{/i}}</button> </div> </div> - <pre class="prettyprint linenums"><button class="btn btn-large btn-block" type="button">{{_i}}Block level button{{/i}}</button></pre> +<pre class="prettyprint linenums"> +<button class="btn btn-large btn-block btn-primary" type="button">{{_i}}Block level button{{/i}}</button> +<button class="btn btn-large btn-block" type="button">{{_i}}Block level button{{/i}}</button> +</pre> <h2>{{_i}}Disabled state{{/i}}</h2> @@ -1451,15 +1487,11 @@ </form> <pre class="prettyprint linenums"> <a class="btn" href="">{{_i}}Link{{/i}}</a> -<button class="btn" type="submit"> - {{_i}}Button{{/i}} -</button> -<input class="btn" type="button" - value="{{_i}}Input{{/i}}"> -<input class="btn" type="submit" - value="{{_i}}Submit{{/i}}"> +<button class="btn" type="submit">{{_i}}Button{{/i}}</button> +<input class="btn" type="button" value="{{_i}}Input{{/i}}"> +<input class="btn" type="submit" value="{{_i}}Submit{{/i}}"> </pre> - <p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code><input type="submit"></code> for your button.{{/i}}</p> + <p>{{_i}}As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code><input type="submit"></code> for your button.{{/i}}</p> </section> @@ -1472,16 +1504,17 @@ <h1>{{_i}}Images{{/i}}</h1> </div> - <p>{{_i}}Simple classes to easily style images in any project. Heads up: <code>.img-rounded</code> and <code>.img-circle</code> don't work in IE7-8.{{/i}}</p> + <p>{{_i}}Add the <code>.img-rounded</code>, <code>.img-circle</code> or <code>.img-polaroid</code> class to a <code><img></code> element to easily style images in any project.{{/i}}</p> + <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}<code>.img-rounded</code> and <code>.img-circle</code> don't work in IE7-8.{{/i}}</p> <div class="bs-docs-example bs-docs-example-images"> <img src="http://placehold.it/140x140" class="img-rounded"> <img src="http://placehold.it/140x140" class="img-circle"> <img src="http://placehold.it/140x140" class="img-polaroid"> </div> <pre class="prettyprint linenums"> - <img src="..." class="img-rounded"> - <img src="..." class="img-circle"> - <img src="..." class="img-polaroid"> +<img src="..." class="img-rounded"> +<img src="..." class="img-circle"> +<img src="..." class="img-polaroid"> </pre> @@ -1674,30 +1707,66 @@ <p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p> <h4>{{_i}}Buttons{{/i}}</h4> + + <h6>{{_i}}Button group in a button toolbar{{/i}}</h6> <div class="bs-docs-example"> - <div class="btn-toolbar" style="margin-bottom: 9px"> + <div class="btn-toolbar"> <div class="btn-group"> <a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="icon-align-justify"></i></a> </div> - <br><br> - <div class="btn-group"> - <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a> - <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li> - <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li> - <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li> - <li class="divider"></li> - <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li> - </ul> - </div> - <br><br> - <a class="btn btn-small" href="#"><i class="icon-star"></i></a> </div> </div>{{! /bs-docs-example }} +<pre class="prettyprint linenums"> +<div class="btn-toolbar"> + <div class="btn-group"> + + <a class="btn" href="#"><i class="icon-align-left"></i></a> + <a class="btn" href="#"><i class="icon-align-center"></i></a> + <a class="btn" href="#"><i class="icon-align-right"></i></a> + <a class="btn" href="#"><i class="icon-align-justify"></i></a> + </div> +</div> +</pre> + + <h6>{{_i}}Dropdown in a button group{{/i}}</h6> + <div class="bs-docs-example"> + <div class="btn-group"> + <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a> + <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li> + <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li> + <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li> + </ul> + </div> + </div>{{! /bs-docs-example }} +<pre class="prettyprint linenums"> +<div class="btn-group"> + <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a> + <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li> + <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li> + <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li> + </ul> +</div> +</pre> + + <h6>{{_i}}Button{{/i}}</h6> + <div class="bs-docs-example"> + <a class="btn btn-small" href="#"><i class="icon-star"></i></a> + </div>{{! /bs-docs-example }} +<pre class="prettyprint linenums"> +<a class="btn btn-small" href="#"><i class="icon-star"></i></a> +</pre> + <h4>{{_i}}Navigation{{/i}}</h4> <div class="bs-docs-example"> @@ -1710,6 +1779,14 @@ </ul> </div>{{! /well }} </div>{{! /bs-docs-example }} +<pre class="prettyprint linenums"> +<ul class="nav nav-list"> + <li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li> + <li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li> + <li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li> + <li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li> +</ul> +</pre> <h4>{{_i}}Form fields{{/i}}</h4> <form class="bs-docs-example form-horizontal"> @@ -1722,6 +1799,15 @@ </div> </div> </form> +<pre class="prettyprint linenums"> +<div class="control-group"> + <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label> + <div class="controls"> + <div class="input-prepend"> + <span class="add-on"><i class="icon-envelope"><i><span><input class="span2" id="inputIcon" type="text"> + </div> +</div> +</pre> </section> |