1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 09:41:11 +00:00

Merge branch '2.1.2-wip' into exploratory

Conflicts:
	docs/assets/css/bootstrap-responsive.css
	docs/assets/css/bootstrap.css
	docs/components.html
	docs/templates/pages/components.mustache
	less/labels-badges.less
	less/navbar.less
	less/tables.less
This commit is contained in:
Mark Otto 2012-10-01 23:41:00 -07:00
commit 4ab7b77aa3
12 changed files with 1246 additions and 92 deletions

1081
docs/assets/css/bootstrap-responsive.css vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1198,6 +1198,11 @@ textarea[class*="span"],
float: left;
}
.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
padding-top: 5px;
}
input[disabled],
select[disabled],
textarea[disabled],
@ -2643,6 +2648,18 @@ table [class*=span] {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.dropdown .dropdown-menu .nav-header {
padding-right: 20px;
padding-left: 20px;
@ -3386,41 +3403,7 @@ input[type="button"].btn-block {
margin-top: 9px;
}
<<<<<<< HEAD
.nav .divider {
=======
.nav-list {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
margin-right: -15px;
margin-left: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #0088cc;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
.nav-list .divider {
*width: 100%;
>>>>>>> 2.1.2-wip
height: 1px;
margin: 9px 1px;
overflow: hidden;
@ -4758,6 +4741,8 @@ a.thumbnail:hover {
.label,
.badge {
display: inline-block;
padding: 2px 4px;
font-size: 11.844px;
font-weight: bold;
line-height: 14px;
@ -4769,12 +4754,12 @@ a.thumbnail:hover {
}
.label {
padding: 1px 4px 2px;
border-radius: 3px;
}
.badge {
padding: 1px 9px 2px;
padding-right: 9px;
padding-left: 9px;
border-radius: 9px;
}
@ -5772,8 +5757,11 @@ a.badge:hover {
width: auto;
margin: 0;
}
.modal.fade {
top: -100px;
}
.modal.fade.in {
top: auto;
top: 20px;
}
}

View File

@ -163,25 +163,11 @@
<h3>Sub menus on dropdowns</h3>
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
<div class="bs-docs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
<div class="dropup" style="float: left; margin-left: 20px;">
<div class="bs-docs-example" style="min-height: 180px;">
<div class="pull-left">
<p class="muted">Default</p>
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
@ -200,6 +186,51 @@
</ul>
</div>
</div>
<div class="pull-left" style="margin-left: 20px;">
<p class="muted">Dropup</p>
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="pull-left" style="margin-left: 20px;">
<p class="muted">Left submenu</p>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-left">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<pre class="prettyprint linenums">
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
@ -1049,13 +1080,13 @@
<div class="bs-docs-example">
<div class="navbar">
<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=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse">
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
@ -1092,6 +1123,7 @@
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar -->
</div>
<pre class="prettyprint linenums">
@ -1129,13 +1161,13 @@
<div class="bs-docs-example">
<div class="navbar navbar-inverse" style="position: static;">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse">
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>

View File

@ -222,7 +222,7 @@ $('#myModal').on('show', function (e) {
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
<p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>

View File

@ -94,25 +94,11 @@
<h3>{{_i}}Sub menus on dropdowns{{/i}}</h3>
<p>{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.{{/i}}</p>
<div class="bs-docs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
</ul>
</li>
</ul>
<div class="dropup" style="float: left; margin-left: 20px;">
<div class="bs-docs-example" style="min-height: 180px;">
<div class="pull-left">
<p class="muted">Default</p>
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
@ -130,7 +116,52 @@
</li>
</ul>
</div>
</div>
</div>{{! /.pull-left }}
<div class="pull-left" style="margin-left: 20px;">
<p class="muted">Dropup</p>
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
</ul>
</li>
</ul>
</div>
</div>{{! /.pull-left }}
<div class="pull-left" style="margin-left: 20px;">
<p class="muted">Left submenu</p>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-left">
<a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
</ul>
</li>
</ul>
</div>
</div>{{! /.pull-left }}
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
@ -980,13 +1011,13 @@
<div class="bs-docs-example">
<div class="navbar">
<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=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
<div class="nav-collapse collapse">
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
@ -1023,6 +1054,7 @@
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar -->
</div>{{! /example }}
<pre class="prettyprint linenums">
@ -1060,13 +1092,13 @@
<div class="bs-docs-example">
<div class="navbar navbar-inverse" style="position: static;">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
<div class="nav-collapse collapse">
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>

View File

@ -154,7 +154,7 @@ $('#myModal').on('show', function (e) {
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<h4>{{_i}}Popover in a modal{{/i}}</h4>
<p>{{_i}}This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
<p>{{_i}}This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.{{/i}}</p>
<h4>{{_i}}Tooltips in a modal{{/i}}</h4>
<p>{{_i}}<a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>

View File

@ -151,7 +151,6 @@
.dropdown-submenu {
position: relative;
}
// Default dropdowns
.dropdown-submenu > .dropdown-menu {
top: 0;
@ -195,6 +194,21 @@
border-left-color: @dropdownLinkColorHover;
}
// Left aligned submenus
.dropdown-submenu.pull-left {
// Undo the float
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
float: none;
// Positioning the submenu
> .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
}
// Tweak nav headers
// -----------------

View File

@ -334,6 +334,11 @@ textarea[class*="span"],
.controls-row [class*="span"] {
float: left;
}
// Explicity set top padding on all checkboxes/radios, not just first-child
.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
padding-top: 5px;
}

View File

@ -6,6 +6,8 @@
// Base classes
.label,
.badge {
display: inline-block;
padding: 2px 4px;
font-size: @baseFontSize * .846;
font-weight: bold;
line-height: 14px; // ensure proper line-height if floated
@ -17,11 +19,11 @@
}
// Set unique padding and border-radii
.label {
padding: 1px 4px 2px;
border-radius: 3px;
}
.badge {
padding: 1px 9px 2px;
padding-left: 9px;
padding-right: 9px;
border-radius: 9px;
}

View File

@ -261,6 +261,7 @@
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
.translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z);

View File

@ -83,7 +83,8 @@
right: 20px;
width: auto;
margin: 0;
&.fade.in { top: auto; }
&.fade { top: -100px; }
&.fade.in { top: 20px; }
}
}

View File

@ -178,8 +178,6 @@ table [class*=span] {
margin-left: 0; // undo default grid column styles
}
// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped