rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

finish off rest of base-css page

Browse Source
This commit is contained in:
Mark Otto 2012-06-04 23:03:21 -07:00
parent 060100cf3a
commit 257890f839
2 changed files with 906 additions and 982 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
docs/base-css.html
View File

@ -779,13 +779,11 @@ For example, <code>section</code> should be wrapped as inline.
<div class="page-header"> <div class="page-header">
<h1>Forms</h1> <h1>Forms</h1>
</div> </div>
<div class="row">
<div class="span4">
<h2>Flexible HTML and CSS</h2> <h2>Flexible HTML and CSS</h2>
<p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p> <p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p>
<p>More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.</p> <p>More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.</p>
</div>
<div class="span4">
<h2>Four layouts included</h2> <h2>Four layouts included</h2>
<p>Bootstrap comes with support for four types of form layouts:</p> <p>Bootstrap comes with support for four types of form layouts:</p>
<ul> <ul>
@ -795,13 +793,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li>Horizontal</li> <li>Horizontal</li>
</ul> </ul>
<p>Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.</p> <p>Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.</p>
</div>
<div class="span4">
<h2>Control states and more</h2> <h2>Control states and more</h2>
<p>Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p> <p>Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p>
<p>States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.</p> <p>States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.</p>
</div>
</div>
<h2>Four types of forms</h2> <h2>Four types of forms</h2>
<p>Bootstrap provides simple markup and styles for four styles of common web forms.</p> <p>Bootstrap provides simple markup and styles for four styles of common web forms.</p>
@ -839,8 +835,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h2>Example forms <small>using just form controls, no extra markup</small></h2> <h2>Example forms <small>using just form controls, no extra markup</small></h2>
<div class="row">
<div class="span6">
<h3>Basic form</h3> <h3>Basic form</h3>
<p>Smart and lightweight defaults without extra markup.</p> <p>Smart and lightweight defaults without extra markup.</p>
<form class="well"> <form class="well">
@ -863,8 +857,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div>
<div class="span6">
<h3>Search form</h3> <h3>Search form</h3>
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p> <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p>
<form class="well form-search"> <form class="well form-search">
@ -898,15 +891,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div><!-- /.span -->
</div><!-- /row -->
<br> <br>
<h2>Horizontal forms</h2> <h2>Horizontal forms</h2>
<div class="row">
<div class="span4">
<p></p>
<p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p> <p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p>
<ul> <ul>
<li>text inputs (text, password, email, etc)</li> <li>text inputs (text, password, email, etc)</li>
@ -917,8 +905,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li>file input</li> <li>file input</li>
<li>textarea</li> <li>textarea</li>
</ul> </ul>
</div><!-- /.span -->
<div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<div class="control-group"> <div class="control-group">
@ -995,14 +982,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/fieldset&gt; &lt;/fieldset&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div>
</div>
<br> <br>
<h2>Form control states</h2> <h2>Form control states</h2>
<div class="row">
<div class="span4">
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<hr> <hr>
<h3>Form validation</h3> <h3>Form validation</h3>
@ -1013,8 +996,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
… …
&lt;/fieldset&gt; &lt;/fieldset&gt;
</pre> </pre>
</div>
<div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<div class="control-group"> <div class="control-group">
@ -1084,14 +1066,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div> </div>
</fieldset> </fieldset>
</form> </form>
</div>
</div>
<br> <br>
<h2>Extending form controls</h2> <h2>Extending form controls</h2>
<div class="row">
<div class="span4">
<h3>Prepend &amp; append inputs</h3> <h3>Prepend &amp; append inputs</h3>
<p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p> <p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
<hr> <hr>
@ -1104,8 +1082,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<hr> <hr>
<h4>Form help text</h4> <h4>Form help text</h4>
<p>To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.</p> <p>To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.</p>
</div>
<div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<div class="control-group"> <div class="control-group">
@ -1240,8 +1217,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div> </div>
</fieldset> </fieldset>
</form> </form>
</div>
</div><!-- /row -->
</section> </section>
@ -1299,15 +1274,12 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</tbody> </tbody>
</table> </table>
<div class="row">
<div class="span4">
<h3>Buttons for actions</h3> <h3>Buttons for actions</h3>
<p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p> <p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p>
<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p> <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
<h3>Cross browser compatibility</h3> <h3>Cross browser compatibility</h3>
<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> <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>
</div>
<div class="span4">
<h3>Multiple sizes</h3> <h3>Multiple sizes</h3>
<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 two additional sizes.</p>
<p> <p>
@ -1337,8 +1309,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<span class="label label-info">Heads up!</span> <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. We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
</p> </p>
</div>
<div class="span4">
<h3>One class, multiple tags</h3> <h3>One class, multiple tags</h3>
<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p> <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form> <form>
@ -1358,8 +1329,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
value="Submit"&gt; value="Submit"&gt;
</pre> </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>&lt;input type="submit"&gt;</code> for your button.</p> <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>&lt;input type="submit"&gt;</code> for your button.</p>
</div>
</div>
</section> </section>
@ -1371,7 +1341,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1> <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-glass"></i> icon-glass</li> <li><i class="icon-glass"></i> icon-glass</li>
<li><i class="icon-music"></i> icon-music</li> <li><i class="icon-music"></i> icon-music</li>
@ -1410,7 +1380,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-headphones"></i> icon-headphones</li> <li><i class="icon-headphones"></i> icon-headphones</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-volume-off"></i> icon-volume-off</li> <li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li> <li><i class="icon-volume-down"></i> icon-volume-down</li>
@ -1449,7 +1419,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-fast-backward"></i> icon-fast-backward</li> <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-backward"></i> icon-backward</li> <li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li> <li><i class="icon-play"></i> icon-play</li>
@ -1488,7 +1458,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-eye-open"></i> icon-eye-open</li> <li><i class="icon-eye-open"></i> icon-eye-open</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-eye-close"></i> icon-eye-close</li> <li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li> <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
@ -1531,14 +1501,12 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<br> <br>
<div class="row">
<div class="span4">
<h3>Built as a sprite</h3> <h3>Built as a sprite</h3>
<p>Instead of making every icon an extra request, we've compiled them into a sprite&mdash;a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p> <p>Instead of making every icon an extra request, we've compiled them into a sprite&mdash;a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p>
<p>All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.</p> <p>All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.</p>
<p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.</p> <p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.</p>
</div>
<div class="span4">
<h3>How to use</h3> <h3>How to use</h3>
<p>Bootstrap uses an <code>&lt;i&gt;</code> tag for all icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:</p> <p>Bootstrap uses an <code>&lt;i&gt;</code> tag for all icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@ -1553,8 +1521,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<span class="label label-info">Heads up!</span> <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 <code>&lt;i&gt;</code> tag for proper spacing. When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.
</p> </p>
</div>
<div class="span4">
<h3>Use cases</h3> <h3>Use cases</h3>
<p>Icons are great, but where would one use them? Here are a few ideas:</p> <p>Icons are great, but where would one use them? Here are a few ideas:</p>
<ul> <ul>
@ -1564,13 +1531,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li>With links to share context on a user's destination</li> <li>With links to share context on a user's destination</li>
</ul> </ul>
<p>Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.</p> <p>Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.</p>
</div>
</div>
<h3>Examples</h3> <h3>Examples</h3>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
<div class="row">
<div class="span4">
<div class="btn-toolbar" style="margin-bottom: 9px"> <div class="btn-toolbar" style="margin-bottom: 9px">
<div class="btn-group"> <div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-left"></i></a>
@ -1600,8 +1565,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a> <a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> More Info</a> <a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> More Info</a>
</p> </p>
</div>
<div class="span4">
<div class="well" style="padding: 8px 0;"> <div class="well" style="padding: 8px 0;">
<ul class="nav nav-list"> <ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
@ -1610,8 +1574,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><a href="#"><i class="i"></i> Misc</a></li> <li><a href="#"><i class="i"></i> Misc</a></li>
</ul> </ul>
</div> <!-- /well --> </div> <!-- /well -->
</div>
<div class="span4">
<form> <form>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inputIcon">Email address</label> <label class="control-label" for="inputIcon">Email address</label>
@ -1622,8 +1585,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div> </div>
</div> </div>
</form> </form>
</div>
</div>
</section> </section>

