mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 14:30:46 +02:00
Code Issues Releases Wiki Activity

tweaks abound, updated prettify styles, new sidenav component started, sprite icons started

Browse Source
This commit is contained in:
Mark Otto
2012-01-05 01:34:14 -08:00
parent 553030ca7d
commit fb9401b355
12 changed files with 809 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/assets/css/docs.css
View File

@@ -330,6 +330,24 @@ h2 + table {
position: relative;
}
/* Icons
------------------------- */
.the-icons {
}
.the-icons i {
display: block;
margin-bottom: 5px;
background-color: rgba(255,0,0,.25);
}
.the-icons i:after {
display: block;
content: attr(class);
font-style: normal;
margin-left: 20px;
width: 100px;
}
/* Responsive Docs
-------------------------------------------------- */

BIN
docs/assets/img/glyphicons-halflings-sprite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

41
docs/assets/js/google-code-prettify/prettify.css
View File

@@ -2,40 +2,23 @@
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #268bd2; }
.kwd, .tag { color: #195f91; }
.typ, .atn, .dec, .var { color: #CB4B16; }
.str, .atv { color: #62C462; }
.kwd, .linenums .tag { color: #049CD9; }
.typ, .atn, .dec, .var { color: #EE5F5B; }
.pln { color: #93a1a1; }
pre.prettyprint {
background: #fefbf3;
background-color: #fefbf3;
padding: 9px;
border: 1px solid rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
box-shadow: 0 1px 2px rgba(0,0,0,.1);
margin-bottom: 9px;
}
pre.prettyprint {
color: #ccc;
background-color: #252525;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */
ol.linenums li { color: rgba(0,0,0,.15); line-height: 20px; }
ol.linenums li { color: #444; line-height: 18px; }
/* Alternate shading for lines */
li.L1, li.L3, li.L5, li.L7, li.L9 { }
/*
$base03: #002b36;
$base02: #073642;
$base01: #586e75;
$base00: #657b83;
$base0: #839496;
$base1: #93a1a1;
$base2: #eee8d5;
$base3: #fdf6e3;
$yellow: #b58900;
$orange: #cb4b16;
$red: #dc322f;
$magenta: #d33682;
$violet: #6c71c4;
$blue: #268bd2;
$cyan: #2aa198;
$green: #859900;
*/
li.L1, li.L3, li.L5, li.L7, li.L9 { }

152
docs/base-css.html
View File

@@ -1175,6 +1175,158 @@ Form states
</section>
<!-- Icons
================================================== -->
<section id="icons">
<div class="page-header">
<h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
</div>
<div class="row">
<div class="span2">
<div class="the-icons">
<i class="glass"></i>
<i class="music"></i>
<i class="search"></i>
<i class="envelope"></i>
<i class="heart"></i>
<i class="star"></i>
<i class="star-empty"></i>
<i class="user"></i>
<i class="film"></i>
<i class="th-large"></i>
<i class="th"></i>
<i class="th-list"></i>
<i class="ok"></i>
<i class="remove"></i>
<i class="zoom-in"></i>
<i class="zoom-out"></i>
<i class="off"></i>
<i class="signal"></i>
<i class="cog"></i>
<i class="trash"></i>
</div>
</div>
<div class="span2">
<div class="the-icons">
<i class="home"></i>
<i class="file"></i>
<i class="time"></i>
<i class="road"></i>
<i class="download-alt"></i>
<i class="download"></i>
<i class="upload"></i>
<i class="inbox"></i>
<i class="play-circle"></i>
<i class="repeat"></i>
<i class="refresh"></i>
<i class="calendar"></i>
<i class="lock"></i>
<i class="flag"></i>
<i class="headphones"></i>
<i class="volume-off"></i>
<i class="volume-down"></i>
<i class="volume-up"></i>
<i class="qrcode"></i>
<i class="barcode"></i>
</div>
</div>
<div class="span2">
<div class="the-icons">
<i class="tag"></i>
<i class="tags"></i>
<i class="book"></i>
<i class="bookmark"></i>
<i class="print"></i>
<i class="camera"></i>
<i class="font"></i>
<i class="bold"></i>
<i class="italic"></i>
<i class="text-height"></i>
<i class="text-width"></i>
<i class="align-left"></i>
<i class="align-center"></i>
<i class="align-right"></i>
<i class="align-justify"></i>
<i class="list"></i>
<i class="indent-left"></i>
<i class="indent-right"></i>
<i class="facetime-video"></i>
<i class="picture"></i>
</div>
</div>
<div class="span2">
<div class="the-icons">
<i class="pencil"></i>
<i class="map-marker"></i>
<i class="adjust"></i>
<i class="tint"></i>
<i class="edit"></i>
<i class="share"></i>
<i class="check"></i>
<i class="move"></i>
<i class="step-backward"></i>
<i class="fast-backward"></i>
<i class="backward"></i>
<i class="play"></i>
<i class="pause"></i>
<i class="stop"></i>
<i class="forward"></i>
<i class="fast-forward"></i>
<i class="step-foward"></i>
<i class="eject"></i>
<i class="chevron-left"></i>
<i class="chevron-right"></i>
</div>
</div>
<div class="span2">
<div class="the-icons">
<i class="arrow-left"></i>
<i class="arrow-right"></i>
<i class="arrow-up"></i>
<i class="arrow-down"></i>
<i class="share"></i>
<i class="resize-full"></i>
<i class="resize-small"></i>
<i class="plus"></i>
<i class="minus"></i>
<i class="asterisk"></i>
</div>
</div>
</div>
<br>
<div class="row">
<div class="span4">
<h3>Built as a sprite</h3>
<p>Instead of making every icon an extra request, we've compiled them into a sprite&mdash;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><a href="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. Please consider doing the same in your projects.</p>
</div>
<div class="span4">
<h3>How to use</h3>
<p>With v2.0.0, the <code>&lt;i&gt;</code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p>
<pre class="prettyprint">
&lt;i class="chevron-left"&gt;&lt;/i&gt;
</pre>
<p>There are over 100 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.</p>
</div>
<div class="span4">
<h3>Use cases</h3>
<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 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>
</div>
</div>
</section>
<!-- Footer
================================================== -->
<footer class="footer">

32
docs/components.html
View File

@@ -223,6 +223,38 @@
<!-- Side nav
================================================== -->
<section id="sidenav">
<div class="page-header">
<h1>Side nav <small></small></h1>
</div>
<div class="well side-nav">
<h6 class="nav-label">Your account</h6>
<ul class="nav-group">
<li class="active"><a class="nav-item" href="#">Home</a></li>
<li><a class="nav-item" href="#">Library</a></li>
<li><a class="nav-item" href="#">Profile</a></li>
<li><a class="nav-item" href="#">Settings</a></li>
<li><a class="nav-item" href="#">Help</a></li>
</ul>
</div>
<div class="well side-nav">
<h6 class="nav-label">Your account</h6>
<ul class="nav-group">
<li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
<li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
<li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li>
<li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
<li><a class="nav-item" href="#"><i class="time"></i> Help</a></li>
</ul>
</div>
</section>
<!-- Navbar
================================================== -->
<section id="navbar">