diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index eccddc363634807e1889465456772efd375c75cd..142b61377563611b0ea22e9fa6f9bcca33a28aa2 100644
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 41eeea9fa460b28ecb02489f026a761ddf6ae01d..55e9728b9137c3a706b86d3e70b2c1cf805950c5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1087,20 +1087,19 @@ table {
}
.table-bordered {
border: 1px solid #ddd;
+ border-left: 0;
border-collapse: separate;
*border-collapse: collapsed;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
-.table-bordered th + th,
-.table-bordered td + td,
-.table-bordered th + td,
-.table-bordered td + th {
+.table-bordered th, .table-bordered td {
border-left: 1px solid #ddd;
}
.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
border-top: 0;
+ border-bottom: 1px solid #ddd;
}
.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
@@ -1684,10 +1683,9 @@ table .span24 {
*border-right-width: 2px;
*border-bottom-width: 2px;
}
-.dropdown-menu.bottom-up {
- top: auto;
- bottom: 100%;
- margin-bottom: 2px;
+.dropdown-menu.pull-right {
+ right: 0;
+ left: auto;
}
.dropdown-menu .divider {
height: 1px;
@@ -1727,6 +1725,16 @@ table .span24 {
left: auto;
right: 0;
}
+.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
+ border-top: 0;
+ border-bottom: 4px solid #000000;
+ content: "\2191";
+}
+.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
+ top: auto;
+ bottom: 100%;
+ margin-bottom: 1px;
+}
.typeahead {
margin-top: 2px;
-webkit-border-radius: 4px;
@@ -2199,6 +2207,7 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #ffffff;
+ border-bottom-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
@@ -2410,13 +2419,16 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
}
.nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret {
border-top-color: #0088cc;
+ border-bottom-color: #0088cc;
margin-top: 6px;
}
.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
border-top-color: #005580;
+ border-bottom-color: #005580;
}
.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;
@@ -2429,6 +2441,7 @@ button.btn.btn-small, input[type="submit"].btn.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);
}
@@ -2544,6 +2557,9 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
+.navbar .container {
+ width: auto;
+}
.btn-navbar {
display: none;
float: right;
@@ -2699,20 +2715,26 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
outline: 0;
}
-.navbar-fixed-top {
+.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
- top: 0;
right: 0;
left: 0;
z-index: 1030;
+ margin-bottom: 0;
}
-.navbar-fixed-top .navbar-inner {
+.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
+.navbar-fixed-top {
+ top: 0;
+}
+.navbar-fixed-bottom {
+ bottom: 0;
+}
.navbar .nav {
position: relative;
left: 0;
@@ -2784,8 +2806,22 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
top: -6px;
left: 10px;
}
+.navbar-fixed-bottom .dropdown-menu:before {
+ border-top: 7px solid #ccc;
+ border-top-color: rgba(0, 0, 0, 0.2);
+ border-bottom: 0;
+ bottom: -7px;
+ top: auto;
+}
+.navbar-fixed-bottom .dropdown-menu: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;
@@ -2797,11 +2833,15 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
.navbar .nav .active > .dropdown-toggle:hover {
color: #ffffff;
}
-.navbar .nav.pull-right .dropdown-menu:before {
+.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 .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;
}
diff --git a/docs/base-css.html b/docs/base-css.html
index 79ea2ac55ad6281aa6db0add95ad9be1ff18f44f..3a6494ddc1d6283c4683c93287175ced0be58cbf 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -571,7 +571,7 @@ For example, <code>section</code> should be wrapped as inline.
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
- <th>Language</th>
+ <th>Username</th>
</tr>
</thead>
<tbody>
@@ -579,19 +579,19 @@ For example, <code>section</code> should be wrapped as inline.
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
@@ -616,7 +616,7 @@ For example, <code>section</code> should be wrapped as inline.
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
- <th>Language</th>
+ <th>Username</th>
</tr>
</thead>
<tbody>
@@ -624,19 +624,19 @@ For example, <code>section</code> should be wrapped as inline.
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
@@ -660,31 +660,31 @@ For example, <code>section</code> should be wrapped as inline.
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
- <th>Language</th>
+ <th>Username</th>
</tr>
</thead>
<tbody>
<tr>
- <td>1</td>
- <td colspan="2">Mark Otto</td>
- <td>CSS</td>
+ <td rowspan="2">1</td>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td rowspan="2">Javascript</td>
- </tr>
- </tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Brosef</td>
- <td>Stalin</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
@@ -708,7 +708,7 @@ For example, <code>section</code> should be wrapped as inline.
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
- <th>Language</th>
+ <th>Username</th>
</tr>
</thead>
<tbody>
@@ -716,19 +716,18 @@ For example, <code>section</code> should be wrapped as inline.
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
@@ -749,37 +748,36 @@ For example, <code>section</code> should be wrapped as inline.
<div class="span8">
<table class="table table-striped table-bordered table-condensed">
<thead>
+ <tr>
+ <th></th>
+ <th colspan="2">Full name</th>
+ <th></th>
+ </tr>
<tr>
<th>#</th>
- <th class="yellow">First Name</th>
- <th class="blue">Last Name</th>
- <th class="green">Language</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
</tr>
</thead>
<tbody>
+ <tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
- </tr>
- <tr>
- <td>4</td>
- <td>Brosef</td>
- <td>Stalin</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
diff --git a/docs/components.html b/docs/components.html
index 172fbcf20d7e4fa90b8f9c01a3d7c5ed1c7cc2db..8b1a67553e9075980a053db5b41fc76ac6955ed0 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -188,12 +188,13 @@
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
- <h1>Buttons dropdowns <small>Contextual dropdown menus built on button groups</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>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">
@@ -278,10 +279,14 @@
</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">
@@ -352,7 +357,30 @@
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
- </div>
+ </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>
@@ -368,6 +396,44 @@
</ul>
</div>
</pre>
+ <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>
@@ -474,7 +540,7 @@
<h3>Tabs with dropdowns</h3>
<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">
@@ -485,6 +551,16 @@
<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 nav-tabs">
@@ -506,7 +582,7 @@
<h3>Pills with dropdowns</h3>
<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">
@@ -517,6 +593,16 @@
<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 nav-pills">
@@ -787,7 +873,7 @@
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
<div class="navbar">
<div class="navbar-inner">
- <div class="container" style="width: auto;">
+ <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -849,13 +935,24 @@
</div>
</pre>
<h3>Fixed navbar</h3>
- <p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.</p>
+ <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
+ <div class="row">
+ <div class="span4">
<pre class="prettyprint linenums">
<div class="navbar navbar-fixed-top">
...
</div>
</pre>
- <p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
+ </div><!--/span-->
+ <div class="span4">
+<pre class="prettyprint linenums">
+<div class="navbar navbar-fixed-bottom">
+ ...
+</div>
+</pre>
+ </div><!--/span-->
+ </div><!--/row-->
+ <p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<pre class="prettyprint linenums">
@@ -929,8 +1026,8 @@
</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">
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index a35012e9c8b08f5cc170d6faaa5baeb93e10ed2f..ea95796d546f4fb18d926d2ca854af1925ea0d8b 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -486,13 +486,13 @@
<td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
- <td>Portrait tablets</td>
- <td>480px to 768px</td>
+ <td>Smartphones to tablets</td>
+ <td>767px and below</td>
<td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
- <td>Landscape tablets</td>
- <td>768px to 979px</td>
+ <td>Portrait tablets</td>
+ <td>768px and above</td>
<td>42px</td>
<td>20px</td>
</tr>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 72b09c271808d3debd5a0dc154f7962e13508044..fde1e002ef3ed27d4ce2a3212fd8d5ed699b0bbf 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -495,7 +495,7 @@
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
- <th>{{_i}}Language{{/i}}</th>
+ <th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
@@ -503,19 +503,19 @@
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
@@ -540,7 +540,7 @@
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
- <th>{{_i}}Language{{/i}}</th>
+ <th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
@@ -548,19 +548,19 @@
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
@@ -584,31 +584,31 @@
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
- <th>{{_i}}Language{{/i}}</th>
+ <th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
- <td>1</td>
- <td colspan="2">Mark Otto</td>
- <td>CSS</td>
+ <td rowspan="2">1</td>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td rowspan="2">Javascript</td>
- </tr>
- </tr>
- <td>3</td>
- <td>Stu</td>
- <td>Dent</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Brosef</td>
- <td>Stalin</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
@@ -632,7 +632,7 @@
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
- <th>{{_i}}Language{{/i}}</th>
+ <th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
@@ -640,19 +640,18 @@
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
@@ -673,37 +672,36 @@
<div class="span8">
<table class="table table-striped table-bordered table-condensed">
<thead>
+ <tr>
+ <th></th>
+ <th colspan="2">{{_i}}Full name{{/i}}</th>
+ <th></th>
+ </tr>
<tr>
<th>#</th>
- <th class="yellow">{{_i}}First Name{{/i}}</th>
- <th class="blue">{{_i}}Last Name{{/i}}</th>
- <th class="green">{{_i}}Language{{/i}}</th>
+ <th>{{_i}}First Name{{/i}}</th>
+ <th>{{_i}}Last Name{{/i}}</th>
+ <th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
+ <tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
- <td>CSS</td>
+ <td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
- <td>Javascript</td>
+ <td>@fat</td>
</tr>
<tr>
<td>3</td>
- <td>Stu</td>
- <td>Dent</td>
- <td>HTML</td>
- </tr>
- <tr>
- <td>4</td>
- <td>Brosef</td>
- <td>Stalin</td>
- <td>HTML</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
</tr>
</tbody>
</table>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 3a176fa446acca5639e11b3dd94c4107f3b9122d..24ff341b6c1f96bed1710792285e1f9ba7d0cf5f 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -112,12 +112,13 @@
================================================== -->
<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 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}}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">
@@ -202,10 +203,14 @@
</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">
@@ -276,7 +281,30 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
- </div>
+ </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>
@@ -292,6 +320,44 @@
</ul>
</div>
</pre>
+ <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>
@@ -398,7 +464,7 @@
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
<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">
@@ -409,6 +475,16 @@
<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 nav-tabs">
@@ -430,7 +506,7 @@
<h3>{{_i}}Pills with dropdowns{{/i}}</h3>
<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">
@@ -441,6 +517,16 @@
<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 nav-pills">
@@ -711,7 +797,7 @@
<p>{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}</p>
<div class="navbar">
<div class="navbar-inner">
- <div class="container" style="width: auto;">
+ <div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -773,13 +859,24 @@
</div>
</pre>
<h3>{{_i}}Fixed navbar{{/i}}</h3>
- <p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.{{/i}}</p>
+ <p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
+ <div class="row">
+ <div class="span4">
<pre class="prettyprint linenums">
<div class="navbar navbar-fixed-top">
...
</div>
</pre>
- <p>{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
+ </div><!--/span-->
+ <div class="span4">
+<pre class="prettyprint linenums">
+<div class="navbar navbar-fixed-bottom">
+ ...
+</div>
+</pre>
+ </div><!--/span-->
+ </div><!--/row-->
+ <p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<h3>{{_i}}Brand name{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<pre class="prettyprint linenums">
@@ -853,8 +950,8 @@
</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">
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index fff47d438380c36670d5784af2c26dff4a5e8b55..d9a2f50d19f463097b9b796ad2e5568afa3b9328 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -410,13 +410,13 @@
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
</tr>
<tr>
- <td>{{_i}}Portrait tablets{{/i}}</td>
- <td>480px to 768px</td>
+ <td>{{_i}}Smartphones to tablets{{/i}}</td>
+ <td>767px and below</td>
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
</tr>
<tr>
- <td>{{_i}}Landscape tablets{{/i}}</td>
- <td>768px to 979px</td>
+ <td>{{_i}}Portrait tablets{{/i}}</td>
+ <td>768px and above</td>
<td>42px</td>
<td>20px</td>
</tr>
diff --git a/less/button-groups.less b/less/button-groups.less
index a04220a9a62bad45c03048620df2c575aed490d8..cfb25f1409eb6d66d4c3161471db0a240046bac8 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -137,6 +137,7 @@
.btn-inverse {
.caret {
border-top-color: @white;
+ border-bottom-color: @white;
.opacity(75);
}
}
diff --git a/less/dropdowns.less b/less/dropdowns.less
index fa46e288b1c7c6537458e8d0c295c98ae65e9309..12ce7c2e507d1d044f6c739565c7fb0683788fbe 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -13,7 +13,9 @@
.open .dropdown-toggle {
outline: 0;
}
+
// Dropdown arrow/caret
+// --------------------
.caret {
display: inline-block;
width: 0;
@@ -29,6 +31,7 @@
.opacity(30);
content: "\2193";
}
+
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
@@ -37,7 +40,9 @@
.open.dropdown .caret {
.opacity(100);
}
+
// The dropdown menu (ul)
+// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
@@ -62,11 +67,10 @@
*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;
+ // Aligns the dropdown menu to right
+ &.pull-right {
+ right: 0;
+ left: auto;
}
// Dividers (basically an hr) within the dropdown
@@ -87,6 +91,7 @@
}
// Hover state
+// -----------
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
@@ -96,6 +101,7 @@
}
// 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
@@ -117,7 +123,28 @@
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.
+// TODO: abstract this so that the navbar fixed styles are not placed here?
+.dropup,
+.navbar-fixed-bottom .dropdown {
+ // 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);
diff --git a/less/mixins.less b/less/mixins.less
index 2a184aaba9c211608a1f32d9a57fb5747f09c2e0..2cd9167071036bfadf0ee09b86efab270f24853b 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -589,4 +589,4 @@
}
-}
\ No newline at end of file
+}
diff --git a/less/navbar.less b/less/navbar.less
index 87f260699e47492e4610266ad60720052be9eb2a..1bc6b185b95cfaf7cc91c869ec662ed11036b162 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -20,6 +20,12 @@
.box-shadow(@shadow);
}
+// Set width to auto for default container
+// We then reset it for fixed navbars in the #gridSystem mixin
+.navbar .container {
+ width: auto;
+}
+
// Navbar button for toggling navbar items in responsive layouts
.btn-navbar {
display: none;
@@ -153,22 +159,37 @@
}
+
// FIXED NAVBAR
// ------------
-.navbar-fixed-top {
+// Shared (top/bottom) styles
+.navbar-fixed-top,
+.navbar-fixed-bottom {
position: fixed;
- top: 0;
right: 0;
left: 0;
z-index: @zindexFixedNavbar;
+ margin-bottom: 0; // remove 18px margin for static navbar
}
-.navbar-fixed-top .navbar-inner {
+.navbar-fixed-top .navbar-inner,
+.navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
.border-radius(0);
}
+// Fixed to top
+.navbar-fixed-top {
+ top: 0;
+}
+
+// Fixed to bottom
+.navbar-fixed-bottom {
+ bottom: 0;
+}
+
+
// NAVIGATION
// ----------
@@ -259,11 +280,27 @@
left: 10px;
}
}
-
+// Menu position and menu caret support for dropups via extra bottom-up class
+.navbar-fixed-bottom .dropdown-menu {
+ &: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);
@@ -282,7 +319,11 @@
}
// Right aligned menus need alt position
-.navbar .nav.pull-right .dropdown-menu {
+// 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;
diff --git a/less/navs.less b/less/navs.less
index a940cc13ca0a4a4f495ee30bac9acfc3b796dd93..e00bffe5f8a9acb5c6ed6d44fb43fc7eb284f81b 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -204,11 +204,13 @@
.nav-tabs .dropdown-toggle .caret,
.nav-pills .dropdown-toggle .caret {
border-top-color: @linkColor;
+ border-bottom-color: @linkColor;
margin-top: 6px;
}
.nav-tabs .dropdown-toggle:hover .caret,
.nav-pills .dropdown-toggle:hover .caret {
border-top-color: @linkColorHover;
+ border-bottom-color: @linkColorHover;
}
// Active dropdown links
@@ -216,6 +218,7 @@
.nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret {
border-top-color: @grayDark;
+ border-bottom-color: @grayDark;
}
// Active:hover dropdown links
@@ -238,6 +241,7 @@
.nav .open.active .caret,
.nav .open a:hover .caret {
border-top-color: @white;
+ border-bottom-color: @white;
.opacity(100);
}
diff --git a/less/tables.less b/less/tables.less
index 1342de2ff6589f73bef442c7e89f618da140b81c..d8bce582f0c708599847c5083e59d175ef30de60 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -64,13 +64,12 @@ table {
.table-bordered {
border: 1px solid #ddd;
+ border-left: 0;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapsed; // IE7 can't round corners anyway
.border-radius(4px);
- th + th,
- td + td,
- th + td,
- td + th {
+ th,
+ td {
border-left: 1px solid #ddd;
}
// Prevent a double border
@@ -78,6 +77,7 @@ table {
tbody:first-child tr:first-child th,
tbody:first-child tr:first-child td {
border-top: 0;
+ border-bottom: 1px solid #ddd;
}
// For first th or td in the first row in the first thead or tbody
thead:first-child tr:first-child th:first-child,