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 branch 'v4-navbars' of github.com:twbs/bootstrap into v4-navbars

Browse Source
This commit is contained in:
Mark Otto 2016-10-16 19:46:55 -07:00
commit 247ad23e97
3 changed files with 76 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
docs/components/navbar.md
View File

@ -69,13 +69,14 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand mb-0">Navbar</h1>
</nav>
{% endexample %}
### Nav
Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.
Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
@ -136,6 +137,38 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
</nav>
{% endexample %}
### Text
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
{% endexample %}
Using our utility classes, you can change the alignment and appearance of your navbar text.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<span class="navbar-text pull-xs-right text-muted">
Muted navbar text that's floated right
</span>
</nav>
{% endexample %}
Similarly, you can use utility classes to align navbar text to other navbar elements like the brand and navigation (which are automatically floated already).
{% example html %}
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<span class="navbar-text pull-xs-left">
Navbar text that's floated left
</span>
</nav>
{% endexample %}
## Color schemes

36
scss/_navbar.scss
View File

@ -99,6 +99,17 @@
}
// Navbar text
//
//
.navbar-text {
display: inline-block;
padding-top: .425rem;
padding-bottom: .425rem;
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
@ -120,6 +131,31 @@
}
}
// scss-lint:disable ImportantRule
// Custom override for
.navbar-toggleable {
&-xs {
@include clearfix;
@include media-breakpoint-up(sm) {
display: block !important;
}
}
&-sm {
@include clearfix;
@include media-breakpoint-up(md) {
display: block !important;
}
}
&-md {
@include clearfix;
@include media-breakpoint-up(lg) {
display: block !important;
}
}
}
// scss-lint:enable ImportantRule
// Navigation
//
// Custom navbar navigation built on the base `.nav` styles.

10
scss/_variables.scss
View File

@ -500,6 +500,8 @@ $navbar-brand-padding-y: .25rem !default;
$navbar-divider-padding-y: .425rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-padding-y: .5rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-padding-x: .75rem !default;
@ -511,10 +513,10 @@ $navbar-dark-active-color: rgba(255,255,255,1) !default;
$navbar-dark-disabled-color: rgba(255,255,255,.25) !default;
$navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;
$navbar-light-color: rgba(0,0,0,.3) !default;
$navbar-light-hover-color: rgba(0,0,0,.6) !default;
$navbar-light-active-color: rgba(0,0,0,.8) !default;
$navbar-light-disabled-color: rgba(0,0,0,.15) !default;
$navbar-light-color: rgba(0,0,0,.5) !default;
$navbar-light-hover-color: rgba(0,0,0,.7) !default;
$navbar-light-active-color: rgba(0,0,0,.9) !default;
$navbar-light-disabled-color: rgba(0,0,0,.3) !default;
$navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default;