Adding new examples to the icons' docs.

- Button with dropdown menu.
- Small info button.
- Text alignment for navigation with no icon.
- Text input form with prepended icon
- Select input form with prepended icon

diff --git a/docs/base-css.html b/docs/base-css.html
index 698b68ea1913441f7085147e2c051f69395c98a7..7c7ab48ef85135a95aa7a4ec87a21f5d287b1da0 100644 (file)
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1482,51 +1482,90 @@
       <p>Icons are great, but where would one use them? Here are a few ideas:</p>
       <ul>
         <li>As visuals for your sidebar navigation</li>
-        <li>For a purely icon-driven nav</li>
+        <li>For a purely icon-driven navigation</li>
         <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.</p>
+      <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>
     </div>
   </div>
 
   <h3>Examples</h3>
   <div class="row">
-    <div class="span6">
-      <p>Use them in buttons, or in button groups for a toolbar style presentation.</p>
-      <p>
-        <a class="btn" href="#"><i class="icon refresh"></i> Refresh</a>
-        <a class="btn success" href="#"><i class="icon white shopping-cart"></i> Checkout</a>
-        <a class="btn danger" href="#"><i class="icon white trash"></i> Delete</a>
-      </p>
+    <div class="span4">
+      <p>Use them in buttons - of all types and sizes.</p>
       <div class="btn-toolbar">
-        <div class="btn-group">
-          <a class="btn" href="#"><i class="icon font"></i></a>
-          <a class="btn" href="#"><i class="icon bold"></i></a>
-          <a class="btn" href="#"><i class="icon italic"></i></a>
-        </div>
         <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 class="btn-group">
+          <a class="btn primary" href="#"><i class="icon white user"></i> User</a>
+          <a class="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="icon"></i> Make Admin</a></li>
+          </ul>
+        </div>
       </div>
       <p>
-        <a class="btn large" href="#"><i class="icon refresh"></i> Refresh</a>
+        <a class="btn" href="#"><i class="icon refresh"></i> Refresh</a>
+        <a class="btn success" href="#"><i class="icon white shopping-cart"></i> Checkout</a>
+        <a class="btn danger" href="#"><i class="icon white trash"></i> Delete</a>
+      </p>
+      <p>
+        <a class="btn large" href="#"><i class="icon comment"></i> Comment</a>
         <a class="btn small" href="#"><i class="icon cog"></i> Settings</a>
+        <a class="btn small info" href="#"><i class="icon white info-sign"></i> More Info</a>
       </p>
     </div>
-    <div class="span3">
-      <p>Or, use them in navigation.</p>
+    <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>
           <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="icon"></i> Misc</a></li>
         </ul>
       </div> <!-- /well -->
     </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>
+          <div class="controls">
+            <div class="input-prepend">
+              <span class="add-on"><i class="icon envelope"></i></span>
+              <input class="span32" id="iconInput" size="16" type="text">
+            </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>
 </section>
 

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index f6504a249a2db5287bc2e4ab105625e581affcc5..92c925b37bbad4f6e6f3bd27ee197b1c2c9f06df 100644 (file)
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1417,50 +1417,89 @@
       <p>{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}</p>
       <ul>
         <li>{{_i}}As visuals for your sidebar navigation{{/i}}</li>
-        <li>{{_i}}For a purely icon-driven nav{{/i}}</li>
+        <li>{{_i}}For a purely icon-driven navigation{{/i}}</li>
         <li>{{_i}}For buttons to help convey the meaning of an action{{/i}}</li>
         <li>{{_i}}With links to share context on a user's destination{{/i}}</li>
       </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. 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:{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;i class="icon"&gt;&lt;/i&gt;
+</pre>
     </div>
   </div>
 
   <h3>{{_i}}Examples{{/i}}</h3>
   <div class="row">
-    <div class="span6">
-      <p>{{_i}}Use them in buttons, or in button groups for a toolbar style presentation.{{/i}}</p>
-      <p>
-        <a class="btn" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
-        <a class="btn success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
-        <a class="btn danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
-      </p>
+    <div class="span4">
+      <p>{{_i}}Use them in buttons - of all types and sizes.{{/i}}</p>
       <div class="btn-toolbar">
-        <div class="btn-group">
-          <a class="btn" href="#"><i class="icon font"></i></a>
-          <a class="btn" href="#"><i class="icon bold"></i></a>
-          <a class="btn" href="#"><i class="icon italic"></i></a>
-        </div>
         <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 class="btn-group">
+          <a class="btn primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
+          <a class="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="icon"></i> {{_i}}Make Admin{{/i}}</a></li>
+          </ul>
+        </div>
       </div>
       <p>
-        <a class="btn large" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
+        <a class="btn" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
+        <a class="btn success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
+        <a class="btn danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
+      </p>
+      <p>
+        <a class="btn large" href="#"><i class="icon comment"></i> {{_i}}Comment{{/i}}</a>
         <a class="btn small" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
+        <a class="btn small info" href="#"><i class="icon white info-sign"></i> {{_i}}More Info{{/i}}</a>
       </p>
     </div>
-    <div class="span3">
-      <p>{{_i}}Or, use them in navigation.{{/i}}</p>
+    <div class="span4">
+      <p>{{_i}}Use them in navigation.{{/i}}</p>
       <div class="well" style="padding: 8px 0;">
         <ul class="nav list">
           <li class="active"><a href="#"><i class="icon white home"></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="icon"></i> {{_i}}Misc{{/i}}</a></li>
         </ul>
       </div> <!-- /well -->
     </div>
+    <div class="span4">
+      <form>
+        <p>{{_i}}Use them with prepended forms.{{_i}}</p>
+        <div class="control-group">
+          <label class="control-label" for="prependedInput">{{_i}}Your Email Address:{{/i}}</label>
+          <div class="controls">
+            <div class="input-prepend">
+              <span class="add-on"><i class="icon envelope"></i></span>
+              <input class="span32" id="iconInput" size="16" type="text">
+            </div>
+          </div>
+        </div>
+        <div class="control-group">
+          <label class="control-label" for="iconSelect">{{_i}}Your Location:{{/i}}</label>
+          <div class="controls">
+            <div class="input-prepend">
+              <span class="add-on"><i class="icon map-marker"></i></span>
+              <select id="iconSelect">
+                <option>Istanbul</option>
+                <option>London</option>
+                <option>New York</option>
+                <option>Tokyo</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
   </div>
 </section>
\ No newline at end of file