1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00

docs changes for icons

This commit is contained in:
Mark Otto 2012-07-09 00:17:36 -07:00
parent 8b696ad0b5
commit 16cf6b30cd
4 changed files with 13 additions and 44 deletions

View file

@ -5198,7 +5198,6 @@ a.badge:hover {
.carousel { .carousel {
position: relative; position: relative;
display: table;
margin-bottom: 20px; margin-bottom: 20px;
line-height: 1; line-height: 1;
} }

View file

@ -483,6 +483,8 @@ h2 + .row {
list-style: none; list-style: none;
} }
.the-icons li { .the-icons li {
float: left;
width: 25%;
line-height: 25px; line-height: 25px;
} }
.the-icons i:hover { .the-icons i:hover {

View file

@ -122,7 +122,7 @@
</div> </div>
<h2>Body copy</h2> <h2>Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>13px</strong>, with a <code>line-height</code> of <strong>18px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (9px by default).</p> <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (9px by default).</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
@ -1399,9 +1399,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h2>Icon glyphs</h2> <h2>Icon glyphs</h2>
<p>140 icons in sprite form, available in dark gray (default) and white, provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a>.</p> <p>140 icons in sprite form, available in dark gray (default) and white, provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a>.</p>
<div class="row"> <ul class="the-icons clearfix">
<div class="span2">
<ul class="the-icons">
<li><i class="icon-glass"></i> icon-glass</li> <li><i class="icon-glass"></i> icon-glass</li>
<li><i class="icon-music"></i> icon-music</li> <li><i class="icon-music"></i> icon-music</li>
<li><i class="icon-search"></i> icon-search</li> <li><i class="icon-search"></i> icon-search</li>
@ -1430,10 +1428,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-download"></i> icon-download</li> <li><i class="icon-download"></i> icon-download</li>
<li><i class="icon-upload"></i> icon-upload</li> <li><i class="icon-upload"></i> icon-upload</li>
<li><i class="icon-inbox"></i> icon-inbox</li> <li><i class="icon-inbox"></i> icon-inbox</li>
</ul>
</div>
<div class="span2">
<ul class="the-icons">
<li><i class="icon-play-circle"></i> icon-play-circle</li> <li><i class="icon-play-circle"></i> icon-play-circle</li>
<li><i class="icon-repeat"></i> icon-repeat</li> <li><i class="icon-repeat"></i> icon-repeat</li>
<li><i class="icon-refresh"></i> icon-refresh</li> <li><i class="icon-refresh"></i> icon-refresh</li>
@ -1462,10 +1457,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-align-right"></i> icon-align-right</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-align-justify"></i> icon-align-justify</li>
<li><i class="icon-list"></i> icon-list</li> <li><i class="icon-list"></i> icon-list</li>
</ul>
</div>
<div class="span2">
<ul class="the-icons">
<li><i class="icon-indent-left"></i> icon-indent-left</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-indent-right"></i> icon-indent-right</li>
<li><i class="icon-facetime-video"></i> icon-facetime-video</li> <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
@ -1494,10 +1486,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-minus-sign"></i> icon-minus-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-remove-sign"></i> icon-remove-sign</li>
<li><i class="icon-ok-sign"></i> icon-ok-sign</li> <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
</ul>
</div>
<div class="span2">
<ul class="the-icons">
<li><i class="icon-question-sign"></i> icon-question-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-info-sign"></i> icon-info-sign</li>
<li><i class="icon-screenshot"></i> icon-screenshot</li> <li><i class="icon-screenshot"></i> icon-screenshot</li>
@ -1526,10 +1515,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-random"></i> icon-random</li> <li><i class="icon-random"></i> icon-random</li>
<li><i class="icon-comment"></i> icon-comment</li> <li><i class="icon-comment"></i> icon-comment</li>
<li><i class="icon-magnet"></i> icon-magnet</li> <li><i class="icon-magnet"></i> icon-magnet</li>
</ul>
</div>
<div class="span2">
<ul class="the-icons">
<li><i class="icon-chevron-up"></i> icon-chevron-up</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-chevron-down"></i> icon-chevron-down</li>
<li><i class="icon-retweet"></i> icon-retweet</li> <li><i class="icon-retweet"></i> icon-retweet</li>
@ -1559,8 +1545,6 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-briefcase"></i> icon-briefcase</li> <li><i class="icon-briefcase"></i> icon-briefcase</li>
<li><i class="icon-fullscreen"></i> icon-fullscreen</li> <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
</ul> </ul>
</div>
</div>
<h3>Glyphicons attribution</h3> <h3>Glyphicons attribution</h3>
<p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p> <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>

View file

@ -1337,9 +1337,7 @@
<h2>{{_i}}Icon glyphs{{/i}}</h2> <h2>{{_i}}Icon glyphs{{/i}}</h2>
<p>{{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a>.{{/i}}</p> <p>{{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a>.{{/i}}</p>
<div class="row"> <ul class="the-icons clearfix">
<div class="span2">
<ul class="the-icons">
<li><i class="icon-glass"></i> icon-glass</li> <li><i class="icon-glass"></i> icon-glass</li>
<li><i class="icon-music"></i> icon-music</li> <li><i class="icon-music"></i> icon-music</li>
<li><i class="icon-search"></i> icon-search</li> <li><i class="icon-search"></i> icon-search</li>
@ -1368,10 +1366,7 @@
<li><i class="icon-download"></i> icon-download</li> <li><i class="icon-download"></i> icon-download</li>
<li><i class="icon-upload"></i> icon-upload</li> <li><i class="icon-upload"></i> icon-upload</li>
<li><i class="icon-inbox"></i> icon-inbox</li> <li><i class="icon-inbox"></i> icon-inbox</li>
</ul>
</div>
<div class="span2">
<ul class="the-icons">
<li><i class="icon-play-circle"></i> icon-play-circle</li> <li><i class="icon-play-circle"></i> icon-play-circle</li>
<li><i class="icon-repeat"></i> icon-repeat</li> <li><i class="icon-repeat"></i> icon-repeat</li>
<li><i class="icon-refresh"></i> icon-refresh</li> <li><i class="icon-refresh"></i> icon-refresh</li>
@ -1400,10 +1395,7 @@
<li><i class="icon-align-right"></i> icon-align-right</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-align-justify"></i> icon-align-justify</li>
<li><i class="icon-list"></i> icon-list</li> <li><i class="icon-list"></i> icon-list</li>
</ul>
</div>
<div class="span2">
<ul class="the-icons">
<li><i class="icon-indent-left"></i> icon-indent-left</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-indent-right"></i> icon-indent-right</li>
<li><i class="icon-facetime-video"></i> icon-facetime-video</li> <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
@ -1432,10 +1424,7 @@
<li><i class="icon-minus-sign"></i> icon-minus-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-remove-sign"></i> icon-remove-sign</li>
<li><i class="icon-ok-sign"></i> icon-ok-sign</li> <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
</ul>
</div>
<div class="span2">
<ul class="the-icons">
<li><i class="icon-question-sign"></i> icon-question-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-info-sign"></i> icon-info-sign</li>
<li><i class="icon-screenshot"></i> icon-screenshot</li> <li><i class="icon-screenshot"></i> icon-screenshot</li>
@ -1464,10 +1453,7 @@
<li><i class="icon-random"></i> icon-random</li> <li><i class="icon-random"></i> icon-random</li>
<li><i class="icon-comment"></i> icon-comment</li> <li><i class="icon-comment"></i> icon-comment</li>
<li><i class="icon-magnet"></i> icon-magnet</li> <li><i class="icon-magnet"></i> icon-magnet</li>
</ul>
</div>
<div class="span2">
<ul class="the-icons">
<li><i class="icon-chevron-up"></i> icon-chevron-up</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-chevron-down"></i> icon-chevron-down</li>
<li><i class="icon-retweet"></i> icon-retweet</li> <li><i class="icon-retweet"></i> icon-retweet</li>
@ -1497,8 +1483,6 @@
<li><i class="icon-briefcase"></i> icon-briefcase</li> <li><i class="icon-briefcase"></i> icon-briefcase</li>
<li><i class="icon-fullscreen"></i> icon-fullscreen</li> <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
</ul> </ul>
</div>
</div>
<h3>Glyphicons attribution</h3> <h3>Glyphicons attribution</h3>
<p>{{_i}}<a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.{{/i}}</p> <p>{{_i}}<a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.{{/i}}</p>