mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 21:09:06 +02:00
Code Issues Releases Wiki Activity

fixing up buttons and examples of implementing icons

Browse Source
This commit is contained in:
Mark Otto
2012-01-27 19:49:56 -08:00
parent a624ac1edf
commit d02c6957d4
6 changed files with 177 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/base-css.html
View File

@@ -1492,18 +1492,15 @@
<li>For buttons to help convey the meaning of an action</li>
<li>With links to share context on a user's destination</li>
</ul>
<p>Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use <code>.icon</code> class with no other classes:</p>
<pre class="prettyprint linenums">
&lt;i class="icon"&gt;&lt;/i&gt;
</pre>
<p>Essentially, anywhere you can put an <code>&lt;i&gt;</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">
<p>Use them in buttons - of all types and sizes.</p>
<div class="btn-toolbar">
<div class="btn-toolbar" style="margin-bottom: 9px">
<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>
@@ -1518,7 +1515,7 @@
<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="icon"></i> Make Admin</a></li>
<li><a href="#"><i class="icon"></i> Make admin</a></li>
</ul>
</div>
</div>
@@ -1534,7 +1531,6 @@
</p>
</div>
<div class="span4">
<p>Use them in navigation.</p>
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="active"><a href="#"><i class="icon white home"></i> Home</a></li>
@@ -1546,9 +1542,8 @@
</div>
<div class="span4">
<form>
<p>Use them with prepended forms.</p>
<div class="control-group">
<label class="control-label" for="prependedInput">Your Email Address:</label>
<label class="control-label" for="prependedInput">Email address</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon envelope"></i></span>
@@ -1556,20 +1551,6 @@
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">Your Location:</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon map-marker"></i></span>
<select id="select01">
<option>Istanbul</option>
<option>London</option>
<option>New York</option>
<option>Tokyo</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>