rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages 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 %}
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<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">
<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" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
## 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 %}
<nav class="nav nav-inline">
<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" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
@ -65,13 +65,13 @@ The same works for a navigation built with lists.
{% example html %}
<ul class="nav nav-inline">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<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>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<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>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
@ -121,9 +121,9 @@ Take that same HTML, but use `.nav-pills` instead:
</ul>
{% 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 %}
<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>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
@ -142,6 +142,17 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
</ul>
{% 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
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>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<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>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>

33
scss/_nav.scss
View File

@ -23,7 +23,7 @@
@include plain-hover-focus {
color: $nav-disabled-link-hover-color;
cursor: $cursor-disabled;
background-color: transparent;
background-color: $nav-disabled-link-hover-bg;
}
}
}
@ -38,7 +38,7 @@
.nav-item + .nav-item,
.nav-link + .nav-link {
margin-left: 1rem;
margin-left: $nav-item-inline-spacer;
}
}
@ -48,13 +48,13 @@
//
.nav-tabs {
border-bottom: 1px solid $nav-tabs-border-color;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
@include clearfix();
.nav-item {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -1px;
margin-bottom: -$nav-tabs-border-width;
+ .nav-item {
margin-left: $nav-item-margin;
@ -64,7 +64,7 @@
.nav-link {
display: block;
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 hover-focus {
@ -88,6 +88,13 @@
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-item.open .nav-link {
@include plain-hover-focus {
color: $component-active-color;
color: $nav-pills-active-link-color;
cursor: default;
background-color: $component-active-bg;
background-color: $nav-pills-active-link-bg;
}
}
}
@ -148,15 +155,3 @@
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);
}

39
scss/_variables.scss
View File

@ -388,29 +388,26 @@ $navbar-light-disabled-color: rgba(0,0,0,.15) !default;
// 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-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
$nav-disabled-link-hover-bg: transparent !default;
$nav-link-padding: .5em 1em !default;
$nav-link-hover-bg: $gray-lighter !default;
$nav-tabs-border-color: #ddd !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-link-hover-border-color: $gray-lighter !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-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;
$nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
$nav-tabs-border-color: #ddd !default;
$nav-tabs-link-border-width: $border-width !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-border-color: #ddd !default;
$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-hover-bg: $component-active-bg !default;
$nav-pills-active-link-hover-color: $component-active-color !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-color: $component-active-color !default;
$nav-pills-active-link-bg: $component-active-bg !default;
// Pagination