Skip to content

B
bootstrap
Commit 4953629c authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

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

Conflicts:
	docs/assets/bootstrap.zip
parents 83febb34 2ea437f3
Expand all Show whitespace changes
Inline Side-by-side
Showing with 439 additions and 185 deletions
docs/assets/css/bootstrap-responsive.css
View file @ 4953629c
...@@ -139,6 +139,15 @@ ...@@ -139,6 +139,15 @@
.container-fluid { .container-fluid {
padding: 0; padding: 0;
} }
.dl-horizontal dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
.dl-horizontal dd {
margin-left: 0;
}
.container { .container {
width: auto; width: auto;
} }
...@@ -148,16 +157,13 @@ ...@@ -148,16 +157,13 @@
.row { .row {
margin-left: 0; margin-left: 0;
} }
.row > [class*="span"], [class*="span"],
.row-fluid > [class*="span"] { .row-fluid [class*="span"] {
float: none; float: none;
display: block; display: block;
width: auto; width: auto;
margin: 0; margin: 0;
} }
.thumbnails [class*="span"] {
width: auto;
}
input[class*="span"], input[class*="span"],
select[class*="span"], select[class*="span"],
textarea[class*="span"], textarea[class*="span"],
...@@ -174,8 +180,11 @@ ...@@ -174,8 +180,11 @@
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"], .input-prepend input[class*="span"],
.input-append input[class*="span"] { .input-append input[class*="span"] {
display: inline-block;
width: auto; width: auto;
} }
} }
...@@ -286,46 +295,57 @@ ...@@ -286,46 +295,57 @@
clear: both; clear: both;
} }
.row-fluid [class*="span"] { .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; float: left;
margin-left: 2.762430939%; margin-left: 2.762430939%;
} }
.row-fluid [class*="span"]:first-child { .row-fluid [class*="span"]:first-child {
margin-left: 0; margin-left: 0;
} }
.row-fluid > .span12 { .row-fluid .span12 {
width: 99.999999993%; width: 99.999999993%;
} }
.row-fluid > .span11 { .row-fluid .span11 {
width: 91.436464082%; width: 91.436464082%;
} }
.row-fluid > .span10 { .row-fluid .span10 {
width: 82.87292817100001%; width: 82.87292817100001%;
} }
.row-fluid > .span9 { .row-fluid .span9 {
width: 74.30939226%; width: 74.30939226%;
} }
.row-fluid > .span8 { .row-fluid .span8 {
width: 65.74585634900001%; width: 65.74585634900001%;
} }
.row-fluid > .span7 { .row-fluid .span7 {
width: 57.182320438000005%; width: 57.182320438000005%;
} }
.row-fluid > .span6 { .row-fluid .span6 {
width: 48.618784527%; width: 48.618784527%;
} }
.row-fluid > .span5 { .row-fluid .span5 {
width: 40.055248616%; width: 40.055248616%;
} }
.row-fluid > .span4 { .row-fluid .span4 {
width: 31.491712705%; width: 31.491712705%;
} }
.row-fluid > .span3 { .row-fluid .span3 {
width: 22.928176794%; width: 22.928176794%;
} }
.row-fluid > .span2 { .row-fluid .span2 {
width: 14.364640883%; width: 14.364640883%;
} }
.row-fluid > .span1 { .row-fluid .span1 {
width: 5.801104972%; width: 5.801104972%;
} }
input, input,
...@@ -477,46 +497,57 @@ ...@@ -477,46 +497,57 @@
clear: both; clear: both;
} }
.row-fluid [class*="span"] { .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; float: left;
margin-left: 2.564102564%; margin-left: 2.564102564%;
} }
.row-fluid [class*="span"]:first-child { .row-fluid [class*="span"]:first-child {
margin-left: 0; margin-left: 0;
} }
.row-fluid > .span12 { .row-fluid .span12 {
width: 100%; width: 100%;
} }
.row-fluid > .span11 { .row-fluid .span11 {
width: 91.45299145300001%; width: 91.45299145300001%;
} }
.row-fluid > .span10 { .row-fluid .span10 {
width: 82.905982906%; width: 82.905982906%;
} }
.row-fluid > .span9 { .row-fluid .span9 {
width: 74.358974359%; width: 74.358974359%;
} }
.row-fluid > .span8 { .row-fluid .span8 {
width: 65.81196581200001%; width: 65.81196581200001%;
} }
.row-fluid > .span7 { .row-fluid .span7 {
width: 57.264957265%; width: 57.264957265%;
} }
.row-fluid > .span6 { .row-fluid .span6 {
width: 48.717948718%; width: 48.717948718%;
} }
.row-fluid > .span5 { .row-fluid .span5 {
width: 40.170940171000005%; width: 40.170940171000005%;
} }
.row-fluid > .span4 { .row-fluid .span4 {
width: 31.623931624%; width: 31.623931624%;
} }
.row-fluid > .span3 { .row-fluid .span3 {
width: 23.076923077%; width: 23.076923077%;
} }
.row-fluid > .span2 { .row-fluid .span2 {
width: 14.529914530000001%; width: 14.529914530000001%;
} }
.row-fluid > .span1 { .row-fluid .span1 {
width: 5.982905983%; width: 5.982905983%;
} }
input, input,
...@@ -563,8 +594,8 @@ ...@@ -563,8 +594,8 @@
.thumbnails { .thumbnails {
margin-left: -30px; margin-left: -30px;
} }
.thumbnails > li { .row-fluid .thumbnails {
margin-left: 30px; margin-left: 0;
} }
} }
@media (max-width: 979px) { @media (max-width: 979px) {
...@@ -655,9 +686,9 @@ ...@@ -655,9 +686,9 @@
margin: 9px 0; margin: 9px 0;
border-top: 1px solid #222222; border-top: 1px solid #222222;
border-bottom: 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); -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, 0.1), 0 1px 0 rgba(255, 255, 255, 0.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, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
} }
.navbar .nav.pull-right { .navbar .nav.pull-right {
float: none; float: none;
......
docs/assets/css/bootstrap.css
View file @ 4953629c
This diff is collapsed.
docs/base-css.html
View file @ 4953629c
...@@ -371,7 +371,14 @@ ...@@ -371,7 +371,14 @@
<dd>Donec id elit non mi porta gravida at eget metus.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt> <dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl> </dl>
<hr>
<p>
<span class="label label-info">Heads up!</span>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
</p>
</div> </div>
</div><!-- /row --> </div><!-- /row -->
</section> </section>
......
docs/javascript.html
View file @ 4953629c
...@@ -493,6 +493,20 @@ $('#myModal').on('hidden', function () { ...@@ -493,6 +493,20 @@ $('#myModal').on('hidden', function () {
&lt;/li&gt; &lt;/li&gt;
... ...
&lt;/ul&gt;</pre> &lt;/ul&gt;</pre>
<p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt;
&lt;li class="dropdown"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
Dropdown
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().dropdown()</h4> <h4>$().dropdown()</h4>
<p>A programatic api for activating menus for a given navbar or tabbed navigation.</p> <p>A programatic api for activating menus for a given navbar or tabbed navigation.</p>
......
docs/less.html
View file @ 4953629c
...@@ -704,17 +704,17 @@ ...@@ -704,17 +704,17 @@
</tr> </tr>
<tr> <tr>
<td><code>.size()</code></td> <td><code>.size()</code></td>
<td><code>@height: 5px, @width: 5px</code></td> <td><code>@height @width</code></td>
<td>Quickly set the height and width on one line</td> <td>Quickly set the height and width on one line</td>
</tr> </tr>
<tr> <tr>
<td><code>.square()</code></td> <td><code>.square()</code></td>
<td><code>@size: 5px</code></td> <td><code>@size</code></td>
<td>Builds on <code>.size()</code> to set the width and height as same value</td> <td>Builds on <code>.size()</code> to set the width and height as same value</td>
</tr> </tr>
<tr> <tr>
<td><code>.opacity()</code></td> <td><code>.opacity()</code></td>
<td><code>@opacity: 100</code></td> <td><code>@opacity</code></td>
<td>Set, in whole numbers, the opacity percentage (e.g., "50" or "75")</td> <td>Set, in whole numbers, the opacity percentage (e.g., "50" or "75")</td>
</tr> </tr>
</tbody> </tbody>
...@@ -822,12 +822,12 @@ ...@@ -822,12 +822,12 @@
<tbody> <tbody>
<tr> <tr>
<td><code>.border-radius()</code></td> <td><code>.border-radius()</code></td>
<td><code>@radius: 5px</code></td> <td><code>@radius</code></td>
<td>Round the corners of an element. Can be a single value or four space-separated values</td> <td>Round the corners of an element. Can be a single value or four space-separated values</td>
</tr> </tr>
<tr> <tr>
<td><code>.box-shadow()</code></td> <td><code>.box-shadow()</code></td>
<td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td> <td><code>@shadow</code></td>
<td>Add a drop shadow to an element</td> <td>Add a drop shadow to an element</td>
</tr> </tr>
<tr> <tr>
...@@ -847,7 +847,7 @@ ...@@ -847,7 +847,7 @@
</tr> </tr>
<tr> <tr>
<td><code>.translate()</code></td> <td><code>.translate()</code></td>
<td><code>@x: 0, @y: 0</code></td> <td><code>@x, @y</code></td>
<td>Move an element on the x and y planes</td> <td>Move an element on the x and y planes</td>
</tr> </tr>
<tr> <tr>
...@@ -882,7 +882,7 @@ ...@@ -882,7 +882,7 @@
</tr> </tr>
<tr> <tr>
<td><code>.content-columns()</code></td> <td><code>.content-columns()</code></td>
<td><code>@columnCount, @columnGap: @gridColumnGutter</code></td> <td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
<td>Make the content of any element use CSS3 columns</td> <td>Make the content of any element use CSS3 columns</td>
</tr> </tr>
</tbody> </tbody>
...@@ -969,7 +969,7 @@ ...@@ -969,7 +969,7 @@
<div class="span4"> <div class="span4">
<h3>Command line</h3> <h3>Command line</h3>
<p>Install the LESS command line tool via Node and run the following command:</p> <p>Install the LESS command line tool via Node and run the following command:</p>
<pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre> <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p> <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
</div><!-- /span4 --> </div><!-- /span4 -->
<div class="span4"> <div class="span4">
......
docs/templates/pages/base-css.mustache
View file @ 4953629c
...@@ -294,7 +294,14 @@ ...@@ -294,7 +294,14 @@
<dd>Donec id elit non mi porta gravida at eget metus.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt> <dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl> </dl>
<hr>
<p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}}
</p>
</div> </div>
</div><!-- /row --> </div><!-- /row -->
</section> </section>
......
docs/templates/pages/javascript.mustache
View file @ 4953629c
...@@ -416,6 +416,20 @@ $('#myModal').on('hidden', function () { ...@@ -416,6 +416,20 @@ $('#myModal').on('hidden', function () {
&lt;/li&gt; &lt;/li&gt;
... ...
&lt;/ul&gt;</pre> &lt;/ul&gt;</pre>
<p>{{_i}}To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-pills"&gt;
&lt;li class="dropdown"&gt;
&lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
{{_i}}Dropdown{{/i}}
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>{{_i}}Methods{{/i}}</h3> <h3>{{_i}}Methods{{/i}}</h3>
<h4>$().dropdown()</h4> <h4>$().dropdown()</h4>
<p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p> <p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
......
docs/templates/pages/less.mustache
View file @ 4953629c
...@@ -627,17 +627,17 @@ ...@@ -627,17 +627,17 @@
</tr> </tr>
<tr> <tr>
<td><code>.size()</code></td> <td><code>.size()</code></td>
<td><code>@height: 5px, @width: 5px</code></td> <td><code>@height @width</code></td>
<td>{{_i}}Quickly set the height and width on one line{{/i}}</td> <td>{{_i}}Quickly set the height and width on one line{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.square()</code></td> <td><code>.square()</code></td>
<td><code>@size: 5px</code></td> <td><code>@size</code></td>
<td>{{_i}}Builds on <code>.size()</code> to set the width and height as same value{{/i}}</td> <td>{{_i}}Builds on <code>.size()</code> to set the width and height as same value{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.opacity()</code></td> <td><code>.opacity()</code></td>
<td><code>@opacity: 100</code></td> <td><code>@opacity</code></td>
<td>{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}</td> <td>{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}</td>
</tr> </tr>
</tbody> </tbody>
...@@ -745,12 +745,12 @@ ...@@ -745,12 +745,12 @@
<tbody> <tbody>
<tr> <tr>
<td><code>.border-radius()</code></td> <td><code>.border-radius()</code></td>
<td><code>@radius: 5px</code></td> <td><code>@radius</code></td>
<td>{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}</td> <td>{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}</td>
</tr> </tr>
<tr> <tr>
<td><code>.box-shadow()</code></td> <td><code>.box-shadow()</code></td>
<td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td> <td><code>@shadow</code></td>
<td>{{_i}}Add a drop shadow to an element{{/i}}</td> <td>{{_i}}Add a drop shadow to an element{{/i}}</td>
</tr> </tr>
<tr> <tr>
...@@ -770,7 +770,7 @@ ...@@ -770,7 +770,7 @@
</tr> </tr>
<tr> <tr>
<td><code>.translate()</code></td> <td><code>.translate()</code></td>
<td><code>@x: 0, @y: 0</code></td> <td><code>@x, @y</code></td>
<td>{{_i}}Move an element on the x and y planes{{/i}}</td> <td>{{_i}}Move an element on the x and y planes{{/i}}</td>
</tr> </tr>
<tr> <tr>
...@@ -805,7 +805,7 @@ ...@@ -805,7 +805,7 @@
</tr> </tr>
<tr> <tr>
<td><code>.content-columns()</code></td> <td><code>.content-columns()</code></td>
<td><code>@columnCount, @columnGap: @gridColumnGutter</code></td> <td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
<td>{{_i}}Make the content of any element use CSS3 columns{{/i}}</td> <td>{{_i}}Make the content of any element use CSS3 columns{{/i}}</td>
</tr> </tr>
</tbody> </tbody>
...@@ -892,7 +892,7 @@ ...@@ -892,7 +892,7 @@
<div class="span4"> <div class="span4">
<h3>{{_i}}Command line{{/i}}</h3> <h3>{{_i}}Command line{{/i}}</h3>
<p>{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}</p> <p>{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}</p>
<pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre> <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
<p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p> <p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
</div><!-- /span4 --> </div><!-- /span4 -->
<div class="span4"> <div class="span4">
......
less/button-groups.less
View file @ 4953629c
...@@ -25,14 +25,14 @@ ...@@ -25,14 +25,14 @@
} }
// Float them, remove border radius, then re-add to first and last elements // Float them, remove border radius, then re-add to first and last elements
.btn-group .btn { .btn-group > .btn {
position: relative; position: relative;
float: left; float: left;
margin-left: -1px; margin-left: -1px;
.border-radius(0); .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 // 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; margin-left: 0;
-webkit-border-top-left-radius: 4px; -webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px; -moz-border-radius-topleft: 4px;
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
-moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
.btn-group .btn:last-child, .btn-group > .btn:last-child,
.btn-group .dropdown-toggle { .btn-group > .dropdown-toggle {
-webkit-border-top-right-radius: 4px; -webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px; -moz-border-radius-topright: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
// Reset corners for large buttons // Reset corners for large buttons
.btn-group .btn.large:first-child { .btn-group > .btn.large:first-child {
margin-left: 0; margin-left: 0;
-webkit-border-top-left-radius: 6px; -webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px; -moz-border-radius-topleft: 6px;
...@@ -60,8 +60,8 @@ ...@@ -60,8 +60,8 @@
-moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
} }
.btn-group .btn.large:last-child, .btn-group > .btn.large:last-child,
.btn-group .large.dropdown-toggle { .btn-group > .large.dropdown-toggle {
-webkit-border-top-right-radius: 6px; -webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px; -moz-border-radius-topright: 6px;
border-top-right-radius: 6px; border-top-right-radius: 6px;
...@@ -71,10 +71,10 @@ ...@@ -71,10 +71,10 @@
} }
// On hover/focus/active, bring the proper btn to front // On hover/focus/active, bring the proper btn to front
.btn-group .btn:hover, .btn-group > .btn:hover,
.btn-group .btn:focus, .btn-group > .btn:focus,
.btn-group .btn:active, .btn-group > .btn:active,
.btn-group .btn.active { .btn-group > .btn.active {
z-index: 2; z-index: 2;
} }
...@@ -90,27 +90,24 @@ ...@@ -90,27 +90,24 @@
// ---------------------- // ----------------------
// Give the line between buttons some depth // Give the line between buttons some depth
.btn-group .dropdown-toggle { .btn-group > .dropdown-toggle {
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
@shadow: inset 1px 0 0 rgba(255,255,255,.125), .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)");
inset 0 1px 0 rgba(255,255,255,.2),
0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
*padding-top: 3px; *padding-top: 3px;
*padding-bottom: 3px; *padding-bottom: 3px;
} }
.btn-group .btn-mini.dropdown-toggle { .btn-group > .btn-mini.dropdown-toggle {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
*padding-top: 1px; *padding-top: 1px;
*padding-bottom: 1px; *padding-bottom: 1px;
} }
.btn-group .btn-small.dropdown-toggle { .btn-group > .btn-small.dropdown-toggle {
*padding-top: 4px; *padding-top: 4px;
*padding-bottom: 4px; *padding-bottom: 4px;
} }
.btn-group .btn-large.dropdown-toggle { .btn-group > .btn-large.dropdown-toggle {
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
...@@ -121,9 +118,7 @@ ...@@ -121,9 +118,7 @@
// Remove the gradient and set the same inset shadow as the :active state // Remove the gradient and set the same inset shadow as the :active state
.dropdown-toggle { .dropdown-toggle {
background-image: none; background-image: none;
@shadow: inset 0 2px 4px rgba(0,0,0,.15), .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
} }
// Keep the hover's background when dropdown is open // Keep the hover's background when dropdown is open
......
less/buttons.less
View file @ 4953629c
...@@ -21,9 +21,7 @@ ...@@ -21,9 +21,7 @@
border: 1px solid @btnBorder; border: 1px solid @btnBorder;
border-bottom-color: darken(@btnBorder, 10%); border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px); .border-radius(4px);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
cursor: pointer; cursor: pointer;
// Give IE7 some love // Give IE7 some love
...@@ -56,9 +54,7 @@ ...@@ -56,9 +54,7 @@
.btn.active, .btn.active,
.btn:active { .btn:active {
background-image: none; background-image: none;
@shadow: inset 0 2px 4px rgba(0,0,0,.15), .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
background-color: darken(@white, 10%); background-color: darken(@white, 10%);
background-color: darken(@white, 15%) e("\9"); background-color: darken(@white, 15%) e("\9");
outline: 0; outline: 0;
......
less/forms.less
View file @ 4953629c
...@@ -213,9 +213,7 @@ textarea { ...@@ -213,9 +213,7 @@ textarea {
input:focus, input:focus,
textarea:focus { textarea:focus {
border-color: rgba(82,168,236,.8); border-color: rgba(82,168,236,.8);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
outline: 0; outline: 0;
outline: thin dotted \9; /* IE6-9 */ outline: thin dotted \9; /* IE6-9 */
} }
...@@ -244,7 +242,12 @@ select:focus { ...@@ -244,7 +242,12 @@ select:focus {
input[class*="span"], input[class*="span"],
select[class*="span"], select[class*="span"],
textarea[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; float: none;
margin-left: 0; margin-left: 0;
} }
......
less/mixins.less
View file @ 4953629c
...@@ -70,11 +70,11 @@ ...@@ -70,11 +70,11 @@
// Sizing shortcuts // Sizing shortcuts
// ------------------------- // -------------------------
.size(@height: 5px, @width: 5px) { .size(@height, @width) {
width: @width; width: @width;
height: @height; height: @height;
} }
.square(@size: 5px) { .square(@size) {
.size(@size, @size); .size(@size, @size);
} }
...@@ -192,14 +192,14 @@ ...@@ -192,14 +192,14 @@
// -------------------------------------------------- // --------------------------------------------------
// Border Radius // Border Radius
.border-radius(@radius: 5px) { .border-radius(@radius) {
-webkit-border-radius: @radius; -webkit-border-radius: @radius;
-moz-border-radius: @radius; -moz-border-radius: @radius;
border-radius: @radius; border-radius: @radius;
} }
// Drop shadows // Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { .box-shadow(@shadow) {
-webkit-box-shadow: @shadow; -webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow; -moz-box-shadow: @shadow;
box-shadow: @shadow; box-shadow: @shadow;
...@@ -229,21 +229,21 @@ ...@@ -229,21 +229,21 @@
-o-transform: scale(@ratio); -o-transform: scale(@ratio);
transform: scale(@ratio); transform: scale(@ratio);
} }
.translate(@x: 0, @y: 0) { .translate(@x, @y) {
-webkit-transform: translate(@x, @y); -webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y); -moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); -ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y); -o-transform: translate(@x, @y);
transform: translate(@x, @y); transform: translate(@x, @y);
} }
.skew(@x: 0, @y: 0) { .skew(@x, @y) {
-webkit-transform: skew(@x, @y); -webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y); -moz-transform: skew(@x, @y);
-ms-transform: skew(@x, @y); -ms-transform: skew(@x, @y);
-o-transform: skew(@x, @y); -o-transform: skew(@x, @y);
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); -webkit-transform: translate(@x, @y, @z);
-moz-transform: translate(@x, @y, @z); -moz-transform: translate(@x, @y, @z);
-ms-transform: translate(@x, @y, @z); -ms-transform: translate(@x, @y, @z);
...@@ -255,7 +255,7 @@ ...@@ -255,7 +255,7 @@
// Prevent browsers from flickering when using CSS 3D transforms. // Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden // Default value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility: visible){ .backface-visibility(@visibility){
-webkit-backface-visibility: @visibility; -webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility; -moz-backface-visibility: @visibility;
-ms-backface-visibility: @visibility; -ms-backface-visibility: @visibility;
...@@ -297,13 +297,13 @@ ...@@ -297,13 +297,13 @@
} }
// Resize anything // Resize anything
.resizable(@direction: both) { .resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both resize: @direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix overflow: auto; // Safari fix
} }
// CSS3 Content Columns // CSS3 Content Columns
.content-columns(@columnCount, @columnGap: @gridColumnGutter) { .content-columns(@columnCount, @columnGap: @gridGutterWidth) {
-webkit-column-count: @columnCount; -webkit-column-count: @columnCount;
-moz-column-count: @columnCount; -moz-column-count: @columnCount;
column-count: @columnCount; column-count: @columnCount;
...@@ -313,7 +313,7 @@ ...@@ -313,7 +313,7 @@
} }
// Opacity // Opacity
.opacity(@opacity: 100) { .opacity(@opacity) {
opacity: @opacity / 100; opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})"; filter: ~"alpha(opacity=@{opacity})";
} }
...@@ -577,7 +577,7 @@ ...@@ -577,7 +577,7 @@
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.spanX (@index) when (@index > 0) { .spanX (@index) when (@index > 0) {
(~"> .span@{index}") { .span(@index); } (~".span@{index}") { .span(@index); }
.spanX(@index - 1); .spanX(@index - 1);
} }
.spanX (0) {} .spanX (0) {}
...@@ -590,6 +590,7 @@ ...@@ -590,6 +590,7 @@
width: 100%; width: 100%;
.clearfix(); .clearfix();
[class*="span"] { [class*="span"] {
.input-block-level();
float: left; float: left;
margin-left: @fluidGridGutterWidth; margin-left: @fluidGridGutterWidth;
} }
......
less/modals.less
View file @ 4953629c
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
.close { margin-top: 2px; } .close { margin-top: 2px; }
} }
// Body (where all modal content resises) // Body (where all modal content resides)
.modal-body { .modal-body {
overflow-y: auto; overflow-y: auto;
max-height: 400px; max-height: 400px;
......
less/navbar.less
View file @ 4953629c
...@@ -21,8 +21,7 @@ ...@@ -21,8 +21,7 @@
padding-right: 20px; padding-right: 20px;
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
.border-radius(4px); .border-radius(4px);
@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)");
.box-shadow(@shadow);
} }
// Set width to auto for default container // Set width to auto for default container
...@@ -39,8 +38,7 @@ ...@@ -39,8 +38,7 @@
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
.buttonBackground(@navbarBackgroundHighlight, @navbarBackground); .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
@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)");
.box-shadow(@shadow);
} }
.btn-navbar .icon-bar { .btn-navbar .icon-bar {
display: block; display: block;
...@@ -143,8 +141,7 @@ ...@@ -143,8 +141,7 @@
color: @white; color: @white;
background-color: @navbarSearchBackground; background-color: @navbarSearchBackground;
border: 1px solid @navbarSearchBorder; border: 1px solid @navbarSearchBorder;
@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)");
.box-shadow(@shadow);
.transition(none); .transition(none);
// Placeholder text gets special styles; can't be a grouped selector // Placeholder text gets special styles; can't be a grouped selector
......
less/navs.less
View file @ 4953629c
...@@ -266,8 +266,7 @@ ...@@ -266,8 +266,7 @@
.clearfix(); .clearfix();
} }
.tab-content { .tab-content {
display: table; // prevent content from running below tabs overflow: auto; // prevent content from running below tabs
width: 100%;
} }
// Remove border on bottom, left, right // Remove border on bottom, left, right
...@@ -314,10 +313,6 @@ ...@@ -314,10 +313,6 @@
// ------------ // ------------
// Common styles // Common styles
.tabs-left .tab-content,
.tabs-right .tab-content {
width: auto;
}
.tabs-left .nav-tabs > li, .tabs-left .nav-tabs > li,
.tabs-right .nav-tabs > li { .tabs-right .nav-tabs > li {
float: none; float: none;
......
less/responsive-1200px-min.less
View file @ 4953629c
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
.thumbnails { .thumbnails {
margin-left: -30px; margin-left: -30px;
} }
.thumbnails > li { .row-fluid .thumbnails {
margin-left: 30px; margin-left: 0;
} }
} }
less/responsive-767px-max.less
View file @ 4953629c
...@@ -86,6 +86,21 @@ ...@@ -86,6 +86,21 @@
padding: 0; padding: 0;
} }
// TYPOGRAPHY
// ----------
// Reset horizontal dl
.dl-horizontal {
dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
dd {
margin-left: 0;
}
}
// GRID & CONTAINERS // GRID & CONTAINERS
// ----------------- // -----------------
// Remove width from containers // Remove width from containers
...@@ -100,21 +115,15 @@ ...@@ -100,21 +115,15 @@
.row { .row {
margin-left: 0; margin-left: 0;
} }
// Make all columns even // Make all grid-sized elements block level again
.row > [class*="span"], [class*="span"],
.row-fluid > [class*="span"] { .row-fluid [class*="span"] {
float: none; float: none;
display: block; display: block;
width: auto; width: auto;
margin: 0; margin: 0;
} }
// THUMBNAILS
// ----------
.thumbnails [class*="span"] {
width: auto;
}
// FORM FIELDS // FORM FIELDS
// ----------- // -----------
// Make span* classes full width // Make span* classes full width
...@@ -125,8 +134,11 @@ ...@@ -125,8 +134,11 @@
.input-block-level(); .input-block-level();
} }
// But don't let it screw up prepend/append inputs // But don't let it screw up prepend/append inputs
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"], .input-prepend input[class*="span"],
.input-append input[class*="span"] { .input-append input[class*="span"] {
display: inline-block; // redeclare so they don't wrap to new lines
width: auto; width: auto;
} }
......
less/responsive-navbar.less
View file @ 4953629c
...@@ -93,8 +93,7 @@ ...@@ -93,8 +93,7 @@
margin: (@baseLineHeight / 2) 0; margin: (@baseLineHeight / 2) 0;
border-top: 1px solid @navbarBackground; border-top: 1px solid @navbarBackground;
border-bottom: 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(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
.box-shadow(@shadow);
} }
// Pull right (secondary) nav content // Pull right (secondary) nav content
.navbar .nav.pull-right { .navbar .nav.pull-right {
......
less/responsive.less
View file @ 4953629c
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
*/ */
// Responsive.less // Responsive.less
// For phone and tablet devices // For phone and tablet devices
// ------------------------------------------------------------- // -------------------------------------------------------------
......
less/tests/css-tests.html
View file @ 4953629c
...@@ -269,23 +269,180 @@ ...@@ -269,23 +269,180 @@
<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p> <p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
<div id="fluidRowInputs"> <div id="fluidRowInputs">
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span12">
<input class="span1" placeholder="span1">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span2" placeholder="span2">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span3" placeholder="span3">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span4" placeholder="span4"> <input class="span4" placeholder="span4">
</div><!--/span--> </div><!--/span-->
<div class="span8"> </div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span5" placeholder="span5">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span6" placeholder="span6">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span7" placeholder="span7">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span8" placeholder="span8"> <input class="span8" placeholder="span8">
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
<div class="row-fluid" id="fluidRowInputs"> <div class="row-fluid">
<div class="span12">
<input class="span9" placeholder="span9">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span10" placeholder="span10">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span11" placeholder="span11">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12"> <div class="span12">
<input class="span12" placeholder="span12"> <input class="span12" placeholder="span12">
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
</div> </div>
<br>
<!-- Dropdowns
================================================== -->
<div class="page-header">
<h1>Dropdowns</h1>
</div>
<h4>Dropdown link with hash URL</h4>
<ul class="nav nav-pills">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Example link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <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>
</li>
</ul>
<h4>Dropdown link with custom URL and data-target</h4>
<ul class="nav nav-pills">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Example link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
Dropdown <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>
</li>
</ul>
<br>
<!-- Thumbnails
================================================== -->
<div class="page-header">
<h1>Thumbnails</h1>
</div>
<h4>Offset thumbnails</h4>
<ul class="thumbnails">
<li class="span3 offset3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3 offset3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
<h4>Fluid thumbnails</h4>
<div class="row-fluid">
<div class="span8">
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
</div>
</div>
......
less/thumbnails.less
View file @ 4953629c
// THUMBNAILS // THUMBNAILS
// ---------- // ----------
// Make wrapper ul behave like the grid
.thumbnails { .thumbnails {
margin-left: -@gridGutterWidth; margin-left: -@gridGutterWidth;
list-style: none; list-style: none;
.clearfix(); .clearfix();
} }
// Fluid rows have no left margin
.row-fluid .thumbnails {
margin-left: 0;
}
// Float li to make thumbnails appear in a row
.thumbnails > li { .thumbnails > li {
float: left; margin-bottom: @baseLineHeight;
margin: 0 0 @baseLineHeight @gridGutterWidth;
} }
// The actual thumbnail (can be `a` or `div`)
.thumbnail { .thumbnail {
display: block; display: block;
padding: 4px; padding: 4px;
...@@ -23,6 +31,7 @@ a.thumbnail:hover { ...@@ -23,6 +31,7 @@ a.thumbnail:hover {
border-color: @linkColor; border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25)); .box-shadow(0 1px 4px rgba(0,105,214,.25));
} }
// Images and captions // Images and captions
.thumbnail > img { .thumbnail > img {
display: block; display: block;
......
less/type.less
View file @ 4953629c
...@@ -135,6 +135,7 @@ dd { ...@@ -135,6 +135,7 @@ dd {
// Horizontal layout (like forms) // Horizontal layout (like forms)
.dl-horizontal { .dl-horizontal {
dt { dt {
.text-overflow();
float: left; float: left;
clear: left; clear: left;
width: 120px; width: 120px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment