diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index 9b90ba477..1694b7375 100644 Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 560bd7566..df663f69f 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -139,6 +139,15 @@ .container-fluid { padding: 0; } + .dl-horizontal dt { + float: none; + clear: none; + width: auto; + text-align: left; + } + .dl-horizontal dd { + margin-left: 0; + } .container { width: auto; } @@ -148,16 +157,13 @@ .row { margin-left: 0; } - .row > [class*="span"], - .row-fluid > [class*="span"] { + [class*="span"], + .row-fluid [class*="span"] { float: none; display: block; width: auto; margin: 0; } - .thumbnails [class*="span"] { - width: auto; - } input[class*="span"], select[class*="span"], textarea[class*="span"], @@ -174,8 +180,11 @@ -ms-box-sizing: border-box; box-sizing: border-box; } + .input-prepend input, + .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] { + display: inline-block; width: auto; } } @@ -286,46 +295,57 @@ clear: both; } .row-fluid [class*="span"] { + display: block; + width: 100%; + min-height: 28px; + /* Make inputs at least the height of their button counterpart */ + + /* Makes inputs behave like true block-level elements */ + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; float: left; margin-left: 2.762430939%; } .row-fluid [class*="span"]:first-child { margin-left: 0; } - .row-fluid > .span12 { + .row-fluid .span12 { width: 99.999999993%; } - .row-fluid > .span11 { + .row-fluid .span11 { width: 91.436464082%; } - .row-fluid > .span10 { + .row-fluid .span10 { width: 82.87292817100001%; } - .row-fluid > .span9 { + .row-fluid .span9 { width: 74.30939226%; } - .row-fluid > .span8 { + .row-fluid .span8 { width: 65.74585634900001%; } - .row-fluid > .span7 { + .row-fluid .span7 { width: 57.182320438000005%; } - .row-fluid > .span6 { + .row-fluid .span6 { width: 48.618784527%; } - .row-fluid > .span5 { + .row-fluid .span5 { width: 40.055248616%; } - .row-fluid > .span4 { + .row-fluid .span4 { width: 31.491712705%; } - .row-fluid > .span3 { + .row-fluid .span3 { width: 22.928176794%; } - .row-fluid > .span2 { + .row-fluid .span2 { width: 14.364640883%; } - .row-fluid > .span1 { + .row-fluid .span1 { width: 5.801104972%; } input, @@ -477,46 +497,57 @@ clear: both; } .row-fluid [class*="span"] { + display: block; + width: 100%; + min-height: 28px; + /* Make inputs at least the height of their button counterpart */ + + /* Makes inputs behave like true block-level elements */ + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; float: left; margin-left: 2.564102564%; } .row-fluid [class*="span"]:first-child { margin-left: 0; } - .row-fluid > .span12 { + .row-fluid .span12 { width: 100%; } - .row-fluid > .span11 { + .row-fluid .span11 { width: 91.45299145300001%; } - .row-fluid > .span10 { + .row-fluid .span10 { width: 82.905982906%; } - .row-fluid > .span9 { + .row-fluid .span9 { width: 74.358974359%; } - .row-fluid > .span8 { + .row-fluid .span8 { width: 65.81196581200001%; } - .row-fluid > .span7 { + .row-fluid .span7 { width: 57.264957265%; } - .row-fluid > .span6 { + .row-fluid .span6 { width: 48.717948718%; } - .row-fluid > .span5 { + .row-fluid .span5 { width: 40.170940171000005%; } - .row-fluid > .span4 { + .row-fluid .span4 { width: 31.623931624%; } - .row-fluid > .span3 { + .row-fluid .span3 { width: 23.076923077%; } - .row-fluid > .span2 { + .row-fluid .span2 { width: 14.529914530000001%; } - .row-fluid > .span1 { + .row-fluid .span1 { width: 5.982905983%; } input, @@ -563,8 +594,8 @@ .thumbnails { margin-left: -30px; } - .thumbnails > li { - margin-left: 30px; + .row-fluid .thumbnails { + margin-left: 0; } } @media (max-width: 979px) { @@ -655,9 +686,9 @@ margin: 9px 0; border-top: 1px solid #222222; border-bottom: 1px solid #222222; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); } .navbar .nav.pull-right { float: none; diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 9684cc912..c0b2325ba 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -254,46 +254,57 @@ a:hover { clear: both; } .row-fluid [class*="span"] { + display: block; + width: 100%; + min-height: 28px; + /* Make inputs at least the height of their button counterpart */ + + /* Makes inputs behave like true block-level elements */ + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; float: left; margin-left: 2.127659574%; } .row-fluid [class*="span"]:first-child { margin-left: 0; } -.row-fluid > .span12 { +.row-fluid .span12 { width: 99.99999998999999%; } -.row-fluid > .span11 { +.row-fluid .span11 { width: 91.489361693%; } -.row-fluid > .span10 { +.row-fluid .span10 { width: 82.97872339599999%; } -.row-fluid > .span9 { +.row-fluid .span9 { width: 74.468085099%; } -.row-fluid > .span8 { +.row-fluid .span8 { width: 65.95744680199999%; } -.row-fluid > .span7 { +.row-fluid .span7 { width: 57.446808505%; } -.row-fluid > .span6 { +.row-fluid .span6 { width: 48.93617020799999%; } -.row-fluid > .span5 { +.row-fluid .span5 { width: 40.425531911%; } -.row-fluid > .span4 { +.row-fluid .span4 { width: 31.914893614%; } -.row-fluid > .span3 { +.row-fluid .span3 { width: 23.404255317%; } -.row-fluid > .span2 { +.row-fluid .span2 { width: 14.89361702%; } -.row-fluid > .span1 { +.row-fluid .span1 { width: 6.382978723%; } .container { @@ -447,6 +458,9 @@ dd { margin-left: 9px; } .dl-horizontal dt { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; float: left; clear: left; width: 120px; @@ -750,9 +764,9 @@ textarea { input:focus, textarea:focus { border-color: rgba(82, 168, 236, 0.8); - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); + -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); outline: 0; outline: thin dotted \9; /* IE6-9 */ @@ -790,7 +804,11 @@ select:focus { input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input[class*="span"] { +.uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"] { float: none; margin-left: 0; } @@ -2017,9 +2035,9 @@ button.close { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); cursor: pointer; *margin-left: .3em; /* Remove the border to prevent IE7's black border on input:focus */ @@ -2064,9 +2082,9 @@ button.close { .btn.active, .btn:active { background-image: none; - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); background-color: #e6e6e6; background-color: #d9d9d9 \9; outline: 0; @@ -2358,7 +2376,7 @@ input[type="submit"].btn.btn-mini { *zoom: 1; } -.btn-group .btn { +.btn-group > .btn { position: relative; float: left; margin-left: -1px; @@ -2366,7 +2384,7 @@ input[type="submit"].btn.btn-mini { -moz-border-radius: 0; border-radius: 0; } -.btn-group .btn:first-child { +.btn-group > .btn:first-child { margin-left: 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; @@ -2375,8 +2393,8 @@ input[type="submit"].btn.btn-mini { -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; } -.btn-group .btn:last-child, -.btn-group .dropdown-toggle { +.btn-group > .btn:last-child, +.btn-group > .dropdown-toggle { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; @@ -2384,7 +2402,7 @@ input[type="submit"].btn.btn-mini { -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px; } -.btn-group .btn.large:first-child { +.btn-group > .btn.large:first-child { margin-left: 0; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; @@ -2393,8 +2411,8 @@ input[type="submit"].btn.btn-mini { -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px; } -.btn-group .btn.large:last-child, -.btn-group .large.dropdown-toggle { +.btn-group > .btn.large:last-child, +.btn-group > .large.dropdown-toggle { -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; @@ -2402,44 +2420,44 @@ input[type="submit"].btn.btn-mini { -moz-border-radius-bottomright: 6px; border-bottom-right-radius: 6px; } -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active, -.btn-group .btn.active { +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active { z-index: 2; } .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; } -.btn-group .dropdown-toggle { +.btn-group > .dropdown-toggle { padding-left: 8px; padding-right: 8px; - -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); *padding-top: 3px; *padding-bottom: 3px; } -.btn-group .btn-mini.dropdown-toggle { +.btn-group > .btn-mini.dropdown-toggle { padding-left: 5px; padding-right: 5px; *padding-top: 1px; *padding-bottom: 1px; } -.btn-group .btn-small.dropdown-toggle { +.btn-group > .btn-small.dropdown-toggle { *padding-top: 4px; *padding-bottom: 4px; } -.btn-group .btn-large.dropdown-toggle { +.btn-group > .btn-large.dropdown-toggle { padding-left: 12px; padding-right: 12px; } .btn-group.open .dropdown-toggle { background-image: none; - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); } .btn-group.open .btn.dropdown-toggle { background-color: #e6e6e6; @@ -2766,8 +2784,7 @@ input[type="submit"].btn.btn-mini { clear: both; } .tab-content { - display: table; - width: 100%; + overflow: auto; } .tabs-below .nav-tabs, .tabs-right .nav-tabs, @@ -2802,10 +2819,6 @@ input[type="submit"].btn.btn-mini { .tabs-below .nav-tabs .active > a:hover { border-color: transparent #ddd #ddd #ddd; } -.tabs-left .tab-content, -.tabs-right .tab-content { - width: auto; -} .tabs-left .nav-tabs > li, .tabs-right .nav-tabs > li { float: none; @@ -2876,9 +2889,9 @@ input[type="submit"].btn.btn-mini { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-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); + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); + box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); } .navbar .container { width: auto; @@ -2904,9 +2917,9 @@ input[type="submit"].btn.btn-mini { *background-color: #222222; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); } .btn-navbar:hover, .btn-navbar:active, @@ -3023,9 +3036,9 @@ input[type="submit"].btn.btn-mini { color: #ffffff; background-color: #626262; border: 1px solid #151515; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); + -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); + -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); + box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); -webkit-transition: none; -moz-transition: none; -ms-transition: none; @@ -3617,9 +3630,11 @@ input[type="submit"].btn.btn-mini { .thumbnails:after { clear: both; } +.row-fluid .thumbnails { + margin-left: 0; +} .thumbnails > li { - float: left; - margin: 0 0 18px 20px; + margin-bottom: 18px; } .thumbnail { display: block; diff --git a/docs/base-css.html b/docs/base-css.html index 0a1ea0d9d..647b396c6 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -371,7 +371,14 @@
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
+
Felis euismod semper eget lacinia
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
+

+ Heads up! + Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout. +

diff --git a/docs/javascript.html b/docs/javascript.html index 4f777e031..2a0f3d861 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -493,6 +493,20 @@ $('#myModal').on('hidden', function () { </li> ... </ul> +

To keep URLs intact, use the data-target attribute instead of href="#".

+
+<ul class="nav nav-pills">
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
+      Dropdown
+      <b class="caret"></b>
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+

Methods

$().dropdown()

A programatic api for activating menus for a given navbar or tabbed navigation.

diff --git a/docs/less.html b/docs/less.html index a9ae68f9e..354285815 100644 --- a/docs/less.html +++ b/docs/less.html @@ -704,17 +704,17 @@ .size() - @height: 5px, @width: 5px + @height @width Quickly set the height and width on one line .square() - @size: 5px + @size Builds on .size() to set the width and height as same value .opacity() - @opacity: 100 + @opacity Set, in whole numbers, the opacity percentage (e.g., "50" or "75") @@ -822,12 +822,12 @@ .border-radius() - @radius: 5px + @radius Round the corners of an element. Can be a single value or four space-separated values .box-shadow() - @shadow: 0 1px 3px rgba(0,0,0,.25) + @shadow Add a drop shadow to an element @@ -847,7 +847,7 @@ .translate() - @x: 0, @y: 0 + @x, @y Move an element on the x and y planes @@ -882,7 +882,7 @@ .content-columns() - @columnCount, @columnGap: @gridColumnGutter + @columnCount, @columnGap: @gridGutterWidth Make the content of any element use CSS3 columns @@ -969,7 +969,7 @@

Command line

Install the LESS command line tool via Node and run the following command:

- 
$ lessc ./lib/bootstrap.less > bootstrap.css
+ 
$ lessc ./less/bootstrap.less > bootstrap.css

Be sure to include --compress in that command if you're trying to save some bytes!

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 0b6e17e69..66bf70474 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -294,7 +294,14 @@
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
+
Felis euismod semper eget lacinia
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
+

+ {{_i}}Heads up!{{/i}} + {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.{{/i}} +

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index d61a364f0..bb25f0957 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -416,6 +416,20 @@ $('#myModal').on('hidden', function () { </li> ... </ul> +

{{_i}}To keep URLs intact, use the data-target attribute instead of href="#".{{/i}}

+
+<ul class="nav nav-pills">
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
+      {{_i}}Dropdown{{/i}}
+      <b class="caret"></b>
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+

{{_i}}Methods{{/i}}

$().dropdown()

{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 280c39318..5005fb166 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -627,17 +627,17 @@ .size() - @height: 5px, @width: 5px + @height @width {{_i}}Quickly set the height and width on one line{{/i}} .square() - @size: 5px + @size {{_i}}Builds on .size() to set the width and height as same value{{/i}} .opacity() - @opacity: 100 + @opacity {{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}} @@ -745,12 +745,12 @@ .border-radius() - @radius: 5px + @radius {{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}} .box-shadow() - @shadow: 0 1px 3px rgba(0,0,0,.25) + @shadow {{_i}}Add a drop shadow to an element{{/i}} @@ -770,7 +770,7 @@ .translate() - @x: 0, @y: 0 + @x, @y {{_i}}Move an element on the x and y planes{{/i}} @@ -805,7 +805,7 @@ .content-columns() - @columnCount, @columnGap: @gridColumnGutter + @columnCount, @columnGap: @gridGutterWidth {{_i}}Make the content of any element use CSS3 columns{{/i}} @@ -892,7 +892,7 @@

{{_i}}Command line{{/i}}

{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

- 
$ lessc ./lib/bootstrap.less > bootstrap.css
+ 
$ lessc ./less/bootstrap.less > bootstrap.css

{{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

diff --git a/less/button-groups.less b/less/button-groups.less index 65c974a39..7c6a02a67 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -25,14 +25,14 @@ } // Float them, remove border radius, then re-add to first and last elements -.btn-group .btn { +.btn-group > .btn { position: relative; float: left; margin-left: -1px; .border-radius(0); } // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match -.btn-group .btn:first-child { +.btn-group > .btn:first-child { margin-left: 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; @@ -41,8 +41,8 @@ -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; } -.btn-group .btn:last-child, -.btn-group .dropdown-toggle { +.btn-group > .btn:last-child, +.btn-group > .dropdown-toggle { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; @@ -51,7 +51,7 @@ border-bottom-right-radius: 4px; } // Reset corners for large buttons -.btn-group .btn.large:first-child { +.btn-group > .btn.large:first-child { margin-left: 0; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; @@ -60,8 +60,8 @@ -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px; } -.btn-group .btn.large:last-child, -.btn-group .large.dropdown-toggle { +.btn-group > .btn.large:last-child, +.btn-group > .large.dropdown-toggle { -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; @@ -71,10 +71,10 @@ } // On hover/focus/active, bring the proper btn to front -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active, -.btn-group .btn.active { +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active { z-index: 2; } @@ -90,27 +90,24 @@ // ---------------------- // Give the line between buttons some depth -.btn-group .dropdown-toggle { +.btn-group > .dropdown-toggle { padding-left: 8px; padding-right: 8px; - @shadow: inset 1px 0 0 rgba(255,255,255,.125), - inset 0 1px 0 rgba(255,255,255,.2), - 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); *padding-top: 3px; *padding-bottom: 3px; } -.btn-group .btn-mini.dropdown-toggle { +.btn-group > .btn-mini.dropdown-toggle { padding-left: 5px; padding-right: 5px; *padding-top: 1px; *padding-bottom: 1px; } -.btn-group .btn-small.dropdown-toggle { +.btn-group > .btn-small.dropdown-toggle { *padding-top: 4px; *padding-bottom: 4px; } -.btn-group .btn-large.dropdown-toggle { +.btn-group > .btn-large.dropdown-toggle { padding-left: 12px; padding-right: 12px; } @@ -121,9 +118,7 @@ // Remove the gradient and set the same inset shadow as the :active state .dropdown-toggle { background-image: none; - @shadow: inset 0 2px 4px rgba(0,0,0,.15), - 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); } // Keep the hover's background when dropdown is open diff --git a/less/buttons.less b/less/buttons.less index a1abb6ef7..4deec92a9 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -21,9 +21,7 @@ border: 1px solid @btnBorder; border-bottom-color: darken(@btnBorder, 10%); .border-radius(4px); - @shadow: inset 0 1px 0 rgba(255,255,255,.2), - 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); cursor: pointer; // Give IE7 some love @@ -56,9 +54,7 @@ .btn.active, .btn:active { background-image: none; - @shadow: inset 0 2px 4px rgba(0,0,0,.15), - 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); background-color: darken(@white, 10%); background-color: darken(@white, 15%) e("\9"); outline: 0; diff --git a/less/forms.less b/less/forms.less index a57732c13..240de5ed2 100644 --- a/less/forms.less +++ b/less/forms.less @@ -213,9 +213,7 @@ textarea { input:focus, textarea:focus { border-color: rgba(82,168,236,.8); - @shadow: inset 0 1px 1px rgba(0,0,0,.075), - 0 0 8px rgba(82,168,236,.6); - .box-shadow(@shadow); + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); outline: 0; outline: thin dotted \9; /* IE6-9 */ } @@ -244,7 +242,12 @@ select:focus { input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input[class*="span"] { +.uneditable-input[class*="span"], +// Redeclare since the fluid row class is more specific +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"] { float: none; margin-left: 0; } diff --git a/less/mixins.less b/less/mixins.less index 7950f0e56..71532fcff 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -70,11 +70,11 @@ // Sizing shortcuts // ------------------------- -.size(@height: 5px, @width: 5px) { +.size(@height, @width) { width: @width; height: @height; } -.square(@size: 5px) { +.square(@size) { .size(@size, @size); } @@ -192,14 +192,14 @@ // -------------------------------------------------- // Border Radius -.border-radius(@radius: 5px) { +.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } // Drop shadows -.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { +.box-shadow(@shadow) { -webkit-box-shadow: @shadow; -moz-box-shadow: @shadow; box-shadow: @shadow; @@ -229,21 +229,21 @@ -o-transform: scale(@ratio); transform: scale(@ratio); } -.translate(@x: 0, @y: 0) { +.translate(@x, @y) { -webkit-transform: translate(@x, @y); -moz-transform: translate(@x, @y); -ms-transform: translate(@x, @y); -o-transform: translate(@x, @y); transform: translate(@x, @y); } -.skew(@x: 0, @y: 0) { +.skew(@x, @y) { -webkit-transform: skew(@x, @y); -moz-transform: skew(@x, @y); -ms-transform: skew(@x, @y); -o-transform: skew(@x, @y); transform: skew(@x, @y); } -.translate3d(@x: 0, @y: 0, @z: 0) { +.translate3d(@x, @y, @z) { -webkit-transform: translate(@x, @y, @z); -moz-transform: translate(@x, @y, @z); -ms-transform: translate(@x, @y, @z); @@ -255,7 +255,7 @@ // Prevent browsers from flickering when using CSS 3D transforms. // Default value is `visible`, but can be changed to `hidden // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples -.backface-visibility(@visibility: visible){ +.backface-visibility(@visibility){ -webkit-backface-visibility: @visibility; -moz-backface-visibility: @visibility; -ms-backface-visibility: @visibility; @@ -297,13 +297,13 @@ } // Resize anything -.resizable(@direction: both) { +.resizable(@direction) { resize: @direction; // Options: horizontal, vertical, both overflow: auto; // Safari fix } // CSS3 Content Columns -.content-columns(@columnCount, @columnGap: @gridColumnGutter) { +.content-columns(@columnCount, @columnGap: @gridGutterWidth) { -webkit-column-count: @columnCount; -moz-column-count: @columnCount; column-count: @columnCount; @@ -313,7 +313,7 @@ } // Opacity -.opacity(@opacity: 100) { +.opacity(@opacity) { opacity: @opacity / 100; filter: ~"alpha(opacity=@{opacity})"; } @@ -577,7 +577,7 @@ .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { .spanX (@index) when (@index > 0) { - (~"> .span@{index}") { .span(@index); } + (~".span@{index}") { .span(@index); } .spanX(@index - 1); } .spanX (0) {} @@ -590,6 +590,7 @@ width: 100%; .clearfix(); [class*="span"] { + .input-block-level(); float: left; margin-left: @fluidGridGutterWidth; } diff --git a/less/modals.less b/less/modals.less index 4fccea738..870ad0dfe 100644 --- a/less/modals.less +++ b/less/modals.less @@ -56,7 +56,7 @@ .close { margin-top: 2px; } } -// Body (where all modal content resises) +// Body (where all modal content resides) .modal-body { overflow-y: auto; max-height: 400px; diff --git a/less/navbar.less b/less/navbar.less index f2f5153a7..6816a6ab9 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -21,8 +21,7 @@ padding-right: 20px; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); .border-radius(4px); - @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); - .box-shadow(@shadow); + .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)"); } // Set width to auto for default container @@ -39,8 +38,7 @@ margin-left: 5px; margin-right: 5px; .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); - @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); - .box-shadow(@shadow); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); } .btn-navbar .icon-bar { display: block; @@ -143,8 +141,7 @@ color: @white; background-color: @navbarSearchBackground; border: 1px solid @navbarSearchBorder; - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); - .box-shadow(@shadow); + .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)"); .transition(none); // Placeholder text gets special styles; can't be a grouped selector diff --git a/less/navs.less b/less/navs.less index a02be18f0..4f4b6c327 100644 --- a/less/navs.less +++ b/less/navs.less @@ -266,8 +266,7 @@ .clearfix(); } .tab-content { - display: table; // prevent content from running below tabs - width: 100%; + overflow: auto; // prevent content from running below tabs } // Remove border on bottom, left, right @@ -314,10 +313,6 @@ // ------------ // Common styles -.tabs-left .tab-content, -.tabs-right .tab-content { - width: auto; -} .tabs-left .nav-tabs > li, .tabs-right .nav-tabs > li { float: none; diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less index 9e77a113d..3331cfe5b 100644 --- a/less/responsive-1200px-min.less +++ b/less/responsive-1200px-min.less @@ -16,8 +16,8 @@ .thumbnails { margin-left: -30px; } - .thumbnails > li { - margin-left: 30px; + .row-fluid .thumbnails { + margin-left: 0; } } diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 7a3318a8f..4b8b41fbe 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -86,6 +86,21 @@ padding: 0; } + // TYPOGRAPHY + // ---------- + // Reset horizontal dl + .dl-horizontal { + dt { + float: none; + clear: none; + width: auto; + text-align: left; + } + dd { + margin-left: 0; + } + } + // GRID & CONTAINERS // ----------------- // Remove width from containers @@ -100,21 +115,15 @@ .row { margin-left: 0; } - // Make all columns even - .row > [class*="span"], - .row-fluid > [class*="span"] { + // Make all grid-sized elements block level again + [class*="span"], + .row-fluid [class*="span"] { float: none; display: block; width: auto; margin: 0; } - // THUMBNAILS - // ---------- - .thumbnails [class*="span"] { - width: auto; - } - // FORM FIELDS // ----------- // Make span* classes full width @@ -125,8 +134,11 @@ .input-block-level(); } // But don't let it screw up prepend/append inputs + .input-prepend input, + .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] { + display: inline-block; // redeclare so they don't wrap to new lines width: auto; } diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 84b0f33f3..2f1c4925a 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -93,8 +93,7 @@ margin: (@baseLineHeight / 2) 0; border-top: 1px solid @navbarBackground; border-bottom: 1px solid @navbarBackground; - @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); - .box-shadow(@shadow); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); } // Pull right (secondary) nav content .navbar .nav.pull-right { diff --git a/less/responsive.less b/less/responsive.less index 5434f3a08..bbd76d631 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -8,6 +8,7 @@ * Designed and built with all the love in the world @twitter by @mdo and @fat. */ + // Responsive.less // For phone and tablet devices // ------------------------------------------------------------- diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 1955ebbec..255a078b3 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -269,23 +269,180 @@

Inputs should not extend past the light red background, set on their parent, a .span* column.

-
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
-
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
-
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ + +
+

Dropdowns

+
+ +

Dropdown link with hash URL

+ + +

Dropdown link with custom URL and data-target

+ +
+ + +
+

Thumbnails

+
+ +

Offset thumbnails

+ + + + +

Fluid thumbnails

+
+
+ +
+
diff --git a/less/thumbnails.less b/less/thumbnails.less index 3a12d4e50..7fa77afa9 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -1,15 +1,23 @@ // THUMBNAILS // ---------- +// Make wrapper ul behave like the grid .thumbnails { margin-left: -@gridGutterWidth; list-style: none; .clearfix(); } -.thumbnails > li { - float: left; - margin: 0 0 @baseLineHeight @gridGutterWidth; +// Fluid rows have no left margin +.row-fluid .thumbnails { + margin-left: 0; } + +// Float li to make thumbnails appear in a row +.thumbnails > li { + margin-bottom: @baseLineHeight; +} + +// The actual thumbnail (can be `a` or `div`) .thumbnail { display: block; padding: 4px; @@ -23,6 +31,7 @@ a.thumbnail:hover { border-color: @linkColor; .box-shadow(0 1px 4px rgba(0,105,214,.25)); } + // Images and captions .thumbnail > img { display: block; diff --git a/less/type.less b/less/type.less index 4e1407b85..779e85960 100644 --- a/less/type.less +++ b/less/type.less @@ -135,6 +135,7 @@ dd { // Horizontal layout (like forms) .dl-horizontal { dt { + .text-overflow(); float: left; clear: left; width: 120px;