84
docs/templates/pages/base-css.mustache vendored
View File

@ -710,13 +710,11 @@
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Forms{{/i}}</h1> <h1>{{_i}}Forms{{/i}}</h1>
</div> </div>
<div class="row">
<div class="span4">
<h2>{{_i}}Flexible HTML and CSS{{/i}}</h2> <h2>{{_i}}Flexible HTML and CSS{{/i}}</h2>
<p>{{_i}}The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.{{/i}}</p> <p>{{_i}}The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.{{/i}}</p>
<p>{{_i}}More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.{{/i}}</p> <p>{{_i}}More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.{{/i}}</p>
</div>
<div class="span4">
<h2>{{_i}}Four layouts included{{/i}}</h2> <h2>{{_i}}Four layouts included{{/i}}</h2>
<p>{{_i}}Bootstrap comes with support for four types of form layouts:{{/i}}</p> <p>{{_i}}Bootstrap comes with support for four types of form layouts:{{/i}}</p>
<ul> <ul>
@ -726,13 +724,11 @@
<li>{{_i}}Horizontal{{/i}}</li> <li>{{_i}}Horizontal{{/i}}</li>
</ul> </ul>
<p>{{_i}}Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.{{/i}}</p> <p>{{_i}}Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.{{/i}}</p>
</div>
<div class="span4">
<h2>{{_i}}Control states and more{{/i}}</h2> <h2>{{_i}}Control states and more{{/i}}</h2>
<p>{{_i}}Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.{{/i}}</p> <p>{{_i}}Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.{{/i}}</p>
<p>{{_i}}States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.{{/i}}</p> <p>{{_i}}States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.{{/i}}</p>
</div>
</div>
<h2>{{_i}}Four types of forms{{/i}}</h2> <h2>{{_i}}Four types of forms{{/i}}</h2>
<p>{{_i}}Bootstrap provides simple markup and styles for four styles of common web forms.{{/i}}</p> <p>{{_i}}Bootstrap provides simple markup and styles for four styles of common web forms.{{/i}}</p>
@ -770,8 +766,6 @@
<h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2> <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
<div class="row">
<div class="span6">
<h3>{{_i}}Basic form{{/i}}</h3> <h3>{{_i}}Basic form{{/i}}</h3>
<p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p> <p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p>
<form class="well"> <form class="well">
@ -794,8 +788,7 @@
&lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div>
<div class="span6">
<h3>{{_i}}Search form{{/i}}</h3> <h3>{{_i}}Search form{{/i}}</h3>
<p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p> <p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p>
<form class="well form-search"> <form class="well form-search">
@ -829,15 +822,10 @@
&lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div><!-- /.span -->
</div><!-- /row -->
<br> <br>
<h2>{{_i}}Horizontal forms{{/i}}</h2> <h2>{{_i}}Horizontal forms{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}{{/i}}</p>
<p>{{_i}}Shown on the right are all the default form controls we support. Here's the bulleted list:{{/i}}</p> <p>{{_i}}Shown on the right are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
<ul> <ul>
<li>{{_i}}text inputs (text, password, email, etc){{/i}}</li> <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
@ -848,8 +836,7 @@
<li>{{_i}}file input{{/i}}</li> <li>{{_i}}file input{{/i}}</li>
<li>{{_i}}textarea{{/i}}</li> <li>{{_i}}textarea{{/i}}</li>
</ul> </ul>
</div><!-- /.span -->
<div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<div class="control-group"> <div class="control-group">
@ -926,14 +913,10 @@
&lt;/fieldset&gt; &lt;/fieldset&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div>
</div>
<br> <br>
<h2>{{_i}}Form control states{{/i}}</h2> <h2>{{_i}}Form control states{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p> <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
<hr> <hr>
<h3>{{_i}}Form validation{{/i}}</h3> <h3>{{_i}}Form validation{{/i}}</h3>
@ -944,8 +927,7 @@
… …
&lt;/fieldset&gt; &lt;/fieldset&gt;
</pre> </pre>
</div>
<div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<div class="control-group"> <div class="control-group">
@ -1015,14 +997,10 @@
</div> </div>
</fieldset> </fieldset>
</form> </form>
</div>
</div>
<br> <br>
<h2>{{_i}}Extending form controls{{/i}}</h2> <h2>{{_i}}Extending form controls{{/i}}</h2>
<div class="row">
<div class="span4">
<h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3> <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
<p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p> <p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
<hr> <hr>
@ -1035,8 +1013,7 @@
<hr> <hr>
<h4>{{_i}}Form help text{{/i}}</h4> <h4>{{_i}}Form help text{{/i}}</h4>
<p>{{_i}}To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.{{/i}}</p> <p>{{_i}}To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.{{/i}}</p>
</div>
<div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<div class="control-group"> <div class="control-group">
@ -1171,8 +1148,6 @@
</div> </div>
</fieldset> </fieldset>
</form> </form>
</div>
</div><!-- /row -->
</section> </section>
@ -1230,15 +1205,12 @@
</tbody> </tbody>
</table> </table>
<div class="row">
<div class="span4">
<h3>{{_i}}Buttons for actions{{/i}}</h3> <h3>{{_i}}Buttons for actions{{/i}}</h3>
<p>{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}</p> <p>{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}</p>
<p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p> <p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
<h3>{{_i}}Cross browser compatibility{{/i}}</h3> <h3>{{_i}}Cross browser compatibility{{/i}}</h3>
<p>{{_i}}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.{{/i}}</p> <p>{{_i}}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.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Multiple sizes{{/i}}</h3> <h3>{{_i}}Multiple sizes{{/i}}</h3>
<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 two additional sizes.{{/i}}</p>
<p> <p>
@ -1268,8 +1240,7 @@
<span class="label label-info">{{_i}}Heads up!{{/i}}</span> <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.{{/i}} {{_i}}We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.{{/i}}
</p> </p>
</div>
<div class="span4">
<h3>{{_i}}One class, multiple tags{{/i}}</h3> <h3>{{_i}}One class, multiple tags{{/i}}</h3>
<p>{{_i}}Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.{{/i}}</p> <p>{{_i}}Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.{{/i}}</p>
<form> <form>
@ -1289,8 +1260,7 @@
value="{{_i}}Submit{{/i}}"&gt; value="{{_i}}Submit{{/i}}"&gt;
</pre> </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>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p> <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>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p>
</div>
</div>
</section> </section>
@ -1302,7 +1272,7 @@
<h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1> <h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-glass"></i> icon-glass</li> <li><i class="icon-glass"></i> icon-glass</li>
<li><i class="icon-music"></i> icon-music</li> <li><i class="icon-music"></i> icon-music</li>
@ -1341,7 +1311,7 @@
<li><i class="icon-headphones"></i> icon-headphones</li> <li><i class="icon-headphones"></i> icon-headphones</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-volume-off"></i> icon-volume-off</li> <li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li> <li><i class="icon-volume-down"></i> icon-volume-down</li>
@ -1380,7 +1350,7 @@
<li><i class="icon-fast-backward"></i> icon-fast-backward</li> <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-backward"></i> icon-backward</li> <li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li> <li><i class="icon-play"></i> icon-play</li>
@ -1419,7 +1389,7 @@
<li><i class="icon-eye-open"></i> icon-eye-open</li> <li><i class="icon-eye-open"></i> icon-eye-open</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-eye-close"></i> icon-eye-close</li> <li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li> <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
@ -1462,14 +1432,12 @@
<br> <br>
<div class="row">
<div class="span4">
<h3>{{_i}}Built as a sprite{{/i}}</h3> <h3>{{_i}}Built as a sprite{{/i}}</h3>
<p>{{_i}}Instead of making every icon an extra request, we've compiled them into a sprite&mdash;a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.{{/i}}</p> <p>{{_i}}Instead of making every icon an extra request, we've compiled them into a sprite&mdash;a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.{{/i}}</p>
<p>{{_i}}All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}</p> <p>{{_i}}All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}</p>
<p>{{_i}}<a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.{{/i}}</p> <p>{{_i}}<a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}How to use{{/i}}</h3> <h3>{{_i}}How to use{{/i}}</h3>
<p>{{_i}}Bootstrap uses an <code>&lt;i&gt;</code> tag for all icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p> <p>{{_i}}Bootstrap uses an <code>&lt;i&gt;</code> tag for all icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@ -1484,8 +1452,7 @@
<span class="label label-info">{{_i}}Heads up!{{/i}}</span> <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.{{/i}} {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.{{/i}}
</p> </p>
</div>
<div class="span4">
<h3>{{_i}}Use cases{{/i}}</h3> <h3>{{_i}}Use cases{{/i}}</h3>
<p>{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}</p> <p>{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}</p>
<ul> <ul>
@ -1495,13 +1462,11 @@
<li>{{_i}}With links to share context on a user's destination{{/i}}</li> <li>{{_i}}With links to share context on a user's destination{{/i}}</li>
</ul> </ul>
<p>{{_i}}Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.{{/i}}</p> <p>{{_i}}Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.{{/i}}</p>
</div>
</div>
<h3>{{_i}}Examples{{/i}}</h3> <h3>{{_i}}Examples{{/i}}</h3>
<p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p> <p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
<div class="row">
<div class="span4">
<div class="btn-toolbar" style="margin-bottom: 9px"> <div class="btn-toolbar" style="margin-bottom: 9px">
<div class="btn-group"> <div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-left"></i></a>
@ -1531,8 +1496,7 @@
<a class="btn btn-small" href="#"><i class="icon-cog"></i> {{_i}}Settings{{/i}}</a> <a class="btn btn-small" href="#"><i class="icon-cog"></i> {{_i}}Settings{{/i}}</a>
<a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> {{_i}}More Info{{/i}}</a> <a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> {{_i}}More Info{{/i}}</a>
</p> </p>
</div>
<div class="span4">
<div class="well" style="padding: 8px 0;"> <div class="well" style="padding: 8px 0;">
<ul class="nav nav-list"> <ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li> <li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li>
@ -1541,8 +1505,7 @@
<li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li> <li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li>
</ul> </ul>
</div> <!-- /well --> </div> <!-- /well -->
</div>
<div class="span4">
<form> <form>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label> <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
@ -1553,6 +1516,5 @@
</div> </div>
</div> </div>
</form> </form>
</div>
</div>
</section> </section>