@@ -1303,142 +1303,142 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1303,142 +1303,142 @@ For example, <code>section</code> should be wrapped as inline.
<divclass="row">
<divclass="row">
<divclass="span3">
<divclass="span3">
<divclass="the-icons">
<divclass="the-icons">
<iclass="i-glass"></i>
<iclass="icon-glass"></i>
<iclass="i-music"></i>
<iclass="icon-music"></i>
<iclass="i-search"></i>
<iclass="icon-search"></i>
<iclass="i-envelope"></i>
<iclass="icon-envelope"></i>
<iclass="i-heart"></i>
<iclass="icon-heart"></i>
<iclass="i-star"></i>
<iclass="icon-star"></i>
<iclass="i-star-empty"></i>
<iclass="icon-star-empty"></i>
<iclass="i-user"></i>
<iclass="icon-user"></i>
<iclass="i-film"></i>
<iclass="icon-film"></i>
<iclass="i-th-large"></i>
<iclass="icon-th-large"></i>
<iclass="i-th"></i>
<iclass="icon-th"></i>
<iclass="i-th-list"></i>
<iclass="icon-th-list"></i>
<iclass="i-ok"></i>
<iclass="icon-ok"></i>
<iclass="i-remove"></i>
<iclass="icon-remove"></i>
<iclass="i-zoom-in"></i>
<iclass="icon-zoom-in"></i>
<iclass="i-zoom-out"></i>
<iclass="icon-zoom-out"></i>
<iclass="i-off"></i>
<iclass="icon-off"></i>
<iclass="i-signal"></i>
<iclass="icon-signal"></i>
<iclass="i-cog"></i>
<iclass="icon-cog"></i>
<iclass="i-trash"></i>
<iclass="icon-trash"></i>
<iclass="i-home"></i>
<iclass="icon-home"></i>
<iclass="i-file"></i>
<iclass="icon-file"></i>
<iclass="i-time"></i>
<iclass="icon-time"></i>
<iclass="i-road"></i>
<iclass="icon-road"></i>
<iclass="i-download-alt"></i>
<iclass="icon-download-alt"></i>
<iclass="i-download"></i>
<iclass="icon-download"></i>
<iclass="i-upload"></i>
<iclass="icon-upload"></i>
<iclass="i-inbox"></i>
<iclass="icon-inbox"></i>
<iclass="i-play-circle"></i>
<iclass="icon-play-circle"></i>
<iclass="i-repeat"></i>
<iclass="icon-repeat"></i>
</div>
</div>
</div>
</div>
<divclass="span3">
<divclass="span3">
<divclass="the-icons">
<divclass="the-icons">
<iclass="i-refresh"></i>
<iclass="icon-refresh"></i>
<iclass="i-list-alt"></i>
<iclass="icon-list-alt"></i>
<iclass="i-lock"></i>
<iclass="icon-lock"></i>
<iclass="i-flag"></i>
<iclass="icon-flag"></i>
<iclass="i-headphones"></i>
<iclass="icon-headphones"></i>
<iclass="i-volume-off"></i>
<iclass="icon-volume-off"></i>
<iclass="i-volume-down"></i>
<iclass="icon-volume-down"></i>
<iclass="i-volume-up"></i>
<iclass="icon-volume-up"></i>
<iclass="i-qrcode"></i>
<iclass="icon-qrcode"></i>
<iclass="i-barcode"></i>
<iclass="icon-barcode"></i>
<iclass="i-tag"></i>
<iclass="icon-tag"></i>
<iclass="i-tags"></i>
<iclass="icon-tags"></i>
<iclass="i-book"></i>
<iclass="icon-book"></i>
<iclass="i-bookmark"></i>
<iclass="icon-bookmark"></i>
<iclass="i-print"></i>
<iclass="icon-print"></i>
<iclass="i-camera"></i>
<iclass="icon-camera"></i>
<iclass="i-font"></i>
<iclass="icon-font"></i>
<iclass="i-bold"></i>
<iclass="icon-bold"></i>
<iclass="i-italic"></i>
<iclass="icon-italic"></i>
<iclass="i-text-height"></i>
<iclass="icon-text-height"></i>
<iclass="i-text-width"></i>
<iclass="icon-text-width"></i>
<iclass="i-align-left"></i>
<iclass="icon-align-left"></i>
<iclass="i-align-center"></i>
<iclass="icon-align-center"></i>
<iclass="i-align-right"></i>
<iclass="icon-align-right"></i>
<iclass="i-align-justify"></i>
<iclass="icon-align-justify"></i>
<iclass="i-list"></i>
<iclass="icon-list"></i>
<iclass="i-indent-left"></i>
<iclass="icon-indent-left"></i>
<iclass="i-indent-right"></i>
<iclass="icon-indent-right"></i>
<iclass="i-facetime-video"></i>
<iclass="icon-facetime-video"></i>
<iclass="i-picture"></i>
<iclass="icon-picture"></i>
</div>
</div>
</div>
</div>
<divclass="span3">
<divclass="span3">
<divclass="the-icons">
<divclass="the-icons">
<iclass="i-pencil"></i>
<iclass="icon-pencil"></i>
<iclass="i-map-marker"></i>
<iclass="icon-map-marker"></i>
<iclass="i-adjust"></i>
<iclass="icon-adjust"></i>
<iclass="i-tint"></i>
<iclass="icon-tint"></i>
<iclass="i-edit"></i>
<iclass="icon-edit"></i>
<iclass="i-share"></i>
<iclass="icon-share"></i>
<iclass="i-check"></i>
<iclass="icon-check"></i>
<iclass="i-move"></i>
<iclass="icon-move"></i>
<iclass="i-step-backward"></i>
<iclass="icon-step-backward"></i>
<iclass="i-fast-backward"></i>
<iclass="icon-fast-backward"></i>
<iclass="i-backward"></i>
<iclass="icon-backward"></i>
<iclass="i-play"></i>
<iclass="icon-play"></i>
<iclass="i-pause"></i>
<iclass="icon-pause"></i>
<iclass="i-stop"></i>
<iclass="icon-stop"></i>
<iclass="i-forward"></i>
<iclass="icon-forward"></i>
<iclass="i-fast-forward"></i>
<iclass="icon-fast-forward"></i>
<iclass="i-step-forward"></i>
<iclass="icon-step-forward"></i>
<iclass="i-eject"></i>
<iclass="icon-eject"></i>
<iclass="i-chevron-left"></i>
<iclass="icon-chevron-left"></i>
<iclass="i-chevron-right"></i>
<iclass="icon-chevron-right"></i>
<iclass="i-plus-sign"></i>
<iclass="icon-plus-sign"></i>
<iclass="i-minus-sign"></i>
<iclass="icon-minus-sign"></i>
<iclass="i-remove-sign"></i>
<iclass="icon-remove-sign"></i>
<iclass="i-ok-sign"></i>
<iclass="icon-ok-sign"></i>
<iclass="i-question-sign"></i>
<iclass="icon-question-sign"></i>
<iclass="i-info-sign"></i>
<iclass="icon-info-sign"></i>
<iclass="i-screenshot"></i>
<iclass="icon-screenshot"></i>
<iclass="i-remove-circle"></i>
<iclass="icon-remove-circle"></i>
<iclass="i-ok-circle"></i>
<iclass="icon-ok-circle"></i>
<iclass="i-ban-circle"></i>
<iclass="icon-ban-circle"></i>
</div>
</div>
</div>
</div>
<divclass="span3">
<divclass="span3">
<divclass="the-icons">
<divclass="the-icons">
<iclass="i-arrow-left"></i>
<iclass="icon-arrow-left"></i>
<iclass="i-arrow-right"></i>
<iclass="icon-arrow-right"></i>
<iclass="i-arrow-up"></i>
<iclass="icon-arrow-up"></i>
<iclass="i-arrow-down"></i>
<iclass="icon-arrow-down"></i>
<iclass="i-share-alt"></i>
<iclass="icon-share-alt"></i>
<iclass="i-resize-full"></i>
<iclass="icon-resize-full"></i>
<iclass="i-resize-small"></i>
<iclass="icon-resize-small"></i>
<iclass="i-plus"></i>
<iclass="icon-plus"></i>
<iclass="i-minus"></i>
<iclass="icon-minus"></i>
<iclass="i-asterisk"></i>
<iclass="icon-asterisk"></i>
<iclass="i-exclamation-sign"></i>
<iclass="icon-exclamation-sign"></i>
<iclass="i-gift"></i>
<iclass="icon-gift"></i>
<iclass="i-leaf"></i>
<iclass="icon-leaf"></i>
<iclass="i-fire"></i>
<iclass="icon-fire"></i>
<iclass="i-eye-open"></i>
<iclass="icon-eye-open"></i>
<iclass="i-eye-close"></i>
<iclass="icon-eye-close"></i>
<iclass="i-warning-sign"></i>
<iclass="icon-warning-sign"></i>
<iclass="i-plane"></i>
<iclass="icon-plane"></i>
<iclass="i-calendar"></i>
<iclass="icon-calendar"></i>
<iclass="i-random"></i>
<iclass="icon-random"></i>
<iclass="i-comment"></i>
<iclass="icon-comment"></i>
<iclass="i-magnet"></i>
<iclass="icon-magnet"></i>
<iclass="i-chevron-up"></i>
<iclass="icon-chevron-up"></i>
<iclass="i-chevron-down"></i>
<iclass="icon-chevron-down"></i>
<iclass="i-retweet"></i>
<iclass="icon-retweet"></i>
<iclass="i-shopping-cart"></i>
<iclass="icon-shopping-cart"></i>
<iclass="i-folder-close"></i>
<iclass="icon-folder-close"></i>
<iclass="i-folder-open"></i>
<iclass="icon-folder-open"></i>
<iclass="i-resize-vertical"></i>
<iclass="icon-resize-vertical"></i>
<iclass="i-resize-horizontal"></i>
<iclass="icon-resize-horizontal"></i>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -1452,18 +1452,18 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1452,18 +1452,18 @@ For example, <code>section</code> should be wrapped as inline.
<divclass="span4">
<divclass="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—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—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>.i-</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><ahref="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><ahref="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>
<divclass="span4">
<divclass="span4">
<h3>How to use</h3>
<h3>How to use</h3>
<p>With v2.0.0, we have opted to use an <code><i></code> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:</p>
<p>With v2.0.0, we have opted to use an <code><i></code> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<i class="i-search"></i>
<i class="icon-search"></i>
</pre>
</pre>
<p>There are also styles available for inverted (white) icons, made ready with one extra class:</p>
<p>There are also styles available for inverted (white) icons, made ready with one extra class:</p>
<p>There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
<p>There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
</div>
</div>
...
@@ -1486,40 +1486,40 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1486,40 +1486,40 @@ For example, <code>section</code> should be wrapped as inline.
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p>
<divclass="mini-layout">
<divclass="minicon-layout">
<divclass="mini-layout-body"></div>
<divclass="minicon-layout-body"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<body>
<body>
...
@@ -279,9 +279,9 @@
...
@@ -279,9 +279,9 @@
<divclass="span6">
<divclass="span6">
<h2>Fluid layout</h2>
<h2>Fluid layout</h2>
<p><code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<p><code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<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}}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>.i-</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}}<ahref="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}}<ahref="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>
<divclass="span4">
<divclass="span4">
<h3>{{_i}}How to use{{/i}}</h3>
<h3>{{_i}}How to use{{/i}}</h3>
<p>{{_i}}With v2.0.0, we have opted to use an <code><i></code> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<p>{{_i}}With v2.0.0, we have opted to use an <code><i></code> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<i class="i-search"></i>
<i class="icon-search"></i>
</pre>
</pre>
<p>{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}</p>
<p>{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}</p>
<p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
<p>{{_i}}There are 120 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
<p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.{{/i}}</p>
<p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.{{/i}}</p>
<divclass="mini-layout">
<divclass="minicon-layout">
<divclass="mini-layout-body"></div>
<divclass="minicon-layout-body"></div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<body>
<body>
...
@@ -203,9 +203,9 @@
...
@@ -203,9 +203,9 @@
<divclass="span6">
<divclass="span6">
<h2>{{_i}}Fluid layout{{/i}}</h2>
<h2>{{_i}}Fluid layout{{/i}}</h2>
<p>{{_i}}<code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
<p>{{_i}}<code><div class="container-fluid"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>