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

Adding dropup support to split buttons and navbar

Browse Source 
* Documents the hidden .dropdown-menu.bottom-up option (to be used for dropups)
* Extends the .bottom-up class to carets and all relevant caret styles
* Adds .dropdown-menu.pull-right class for right-aligned dropdowns and dropups
* Adds examples and some information to the "split dropdown" and "navbar" sections of the Docs
This commit is contained in:
Burak Tuyan 2012-01-30 00:50:47 +02:00
parent 7bf2767452
commit 918a17a30b
7 changed files with 190 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/assets/css/bootstrap.css vendored
View File

@ -1517,6 +1517,11 @@ table .span12 {
filter: alpha(opacity=30);
content: "\2193";
}
.caret.bottom-up {
border-top: 0;
border-bottom: 4px solid #000000;
content: "\2191";
}
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
@ -1558,7 +1563,11 @@ table .span12 {
.dropdown-menu.bottom-up {
top: auto;
bottom: 100%;
margin-bottom: 2px;
margin-bottom: 1px;
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
@ -1992,6 +2001,7 @@ button.btn.small, input[type="submit"].btn.small {
.info .caret,
.success .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
@ -2217,6 +2227,7 @@ button.btn.small, input[type="submit"].btn.small {
}
.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 1;
filter: alpha(opacity=100);
}
@ -2554,8 +2565,22 @@ button.btn.small, input[type="submit"].btn.small {
top: -6px;
left: 10px;
}
.navbar .dropdown-menu.bottom-up:before {
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 0;
bottom: -7px;
top: auto;
}
.navbar .dropdown-menu.bottom-up:after {
border-top: 6px solid #ffffff;
border-bottom: 0;
bottom: -6px;
top: auto;
}
.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar .nav .active .caret {
opacity: 1;
@ -2567,15 +2592,15 @@ button.btn.small, input[type="submit"].btn.small {
.navbar .nav .active > .dropdown-toggle:hover {
color: #ffffff;
}
.navbar .nav.pull-right .dropdown-menu {
.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;
}
.navbar .nav.pull-right .dropdown-menu:before {
.navbar .nav.pull-right .dropdown-menu:before, .navbar .nav .dropdown-menu.pull-right:before {
left: auto;
right: 12px;
}
.navbar .nav.pull-right .dropdown-menu:after {
.navbar .nav.pull-right .dropdown-menu:after, .navbar .nav .dropdown-menu.pull-right:after {
left: auto;
right: 13px;
}

67
docs/components.html
View File

@ -175,11 +175,11 @@
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
<h1>Buttons dropdowns <small>Built on button groups to provide contextual dropdown menus</small></h1>
<h1>Button dropdowns and dropups <small>Built on button groups to provide contextual dropdown menus</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>Split button dropdowns</h3>
<h3>Split button dropdowns and dropups</h3>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
@ -239,6 +239,42 @@
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn" href="#">Right</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu 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>
</div><!-- /btn-group -->
</div>
<p>Additionally, you can create dropup style split buttons. Simply add a second class, <code>.bottom-up</code>, after <code>.caret</code> and <code>.dropdown-menu</code> classes. Optionally, it's recommended to add a third <code>.pull-right</code> class to provide a better experience.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
<a class="btn" href="#">Dropup</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret bottom-up"></span></a>
<ul class="dropdown-menu bottom-up">
<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>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn primary" href="#">Right Dropup</a>
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret bottom-up"></span></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>
</div><!-- /btn-group -->
</div>
</div>
<div class="span8">
@ -255,6 +291,9 @@
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<div class="alert alert-info">
<strong>Heads up!</strong> In some cases (especially on mobile screens) the content of the dropdown or dropup menus will overflow the screen. You need to manually take care of this or use a custom JavaScript code to adjust the alignment of the menu.
</div>
</div>
</div>
</section>
@ -684,6 +723,16 @@
<li><a href="#">Separated link</a></li>
</ul>
</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>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
@ -691,6 +740,16 @@
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="vertical-divider"></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">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
@ -783,8 +842,8 @@
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Adding dropdowns</h3>
<p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.</p>
<h3>Adding dropdowns and dropups</h3>
<p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="dropdown"&gt;

67
docs/templates/pages/components.mustache vendored
View File

@ -103,11 +103,11 @@
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
<h1>{{_i}}Buttons dropdowns{{/i}} <small>{{_i}}Built on button groups to provide contextual dropdown menus{{/i}}</small></h1>
<h1>{{_i}}Button dropdowns and dropups{{/i}} <small>{{_i}}Built on button groups to provide contextual dropdown menus{{/i}}</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Split button dropdowns{{/i}}</h3>
<h3>{{_i}}Split button dropdowns and dropups{{/i}}</h3>
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
@ -167,6 +167,42 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn" href="#">{{_i}}Right{{/i}}</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu 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>
</div><!-- /btn-group -->
</div>
<p>{{_i}}Additionally, you can create dropup style split buttons. Simply add a second class, <code>.bottom-up</code>, after <code>.caret</code> and <code>.dropdown-menu</code> classes. Optionally, it's recommended to add a third <code>.pull-right</code> class to provide a better experience.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
<a class="btn" href="#">{{_i}}Dropup{{/i}}</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret bottom-up"></span></a>
<ul class="dropdown-menu bottom-up">
<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>
</div><!-- /btn-group -->
<div class="btn-group">
<a class="btn primary" href="#">{{_i}}Right Dropup{{/i}}</a>
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret bottom-up"></span></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>
</div><!-- /btn-group -->
</div>
</div>
<div class="span8">
@ -183,6 +219,9 @@
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<div class="alert alert-info">
+ <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}In some cases (especially on mobile screens) the content of the dropdown or dropup menus will overflow the screen. You need to manually take care of this or use a custom JavaScript code to adjust the alignment of the menu.{{_i}}
+ </div>
</div>
</div>
</section>
@ -612,6 +651,16 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</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>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
@ -619,6 +668,16 @@
<ul class="nav pull-right">
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="vertical-divider"></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">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
@ -711,8 +770,8 @@
&lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>{{_i}}Adding dropdowns{{/i}}</h3>
<p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.{{/i}}</p>
<h3>{{_i}}Adding dropdowns and dropups{{/i}}</h3>
<p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="dropdown"&gt;

1
less/button-groups.less
View File

@ -136,6 +136,7 @@
.success {
.caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(75);
}
}

16
less/dropdowns.less
View File

@ -29,6 +29,14 @@
.opacity(30);
content: "\2193";
}
// Allow for caret to show up (goes well with dropup-menus)
&.bottom-up {
border-top: 0;
border-bottom: 4px solid @black;
content: "\2191";
}
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
@ -68,7 +76,13 @@
&.bottom-up {
top: auto;
bottom: 100%;
margin-bottom: 2px;
margin-bottom: 1px;
}
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown

20
less/navbar.less
View File

@ -253,11 +253,27 @@
left: 10px;
}
}
// Menu position and menu caret support for dropups via extra bottom-up class
.navbar .dropdown-menu.bottom-up {
&:before {
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 0;
bottom: -7px;
top: auto;
}
&:after {
border-top: 6px solid #ffffff;
border-bottom: 0;
bottom: -6px;
top: auto;
}
}
// Dropdown toggle caret
.navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret {
border-top-color: @white;
border-bottom-color: @white;
}
.navbar .nav .active .caret {
.opacity(100);
@ -276,7 +292,7 @@
}
// Right aligned menus need alt position
.navbar .nav.pull-right .dropdown-menu {
.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;
&:before {

1
less/navs.less
View File

@ -227,6 +227,7 @@
.nav .open.active .caret,
.nav .open a:hover .caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(100);
}