kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Merge pull request #18783 from twbs/v4-nav-cleanup

Browse source 
v4: Nav cleanup
This commit is contained in:
Mark Otto 2016-01-06 15:55:49 -08:00
commit 416efb8538
3 changed files with 57 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
docs/components/navs.md
View file

@ -22,13 +22,13 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
{% example html %} {% example html %}
<ul class="nav"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Another link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
@ -42,20 +42,20 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
<nav class="nav"> <nav class="nav">
<a class="nav-link active" href="#">Active</a> <a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</nav> </nav>
{% endexample %} {% endexample %}
## Inline ## Inline
Easily space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line. Space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
{% example html %} {% example html %}
<nav class="nav nav-inline"> <nav class="nav nav-inline">
<a class="nav-link active" href="#">Active</a> <a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a> <a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</nav> </nav>
{% endexample %} {% endexample %}
@ -65,13 +65,13 @@ The same works for a navigation built with lists.
{% example html %} {% example html %}
<ul class="nav nav-inline"> <ul class="nav nav-inline">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Another link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
@ -92,7 +92,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Another link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
@ -113,7 +113,7 @@ Take that same HTML, but use `.nav-pills` instead:
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Another link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
@ -121,9 +121,9 @@ Take that same HTML, but use `.nav-pills` instead:
</ul> </ul>
{% endexample %} {% endexample %}
## Stacked pills ### Stacked pills
Just add `.nav-stacked` to the `.nav.nav-pills`. Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-link` becomes block-level, allowing for larger hit areas via mouse or tap.
{% example html %} {% example html %}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
@ -134,7 +134,7 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Another link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
@ -142,6 +142,17 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
</ul> </ul>
{% endexample %} {% endexample %}
As always, stacked pills are possible without `<ul>`s.
{% example html %}
<nav class="nav nav-pills nav-stacked">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
## Using dropdowns ## Using dropdowns
Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage). Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage).
@ -164,7 +175,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Another link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
@ -190,7 +201,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Another link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>

33
scss/_nav.scss
View file

@ -23,7 +23,7 @@
@include plain-hover-focus { @include plain-hover-focus {
color: $nav-disabled-link-hover-color; color: $nav-disabled-link-hover-color;
cursor: $cursor-disabled; cursor: $cursor-disabled;
background-color: transparent; background-color: $nav-disabled-link-hover-bg;
} }
} }
} }
@ -38,7 +38,7 @@
.nav-item + .nav-item, .nav-item + .nav-item,
.nav-link + .nav-link { .nav-link + .nav-link {
margin-left: 1rem; margin-left: $nav-item-inline-spacer;
} }
} }
@ -48,13 +48,13 @@
// //
.nav-tabs { .nav-tabs {
border-bottom: 1px solid $nav-tabs-border-color; border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
@include clearfix(); @include clearfix();
.nav-item { .nav-item {
float: left; float: left;
// Make the list-items overlay the bottom border // Make the list-items overlay the bottom border
margin-bottom: -1px; margin-bottom: -$nav-tabs-border-width;
+ .nav-item { + .nav-item {
margin-left: $nav-item-margin; margin-left: $nav-item-margin;
@ -64,7 +64,7 @@
.nav-link { .nav-link {
display: block; display: block;
padding: $nav-link-padding; padding: $nav-link-padding;
border: $nav-tabs-link-border-width solid transparent; border: $nav-tabs-border-width solid transparent;
@include border-radius($border-radius $border-radius 0 0); @include border-radius($border-radius $border-radius 0 0);
@include hover-focus { @include hover-focus {
@ -88,6 +88,13 @@
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent; border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
} }
} }
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: -$nav-tabs-border-width;
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
} }
@ -115,9 +122,9 @@
.nav-link.active, .nav-link.active,
.nav-item.open .nav-link { .nav-item.open .nav-link {
@include plain-hover-focus { @include plain-hover-focus {
color: $component-active-color; color: $nav-pills-active-link-color;
cursor: default; cursor: default;
background-color: $component-active-bg; background-color: $nav-pills-active-link-bg;
} }
} }
} }
@ -148,15 +155,3 @@
display: block; display: block;
} }
} }
//
// Dropdowns
//
.nav-tabs .dropdown-menu {
// Make dropdown border overlap tab border
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}

15
scss/_variables.scss
View file

@ -389,28 +389,25 @@ $navbar-light-disabled-color: rgba(0,0,0,.15) !default;
// Navs // Navs
$nav-item-margin: .2rem !default; $nav-item-margin: .2rem !default;
$nav-item-inline-spacer: 1rem !default;
$nav-link-padding: .5em 1em !default; $nav-link-padding: .5em 1em !default;
$nav-link-hover-bg: $gray-lighter !default; $nav-link-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default; $nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default; $nav-disabled-link-hover-color: $gray-light !default;
$nav-disabled-link-hover-bg: transparent !default;
$nav-tabs-border-color: #ddd !default; $nav-tabs-border-color: #ddd !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-link-border-width: $border-width !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default; $nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-hover-bg: $body-bg !default;
$nav-tabs-active-link-hover-color: $gray !default; $nav-tabs-active-link-hover-color: $gray !default;
$nav-tabs-active-link-hover-bg: $body-bg !default;
$nav-tabs-active-link-hover-border-color: #ddd !default; $nav-tabs-active-link-hover-border-color: #ddd !default;
$nav-tabs-justified-link-border-color: #ddd !default; $nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default; $nav-tabs-justified-active-link-border-color: $body-bg !default;
$nav-pills-border-radius: $border-radius !default; $nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-hover-bg: $component-active-bg !default; $nav-pills-active-link-color: $component-active-color !default;
$nav-pills-active-link-hover-color: $component-active-color !default; $nav-pills-active-link-bg: $component-active-bg !default;
// Pagination // Pagination