*border-right-width: 2px;
*border-bottom-width: 2px;
}
--.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;
.dropdown.open .dropdown-menu {
display: block;
}
+.pull-right .dropdown-menu {
+ left: auto;
+ right: 0;
+}
++.dropup .caret {
++ border-top: 0;
++ border-bottom: 4px solid #000000;
++ content: "\2191";
++}
++.dropup .dropdown-menu {
++ top: auto;
++ bottom: 100%;
++ margin-bottom: 1px;
++}
.typeahead {
margin-top: 2px;
-webkit-border-radius: 4px;
opacity: 1;
filter: alpha(opacity=100);
}
-.primary .caret,
-.danger .caret,
-.info .caret,
-.success .caret {
+.btn-primary .caret,
+.btn-danger .caret,
+.btn-info .caret,
+.btn-success .caret,
+.btn-inverse .caret {
border-top-color: #ffffff;
+ border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
-moz-border-radius: 4px;
border-radius: 4px;
}
-.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
+.nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret {
border-top-color: #0088cc;
+ border-bottom-color: #0088cc;
margin-top: 6px;
}
-.tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret {
+.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
border-top-color: #005580;
+ border-bottom-color: #005580;
}
-.tabs .active .dropdown-toggle .caret, .pills .active .dropdown-toggle .caret {
+.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
border-top-color: #333333;
+ border-bottom-color: #333333;
}
.nav > .dropdown.active > a:hover {
color: #000000;
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
- <h1>Buttons dropdowns <small>Contextual dropdown menus built on button groups</small></h1>
- <h1>Button dropdowns and dropups <small>Built on button groups to provide contextual dropdown menus</small></h1>
++ <h1>Button dropdown menus <small>Built on button groups to provide contextual menus</small></h1>
</div>
+
++ <h2>Button dropdowns</h2>
<div class="row">
<div class="span4">
- <h3>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>
++ <h3>Overview and examples</h3>
+ <p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
- <a class="btn" href="#">Action</a>
- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></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><!-- /btn-toolbar -->
+ <hr>
+ <p><span class="label label-info">Heads up!</span> Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
+ </div>
+ <div class="span8">
+ <h3>Example markup</h3>
+ <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
+<pre class="prettyprint linenums">
+<div class="btn-group">
+ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+ Action
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <!-- dropdown menu links -->
+ </ul>
+</div>
+</pre>
+ </div>
+ </div>
++ <div class="alert alert-info">
++ <strong>Heads up!</strong> In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.
++ </div>
+
++ <h2>Split button dropdowns</h2>
+ <div class="row">
+ <div class="span4">
- <h3>Split button dropdowns</h3>
++ <h3>Overview and examples</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">
- <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">
+ <a class="btn" href="#">Action</a>
+ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div><!-- /btn-group -->
</div>
- </div>
+ <div class="btn-toolbar">
+ <div class="btn-group">
+ <a class="btn btn-success" href="#">Success</a>
+ <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <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 btn-info" href="#">Info</a>
+ <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <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 btn-inverse" href="#">Inverse</a>
+ <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <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><!-- /btn-toolbar -->
++ <h3>Right aligned menus</h3>
++ <p>Add <code>.pull-right</code> to the <code>.dropdown-menu</code> of any button dropdown for right aligned menus.</p>
++ <div class="btn-toolbar">
++ <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><!-- /btn-toolbar -->
++<pre class="prettyprint linenums">
++<div class="btn-group">
++ ...
++ <ul class="dropdown-menu pull-right">
++ <!-- dropdown menu links -->
++ </ul>
++</div>
++</pre>
</div>
<div class="span8">
<h3>Example markup</h3>
</ul>
</div>
</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.
++ <h3>Dropup menus</h3>
++ <p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
++ <div class="btn-toolbar" style="margin-top: 9px;">
++ <div class="btn-group dropup">
++ <a class="btn" href="#">Dropup</a>
++ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
++ <ul class="dropdown-menu">
++ <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 dropup">
++ <a class="btn primary" href="#">Right dropup</a>
++ <a class="btn primary 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>
++<pre class="prettyprint linenums">
++<div class="btn-group dropup">
++ <a class="btn" href="#">Dropup</a>
++ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
++ <span class="caret"></span>
++ </a>
++ <ul class="dropdown-menu">
++ <!-- dropdown menu links -->
++ </ul>
++</div>
++</pre>
++
</div>
</div>
</section>
</div>
<div class="span4">
<h3>Tabs with dropdowns</h3>
- <ul class="nav tabs">
+ <ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
+ <li><a href="#">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Separated link</a></li>
</ul>
</li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">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>
<pre class="prettyprint linenums">
-<ul class="nav tabs">
+<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
</div>
<div class="span4">
<h3>Pills with dropdowns</h3>
- <ul class="nav pills">
+ <ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
+ <li><a href="#">Help</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Separated link</a></li>
</ul>
</li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">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>
<pre class="prettyprint linenums">
-<ul class="nav pills">
+<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
+ <li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
+ <li><a href="#">One more 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">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
- <li class="vertical-divider"></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">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link</a></li>
</ul>
</pre>
- <h3>Adding dropdowns and dropups</h3>
+ <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
+<pre class="prettyprint linenums">
+<ul class="nav">
+ ...
+ <li class="divider-vertical"></li>
+ ...
+</ul>
+</pre>
+ <h3>Component alignment</h3>
+ <p>To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
- <h3>Adding dropdowns</h3>
- <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.</p>
++ <h3>Adding dropdown menus</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">
<ul class="nav">
<li class="dropdown">
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
- <h1>{{_i}}Buttons dropdowns{{/i}} <small>{{_i}}Contextual dropdown menus built on button groups{{/i}}</small></h1>
- <h1>{{_i}}Button dropdowns and dropups{{/i}} <small>{{_i}}Built on button groups to provide contextual dropdown menus{{/i}}</small></h1>
++ <h1>{{_i}}Button dropdown menus{{/i}} <small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1>
</div>
+
++ <h2>{{_i}}Button dropdowns{{/i}}</h2>
<div class="row">
<div class="span4">
- <h3>{{_i}}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>
++ <h3>{{_i}}Overview and examples{{/i}}</h3>
+ <p>{{_i}}Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
- <a class="btn" href="#">{{_i}}Action{{/i}}</a>
- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Action{{/i}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></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><!-- /btn-toolbar -->
+ <hr>
+ <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
+ </div>
+ <div class="span8">
+ <h3>{{_i}}Example markup{{/i}}</h3>
+ <p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p>
+<pre class="prettyprint linenums">
+<div class="btn-group">
+ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+ {{_i}}Action{{/i}}
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu">
+ <!-- {{_i}}dropdown menu links{{/i}} -->
+ </ul>
+</div>
+</pre>
+ </div>
+ </div>
++ <div class="alert alert-info">
++ <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}
++ </div>
+
++ <h2>{{_i}}Split button dropdowns{{/i}}</h2>
+ <div class="row">
+ <div class="span4">
- <h3>{{_i}}Split button dropdowns{{/i}}</h3>
++ <h3>{{_i}}Overview and examples{{/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">
- <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">
+ <a class="btn" href="#">{{_i}}Action{{/i}}</a>
+ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
<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>
</ul>
</div><!-- /btn-group -->
</div>
- </div>
+ <div class="btn-toolbar">
+ <div class="btn-group">
+ <a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a>
+ <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <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 btn-info" href="#">{{_i}}Info{{/i}}</a>
+ <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <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 btn-inverse" href="#">{{_i}}Inverse{{/i}}</a>
+ <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+ <ul class="dropdown-menu">
+ <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><!-- /btn-toolbar -->
++ <h3>{{_i}}Right aligned menus{{/i}}</h3>
++ <p>{{_i}}Add <code>.pull-right</code> to the <code>.dropdown-menu</code> of any button dropdown for right aligned menus.{{/i}}</p>
++ <div class="btn-toolbar">
++ <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><!-- /btn-toolbar -->
++<pre class="prettyprint linenums">
++<div class="btn-group">
++ ...
++ <ul class="dropdown-menu pull-right">
++ <!-- {{_i}}dropdown menu links{{/i}} -->
++ </ul>
++</div>
++</pre>
</div>
<div class="span8">
<h3>{{_i}}Example markup{{/i}}</h3>
</ul>
</div>
</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>
++ <h3>{{_i}}Dropup menus{{/i}}</h3>
++ <p>{{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.{{/i}}</p>
++ <div class="btn-toolbar" style="margin-top: 9px;">
++ <div class="btn-group dropup">
++ <a class="btn" href="#">{{_i}}Dropup{{/i}}</a>
++ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
++ <ul class="dropdown-menu">
++ <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 dropup">
++ <a class="btn primary" href="#">{{_i}}Right dropup{{/i}}</a>
++ <a class="btn primary 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>
++<pre class="prettyprint linenums">
++<div class="btn-group dropup">
++ <a class="btn" href="#">{{_i}}Dropup{{/i}}</a>
++ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
++ <span class="caret"></span>
++ </a>
++ <ul class="dropdown-menu">
++ <!-- {{_i}}dropdown menu links{{/i}} -->
++ </ul>
++</div>
++</pre>
++
</div>
</div>
</section>
</div>
<div class="span4">
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
- <ul class="nav tabs">
+ <ul class="nav nav-tabs">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+ <li><a href="#">{{_i}}Help{{/i}}</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_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>
<pre class="prettyprint linenums">
-<ul class="nav tabs">
+<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
</div>
<div class="span4">
<h3>{{_i}}Pills with dropdowns{{/i}}</h3>
- <ul class="nav pills">
+ <ul class="nav nav-pills">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+ <li><a href="#">{{_i}}Help{{/i}}</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_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>
<pre class="prettyprint linenums">
-<ul class="nav pills">
+<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
+ <li class="nav-header">Nav header</li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+ <li><a href="#">{{_i}}One more 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">
</form>
<ul class="nav pull-right">
<li><a href="#">{{_i}}Link{{/i}}</a></li>
- <li class="vertical-divider"></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">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Link{{/i}}</a></li>
</ul>
</pre>
- <h3>{{_i}}Adding dropdowns and dropups{{/i}}</h3>
+ <p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p>
+<pre class="prettyprint linenums">
+<ul class="nav">
+ ...
+ <li class="divider-vertical"></li>
+ ...
+</ul>
+</pre>
+ <h3>{{_i}}Component alignment{{/i}}</h3>
+ <p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
- <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#dropdowns">our javascript plugin</a>.{{/i}}</p>
++ <h3>{{_i}}Adding dropdown menus{{/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">
<ul class="nav">
<li class="dropdown">
// Account for other colors
-.primary,
-.danger,
-.info,
-.success {
+.btn-primary,
+.btn-danger,
+.btn-info,
+.btn-success,
+.btn-inverse {
.caret {
border-top-color: @white;
+ border-bottom-color: @white;
.opacity(75);
}
}
.open .dropdown-toggle {
outline: 0;
}
++
// Dropdown arrow/caret
++// --------------------
.caret {
display: inline-block;
width: 0;
.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;
.open.dropdown .caret {
.opacity(100);
}
++
// The dropdown menu (ul)
++// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
*border-right-width: 2px;
*border-bottom-width: 2px;
-- // Allow for dropdowns to go bottom up (aka, dropup-menu)
-- &.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
}
// Hover state
++// -----------
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
}
// Open state for the dropdown
++// ---------------------------
.dropdown.open {
// IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page
}
}
+// Right aligned dropdowns
+.pull-right .dropdown-menu {
+ left: auto;
+ right: 0;
+}
+
++// Allow for dropdowns to go bottom up (aka, dropup-menu)
++// ------------------------------------------------------
++// Just add .dropup after the standard .dropdown class and you're set, bro.
++.dropup {
++ // Reverse the caret
++ .caret {
++ border-top: 0;
++ border-bottom: 4px solid @black;
++ content: "\2191";
++ }
++ // Different positioning for bottom up menu
++ .dropdown-menu {
++ top: auto;
++ bottom: 100%;
++ margin-bottom: 1px;
++ }
++}
++
// Typeahead
++// ---------
.typeahead {
margin-top: 2px; // give it some space to breathe
.border-radius(4px);
}
// Right aligned menus need alt position
- .navbar .nav.pull-right .dropdown-menu {
-.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
++// TODO: rejigger this at some point to simplify the selectors
++.navbar .nav.pull-right .dropdown-menu,
++.navbar .nav .dropdown-menu.pull-right {
+ left: auto;
+ right: 0;
&:before {
left: auto;
right: 12px;
// Default dropdown links
// -------------------------
// Make carets use linkColor to start
-.tabs .dropdown-toggle .caret,
-.pills .dropdown-toggle .caret {
+.nav-tabs .dropdown-toggle .caret,
+.nav-pills .dropdown-toggle .caret {
border-top-color: @linkColor;
+ border-bottom-color: @linkColor;
margin-top: 6px;
}
-.tabs .dropdown-toggle:hover .caret,
-.pills .dropdown-toggle:hover .caret {
+.nav-tabs .dropdown-toggle:hover .caret,
+.nav-pills .dropdown-toggle:hover .caret {
border-top-color: @linkColorHover;
+ border-bottom-color: @linkColorHover;
}
// Active dropdown links
// -------------------------
-.tabs .active .dropdown-toggle .caret,
-.pills .active .dropdown-toggle .caret {
+.nav-tabs .active .dropdown-toggle .caret,
+.nav-pills .active .dropdown-toggle .caret {
border-top-color: @grayDark;
+ border-bottom-color: @grayDark;
}
// Active:hover dropdown links
projects / thirdparty / bootstrap.git / commitdiff
