diff options
author | Jacob Thornton <jacobthornton@gmail.com> | 2012-02-17 10:41:02 +0400 |
---|---|---|
committer | Jacob Thornton <jacobthornton@gmail.com> | 2012-02-17 10:41:02 +0400 |
commit | 03e6dc66c2fe14e756723395752feefb687b6526 (patch) | |
tree | b8cfe13d72e1a780ef08dbd26e3bfe48e406c59e /docs/templates/pages/base-css.mustache | |
parent | 9143d8e449a852c606194ea8c529e30ea1a52ddf (diff) | |
parent | 091622644a0c619e1afbb21041c141da30df76b7 (diff) |
Merge branch '2.0.1-wip'
Diffstat (limited to 'docs/templates/pages/base-css.mustache')
-rw-r--r-- | docs/templates/pages/base-css.mustache | 427 |
1 files changed, 247 insertions, 180 deletions
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 38dd5587ab..acb9cdcb2d 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -299,7 +299,7 @@ </div><!--/span--> <div class="span4"> <h2>Basic block</h2> - <p>{{_i}}Use <code><pre></code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}</p> + <p>{{_i}}Use <code><pre></code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}</p> <pre> <p>{{_i}}Sample text here...{{/i}}</p> </pre> @@ -309,6 +309,7 @@ </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>{{_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> </div><!--/span--> <div class="span4"> <h2>Google Prettify</h2> @@ -454,7 +455,7 @@ <td> <code>.table-bordered</code> </td> - <td>{{_i}}Rounds corners and adds outter border{{/i}}</td> + <td>{{_i}}Rounds corners and adds outer border{{/i}}</td> </tr> <tr> <td>{{_i}}Zebra-stripe{{/i}}</td> @@ -776,9 +777,9 @@ <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2> - <h3>{{_i}}Basic form{{/i}}</h3> <div class="row"> <div class="span3"> + <h3>{{_i}}Basic form{{/i}}</h3> <p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p> </div> <div class="span9"> @@ -790,11 +791,22 @@ </label> <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> </form> +<pre class="prettyprint linenums"> +<form class="well"> + <label>{{_i}}Label name{{/i}}</label> + <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> + <span class="help-inline">Associated help text!</span> + <label class="checkbox"> + <input type="checkbox"> {{_i}}Check me out{{/i}} + </label> + <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> +</form> +</pre> </div> </div> <!-- /row --> - <h3>{{_i}}Search form{{/i}}</h3> <div class="row"> <div class="span3"> + <h3>{{_i}}Search form{{/i}}</h3> <p>{{_i}}Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.{{/i}}</p> </div> <div class="span9"> @@ -802,19 +814,35 @@ <input type="text" class="input-medium search-query"> <button type="submit" class="btn">{{_i}}Search{{/i}}</button> </form> +<pre class="prettyprint linenums"> +<form class="well form-search"> + <input type="text" class="input-medium search-query"> + <button type="submit" class="btn">{{_i}}Search{{/i}}</button> +</form> +</pre> </div> </div> <!-- /row --> - <h3>{{_i}}Inline form{{/i}}</h3> <div class="row"> <div class="span3"> + <h3>{{_i}}Inline form{{/i}}</h3> <p>{{_i}}Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.{{/i}}</p> </div> <div class="span9"> - <form class="well form-search"> + <form class="well form-inline"> <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"> <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"> - <button type="submit" class="btn">{{_i}}Go{{/i}}</button> + <label class="checkbox"> + <input type="checkbox"> {{_i}}Remember?{{/i}} + </label> + <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> </form> +<pre class="prettyprint linenums"> +<form class="well form-inline"> + <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"> + <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"> + <button type="submit" class="btn">{{_i}}Go{{/i}}</button> +</form> +</pre> </div> </div><!-- /row --> @@ -880,10 +908,26 @@ </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button> - <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button> + <button class="btn">{{_i}}Cancel{{/i}}</button> </div> </fieldset> </form> + <h3>{{_i}}Example markup{{/i}}</h3> + <p>{{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.{{/i}}</p> +<pre class="prettyprint linenums"> +<form class="form-horizontal"> + <fieldset> + <legend>{{_i}}Legend text{{/i}}</legend> + <div class="control-group"> + <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label> + <div class="controls"> + <input type="text" class="input-xlarge" id="input01"> + <p class="help-block">{{_i}}Supporting help text{{/i}}</p> + </div> + </div> + </fieldset> +</form> +</pre> </div> <div class="span4"> <h3>{{_i}}What's included{{/i}}</h3> @@ -973,14 +1017,14 @@ </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button> - <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button> + <button class="btn">{{_i}}Cancel{{/i}}</button> </div> </fieldset> </form> </div> <div class="span4"> <h3>{{_i}}Redesigned browser states{{/i}}</h3> - <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 it's 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> <h3>{{_i}}Form validation{{/i}}</h3> <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p> @@ -1001,7 +1045,7 @@ <fieldset> <legend>{{_i}}Extending form controls{{/i}}</legend> <div class="control-group"> - <label class="control-label">{{_i}}Form sizes{{/i}}</label> + <label class="control-label">{{_i}}Form grid sizes{{/i}}</label> <div class="controls docs-input-sizes"> <input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> @@ -1031,6 +1075,15 @@ </div> </div> <div class="control-group"> + <label class="control-label">{{_i}}Alternate sizes{{/i}}</label> + <div class="controls docs-input-sizes"> + <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"> + <p class="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p> + </div> + </div> + <div class="control-group"> <label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label> <div class="controls"> <div class="input-prepend"> @@ -1097,7 +1150,7 @@ </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button> - <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button> + <button class="btn">{{_i}}Cancel{{/i}}</button> </div> </fieldset> </form> @@ -1137,35 +1190,40 @@ </thead> <tbody> <tr> - <td><a class="btn" href="#">{{_i}}Default{{/i}}</a></td> + <td><button class="btn" href="#">{{_i}}Default{{/i}}</button></td> <td><code>.btn</code></td> <td>{{_i}}Standard gray button with gradient{{/i}}</td> </tr> <tr> - <td><a class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</a></td> + <td><button class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</button></td> <td><code>.btn-primary</code></td> <td>{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}</td> </tr> <tr> - <td><a class="btn btn-info" href="#">{{_i}}Info{{/i}}</a></td> + <td><button class="btn btn-info" href="#">{{_i}}Info{{/i}}</button></td> <td><code>.btn-info</code></td> <td>{{_i}}Used as an alternate to the default styles{{/i}}</td> </tr> <tr> - <td><a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a></td> + <td><button class="btn btn-success" href="#">{{_i}}Success{{/i}}</button></td> <td><code>.btn-success</code></td> <td>{{_i}}Indicates a successful or positive action{{/i}}</td> </tr> <tr> - <td><a class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</a></td> + <td><button class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</button></td> <td><code>.btn-warning</code></td> <td>{{_i}}Indicates caution should be taken with this action{{/i}}</td> </tr> <tr> - <td><a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a></td> + <td><button class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</button></td> <td><code>.btn-danger</code></td> <td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td> </tr> + <tr> + <td><button class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</button></td> + <td><code>.btn-inverse</code></td> + <td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td> + </tr> </tbody> </table> @@ -1173,50 +1231,63 @@ <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}}For anchors and forms{{/i}}</h3> - <p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you'll want to apply these to only <code><a></code> and <code><button></code> elements.{{/i}}</p> - </div> - <div class="span4"> - <p>{{_i}}<strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code><button></code> and <code><a></code> elements for consistency.{{/i}}</p> - </div> - </div> - - <div class="row"> - <div class="span4"> <h3>{{_i}}Multiple sizes{{/i}}</h3> - <p>{{_i}}Fancy larger or smaller buttons? Have at it!{{/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> - <a href="#" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</a> - <a href="#" class="btn btn-large">{{_i}}Action{{/i}}</a> + <button class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button> + <button class="btn btn-large">{{_i}}Action{{/i}}</button> </p> <p> - <a href="#" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</a> - <a href="#" class="btn btn-small">{{_i}}Action{{/i}}</a> + <button class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button> + <button class="btn btn-small">{{_i}}Action{{/i}}</button> </p> - </div> - <div class="span4"> + <p> + <button class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button> + <button class="btn btn-mini">{{_i}}Action{{/i}}</button> + </p> + <br> <h3>{{_i}}Disabled state{{/i}}</h3> - <p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.{{/i}}</p> + <p>{{_i}}For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></code> elements.{{/i}}</p> <p> - <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary action{{/i}}</a> - <a href="#" class="btn btn-large disabled">{{_i}}Action{{/i}}</a> + <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a> + <a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a> + </p> + <p style="margin-bottom: 18px;"> + <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button> + <button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button> </p> <p> - <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button> - <button class="btn btn-large" disabled>{{_i}}Action{{/i}}</button> + <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>Cross browser compatibility</h3> - <p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p> - <p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow—unfortunately we can't fix this.</p> + <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> +<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}}"> +</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}}"> +</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> - - <br> - </section> @@ -1229,148 +1300,144 @@ </div> <div class="row"> <div class="span3"> - <div class="the-icons"> - <i class="icon-glass"></i> - <i class="icon-music"></i> - <i class="icon-search"></i> - <i class="icon-envelope"></i> - <i class="icon-heart"></i> - <i class="icon-star"></i> - <i class="icon-star-empty"></i> - <i class="icon-user"></i> - <i class="icon-film"></i> - <i class="icon-th-large"></i> - <i class="icon-th"></i> - <i class="icon-th-list"></i> - <i class="icon-ok"></i> - <i class="icon-remove"></i> - <i class="icon-zoom-in"></i> - <i class="icon-zoom-out"></i> - <i class="icon-off"></i> - <i class="icon-signal"></i> - <i class="icon-cog"></i> - <i class="icon-trash"></i> - - <i class="icon-home"></i> - <i class="icon-file"></i> - <i class="icon-time"></i> - <i class="icon-road"></i> - <i class="icon-download-alt"></i> - <i class="icon-download"></i> - <i class="icon-upload"></i> - <i class="icon-inbox"></i> - <i class="icon-play-circle"></i> - <i class="icon-repeat"></i> - </div> + <ul class="the-icons"> + <li><i class="icon-glass"></i> icon-glass</li> + <li><i class="icon-music"></i> icon-music</li> + <li><i class="icon-search"></i> icon-search</li> + <li><i class="icon-envelope"></i> icon-envelope</li> + <li><i class="icon-heart"></i> icon-heart</li> + <li><i class="icon-star"></i> icon-star</li> + <li><i class="icon-star-empty"></i> icon-star-empty</li> + <li><i class="icon-user"></i> icon-user</li> + <li><i class="icon-film"></i> icon-film</li> + <li><i class="icon-th-large"></i> icon-th-large</li> + <li><i class="icon-th"></i> icon-th</li> + <li><i class="icon-th-list"></i> icon-th-list</li> + <li><i class="icon-ok"></i> icon-ok</li> + <li><i class="icon-remove"></i> icon-remove</li> + <li><i class="icon-zoom-in"></i> icon-zoom-in</li> + <li><i class="icon-zoom-out"></i> icon-zoom-out</li> + <li><i class="icon-off"></i> icon-off</li> + <li><i class="icon-signal"></i> icon-signal</li> + <li><i class="icon-cog"></i> icon-cog</li> + <li><i class="icon-trash"></i> icon-trash</li> + <li><i class="icon-home"></i> icon-home</li> + <li><i class="icon-file"></i> icon-file</li> + <li><i class="icon-time"></i> icon-time</li> + <li><i class="icon-road"></i> icon-road</li> + <li><i class="icon-download-alt"></i> icon-download-alt</li> + <li><i class="icon-download"></i> icon-download</li> + <li><i class="icon-upload"></i> icon-upload</li> + <li><i class="icon-inbox"></i> icon-inbox</li> + <li><i class="icon-play-circle"></i> icon-play-circle</li> + <li><i class="icon-repeat"></i> icon-repeat</li> + </ul> </div> <div class="span3"> - <div class="the-icons"> - <i class="icon-refresh"></i> - <i class="icon-list-alt"></i> - <i class="icon-lock"></i> - <i class="icon-flag"></i> - <i class="icon-headphones"></i> - <i class="icon-volume-off"></i> - <i class="icon-volume-down"></i> - <i class="icon-volume-up"></i> - <i class="icon-qrcode"></i> - <i class="icon-barcode"></i> - - <i class="icon-tag"></i> - <i class="icon-tags"></i> - <i class="icon-book"></i> - <i class="icon-bookmark"></i> - <i class="icon-print"></i> - <i class="icon-camera"></i> - <i class="icon-font"></i> - <i class="icon-bold"></i> - <i class="icon-italic"></i> - <i class="icon-text-height"></i> - <i class="icon-text-width"></i> - <i class="icon-align-left"></i> - <i class="icon-align-center"></i> - <i class="icon-align-right"></i> - <i class="icon-align-justify"></i> - <i class="icon-list"></i> - <i class="icon-indent-left"></i> - <i class="icon-indent-right"></i> - <i class="icon-facetime-video"></i> - <i class="icon-picture"></i> - </div> + <ul class="the-icons"> + <li><i class="icon-refresh"></i> icon-refresh</li> + <li><i class="icon-list-alt"></i> icon-list-alt</li> + <li><i class="icon-lock"></i> icon-lock</li> + <li><i class="icon-flag"></i> icon-flag</li> + <li><i class="icon-headphones"></i> icon-headphones</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-up"></i> icon-volume-up</li> + <li><i class="icon-qrcode"></i> icon-qrcode</li> + <li><i class="icon-barcode"></i> icon-barcode</li> + <li><i class="icon-tag"></i> icon-tag</li> + <li><i class="icon-tags"></i> icon-tags</li> + <li><i class="icon-book"></i> icon-book</li> + <li><i class="icon-bookmark"></i> icon-bookmark</li> + <li><i class="icon-print"></i> icon-print</li> + <li><i class="icon-camera"></i> icon-camera</li> + <li><i class="icon-font"></i> icon-font</li> + <li><i class="icon-bold"></i> icon-bold</li> + <li><i class="icon-italic"></i> icon-italic</li> + <li><i class="icon-text-height"></i> icon-text-height</li> + <li><i class="icon-text-width"></i> icon-text-width</li> + <li><i class="icon-align-left"></i> icon-align-left</li> + <li><i class="icon-align-center"></i> icon-align-center</li> + <li><i class="icon-align-right"></i> icon-align-right</li> + <li><i class="icon-align-justify"></i> icon-align-justify</li> + <li><i class="icon-list"></i> icon-list</li> + <li><i class="icon-indent-left"></i> icon-indent-left</li> + <li><i class="icon-indent-right"></i> icon-indent-right</li> + <li><i class="icon-facetime-video"></i> icon-facetime-video</li> + <li><i class="icon-picture"></i> icon-picture</li> + </ul> </div> <div class="span3"> - <div class="the-icons"> - <i class="icon-pencil"></i> - <i class="icon-map-marker"></i> - <i class="icon-adjust"></i> - <i class="icon-tint"></i> - <i class="icon-edit"></i> - <i class="icon-share"></i> - <i class="icon-check"></i> - <i class="icon-move"></i> - <i class="icon-step-backward"></i> - <i class="icon-fast-backward"></i> - <i class="icon-backward"></i> - <i class="icon-play"></i> - <i class="icon-pause"></i> - <i class="icon-stop"></i> - <i class="icon-forward"></i> - <i class="icon-fast-forward"></i> - <i class="icon-step-forward"></i> - <i class="icon-eject"></i> - <i class="icon-chevron-left"></i> - <i class="icon-chevron-right"></i> - - <i class="icon-plus-sign"></i> - <i class="icon-minus-sign"></i> - <i class="icon-remove-sign"></i> - <i class="icon-ok-sign"></i> - <i class="icon-question-sign"></i> - <i class="icon-info-sign"></i> - <i class="icon-screenshot"></i> - <i class="icon-remove-circle"></i> - <i class="icon-ok-circle"></i> - <i class="icon-ban-circle"></i> - </div> + <ul class="the-icons"> + <li><i class="icon-pencil"></i> icon-pencil</li> + <li><i class="icon-map-marker"></i> icon-map-marker</li> + <li><i class="icon-adjust"></i> icon-adjust</li> + <li><i class="icon-tint"></i> icon-tint</li> + <li><i class="icon-edit"></i> icon-edit</li> + <li><i class="icon-share"></i> icon-share</li> + <li><i class="icon-check"></i> icon-check</li> + <li><i class="icon-move"></i> icon-move</li> + <li><i class="icon-step-backward"></i> icon-step-backward</li> + <li><i class="icon-fast-backward"></i> icon-fast-backward</li> + <li><i class="icon-backward"></i> icon-backward</li> + <li><i class="icon-play"></i> icon-play</li> + <li><i class="icon-pause"></i> icon-pause</li> + <li><i class="icon-stop"></i> icon-stop</li> + <li><i class="icon-forward"></i> icon-forward</li> + <li><i class="icon-fast-forward"></i> icon-fast-forward</li> + <li><i class="icon-step-forward"></i> icon-step-forward</li> + <li><i class="icon-eject"></i> icon-eject</li> + <li><i class="icon-chevron-left"></i> icon-chevron-left</li> + <li><i class="icon-chevron-right"></i> icon-chevron-right</li> + <li><i class="icon-plus-sign"></i> icon-plus-sign</li> + <li><i class="icon-minus-sign"></i> icon-minus-sign</li> + <li><i class="icon-remove-sign"></i> icon-remove-sign</li> + <li><i class="icon-ok-sign"></i> icon-ok-sign</li> + <li><i class="icon-question-sign"></i> icon-question-sign</li> + <li><i class="icon-info-sign"></i> icon-info-sign</li> + <li><i class="icon-screenshot"></i> icon-screenshot</li> + <li><i class="icon-remove-circle"></i> icon-remove-circle</li> + <li><i class="icon-ok-circle"></i> icon-ok-circle</li> + <li><i class="icon-ban-circle"></i> icon-ban-circle</li> + </ul> </div> <div class="span3"> - <div class="the-icons"> - <i class="icon-arrow-left"></i> - <i class="icon-arrow-right"></i> - <i class="icon-arrow-up"></i> - <i class="icon-arrow-down"></i> - <i class="icon-share-alt"></i> - <i class="icon-resize-full"></i> - <i class="icon-resize-small"></i> - <i class="icon-plus"></i> - <i class="icon-minus"></i> - <i class="icon-asterisk"></i> - - <i class="icon-exclamation-sign"></i> - <i class="icon-gift"></i> - <i class="icon-leaf"></i> - <i class="icon-fire"></i> - <i class="icon-eye-open"></i> - <i class="icon-eye-close"></i> - <i class="icon-warning-sign"></i> - <i class="icon-plane"></i> - <i class="icon-calendar"></i> - <i class="icon-random"></i> - <i class="icon-comment"></i> - <i class="icon-magnet"></i> - <i class="icon-chevron-up"></i> - <i class="icon-chevron-down"></i> - <i class="icon-retweet"></i> - <i class="icon-shopping-cart"></i> - <i class="icon-folder-close"></i> - <i class="icon-folder-open"></i> - <i class="icon-resize-vertical"></i> - <i class="icon-resize-horizontal"></i> - </div> + <ul class="the-icons"> + <li><i class="icon-arrow-left"></i> icon-arrow-left</li> + <li><i class="icon-arrow-right"></i> icon-arrow-right</li> + <li><i class="icon-arrow-up"></i> icon-arrow-up</li> + <li><i class="icon-arrow-down"></i> icon-arrow-down</li> + <li><i class="icon-share-alt"></i> icon-share-alt</li> + <li><i class="icon-resize-full"></i> icon-resize-full</li> + <li><i class="icon-resize-small"></i> icon-resize-small</li> + <li><i class="icon-plus"></i> icon-plus</li> + <li><i class="icon-minus"></i> icon-minus</li> + <li><i class="icon-asterisk"></i> icon-asterisk</li> + <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li> + <li><i class="icon-gift"></i> icon-gift</li> + <li><i class="icon-leaf"></i> icon-leaf</li> + <li><i class="icon-fire"></i> icon-fire</li> + <li><i class="icon-eye-open"></i> icon-eye-open</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-plane"></i> icon-plane</li> + <li><i class="icon-calendar"></i> icon-calendar</li> + <li><i class="icon-random"></i> icon-random</li> + <li><i class="icon-comment"></i> icon-comment</li> + <li><i class="icon-magnet"></i> icon-magnet</li> + <li><i class="icon-chevron-up"></i> icon-chevron-up</li> + <li><i class="icon-chevron-down"></i> icon-chevron-down</li> + <li><i class="icon-retweet"></i> icon-retweet</li> + <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li> + <li><i class="icon-folder-close"></i> icon-folder-close</li> + <li><i class="icon-folder-open"></i> icon-folder-open</li> + <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li> + <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li> + </ul> </div> </div> <div class="alert alert-info"> - {{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}} + {{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to highlight the icon's size.{{/i}} </div> <br> @@ -1419,7 +1486,7 @@ <a class="btn" href="#"><i class="icon-align-justify"></i></a> </div> <div class="btn-group"> - <a class="btn btn-primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a> + <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> |