mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Refactor navs: new classes, remove separate pills & tabs files, drop justified nav because it never really worked
This commit is contained in:
Mark Otto
parent
77a4bcad9e
commit
857fe32a70
322
dist/css/bootstrap.css
vendored
322
dist/css/bootstrap.css
vendored
@ -2963,15 +2963,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
.nav-link {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
padding: .5em 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -2980,198 +2979,103 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
}
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.open > .nav-link:hover,
|
||||
.active > .nav-link:hover,
|
||||
.open > .nav-link:focus,
|
||||
.active > .nav-link:focus {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
}
|
||||
.disabled > .nav-link {
|
||||
.disabled > .nav-link,
|
||||
.nav-link.disabled {
|
||||
color: #818a91;
|
||||
}
|
||||
.disabled > .nav-link,
|
||||
.nav-link.disabled,
|
||||
.disabled > .nav-link:hover,
|
||||
.disabled > .nav-link:focus {
|
||||
.nav-link.disabled:hover,
|
||||
.disabled > .nav-link:focus,
|
||||
.nav-link.disabled:focus {
|
||||
color: #818a91;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .5em 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:focus {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
}
|
||||
.nav > li.disabled > a {
|
||||
color: #818a91;
|
||||
}
|
||||
.nav > li.disabled > a:hover,
|
||||
.nav > li.disabled > a:focus {
|
||||
color: #818a91;
|
||||
text-decoration: none;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav .open > a,
|
||||
.nav .open > a:hover,
|
||||
.nav .open > a:focus {
|
||||
background-color: #eceeef;
|
||||
border-color: #027de7;
|
||||
}
|
||||
.nav-tabs {
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.nav-tabs > li {
|
||||
.nav-tabs .nav-item {
|
||||
float: left;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.nav-tabs > li > a {
|
||||
margin-right: 2px;
|
||||
line-height: 1.5;
|
||||
.nav-tabs .nav-item + .nav-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
.nav-tabs .nav-link {
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tabs > li > a:hover {
|
||||
.nav-tabs .nav-link:hover,
|
||||
.nav-tabs .nav-link:focus {
|
||||
border-color: #eceeef #eceeef #ddd;
|
||||
}
|
||||
.nav-tabs > li.active > a,
|
||||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.active > a:focus {
|
||||
.nav-tabs .open > .nav-link,
|
||||
.nav-tabs .active > .nav-link,
|
||||
.nav-tabs .nav-link.open,
|
||||
.nav-tabs .nav-link.active,
|
||||
.nav-tabs .open > .nav-link:hover,
|
||||
.nav-tabs .active > .nav-link:hover,
|
||||
.nav-tabs .nav-link.open:hover,
|
||||
.nav-tabs .nav-link.active:hover,
|
||||
.nav-tabs .open > .nav-link:focus,
|
||||
.nav-tabs .active > .nav-link:focus,
|
||||
.nav-tabs .nav-link.open:focus,
|
||||
.nav-tabs .nav-link.active:focus {
|
||||
color: #55595c;
|
||||
cursor: default;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
border-color: #ddd #ddd transparent;
|
||||
}
|
||||
.nav-tabs.nav-justified {
|
||||
width: 100%;
|
||||
border-bottom: 0;
|
||||
.nav-tabs .disabled > .nav-link,
|
||||
.nav-tabs .nav-link.disabled,
|
||||
.nav-tabs .disabled > .nav-link:hover,
|
||||
.nav-tabs .nav-link.disabled:hover,
|
||||
.nav-tabs .disabled > .nav-link:focus,
|
||||
.nav-tabs .nav-link.disabled:focus {
|
||||
color: #818a91;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.nav-tabs.nav-justified > li {
|
||||
float: none;
|
||||
.nav-pills {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-tabs.nav-justified > li {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-right: 0;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-tabs.nav-justified > .active > a,
|
||||
.nav-tabs.nav-justified > .active > a:hover,
|
||||
.nav-tabs.nav-justified > .active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tabs.nav-justified > .active > a,
|
||||
.nav-tabs.nav-justified > .active > a:hover,
|
||||
.nav-tabs.nav-justified > .active > a:focus {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
.nav-pills > li {
|
||||
.nav-pills .nav-item {
|
||||
float: left;
|
||||
}
|
||||
.nav-pills > li > a {
|
||||
.nav-pills .nav-item + .nav-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
.nav-pills .nav-link {
|
||||
display: block;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-pills > li.active > a,
|
||||
.nav-pills > li.active > a:hover,
|
||||
.nav-pills > li.active > a:focus {
|
||||
.nav-pills .open > .nav-link,
|
||||
.nav-pills .active > .nav-link,
|
||||
.nav-pills .nav-link.open,
|
||||
.nav-pills .nav-link.active,
|
||||
.nav-pills .open > .nav-link:hover,
|
||||
.nav-pills .active > .nav-link:hover,
|
||||
.nav-pills .nav-link.open:hover,
|
||||
.nav-pills .nav-link.active:hover,
|
||||
.nav-pills .open > .nav-link:focus,
|
||||
.nav-pills .active > .nav-link:focus,
|
||||
.nav-pills .nav-link.open:focus,
|
||||
.nav-pills .nav-link.active:focus {
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
background-color: #027de7;
|
||||
}
|
||||
.nav-stacked > li {
|
||||
.nav-stacked .nav-item {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
.nav-stacked > li + li {
|
||||
margin-top: 2px;
|
||||
.nav-stacked .nav-item + .nav-item {
|
||||
margin-top: .2rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
.nav-justified {
|
||||
width: 100%;
|
||||
}
|
||||
.nav-justified > li {
|
||||
float: none;
|
||||
}
|
||||
.nav-justified > li > a {
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-justified > .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-justified > li {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
.nav-justified > li > a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.nav-tabs-justified {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.nav-tabs-justified > li > a {
|
||||
margin-right: 0;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-tabs-justified > .active > a,
|
||||
.nav-tabs-justified > .active > a:hover,
|
||||
.nav-tabs-justified > .active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-tabs-justified > li > a {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tabs-justified > .active > a,
|
||||
.nav-tabs-justified > .active > a:hover,
|
||||
.nav-tabs-justified > .active > a:focus {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
.tab-content > .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
@ -3183,95 +3087,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.nav-tab {
|
||||
padding-left: 0;
|
||||
margin-bottom: 24px;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.nav-tab-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.nav-tab-link {
|
||||
display: block;
|
||||
padding: .5em 1em;
|
||||
margin-right: .2rem;
|
||||
line-height: 1.5;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tab-link:hover,
|
||||
.nav-tab-link:focus {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
border-color: #eceeef #eceeef #ddd;
|
||||
}
|
||||
.open > .nav-tab-link,
|
||||
.active > .nav-tab-link,
|
||||
.open > .nav-tab-link:hover,
|
||||
.active > .nav-tab-link:hover,
|
||||
.open > .nav-tab-link:focus,
|
||||
.active > .nav-tab-link:focus {
|
||||
color: #55595c;
|
||||
cursor: default;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.disabled > .nav-tab-link,
|
||||
.disabled > .nav-tab-link:hover,
|
||||
.disabled > .nav-tab-link:focus {
|
||||
color: #818a91;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.nav-pill {
|
||||
padding-left: 0;
|
||||
margin-bottom: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-pill-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.nav-pill-item + .nav-pill-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
.nav-pill-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .5em 1em;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-pill-link:hover,
|
||||
.nav-pill-link:focus {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
}
|
||||
.open > .nav-pill-link,
|
||||
.active > .nav-pill-link,
|
||||
.open > .nav-pill-link:hover,
|
||||
.active > .nav-pill-link:hover,
|
||||
.open > .nav-pill-link:focus,
|
||||
.active > .nav-pill-link:focus {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
}
|
||||
.disabled > .nav-pill-link {
|
||||
color: #818a91;
|
||||
}
|
||||
.disabled > .nav-pill-link,
|
||||
.disabled > .nav-pill-link:hover,
|
||||
.disabled > .nav-pill-link:focus {
|
||||
color: #818a91;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar {
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
@ -5128,12 +4943,6 @@ button.close {
|
||||
.btn-group-vertical > .btn-group:after,
|
||||
.nav:before,
|
||||
.nav:after,
|
||||
.nav:before,
|
||||
.nav:after,
|
||||
.nav-tab:before,
|
||||
.nav-tab:after,
|
||||
.nav-pill:before,
|
||||
.nav-pill:after,
|
||||
.navbar:before,
|
||||
.navbar:after,
|
||||
.navbar-header:before,
|
||||
@ -5156,9 +4965,6 @@ button.close {
|
||||
.btn-toolbar:after,
|
||||
.btn-group-vertical > .btn-group:after,
|
||||
.nav:after,
|
||||
.nav:after,
|
||||
.nav-tab:after,
|
||||
.nav-pill:after,
|
||||
.navbar:after,
|
||||
.navbar-header:after,
|
||||
.navbar-collapse:after,
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,58 +1,93 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="nav" class="page-header">Navs</h1>
|
||||
|
||||
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
|
||||
<p class="lead">Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
||||
|
||||
<h2 id="nav-basic">Basic nav</h2>
|
||||
<p>Uses no modifier classes. No supported active state by default, given highly customizable nature of nav styles.</p>
|
||||
<h2 id="nav-base">Base nav</h2>
|
||||
<p>Roll your own navigation style by extending the base <code>.nav</code> component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but <strong>not the active state</strong>.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav" role="tablist">
|
||||
<li>
|
||||
<a href="#">Active</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Link</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another link</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="disabled">
|
||||
<a href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 id="nav-tabs">Tabs</h2>
|
||||
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav-tab" role="tablist">
|
||||
<li class="nav-tab-item active">
|
||||
<a href="#" class="nav-tab-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-tab-item">
|
||||
<a href="#" class="nav-tab-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-tab-item">
|
||||
<a href="#" class="nav-tab-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-tab-item disabled">
|
||||
<a href="#" class="nav-tab-link">Disabled</a>
|
||||
<li class="nav-item disabled">
|
||||
<a class="nav-link" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav-tab" role="tablist">
|
||||
<li class="nav-tab-item active">
|
||||
<a href="#" class="nav-tab-link">Active</a>
|
||||
<ul class="nav" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-tab-item">
|
||||
<a href="#" class="nav-tab-link">Link</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-tab-item">
|
||||
<a href="#" class="nav-tab-link">Another link</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-tab-item disabled">
|
||||
<a href="#" class="nav-tab-link">Disabled</a>
|
||||
<li class="nav-item disabled">
|
||||
<a class="nav-link" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Classes are used so your markup can be super flexible.</p>
|
||||
<div class="bs-example">
|
||||
<nav class="nav" role="tablist">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<nav class="nav" role="tablist">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="nav-tabs">Tabs</h2>
|
||||
<p>Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
@ -64,78 +99,70 @@
|
||||
<h2 id="nav-pills">Pills</h2>
|
||||
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav-pill" role="tablist">
|
||||
<li class="nav-pill-item active">
|
||||
<a href="#" class="nav-pill-link">Active</a>
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Link</a>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Another link</a>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item disabled">
|
||||
<a href="#" class="nav-pill-link">Disabled</a>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav-pill" role="tablist">
|
||||
<li class="nav-pill-item active">
|
||||
<a href="#" class="nav-pill-link">Active</a>
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Link</a>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Another link</a>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item disabled">
|
||||
<a href="#" class="nav-pill-link">Disabled</a>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
|
||||
<h2 id="nav-pills-stacked">Stacked pills</h2>
|
||||
<p>Just add <code>.nav-stacked</code>.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist" 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 class="nav nav-pills nav-stacked" role="tablist">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist">
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="nav-justified">Justified</h2>
|
||||
<p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Safari and responsive justified navs</h4>
|
||||
<p>As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
|
||||
</div>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-tabs nav-justified" role="tablist">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
<br>
|
||||
<ul class="nav nav-pills nav-justified" role="tablist">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs nav-justified" role="tablist">
|
||||
...
|
||||
</ul>
|
||||
<ul class="nav nav-pills nav-justified" role="tablist">
|
||||
...
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
@ -41,10 +41,9 @@
|
||||
<li>
|
||||
<a href="#nav">Navs</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#nav-base">Base nav</a></li>
|
||||
<li><a href="#nav-tabs">Tabs</a></li>
|
||||
<li><a href="#nav-pills">Pills</a></li>
|
||||
<li><a href="#nav-justified">Justified nav</a></li>
|
||||
<li><a href="#nav-disabled-links">Disabled links</a></li>
|
||||
<li><a href="#nav-dropdowns">Using dropdowns</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/assets/js/docs.min.js
vendored
2
docs/assets/js/docs.min.js
vendored
@ -21,4 +21,4 @@ var Holder=Holder||{};!function(a,b){function c(a,b,c){b=parseInt(b,10),a=parseI
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
!function(a){"use strict";a(function(){var b=a(window),c=a(document.body);c.scrollspy({target:".active .bs-docs-sidenav"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()})(function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle"),d=function(){b.attr("href",b.attr("data-href")),c.text("Disable theme preview"),localStorage.setItem("previewTheme",!0)};localStorage.getItem("previewTheme")&&d(),c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme"),localStorage.removeItem("previewTheme")):d()})}),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a(".bs-docs-popover-dismiss").popover({trigger:"focus"}),a("#loading-example-btn").click(function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b=a(this),c=b.prev(),d='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';c.hasClass("bs-example")?c.before(d.replace(/btn-clipboard/,"btn-clipboard with-example")):b.before(d)});var d=new ZeroClipboard(a(".btn-clipboard")),e=a("#global-zeroclipboard-html-bridge");d.on("load",function(){e.data("placement","top").attr("title","Copy to clipboard").tooltip()}),d.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),d.on("complete",function(){e.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),d.on("noflash wrongflash",function(){e.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);
|
||||
!function(a){"use strict";a(function(){var b=a(window),c=a("document.body");c.scrollspy({target:".active .bs-docs-sidenav"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()})(function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle"),d=function(){b.attr("href",b.attr("data-href")),c.text("Disable theme preview"),localStorage.setItem("previewTheme",!0)};localStorage.getItem("previewTheme")&&d(),c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme"),localStorage.removeItem("previewTheme")):d()})}),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a(".bs-docs-popover-dismiss").popover({trigger:"focus"}),a("#loading-example-btn").click(function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b=a(this),c=b.prev(),d='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';c.hasClass("bs-example")?c.before(d.replace(/btn-clipboard/,"btn-clipboard with-example")):b.before(d)});var d=new ZeroClipboard(a(".btn-clipboard")),e=a("#global-zeroclipboard-html-bridge");d.on("load",function(){e.data("placement","top").attr("title","Copy to clipboard").tooltip()}),d.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),d.on("complete",function(){e.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),d.on("noflash wrongflash",function(){e.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
// Scrollspy
|
||||
var $window = $(window)
|
||||
var $body = $(document.body)
|
||||
var $body = $('document.body')
|
||||
|
||||
$body.scrollspy({
|
||||
target: '.active .bs-docs-sidenav'
|
||||
|
||||
@ -916,6 +916,7 @@ h1[id] {
|
||||
}
|
||||
|
||||
// Tweak content of examples for optimum awesome
|
||||
.bs-example > *:last-child,
|
||||
.bs-example > p:last-child,
|
||||
.bs-example > ul:last-child,
|
||||
.bs-example > ol:last-child,
|
||||
@ -930,7 +931,7 @@ h1[id] {
|
||||
.bs-example > .well:last-child,
|
||||
.bs-example > .progress:last-child,
|
||||
.bs-example > .table-responsive:last-child > .table {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.bs-example > p > .close {
|
||||
float: none;
|
||||
|
||||
322
docs/dist/css/bootstrap.css
vendored
322
docs/dist/css/bootstrap.css
vendored
@ -2963,15 +2963,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
.nav-link {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
padding: .5em 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -2980,198 +2979,103 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
}
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.open > .nav-link:hover,
|
||||
.active > .nav-link:hover,
|
||||
.open > .nav-link:focus,
|
||||
.active > .nav-link:focus {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
}
|
||||
.disabled > .nav-link {
|
||||
.disabled > .nav-link,
|
||||
.nav-link.disabled {
|
||||
color: #818a91;
|
||||
}
|
||||
.disabled > .nav-link,
|
||||
.nav-link.disabled,
|
||||
.disabled > .nav-link:hover,
|
||||
.disabled > .nav-link:focus {
|
||||
.nav-link.disabled:hover,
|
||||
.disabled > .nav-link:focus,
|
||||
.nav-link.disabled:focus {
|
||||
color: #818a91;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .5em 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:focus {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
}
|
||||
.nav > li.disabled > a {
|
||||
color: #818a91;
|
||||
}
|
||||
.nav > li.disabled > a:hover,
|
||||
.nav > li.disabled > a:focus {
|
||||
color: #818a91;
|
||||
text-decoration: none;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav .open > a,
|
||||
.nav .open > a:hover,
|
||||
.nav .open > a:focus {
|
||||
background-color: #eceeef;
|
||||
border-color: #027de7;
|
||||
}
|
||||
.nav-tabs {
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.nav-tabs > li {
|
||||
.nav-tabs .nav-item {
|
||||
float: left;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.nav-tabs > li > a {
|
||||
margin-right: 2px;
|
||||
line-height: 1.5;
|
||||
.nav-tabs .nav-item + .nav-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
.nav-tabs .nav-link {
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tabs > li > a:hover {
|
||||
.nav-tabs .nav-link:hover,
|
||||
.nav-tabs .nav-link:focus {
|
||||
border-color: #eceeef #eceeef #ddd;
|
||||
}
|
||||
.nav-tabs > li.active > a,
|
||||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.active > a:focus {
|
||||
.nav-tabs .open > .nav-link,
|
||||
.nav-tabs .active > .nav-link,
|
||||
.nav-tabs .nav-link.open,
|
||||
.nav-tabs .nav-link.active,
|
||||
.nav-tabs .open > .nav-link:hover,
|
||||
.nav-tabs .active > .nav-link:hover,
|
||||
.nav-tabs .nav-link.open:hover,
|
||||
.nav-tabs .nav-link.active:hover,
|
||||
.nav-tabs .open > .nav-link:focus,
|
||||
.nav-tabs .active > .nav-link:focus,
|
||||
.nav-tabs .nav-link.open:focus,
|
||||
.nav-tabs .nav-link.active:focus {
|
||||
color: #55595c;
|
||||
cursor: default;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
border-color: #ddd #ddd transparent;
|
||||
}
|
||||
.nav-tabs.nav-justified {
|
||||
width: 100%;
|
||||
border-bottom: 0;
|
||||
.nav-tabs .disabled > .nav-link,
|
||||
.nav-tabs .nav-link.disabled,
|
||||
.nav-tabs .disabled > .nav-link:hover,
|
||||
.nav-tabs .nav-link.disabled:hover,
|
||||
.nav-tabs .disabled > .nav-link:focus,
|
||||
.nav-tabs .nav-link.disabled:focus {
|
||||
color: #818a91;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.nav-tabs.nav-justified > li {
|
||||
float: none;
|
||||
.nav-pills {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-tabs.nav-justified > li {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-right: 0;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-tabs.nav-justified > .active > a,
|
||||
.nav-tabs.nav-justified > .active > a:hover,
|
||||
.nav-tabs.nav-justified > .active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tabs.nav-justified > .active > a,
|
||||
.nav-tabs.nav-justified > .active > a:hover,
|
||||
.nav-tabs.nav-justified > .active > a:focus {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
.nav-pills > li {
|
||||
.nav-pills .nav-item {
|
||||
float: left;
|
||||
}
|
||||
.nav-pills > li > a {
|
||||
.nav-pills .nav-item + .nav-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
.nav-pills .nav-link {
|
||||
display: block;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-pills > li.active > a,
|
||||
.nav-pills > li.active > a:hover,
|
||||
.nav-pills > li.active > a:focus {
|
||||
.nav-pills .open > .nav-link,
|
||||
.nav-pills .active > .nav-link,
|
||||
.nav-pills .nav-link.open,
|
||||
.nav-pills .nav-link.active,
|
||||
.nav-pills .open > .nav-link:hover,
|
||||
.nav-pills .active > .nav-link:hover,
|
||||
.nav-pills .nav-link.open:hover,
|
||||
.nav-pills .nav-link.active:hover,
|
||||
.nav-pills .open > .nav-link:focus,
|
||||
.nav-pills .active > .nav-link:focus,
|
||||
.nav-pills .nav-link.open:focus,
|
||||
.nav-pills .nav-link.active:focus {
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
background-color: #027de7;
|
||||
}
|
||||
.nav-stacked > li {
|
||||
.nav-stacked .nav-item {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
.nav-stacked > li + li {
|
||||
margin-top: 2px;
|
||||
.nav-stacked .nav-item + .nav-item {
|
||||
margin-top: .2rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
.nav-justified {
|
||||
width: 100%;
|
||||
}
|
||||
.nav-justified > li {
|
||||
float: none;
|
||||
}
|
||||
.nav-justified > li > a {
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-justified > .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-justified > li {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
.nav-justified > li > a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.nav-tabs-justified {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.nav-tabs-justified > li > a {
|
||||
margin-right: 0;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-tabs-justified > .active > a,
|
||||
.nav-tabs-justified > .active > a:hover,
|
||||
.nav-tabs-justified > .active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-tabs-justified > li > a {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tabs-justified > .active > a,
|
||||
.nav-tabs-justified > .active > a:hover,
|
||||
.nav-tabs-justified > .active > a:focus {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
.tab-content > .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
@ -3183,95 +3087,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.nav-tab {
|
||||
padding-left: 0;
|
||||
margin-bottom: 24px;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.nav-tab-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.nav-tab-link {
|
||||
display: block;
|
||||
padding: .5em 1em;
|
||||
margin-right: .2rem;
|
||||
line-height: 1.5;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tab-link:hover,
|
||||
.nav-tab-link:focus {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
border-color: #eceeef #eceeef #ddd;
|
||||
}
|
||||
.open > .nav-tab-link,
|
||||
.active > .nav-tab-link,
|
||||
.open > .nav-tab-link:hover,
|
||||
.active > .nav-tab-link:hover,
|
||||
.open > .nav-tab-link:focus,
|
||||
.active > .nav-tab-link:focus {
|
||||
color: #55595c;
|
||||
cursor: default;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.disabled > .nav-tab-link,
|
||||
.disabled > .nav-tab-link:hover,
|
||||
.disabled > .nav-tab-link:focus {
|
||||
color: #818a91;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.nav-pill {
|
||||
padding-left: 0;
|
||||
margin-bottom: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-pill-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.nav-pill-item + .nav-pill-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
.nav-pill-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .5em 1em;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-pill-link:hover,
|
||||
.nav-pill-link:focus {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
}
|
||||
.open > .nav-pill-link,
|
||||
.active > .nav-pill-link,
|
||||
.open > .nav-pill-link:hover,
|
||||
.active > .nav-pill-link:hover,
|
||||
.open > .nav-pill-link:focus,
|
||||
.active > .nav-pill-link:focus {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
}
|
||||
.disabled > .nav-pill-link {
|
||||
color: #818a91;
|
||||
}
|
||||
.disabled > .nav-pill-link,
|
||||
.disabled > .nav-pill-link:hover,
|
||||
.disabled > .nav-pill-link:focus {
|
||||
color: #818a91;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar {
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
@ -5128,12 +4943,6 @@ button.close {
|
||||
.btn-group-vertical > .btn-group:after,
|
||||
.nav:before,
|
||||
.nav:after,
|
||||
.nav:before,
|
||||
.nav:after,
|
||||
.nav-tab:before,
|
||||
.nav-tab:after,
|
||||
.nav-pill:before,
|
||||
.nav-pill:after,
|
||||
.navbar:before,
|
||||
.navbar:after,
|
||||
.navbar-header:before,
|
||||
@ -5156,9 +4965,6 @@ button.close {
|
||||
.btn-toolbar:after,
|
||||
.btn-group-vertical > .btn-group:after,
|
||||
.nav:after,
|
||||
.nav:after,
|
||||
.nav-tab:after,
|
||||
.nav-pill:after,
|
||||
.navbar:after,
|
||||
.navbar-header:after,
|
||||
.navbar-collapse:after,
|
||||
|
||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
less/bootstrap.less
vendored
2
less/bootstrap.less
vendored
@ -21,8 +21,6 @@
|
||||
@import "button-groups.less";
|
||||
@import "input-groups.less";
|
||||
@import "navs.less";
|
||||
@import "nav-tab.less";
|
||||
@import "nav-pill.less";
|
||||
@import "navbar.less";
|
||||
@import "breadcrumbs.less";
|
||||
@import "pagination.less";
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
// Pill nav
|
||||
//
|
||||
// Horizontal navigation with large (rounded) rectangle hit areas for links.
|
||||
|
||||
.nav-pill {
|
||||
.list-unstyled();
|
||||
margin-bottom: @line-height-computed;
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
.nav-pill-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
& + & {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pill-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: @nav-link-padding;
|
||||
.border-radius(@nav-pills-border-radius);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: @nav-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Open dropdown and active states
|
||||
.open,
|
||||
.active {
|
||||
> .nav-pill-link {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-pills-active-link-hover-color;
|
||||
background-color: @nav-pills-active-link-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
.disabled {
|
||||
> .nav-pill-link {
|
||||
color: @nav-disabled-link-color;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-disabled-link-hover-color;
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
// Pill nav
|
||||
//
|
||||
// Horizontal navigation with large top-aligned tab visuals.
|
||||
|
||||
.nav-tab {
|
||||
.list-unstyled();
|
||||
margin-bottom: @line-height-computed;
|
||||
border-bottom: 1px solid @nav-tabs-border-color;
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
.nav-tab-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
// Make the list-items overlay the bottom border
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.nav-tab-link {
|
||||
display: block;
|
||||
padding: @nav-link-padding;
|
||||
margin-right: .2rem;
|
||||
line-height: @line-height-base;
|
||||
border: 1px solid transparent;
|
||||
.border-radius(@border-radius-base @border-radius-base 0 0);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: @nav-link-hover-bg;
|
||||
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Open dropdown and active states
|
||||
.open,
|
||||
.active {
|
||||
> .nav-tab-link {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-tabs-active-link-hover-color;
|
||||
background-color: @nav-tabs-active-link-hover-bg;
|
||||
border: 1px solid @nav-tabs-active-link-hover-border-color;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
.disabled {
|
||||
> .nav-tab-link {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-disabled-link-color;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
272
less/navs.less
272
less/navs.less
@ -2,24 +2,18 @@
|
||||
// Navs
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// - Mixins for horizontal and vertical nav
|
||||
// - Classes for tabs and pills
|
||||
|
||||
|
||||
.nav {
|
||||
margin-bottom: @line-height-computed;
|
||||
.list-unstyled();
|
||||
&:extend(.clearfix all);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
padding: @nav-link-padding;
|
||||
line-height: @line-height-base;
|
||||
|
||||
@ -29,19 +23,9 @@
|
||||
background-color: @nav-link-hover-bg;
|
||||
}
|
||||
|
||||
// Open dropdown and active states
|
||||
.open > &,
|
||||
.active > & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @component-active-color;
|
||||
background-color: @component-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
.disabled > & {
|
||||
.disabled > &,
|
||||
&.disabled {
|
||||
color: @nav-disabled-link-color;
|
||||
|
||||
&,
|
||||
@ -55,209 +39,111 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Base class
|
||||
// --------------------------------------------------
|
||||
|
||||
.nav {
|
||||
margin-bottom: 0;
|
||||
padding-left: 0; // Override default ul/ol
|
||||
list-style: none;
|
||||
&:extend(.clearfix all);
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: @nav-link-padding;
|
||||
line-height: @line-height-base;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: @nav-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
&.disabled > a {
|
||||
color: @nav-disabled-link-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-disabled-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open dropdowns
|
||||
.open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @nav-link-hover-bg;
|
||||
border-color: @link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tabs
|
||||
// -------------------------
|
||||
//
|
||||
|
||||
// Give the tabs something to sit on
|
||||
.nav-tabs {
|
||||
margin-bottom: @line-height-computed;
|
||||
border-bottom: 1px solid @nav-tabs-border-color;
|
||||
> li {
|
||||
|
||||
.nav-item {
|
||||
float: left;
|
||||
// Make the list-items overlay the bottom border
|
||||
margin-bottom: -1px;
|
||||
|
||||
// Actual tabs (as links)
|
||||
> a {
|
||||
margin-right: 2px;
|
||||
line-height: @line-height-base;
|
||||
border: 1px solid transparent;
|
||||
.border-radius(@border-radius-base @border-radius-base 0 0);
|
||||
&:hover {
|
||||
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state, and its :hover to override normal :hover
|
||||
&.active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-tabs-active-link-hover-color;
|
||||
background-color: @nav-tabs-active-link-hover-bg;
|
||||
border: 1px solid @nav-tabs-active-link-hover-border-color;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
+ .nav-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
}
|
||||
// pulling this in mainly for less shorthand
|
||||
&.nav-justified {
|
||||
.nav-justified();
|
||||
.nav-tabs-justified();
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
.border-radius(@border-radius-base @border-radius-base 0 0);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-tabs-active-link-hover-color;
|
||||
background-color: @nav-tabs-active-link-hover-bg;
|
||||
border-color: @nav-tabs-active-link-hover-border-color @nav-tabs-active-link-hover-border-color transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled > .nav-link,
|
||||
.nav-link.disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-disabled-link-color;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Pills
|
||||
// -------------------------
|
||||
//
|
||||
|
||||
.nav-pills {
|
||||
> li {
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
.nav-item {
|
||||
float: left;
|
||||
|
||||
// Links rendered as pills
|
||||
> a {
|
||||
.border-radius(@nav-pills-border-radius);
|
||||
}
|
||||
+ li {
|
||||
margin-left: 2px;
|
||||
+ .nav-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @nav-pills-active-link-hover-color;
|
||||
background-color: @nav-pills-active-link-hover-bg;
|
||||
}
|
||||
.nav-link {
|
||||
display: block;
|
||||
.border-radius(@nav-pills-border-radius);
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @component-active-color;
|
||||
background-color: @component-active-bg;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Stacked pills
|
||||
.nav-stacked {
|
||||
> li {
|
||||
.nav-item {
|
||||
float: none;
|
||||
+ li {
|
||||
margin-top: 2px;
|
||||
margin-left: 0; // no need for this gap between nav items
|
||||
display: block;
|
||||
|
||||
+ .nav-item {
|
||||
margin-top: .2rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Nav variations
|
||||
// --------------------------------------------------
|
||||
|
||||
// Justified nav links
|
||||
// -------------------------
|
||||
|
||||
.nav-justified {
|
||||
width: 100%;
|
||||
|
||||
> li {
|
||||
float: none;
|
||||
> a {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
> li {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
> a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Move borders to anchors instead of bottom of list
|
||||
//
|
||||
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
|
||||
.nav-tabs-justified {
|
||||
border-bottom: 0;
|
||||
|
||||
> li > a {
|
||||
// Override margin from .nav-tabs
|
||||
margin-right: 0;
|
||||
.border-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
> .active > a,
|
||||
> .active > a:hover,
|
||||
> .active > a:focus {
|
||||
border: 1px solid @nav-tabs-justified-link-border-color;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
> li > a {
|
||||
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
|
||||
.border-radius(@border-radius-base @border-radius-base 0 0);
|
||||
}
|
||||
> .active > a,
|
||||
> .active > a:hover,
|
||||
> .active > a:focus {
|
||||
border-bottom-color: @nav-tabs-justified-active-link-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tabbable tabs
|
||||
// -------------------------
|
||||
//
|
||||
|
||||
// Hide tabbable panes to start, show them when `.active`
|
||||
.tab-content {
|
||||
@ -270,12 +156,12 @@
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
//
|
||||
|
||||
// Specific dropdowns
|
||||
.nav-tabs .dropdown-menu {
|
||||
// make dropdown border overlap tab border
|
||||
// Make dropdown border overlap tab border
|
||||
margin-top: -1px;
|
||||
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||
.border-top-radius(0);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user