mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 16:14:04 +02:00
Code Issues Releases Wiki Activity

Merge branch 'v4-navbars' of https://github.com/twbs/bootstrap into v4-navbars

Browse Source
This commit is contained in:
Mark Otto
2016-05-14 12:41:48 -07:00
parent f98f9c9155 05bdecd0b0
commit 9c0c5fd9b1
3 changed files with 34 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/components/navbar.md
View File

@@ -109,6 +109,34 @@ And because we use classes for our navs, you can avoid the list-based approach e
</nav> </nav>
{% endexample %} {% endexample %}
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
{% endexample %}
## Color schemes ## Color schemes

6
scss/_navbar.scss
View File

@@ -87,8 +87,8 @@
.navbar-divider { .navbar-divider {
float: left; float: left;
width: $border-width; width: $border-width;
padding-top: .425rem; padding-top: $navbar-divider-padding-y;
padding-bottom: .425rem; padding-bottom: $navbar-divider-padding-y;
margin-right: $navbar-padding-x; margin-right: $navbar-padding-x;
margin-left: $navbar-padding-x; margin-left: $navbar-padding-x;
overflow: hidden; overflow: hidden;
@@ -105,7 +105,7 @@
// Bootstrap JavaScript plugin. // Bootstrap JavaScript plugin.
.navbar-toggler { .navbar-toggler {
padding: .5rem .75rem; padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
font-size: $navbar-toggler-font-size; font-size: $navbar-toggler-font-size;
line-height: 1; line-height: 1;
background: none; background: none;

3
scss/_variables.scss
View File

@@ -477,8 +477,11 @@ $zindex-modal: 1050 !default;
$navbar-border-radius: $border-radius !default; $navbar-border-radius: $border-radius !default;
$navbar-padding-x: $spacer !default; $navbar-padding-x: $spacer !default;
$navbar-padding-y: ($spacer / 2) !default; $navbar-padding-y: ($spacer / 2) !default;
$navbar-brand-padding-y: .25rem !default; $navbar-brand-padding-y: .25rem !default;
$navbar-divider-padding-y: .425rem !default;
$navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default; $navbar-toggler-border-radius: $btn-border-radius !default;