text-align: center;
}
-.nav-list > li > a {
- margin-bottom: -1px;
- border: 1px solid #e5e5e5;
-}
-
-.nav-list > li:first-child > a {
- border-top-right-radius: 4px;
- border-top-left-radius: 4px;
-}
-
-.nav-list > li:last-child > a {
- border-bottom-right-radius: 4px;
- border-bottom-left-radius: 4px;
-}
-
-.nav-list > .active > a,
-.nav-list > .active > a:hover,
-.nav-list > .active > a:focus {
- z-index: 2;
- color: #fff;
- background-color: #428bca;
- border-color: #428bca;
-}
-
.nav > .disabled > a {
color: #999999;
}
top: 0;
}
-.nav-list > .active > a > .badge,
+a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
color: #428bca;
background-color: #fff;
<h4>Navigation</h4>
<div class="bs-docs-example">
- <ul class="nav nav-list">
+ <ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
<li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
</ul>
</div><!-- /bs-docs-example -->
{% highlight html linenos %}
-<ul class="nav nav-list">
+<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
<li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
-{% endhighlight %}
-
- <h2 id="nav-list">List</h2>
- <p>Swap the tabs class for <code>.nav-list</code>.</p>
- <div class="bs-docs-example">
- <ul class="nav nav-list" style="max-width: 300px;">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- </ul>
- </div>
-{% highlight html linenos %}
-<ul class="nav nav-list">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
-</ul>
{% endhighlight %}
<h2 id="nav-pills">Pills</h2>
<li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br>
- <ul class="nav nav-list" style="max-width: 260px;">
+ <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
- <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+ <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
- <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+ <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
- <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+ <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
text-align: center;
}
-// Lists
-// -------------------------
-
-.nav-list > li > a {
- margin-bottom: -1px; // pull up the following link for a 1px border between
- border: 1px solid #e5e5e5;
-}
-.nav-list > li:first-child > a {
- border-top-left-radius: @border-radius-base;
- border-top-right-radius: @border-radius-base;
-}
-.nav-list > li:last-child > a {
- border-bottom-left-radius: @border-radius-base;
- border-bottom-right-radius: @border-radius-base;
-}
-.nav-list > .active > a,
-.nav-list > .active > a:hover,
-.nav-list > .active > a:focus {
- z-index: 2; // Bring active item forward so border sits on top of next element
- color: #fff;
- background-color: @link-color;
- border-color: @link-color;
-}
-
// Nav states and addons