mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-26 21:39:08 +02:00
finish off rest of base-css page
This commit is contained in:
Mark Otto
@@ -779,13 +779,11 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<div class="page-header">
|
||||
<h1>Forms</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
|
||||
<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>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>
|
||||
<p>Bootstrap comes with support for four types of form layouts:</p>
|
||||
<ul>
|
||||
@@ -795,13 +793,11 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<li>Horizontal</li>
|
||||
</ul>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Four types of forms</h2>
|
||||
<p>Bootstrap provides simple markup and styles for four styles of common web forms.</p>
|
||||
@@ -839,8 +835,6 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
|
||||
|
||||
<h2>Example forms <small>using just form controls, no extra markup</small></h2>
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<h3>Basic form</h3>
|
||||
<p>Smart and lightweight defaults without extra markup.</p>
|
||||
<form class="well">
|
||||
@@ -863,8 +857,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<button type="submit" class="btn">Submit</button>
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span6">
|
||||
|
||||
<h3>Search form</h3>
|
||||
<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">
|
||||
@@ -898,15 +891,10 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<button type="submit" class="btn">Sign in</button>
|
||||
</form>
|
||||
</pre>
|
||||
</div><!-- /.span -->
|
||||
</div><!-- /row -->
|
||||
|
||||
<br>
|
||||
|
||||
<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>
|
||||
<ul>
|
||||
<li>text inputs (text, password, email, etc)</li>
|
||||
@@ -917,8 +905,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<li>file input</li>
|
||||
<li>textarea</li>
|
||||
</ul>
|
||||
</div><!-- /.span -->
|
||||
<div class="span8">
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
@@ -995,14 +982,10 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
</fieldset>
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<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>
|
||||
<hr>
|
||||
<h3>Form validation</h3>
|
||||
@@ -1013,8 +996,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
…
|
||||
</fieldset>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span8">
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
@@ -1084,14 +1066,10 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<h2>Extending form controls</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Prepend & append inputs</h3>
|
||||
<p>Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
|
||||
<hr>
|
||||
@@ -1104,8 +1082,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<hr>
|
||||
<h4>Form help text</h4>
|
||||
<p>To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
@@ -1240,8 +1217,6 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1299,15 +1274,12 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<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>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><a></code> and <code><button></code> elements.</p>
|
||||
<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>
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
||||
<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>
|
||||
@@ -1337,8 +1309,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
||||
<h3>One class, multiple tags</h3>
|
||||
<p>Use the <code>.btn</code> class on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
|
||||
<form>
|
||||
@@ -1358,8 +1329,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1371,7 +1341,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<ul class="the-icons">
|
||||
<li><i class="icon-glass"></i> icon-glass</li>
|
||||
<li><i class="icon-music"></i> icon-music</li>
|
||||
@@ -1410,7 +1380,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<li><i class="icon-headphones"></i> icon-headphones</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<ul class="the-icons">
|
||||
<li><i class="icon-volume-off"></i> icon-volume-off</li>
|
||||
<li><i class="icon-volume-down"></i> icon-volume-down</li>
|
||||
@@ -1449,7 +1419,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<ul class="the-icons">
|
||||
<li><i class="icon-backward"></i> icon-backward</li>
|
||||
<li><i class="icon-play"></i> icon-play</li>
|
||||
@@ -1488,7 +1458,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<li><i class="icon-eye-open"></i> icon-eye-open</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<ul class="the-icons">
|
||||
<li><i class="icon-eye-close"></i> icon-eye-close</li>
|
||||
<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
|
||||
@@ -1531,14 +1501,12 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
|
||||
<br>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
|
||||
<h3>Built as a sprite</h3>
|
||||
<p>Instead of making every icon an extra request, we've compiled them into a sprite—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><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>
|
||||
<p>Bootstrap uses an <code><i></code> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
@@ -1553,8 +1521,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<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><i></code> tag for proper spacing.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
||||
<h3>Use cases</h3>
|
||||
<p>Icons are great, but where would one use them? Here are a few ideas:</p>
|
||||
<ul>
|
||||
@@ -1564,13 +1531,11 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<li>With links to share context on a user's destination</li>
|
||||
</ul>
|
||||
<p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Examples</h3>
|
||||
<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-group">
|
||||
<a class="btn" href="#"><i class="icon-align-left"></i></a>
|
||||
@@ -1600,8 +1565,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
||||
<div class="well" style="padding: 8px 0;">
|
||||
<ul class="nav nav-list">
|
||||
<li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
|
||||
@@ -1610,8 +1574,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<li><a href="#"><i class="i"></i> Misc</a></li>
|
||||
</ul>
|
||||
</div> <!-- /well -->
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
||||
<form>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="inputIcon">Email address</label>
|
||||
@@ -1622,8 +1585,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
84
docs/templates/pages/base-css.mustache
vendored
84
docs/templates/pages/base-css.mustache
vendored
@@ -710,13 +710,11 @@
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Forms{{/i}}</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
|
||||
<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}}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>
|
||||
<p>{{_i}}Bootstrap comes with support for four types of form layouts:{{/i}}</p>
|
||||
<ul>
|
||||
@@ -726,13 +724,11 @@
|
||||
<li>{{_i}}Horizontal{{/i}}</li>
|
||||
</ul>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
@@ -770,8 +766,6 @@
|
||||
|
||||
|
||||
<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>
|
||||
<p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p>
|
||||
<form class="well">
|
||||
@@ -794,8 +788,7 @@
|
||||
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span6">
|
||||
|
||||
<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>
|
||||
<form class="well form-search">
|
||||
@@ -829,15 +822,10 @@
|
||||
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
|
||||
</form>
|
||||
</pre>
|
||||
</div><!-- /.span -->
|
||||
</div><!-- /row -->
|
||||
|
||||
<br>
|
||||
|
||||
<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>
|
||||
<ul>
|
||||
<li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
|
||||
@@ -848,8 +836,7 @@
|
||||
<li>{{_i}}file input{{/i}}</li>
|
||||
<li>{{_i}}textarea{{/i}}</li>
|
||||
</ul>
|
||||
</div><!-- /.span -->
|
||||
<div class="span8">
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
@@ -926,14 +913,10 @@
|
||||
</fieldset>
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<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>
|
||||
<hr>
|
||||
<h3>{{_i}}Form validation{{/i}}</h3>
|
||||
@@ -944,8 +927,7 @@
|
||||
…
|
||||
</fieldset>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span8">
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
@@ -1015,14 +997,10 @@
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<h2>{{_i}}Extending form controls{{/i}}</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Prepend & append inputs{{/i}}</h3>
|
||||
<p>{{_i}}Input groups—with appended or prepended text—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>
|
||||
@@ -1035,8 +1013,7 @@
|
||||
<hr>
|
||||
<h4>{{_i}}Form help text{{/i}}</h4>
|
||||
<p>{{_i}}To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
@@ -1171,8 +1148,6 @@
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1230,15 +1205,12 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<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}}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><a></code> and <code><button></code> elements.{{/i}}</p>
|
||||
<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>
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
||||
<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>
|
||||
@@ -1268,8 +1240,7 @@
|
||||
<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}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
||||
<h3>{{_i}}One class, multiple tags{{/i}}</h3>
|
||||
<p>{{_i}}Use the <code>.btn</code> class on an <code><a></code>, <code><button></code>, or <code><input></code> element.{{/i}}</p>
|
||||
<form>
|
||||
@@ -1289,8 +1260,7 @@
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1302,7 +1272,7 @@
|
||||
<h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<ul class="the-icons">
|
||||
<li><i class="icon-glass"></i> icon-glass</li>
|
||||
<li><i class="icon-music"></i> icon-music</li>
|
||||
@@ -1341,7 +1311,7 @@
|
||||
<li><i class="icon-headphones"></i> icon-headphones</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<ul class="the-icons">
|
||||
<li><i class="icon-volume-off"></i> icon-volume-off</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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<ul class="the-icons">
|
||||
<li><i class="icon-backward"></i> icon-backward</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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<ul class="the-icons">
|
||||
<li><i class="icon-eye-close"></i> icon-eye-close</li>
|
||||
<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
|
||||
@@ -1462,14 +1432,12 @@
|
||||
|
||||
<br>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
|
||||
<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—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}}<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>
|
||||
<p>{{_i}}Bootstrap uses an <code><i></code> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
@@ -1484,8 +1452,7 @@
|
||||
<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><i></code> tag for proper spacing.{{/i}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
||||
<h3>{{_i}}Use cases{{/i}}</h3>
|
||||
<p>{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}</p>
|
||||
<ul>
|
||||
@@ -1495,13 +1462,11 @@
|
||||
<li>{{_i}}With links to share context on a user's destination{{/i}}</li>
|
||||
</ul>
|
||||
<p>{{_i}}Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>{{_i}}Examples{{/i}}</h3>
|
||||
<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-group">
|
||||
<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 btn-info" href="#"><i class="icon-info-sign icon-white"></i> {{_i}}More Info{{/i}}</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
||||
<div class="well" style="padding: 8px 0;">
|
||||
<ul class="nav nav-list">
|
||||
<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>
|
||||
</ul>
|
||||
</div> <!-- /well -->
|
||||
</div>
|
||||
<div class="span4">
|
||||
|
||||
<form>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
|
||||
@@ -1553,6 +1516,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user