mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
move tabs and pills to separate files with unique classes
This commit is contained in:
Mark Otto
parent
6c7a6b4691
commit
0e47ce959c
10 changed files with 374 additions and 20 deletions
95
dist/css/bootstrap.css
vendored
95
dist/css/bootstrap.css
vendored
|
|
@ -3171,6 +3171,95 @@ 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: 10px 15px;
|
||||
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: 10px 15px;
|
||||
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;
|
||||
|
|
@ -4947,6 +5036,10 @@ button.close {
|
|||
.btn-group-vertical > .btn-group:after,
|
||||
.nav:before,
|
||||
.nav:after,
|
||||
.nav-tab:before,
|
||||
.nav-tab:after,
|
||||
.nav-pill:before,
|
||||
.nav-pill:after,
|
||||
.navbar:before,
|
||||
.navbar:after,
|
||||
.navbar-header:before,
|
||||
|
|
@ -4969,6 +5062,8 @@ button.close {
|
|||
.btn-toolbar:after,
|
||||
.btn-group-vertical > .btn-group: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
|
|
@ -6,17 +6,35 @@
|
|||
<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 nav-tabs" role="tablist">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
<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>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
<div class="bs-callout bs-callout-info">
|
||||
|
|
@ -27,19 +45,38 @@
|
|||
<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 nav-pills" role="tablist">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
<ul class="nav-pill" role="tablist">
|
||||
<li class="nav-pill-item active">
|
||||
<a href="#" class="nav-pill-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item disabled">
|
||||
<a href="#" class="nav-pill-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
<ul class="nav-pill" role="tablist">
|
||||
<li class="nav-pill-item active">
|
||||
<a href="#" class="nav-pill-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item disabled">
|
||||
<a href="#" class="nav-pill-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
|
||||
|
|
|
|||
95
docs/dist/css/bootstrap.css
vendored
95
docs/dist/css/bootstrap.css
vendored
|
|
@ -3171,6 +3171,95 @@ 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: 10px 15px;
|
||||
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: 10px 15px;
|
||||
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;
|
||||
|
|
@ -4947,6 +5036,10 @@ button.close {
|
|||
.btn-group-vertical > .btn-group:after,
|
||||
.nav:before,
|
||||
.nav:after,
|
||||
.nav-tab:before,
|
||||
.nav-tab:after,
|
||||
.nav-pill:before,
|
||||
.nav-pill:after,
|
||||
.navbar:before,
|
||||
.navbar:after,
|
||||
.navbar-header:before,
|
||||
|
|
@ -4969,6 +5062,8 @@ button.close {
|
|||
.btn-toolbar:after,
|
||||
.btn-group-vertical > .btn-group: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,6 +21,8 @@
|
|||
@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";
|
||||
|
|
|
|||
60
less/nav-pill.less
Normal file
60
less/nav-pill.less
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
65
less/nav-tab.less
Normal file
65
less/nav-tab.less
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue