mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-06 04:08:22 +01:00
clean up and simplify support for bottom navbar by automagically turning dropdowns into dropups
This commit is contained in:
parent
20221a67c2
commit
8bd67bb124
Binary file not shown.
8
docs/assets/css/bootstrap.css
vendored
8
docs/assets/css/bootstrap.css
vendored
@ -1867,12 +1867,12 @@ table .span24 {
|
|||||||
left: auto;
|
left: auto;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
.dropup .caret {
|
.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
border-bottom: 4px solid #000000;
|
border-bottom: 4px solid #000000;
|
||||||
content: "\2191";
|
content: "\2191";
|
||||||
}
|
}
|
||||||
.dropup .dropdown-menu {
|
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
|
||||||
top: auto;
|
top: auto;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
margin-bottom: 1px;
|
margin-bottom: 1px;
|
||||||
@ -2945,14 +2945,14 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
|
|||||||
top: -6px;
|
top: -6px;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
}
|
}
|
||||||
.navbar .dropdown-menu.bottom-up:before {
|
.navbar-fixed-bottom .dropdown-menu:before {
|
||||||
border-top: 7px solid #ccc;
|
border-top: 7px solid #ccc;
|
||||||
border-top-color: rgba(0, 0, 0, 0.2);
|
border-top-color: rgba(0, 0, 0, 0.2);
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
bottom: -7px;
|
bottom: -7px;
|
||||||
top: auto;
|
top: auto;
|
||||||
}
|
}
|
||||||
.navbar .dropdown-menu.bottom-up:after {
|
.navbar-fixed-bottom .dropdown-menu:after {
|
||||||
border-top: 6px solid #ffffff;
|
border-top: 6px solid #ffffff;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
bottom: -6px;
|
bottom: -6px;
|
||||||
|
@ -898,16 +898,6 @@
|
|||||||
<li><a href="#">One more separated link</a></li>
|
<li><a href="#">One more separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown">
|
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropup <b class="caret bottom-up"></b></a>
|
|
||||||
<ul class="dropdown-menu bottom-up pull-right">
|
|
||||||
<li><a href="#">Action</a></li>
|
|
||||||
<li><a href="#">Another action</a></li>
|
|
||||||
<li><a href="#">Something else here</a></li>
|
|
||||||
<li class="divider"></li>
|
|
||||||
<li><a href="#">Separated link</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<form class="navbar-search pull-left" action="">
|
<form class="navbar-search pull-left" action="">
|
||||||
<input type="text" class="search-query span2" placeholder="Search">
|
<input type="text" class="search-query span2" placeholder="Search">
|
||||||
@ -915,16 +905,6 @@
|
|||||||
<ul class="nav pull-right">
|
<ul class="nav pull-right">
|
||||||
<li><a href="#">Link</a></li>
|
<li><a href="#">Link</a></li>
|
||||||
<li class="divider-vertical"></li>
|
<li class="divider-vertical"></li>
|
||||||
<li class="dropdown">
|
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropup <b class="caret bottom-up"></b></a>
|
|
||||||
<ul class="dropdown-menu bottom-up pull-right">
|
|
||||||
<li><a href="#">Action</a></li>
|
|
||||||
<li><a href="#">Another action</a></li>
|
|
||||||
<li><a href="#">Something else here</a></li>
|
|
||||||
<li class="divider"></li>
|
|
||||||
<li><a href="#">Separated link</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
|
20
docs/templates/pages/components.mustache
vendored
20
docs/templates/pages/components.mustache
vendored
@ -822,16 +822,6 @@
|
|||||||
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
|
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="dropdown">
|
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
|
|
||||||
<ul class="dropdown-menu bottom-up pull-right">
|
|
||||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
|
||||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
|
||||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
|
||||||
<li class="divider"></li>
|
|
||||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<form class="navbar-search pull-left" action="">
|
<form class="navbar-search pull-left" action="">
|
||||||
<input type="text" class="search-query span2" placeholder="Search">
|
<input type="text" class="search-query span2" placeholder="Search">
|
||||||
@ -839,16 +829,6 @@
|
|||||||
<ul class="nav pull-right">
|
<ul class="nav pull-right">
|
||||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||||
<li class="divider-vertical"></li>
|
<li class="divider-vertical"></li>
|
||||||
<li class="dropdown">
|
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
|
|
||||||
<ul class="dropdown-menu bottom-up pull-right">
|
|
||||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
|
||||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
|
||||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
|
||||||
<li class="divider"></li>
|
|
||||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
|
@ -126,7 +126,9 @@
|
|||||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||||
// ------------------------------------------------------
|
// ------------------------------------------------------
|
||||||
// Just add .dropup after the standard .dropdown class and you're set, bro.
|
// Just add .dropup after the standard .dropdown class and you're set, bro.
|
||||||
.dropup {
|
// TODO: abstract this so that the navbar fixed styles are not placed here?
|
||||||
|
.dropup,
|
||||||
|
.navbar-fixed-bottom .dropdown {
|
||||||
// Reverse the caret
|
// Reverse the caret
|
||||||
.caret {
|
.caret {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
|
@ -275,7 +275,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Menu position and menu caret support for dropups via extra bottom-up class
|
// Menu position and menu caret support for dropups via extra bottom-up class
|
||||||
.navbar .dropdown-menu.bottom-up {
|
.navbar-fixed-bottom .dropdown-menu {
|
||||||
&:before {
|
&:before {
|
||||||
border-top: 7px solid #ccc;
|
border-top: 7px solid #ccc;
|
||||||
border-top-color: rgba(0, 0, 0, 0.2);
|
border-top-color: rgba(0, 0, 0, 0.2);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user