0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

Added example sidebar navigation with icon in docs

This commit is contained in:
Purwandi 2012-01-08 17:44:19 +07:00
parent 0bbb64be4d
commit b14426c176
2 changed files with 35 additions and 6 deletions

View File

@ -1602,11 +1602,12 @@
</div>
<div class="span3">
<p>Or, use them in navigation.</p>
<div class="well side-nav">
<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="cog"></i> Settings</a></li>
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="nav-header">List header</li>
<li class="active"><a href="#"><i class="home"></i> Home</a></li>
<li><a href="#"><i class="download"></i> Downloads</a></li>
<li><a href="#"><i class="film"></i> Movies</a></li>
</ul>
</div>
</div>

View File

@ -256,7 +256,35 @@
</pre>
</div>
</div>
<div class="row">
<div class="span4">
<h3>Sidebar navigation with icon</h3>
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="nav-header">List header</li>
<li class="active"><a href="#"><i class="home"></i> Home</a></li>
<li><a href="#"><i class="download"></i> Downloads</a></li>
<li><a href="#"><i class="film"></i> Movies</a></li>
<li><a href="#"><i class="picture"></i> Picture</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#"><i class="user"></i> Profile</a></li>
<li><a href="#"><i class="asterisk"></i> Settings</a></li>
</ul>
</div> <!-- /well -->
</div>
<div class="span8">
<h3>Simple markup</h3>
<pre class="prettyprint linenums">
&lt;ul class="nav list"&gt;
&lt;li class="nav-header"&gt;List header&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="download"&gt;&lt;/i&gt; Downloads&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="film"&gt;&lt;/i&gt; Movies&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
</div>
</div>
<h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
<div class="row">