mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Merge branch '2.0.2-wip' of https://github.com/twitter/bootstrap into 2.0.2-wip
Conflicts: docs/assets/bootstrap.zip less/mixins.less
This commit is contained in:
Jacob Thornton
commit
f3b6cf1d6d
Binary file not shown.
66
docs/assets/css/bootstrap.css
vendored
66
docs/assets/css/bootstrap.css
vendored
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
88
docs/templates/pages/base-css.mustache
vendored
88
docs/templates/pages/base-css.mustache
vendored
@ -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>
|
||||
|
||||
119
docs/templates/pages/components.mustache
vendored
119
docs/templates/pages/components.mustache
vendored
@ -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">
|
||||
|
||||
8
docs/templates/pages/scaffolding.mustache
vendored
8
docs/templates/pages/scaffolding.mustache
vendored
@ -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>
|
||||
|
||||
@ -137,6 +137,7 @@
|
||||
.btn-inverse {
|
||||
.caret {
|
||||
border-top-color: @white;
|
||||
border-bottom-color: @white;
|
||||
.opacity(75);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -589,4 +589,4 @@
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user