mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 08:04:59 +02:00
Code Issues Releases Wiki Activity

Merge branch '2.0.2-wip' of https://github.com/twitter/bootstrap into 2.0.2-wip

Browse Source 
Conflicts:
	docs/assets/bootstrap.zip
	less/mixins.less
This commit is contained in:
Jacob Thornton
2012-02-21 23:18:18 -08:00
parent 5ad5dde1e2 a139167489
commit f3b6cf1d6d
14 changed files with 451 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

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

@@ -1087,20 +1087,19 @@ table {
} }
.table-bordered { .table-bordered {
border: 1px solid #ddd; border: 1px solid #ddd;
border-left: 0;
border-collapse: separate; border-collapse: separate;
*border-collapse: collapsed; *border-collapse: collapsed;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
} }
.table-bordered th + th, .table-bordered th, .table-bordered td {
.table-bordered td + td,
.table-bordered th + td,
.table-bordered td + th {
border-left: 1px solid #ddd; 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 { .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-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 { .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; -webkit-border-radius: 4px 0 0 0;
@@ -1684,10 +1683,9 @@ table .span24 {
*border-right-width: 2px; *border-right-width: 2px;
*border-bottom-width: 2px; *border-bottom-width: 2px;
} }
.dropdown-menu.bottom-up { .dropdown-menu.pull-right {
top: auto; right: 0;
bottom: 100%; left: auto;
margin-bottom: 2px;
} }
.dropdown-menu .divider { .dropdown-menu .divider {
height: 1px; height: 1px;
@@ -1727,6 +1725,16 @@ table .span24 {
left: auto; left: auto;
right: 0; 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 { .typeahead {
margin-top: 2px; margin-top: 2px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
@@ -2199,6 +2207,7 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
.btn-success .caret, .btn-success .caret,
.btn-inverse .caret { .btn-inverse .caret {
border-top-color: #ffffff; border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 0.75; opacity: 0.75;
filter: alpha(opacity=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 { .nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret {
border-top-color: #0088cc; border-top-color: #0088cc;
border-bottom-color: #0088cc;
margin-top: 6px; margin-top: 6px;
} }
.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret { .nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
border-top-color: #005580; border-top-color: #005580;
border-bottom-color: #005580;
} }
.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret { .nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
border-top-color: #333333; border-top-color: #333333;
border-bottom-color: #333333;
} }
.nav > .dropdown.active > a:hover { .nav > .dropdown.active > a:hover {
color: #000000; 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 { .nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
border-top-color: #ffffff; border-top-color: #ffffff;
border-bottom-color: #ffffff;
opacity: 1; opacity: 1;
filter: alpha(opacity=100); 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); -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); 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 { .btn-navbar {
display: none; display: none;
float: right; 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); box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
outline: 0; outline: 0;
} }
.navbar-fixed-top { .navbar-fixed-top, .navbar-fixed-bottom {
position: fixed; position: fixed;
top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 1030; 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-left: 0;
padding-right: 0; padding-right: 0;
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
} }
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
}
.navbar .nav { .navbar .nav {
position: relative; position: relative;
left: 0; left: 0;
@@ -2784,8 +2806,22 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
top: -6px; top: -6px;
left: 10px; 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 { .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
border-top-color: #ffffff; border-top-color: #ffffff;
border-bottom-color: #ffffff;
} }
.navbar .nav .active .caret { .navbar .nav .active .caret {
opacity: 1; opacity: 1;
@@ -2797,11 +2833,15 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
.navbar .nav .active > .dropdown-toggle:hover { .navbar .nav .active > .dropdown-toggle:hover {
color: #ffffff; 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; left: auto;
right: 12px; 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; left: auto;
right: 13px; right: 13px;
} }

88
docs/base-css.html
View File

@@ -571,7 +571,7 @@ For example, <code>section</code> should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -579,19 +579,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -616,7 +616,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -624,19 +624,19 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -660,31 +660,31 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td rowspan="2">1</td>
<td colspan="2">Mark Otto</td> <td>Mark</td>
<td>CSS</td> <td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td rowspan="2">Javascript</td> <td>@fat</td>
</tr>
</tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Brosef</td> <td colspan="2">Larry the Bird</td>
<td>Stalin</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -708,7 +708,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<th>#</th> <th>#</th>
<th>First Name</th> <th>First Name</th>
<th>Last Name</th> <th>Last Name</th>
<th>Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -716,19 +716,18 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -749,37 +748,36 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<div class="span8"> <div class="span8">
<table class="table table-striped table-bordered table-condensed"> <table class="table table-striped table-bordered table-condensed">
<thead> <thead>
<tr>
<th></th>
<th colspan="2">Full name</th>
<th></th>
</tr>
<tr> <tr>
<th>#</th> <th>#</th>
<th class="yellow">First Name</th> <th>First Name</th>
<th class="blue">Last Name</th> <th>Last Name</th>
<th class="green">Language</th> <th>Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<tr> <tr>
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr>
<tr>
<td>4</td>
<td>Brosef</td>
<td>Stalin</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

119
docs/components.html
View File

@@ -188,12 +188,13 @@
================================================== --> ================================================== -->
<section id="buttonDropdowns"> <section id="buttonDropdowns">
<div class="page-header"> <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> </div>
<h2>Button dropdowns</h2>
<div class="row"> <div class="row">
<div class="span4"> <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> <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-toolbar" style="margin-top: 18px;">
<div class="btn-group"> <div class="btn-group">
@@ -278,10 +279,14 @@
</pre> </pre>
</div> </div>
</div> </div>
<div class="alert alert-info">
<strong>Heads up!</strong> In some cases&mdash;like mobile&mdash;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="row">
<div class="span4"> <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> <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-toolbar" style="margin-top: 18px;">
<div class="btn-group"> <div class="btn-group">
@@ -352,7 +357,30 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div><!-- /btn-group --> </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">
&lt;div class="btn-group"&gt;
...
&lt;ul class="dropdown-menu pull-right"&gt;
&lt;!-- dropdown menu links --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div> </div>
<div class="span8"> <div class="span8">
<h3>Example markup</h3> <h3>Example markup</h3>
@@ -368,6 +396,44 @@
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </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">
&lt;div class="btn-group dropup"&gt;
&lt;a class="btn" href="#"&gt;Dropup&lt;/a&gt;
&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- dropdown menu links --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div> </div>
</div> </div>
</section> </section>
@@ -474,7 +540,7 @@
<h3>Tabs with dropdowns</h3> <h3>Tabs with dropdowns</h3>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Help</a></li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@@ -485,6 +551,16 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</li> </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> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs"&gt; &lt;ul class="nav nav-tabs"&gt;
@@ -506,7 +582,7 @@
<h3>Pills with dropdowns</h3> <h3>Pills with dropdowns</h3>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Help</a></li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@@ -517,6 +593,16 @@
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</li> </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> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt; &lt;ul class="nav nav-pills"&gt;
@@ -787,7 +873,7 @@
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p> <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">
<div class="navbar-inner"> <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"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@@ -849,13 +935,24 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Fixed navbar</h3> <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"> <pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt; &lt;div class="navbar navbar-fixed-top"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </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>&lt;body&gt;</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">
&lt;div class="navbar navbar-fixed-bottom"&gt;
...
&lt;/div&gt;
</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>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3> <h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p> <p>A simple link to show your brand or project name only requires an anchor tag.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@@ -929,8 +1026,8 @@
</pre> </pre>
<h3>Component alignment</h3> <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> <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> <h3>Adding dropdown menus</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> <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"> <pre class="prettyprint linenums">
&lt;ul class="nav"&gt; &lt;ul class="nav"&gt;
&lt;li class="dropdown"&gt; &lt;li class="dropdown"&gt;

8
docs/scaffolding.html
View File

@@ -486,13 +486,13 @@
<td class="muted" colspan="2">Fluid columns, no fixed widths</td> <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</tr> </tr>
<tr> <tr>
<td>Portrait tablets</td> <td>Smartphones to tablets</td>
<td>480px to 768px</td> <td>767px and below</td>
<td class="muted" colspan="2">Fluid columns, no fixed widths</td> <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</tr> </tr>
<tr> <tr>
<td>Landscape tablets</td> <td>Portrait tablets</td>
<td>768px to 979px</td> <td>768px and above</td>
<td>42px</td> <td>42px</td>
<td>20px</td> <td>20px</td>
</tr> </tr>

88
docs/templates/pages/base-css.mustache vendored
View File

@@ -495,7 +495,7 @@
<th>#</th> <th>#</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -503,19 +503,19 @@
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -540,7 +540,7 @@
<th>#</th> <th>#</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -548,19 +548,19 @@
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td>Larry</td>
<td>Dent</td> <td>the Bird</td>
<td>HTML</td> <td>@twitter</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -584,31 +584,31 @@
<th>#</th> <th>#</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td rowspan="2">1</td>
<td colspan="2">Mark Otto</td> <td>Mark</td>
<td>CSS</td> <td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td rowspan="2">Javascript</td> <td>@fat</td>
</tr>
</tr>
<td>3</td>
<td>Stu</td>
<td>Dent</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Brosef</td> <td colspan="2">Larry the Bird</td>
<td>Stalin</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -632,7 +632,7 @@
<th>#</th> <th>#</th>
<th>{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -640,19 +640,18 @@
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -673,37 +672,36 @@
<div class="span8"> <div class="span8">
<table class="table table-striped table-bordered table-condensed"> <table class="table table-striped table-bordered table-condensed">
<thead> <thead>
<tr>
<th></th>
<th colspan="2">{{_i}}Full name{{/i}}</th>
<th></th>
</tr>
<tr> <tr>
<th>#</th> <th>#</th>
<th class="yellow">{{_i}}First Name{{/i}}</th> <th>{{_i}}First Name{{/i}}</th>
<th class="blue">{{_i}}Last Name{{/i}}</th> <th>{{_i}}Last Name{{/i}}</th>
<th class="green">{{_i}}Language{{/i}}</th> <th>{{_i}}Username{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<tr> <tr>
<td>1</td> <td>1</td>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>CSS</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>Javascript</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Stu</td> <td colspan="2">Larry the Bird</td>
<td>Dent</td> <td>@twitter</td>
<td>HTML</td>
</tr>
<tr>
<td>4</td>
<td>Brosef</td>
<td>Stalin</td>
<td>HTML</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

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

@@ -112,12 +112,13 @@
================================================== --> ================================================== -->
<section id="buttonDropdowns"> <section id="buttonDropdowns">
<div class="page-header"> <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> </div>
<h2>{{_i}}Button dropdowns{{/i}}</h2>
<div class="row"> <div class="row">
<div class="span4"> <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> <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-toolbar" style="margin-top: 18px;">
<div class="btn-group"> <div class="btn-group">
@@ -202,10 +203,14 @@
</pre> </pre>
</div> </div>
</div> </div>
<div class="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}In some cases&mdash;like mobile&mdash;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="row">
<div class="span4"> <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> <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-toolbar" style="margin-top: 18px;">
<div class="btn-group"> <div class="btn-group">
@@ -276,7 +281,30 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</div><!-- /btn-group --> </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">
&lt;div class="btn-group"&gt;
...
&lt;ul class="dropdown-menu pull-right"&gt;
&lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div> </div>
<div class="span8"> <div class="span8">
<h3>{{_i}}Example markup{{/i}}</h3> <h3>{{_i}}Example markup{{/i}}</h3>
@@ -292,6 +320,44 @@
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </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">
&lt;div class="btn-group dropup"&gt;
&lt;a class="btn" href="#"&gt;{{_i}}Dropup{{/i}}&lt;/a&gt;
&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- {{_i}}dropdown menu links{{/i}} --&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div> </div>
</div> </div>
</section> </section>
@@ -398,7 +464,7 @@
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3> <h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li> <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"> <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@@ -409,6 +475,16 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </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> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs"&gt; &lt;ul class="nav nav-tabs"&gt;
@@ -430,7 +506,7 @@
<h3>{{_i}}Pills with dropdowns{{/i}}</h3> <h3>{{_i}}Pills with dropdowns{{/i}}</h3>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li> <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"> <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@@ -441,6 +517,16 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</li> </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> </ul>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt; &lt;ul class="nav nav-pills"&gt;
@@ -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> <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">
<div class="navbar-inner"> <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"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@@ -773,13 +859,24 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>{{_i}}Fixed navbar{{/i}}</h3> <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"> <pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt; &lt;div class="navbar navbar-fixed-top"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
</pre> </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>&lt;body&gt;</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">
&lt;div class="navbar navbar-fixed-bottom"&gt;
...
&lt;/div&gt;
</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>&lt;body&gt;</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> <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> <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@@ -853,8 +950,8 @@
</pre> </pre>
<h3>{{_i}}Component alignment{{/i}}</h3> <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> <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> <h3>{{_i}}Adding dropdown menus{{/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> <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"> <pre class="prettyprint linenums">
&lt;ul class="nav"&gt; &lt;ul class="nav"&gt;
&lt;li class="dropdown"&gt; &lt;li class="dropdown"&gt;

8
docs/templates/pages/scaffolding.mustache vendored
View File

@@ -410,13 +410,13 @@
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td> <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td>{{_i}}Portrait tablets{{/i}}</td> <td>{{_i}}Smartphones to tablets{{/i}}</td>
<td>480px to 768px</td> <td>767px and below</td>
<td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td> <td class="muted" colspan="2">{{_i}}Fluid columns, no fixed widths{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td>{{_i}}Landscape tablets{{/i}}</td> <td>{{_i}}Portrait tablets{{/i}}</td>
<td>768px to 979px</td> <td>768px and above</td>
<td>42px</td> <td>42px</td>
<td>20px</td> <td>20px</td>
</tr> </tr>

1
less/button-groups.less
View File

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

37
less/dropdowns.less
View File

@@ -13,7 +13,9 @@
.open .dropdown-toggle { .open .dropdown-toggle {
outline: 0; outline: 0;
} }
// Dropdown arrow/caret // Dropdown arrow/caret
// --------------------
.caret { .caret {
display: inline-block; display: inline-block;
width: 0; width: 0;
@@ -29,6 +31,7 @@
.opacity(30); .opacity(30);
content: "\2193"; content: "\2193";
} }
.dropdown .caret { .dropdown .caret {
margin-top: 8px; margin-top: 8px;
margin-left: 2px; margin-left: 2px;
@@ -37,7 +40,9 @@
.open.dropdown .caret { .open.dropdown .caret {
.opacity(100); .opacity(100);
} }
// The dropdown menu (ul) // The dropdown menu (ul)
// ----------------------
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 100%; top: 100%;
@@ -62,11 +67,10 @@
*border-right-width: 2px; *border-right-width: 2px;
*border-bottom-width: 2px; *border-bottom-width: 2px;
// Allow for dropdowns to go bottom up (aka, dropup-menu) // Aligns the dropdown menu to right
&.bottom-up { &.pull-right {
top: auto; right: 0;
bottom: 100%; left: auto;
margin-bottom: 2px;
} }
// Dividers (basically an hr) within the dropdown // Dividers (basically an hr) within the dropdown
@@ -87,6 +91,7 @@
} }
// Hover state // Hover state
// -----------
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu .active > a, .dropdown-menu .active > a,
.dropdown-menu .active > a:hover { .dropdown-menu .active > a:hover {
@@ -96,6 +101,7 @@
} }
// Open state for the dropdown // Open state for the dropdown
// ---------------------------
.dropdown.open { .dropdown.open {
// IE7's z-index only goes to the nearest positioned ancestor, which would // 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 // make the menu appear below buttons that appeared later on the page
@@ -117,7 +123,28 @@
right: 0; 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
// ---------
.typeahead { .typeahead {
margin-top: 2px; // give it some space to breathe margin-top: 2px; // give it some space to breathe
.border-radius(4px); .border-radius(4px);

2
less/mixins.less
View File

@@ -589,4 +589,4 @@
} }
} }

51
less/navbar.less
View File

@@ -20,6 +20,12 @@
.box-shadow(@shadow); .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 // Navbar button for toggling navbar items in responsive layouts
.btn-navbar { .btn-navbar {
display: none; display: none;
@@ -153,22 +159,37 @@
} }
// FIXED NAVBAR // FIXED NAVBAR
// ------------ // ------------
.navbar-fixed-top { // Shared (top/bottom) styles
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed; position: fixed;
top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: @zindexFixedNavbar; 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-left: 0;
padding-right: 0; padding-right: 0;
.border-radius(0); .border-radius(0);
} }
// Fixed to top
.navbar-fixed-top {
top: 0;
}
// Fixed to bottom
.navbar-fixed-bottom {
bottom: 0;
}
// NAVIGATION // NAVIGATION
// ---------- // ----------
@@ -259,11 +280,27 @@
left: 10px; 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 // Dropdown toggle caret
.navbar .nav .dropdown-toggle .caret, .navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret { .navbar .nav .open.dropdown .caret {
border-top-color: @white; border-top-color: @white;
border-bottom-color: @white;
} }
.navbar .nav .active .caret { .navbar .nav .active .caret {
.opacity(100); .opacity(100);
@@ -282,7 +319,11 @@
} }
// Right aligned menus need alt position // 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 { &:before {
left: auto; left: auto;
right: 12px; right: 12px;

4
less/navs.less
View File

@@ -204,11 +204,13 @@
.nav-tabs .dropdown-toggle .caret, .nav-tabs .dropdown-toggle .caret,
.nav-pills .dropdown-toggle .caret { .nav-pills .dropdown-toggle .caret {
border-top-color: @linkColor; border-top-color: @linkColor;
border-bottom-color: @linkColor;
margin-top: 6px; margin-top: 6px;
} }
.nav-tabs .dropdown-toggle:hover .caret, .nav-tabs .dropdown-toggle:hover .caret,
.nav-pills .dropdown-toggle:hover .caret { .nav-pills .dropdown-toggle:hover .caret {
border-top-color: @linkColorHover; border-top-color: @linkColorHover;
border-bottom-color: @linkColorHover;
} }
// Active dropdown links // Active dropdown links
@@ -216,6 +218,7 @@
.nav-tabs .active .dropdown-toggle .caret, .nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret { .nav-pills .active .dropdown-toggle .caret {
border-top-color: @grayDark; border-top-color: @grayDark;
border-bottom-color: @grayDark;
} }
// Active:hover dropdown links // Active:hover dropdown links
@@ -238,6 +241,7 @@
.nav .open.active .caret, .nav .open.active .caret,
.nav .open a:hover .caret { .nav .open a:hover .caret {
border-top-color: @white; border-top-color: @white;
border-bottom-color: @white;
.opacity(100); .opacity(100);
} }

8
less/tables.less
View File

@@ -64,13 +64,12 @@ table {
.table-bordered { .table-bordered {
border: 1px solid #ddd; border: 1px solid #ddd;
border-left: 0;
border-collapse: separate; // Done so we can round those corners! border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapsed; // IE7 can't round corners anyway *border-collapse: collapsed; // IE7 can't round corners anyway
.border-radius(4px); .border-radius(4px);
th + th, th,
td + td, td {
th + td,
td + th {
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
} }
// Prevent a double border // Prevent a double border
@@ -78,6 +77,7 @@ table {
tbody:first-child tr:first-child th, tbody:first-child tr:first-child th,
tbody:first-child tr:first-child td { tbody:first-child tr:first-child td {
border-top: 0; border-top: 0;
border-bottom: 1px solid #ddd;
} }
// For first th or td in the first row in the first thead or tbody // For first th or td in the first row in the first thead or tbody
thead:first-child tr:first-child th:first-child, thead:first-child tr:first-child th:first-child,