rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
Conflicts:
	docs/assets/bootstrap.zip
This commit is contained in:
Jacob Thornton 2012-02-13 18:42:57 -08:00
commit a8c478e051
28 changed files with 589 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -54,12 +54,10 @@ Developers
We have included a makefile with convenience methods for working with the Bootstrap library.
+ **build** - `make`
This will run the less compiler on the bootstrap lib and regenerate the docs dir.
The lessc compiler is required for this command to run.
Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. Requires lessc and uglify-js. <a href="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs &raquo;</a>
+ **watch** - `make watch`
This is a convenience method for watching your less files and automatically building them whenever you save.
Watchr is required for this command to run.
This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
Authors

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

52
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -205,40 +205,40 @@
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
.row-fluid > .span1 {
width: 5.801104972%;
}
.row-fluid .span2 {
.row-fluid > .span2 {
width: 14.364640883%;
}
.row-fluid .span3 {
.row-fluid > .span3 {
width: 22.928176794%;
}
.row-fluid .span4 {
.row-fluid > .span4 {
width: 31.491712705%;
}
.row-fluid .span5 {
.row-fluid > .span5 {
width: 40.055248616%;
}
.row-fluid .span6 {
.row-fluid > .span6 {
width: 48.618784527%;
}
.row-fluid .span7 {
.row-fluid > .span7 {
width: 57.182320438000005%;
}
.row-fluid .span8 {
.row-fluid > .span8 {
width: 65.74585634900001%;
}
.row-fluid .span9 {
.row-fluid > .span9 {
width: 74.30939226%;
}
.row-fluid .span10 {
.row-fluid > .span10 {
width: 82.87292817100001%;
}
.row-fluid .span11 {
.row-fluid > .span11 {
width: 91.436464082%;
}
.row-fluid .span12 {
.row-fluid > .span12 {
width: 99.999999993%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
@ -314,6 +314,10 @@
.navbar .nav > .divider-vertical {
display: none;
}
.navbar .nav .nav-header {
color: #999999;
text-shadow: none;
}
.navbar .nav > li > a, .navbar .dropdown-menu a {
padding: 6px 15px;
font-weight: bold;
@ -486,40 +490,40 @@
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
.row-fluid > .span1 {
width: 5.982905983%;
}
.row-fluid .span2 {
.row-fluid > .span2 {
width: 14.529914530000001%;
}
.row-fluid .span3 {
.row-fluid > .span3 {
width: 23.076923077%;
}
.row-fluid .span4 {
.row-fluid > .span4 {
width: 31.623931624%;
}
.row-fluid .span5 {
.row-fluid > .span5 {
width: 40.170940171000005%;
}
.row-fluid .span6 {
.row-fluid > .span6 {
width: 48.717948718%;
}
.row-fluid .span7 {
.row-fluid > .span7 {
width: 57.264957265%;
}
.row-fluid .span8 {
.row-fluid > .span8 {
width: 65.81196581200001%;
}
.row-fluid .span9 {
.row-fluid > .span9 {
width: 74.358974359%;
}
.row-fluid .span10 {
.row-fluid > .span10 {
width: 82.905982906%;
}
.row-fluid .span11 {
.row-fluid > .span11 {
width: 91.45299145300001%;
}
.row-fluid .span12 {
.row-fluid > .span12 {
width: 100%;
}
input.span1, textarea.span1, .uneditable-input.span1 {

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

@ -212,40 +212,40 @@ a:hover {
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
.row-fluid > .span1 {
width: 6.382978723%;
}
.row-fluid .span2 {
.row-fluid > .span2 {
width: 14.89361702%;
}
.row-fluid .span3 {
.row-fluid > .span3 {
width: 23.404255317%;
}
.row-fluid .span4 {
.row-fluid > .span4 {
width: 31.914893614%;
}
.row-fluid .span5 {
.row-fluid > .span5 {
width: 40.425531911%;
}
.row-fluid .span6 {
.row-fluid > .span6 {
width: 48.93617020799999%;
}
.row-fluid .span7 {
.row-fluid > .span7 {
width: 57.446808505%;
}
.row-fluid .span8 {
.row-fluid > .span8 {
width: 65.95744680199999%;
}
.row-fluid .span9 {
.row-fluid > .span9 {
width: 74.468085099%;
}
.row-fluid .span10 {
.row-fluid > .span10 {
width: 82.97872339599999%;
}
.row-fluid .span11 {
.row-fluid > .span11 {
width: 91.489361693%;
}
.row-fluid .span12 {
.row-fluid > .span12 {
width: 99.99999998999999%;
}
.container {
@ -530,11 +530,16 @@ input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 18px;
}
input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
label {
display: block;
margin-bottom: 5px;
@ -832,6 +837,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
color: #999999;
}
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 0;
color: #999999;
@ -913,6 +919,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
border-radius: 3px 0 0 3px;
}
.input-append .uneditable-input {
border-left-color: #eee;
border-right-color: #ccc;
}
.input-append .add-on {
@ -1693,15 +1700,18 @@ table .span12 {
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
background-color: #fafafa;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-repeat: no-repeat;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
@ -1711,8 +1721,19 @@ table .span12 {
-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);
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
*margin-left: .3em;
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
background-color: #e6e6e6;
}
.btn:active, .btn.active {
background-color: #cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
@ -1779,7 +1800,9 @@ table .span12 {
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover {
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
}
@ -1787,7 +1810,8 @@ table .span12 {
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active {
.btn-info.active,
.btn-dark.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-primary {
@ -1910,6 +1934,30 @@ table .span12 {
.btn-info:active, .btn-info.active {
background-color: #24748c \9;
}
.btn-inverse {
background-color: #393939;
background-image: -moz-linear-gradient(top, #454545, #262626);
background-image: -ms-linear-gradient(top, #454545, #262626);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626));
background-image: -webkit-linear-gradient(top, #454545, #262626);
background-image: -o-linear-gradient(top, #454545, #262626);
background-image: linear-gradient(top, #454545, #262626);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
border-color: #262626 #262626 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
background-color: #262626;
}
.btn-inverse:active, .btn-inverse.active {
background-color: #0c0c0c \9;
}
button.btn, input[type="submit"].btn {
*padding-top: 2px;
*padding-bottom: 2px;
@ -2042,7 +2090,8 @@ button.btn.small, input[type="submit"].btn.small {
.btn-primary .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret {
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
@ -2115,27 +2164,31 @@ button.btn.small, input[type="submit"].btn.small {
text-decoration: none;
background-color: #eeeeee;
}
.nav .nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 18px;
color: #999999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.nav li + .nav-header {
margin-top: 9px;
}
.nav-list {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
}
.nav-list > li > a, .nav-list .nav-header {
display: block;
padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list .nav-header {
font-size: 11px;
font-weight: bold;
line-height: 18px;
color: #999999;
text-transform: uppercase;
}
.nav-list > li + .nav-header {
margin-top: 9px;
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list .active > a, .nav-list .active > a:hover {
color: #ffffff;
@ -2483,6 +2536,13 @@ button.btn.small, input[type="submit"].btn.small {
.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
margin-top: 3px;
}
.navbar-form .input-append, .navbar-form .input-prepend {
margin-top: 6px;
white-space: nowrap;
}
.navbar-form .input-append input, .navbar-form .input-prepend input {
margin-top: 0;
}
.navbar-search {
position: relative;
float: left;
@ -2841,6 +2901,9 @@ button.btn.small, input[type="submit"].btn.small {
.modal-body {
padding: 15px;
}
.modal-body .modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;

3
docs/assets/css/docs.css
View File

@ -181,7 +181,7 @@ hr.soften {
top: 40px;
left: 0;
right: 0;
z-index: 1030;
z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
border-color: #d5d5d5;
border-width: 0 0 1px; /* drop the border on the fixed edges */
-webkit-border-radius: 0;
@ -190,6 +190,7 @@ hr.soften {
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
}
.subnav-fixed .nav {
width: 938px;

18
docs/base-css.html
View File

@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
@ -1121,7 +1121,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<fieldset>
<legend>Extending form controls</legend>
<div class="control-group">
<label class="control-label">Form sizes</label>
<label class="control-label">Form grid sizes</label>
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
@ -1150,6 +1150,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
</div>
</div>
<div class="control-group">
<label class="control-label">Alternate sizes</label>
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls">
@ -1285,6 +1294,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td><a class="btn btn-danger" href="#">Danger</a></td>
<td><code>.btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td><a class="btn btn-inverse" href="#">Inverse</a></td>
<td><code>.btn-inverse</code></td>
<td>Alternate dark gray button, not tied to a semantic action or use</td>
</tr>
</tbody>
</table>

62
docs/components.html
View File

@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
@ -98,6 +98,7 @@
</ul>
</li>
<li><a href="#labels">Labels</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
@ -247,7 +248,9 @@
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /btn-toolbar -->
<hr>
<p><span class="label label-info">Heads up!</span> Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
</div>
<div class="span8">
<h3>Example markup</h3>
@ -771,7 +774,9 @@
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
@ -810,12 +815,14 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
<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>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
<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>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
&lt;/div&gt;
</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>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<pre class="prettyprint linenums">
@ -1135,6 +1142,55 @@
<!-- Typographic components
================================================== -->
<section id="typography">
<div class="page-header">
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div>
<h2>Hero unit</h2>
<div class="row">
<div class="span4">
<p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
<h3>Markup</h3>
<p>Wrap your content in a <code>div</code> like so:</p>
<pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Tagline&lt;/p&gt;
&lt;p&gt;
&lt;a class="btn btn-primary btn-large"&gt;
Learn more
&lt;/a&gt;
&lt;/p&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</div>
</div><!-- /row -->
<h2>Page header</h2>
<div class="row">
<div class="span4">
<p>A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
</div>
<div class="span8">
<pre class="prettyprint linenums">
&lt;div class="page-haeder"&gt;
&lt;h1&gt;Example page header&lt;/h1&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
</section>
<!-- Thumbnails
================================================== -->
<section id="thumbnails">

2
docs/download.html
View File

@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

2
docs/examples.html
View File

@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

2
docs/index.html
View File

@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

4
docs/javascript.html
View File

@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
@ -930,7 +930,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</p>
</div>
<hr>
<h2>Using bootstrap-alerts.js</h2>
<h2>Using bootstrap-alert.js</h2>
<p>Enable dismissal of an alert via javascript:</p>
<pre class="prettyprint linenums">$(".alert").alert()</pre>
<h3>Markup</h3>

2
docs/less.html
View File

@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

118
docs/scaffolding.html
View File

@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
@ -81,7 +81,9 @@
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#grid-system">Grid system</a></li>
<li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid gird system</a></li>
<li><a href="#gridCustomization">Customizing</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#responsive">Responsive design</a></li>
</ul>
@ -92,12 +94,11 @@
<!-- Grid system
================================================== -->
<section id="grid-system">
<section id="gridSystem">
<div class="page-header">
<h1>Grid system <small>12 columns with a responsive twist</small></h1>
<h1>Default grid system <small>12 columns with a responsive twist</small></h1>
</div>
<h2>Default grid</h2>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
@ -188,7 +189,87 @@
</div>
</div>
</div>
<h3>Fluid example</h3>
</div><!-- /span6 -->
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span12"&gt;
Level 1 of column
&lt;div class="row"&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
</div>
<h2>Fluid columns</h2>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row-fluid show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<h3>Percents, not pixels</h3>
<p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
</div>
<div class="span4">
<h3>Fluid rows</h3>
<p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
</div>
<div class="span4">
<h3>Markup</h3>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
<h2>Fluid nesting</h2>
<div class="row">
<div class="span6">
<p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
<div class="row-fluid show-grid">
<div class="span12">
@ -206,10 +287,10 @@
</div>
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
Level 1 of column
&lt;div class="row"&gt;
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;/div&gt;
@ -219,7 +300,16 @@
</div>
</div>
<h2>Grid customization</h2>
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>Grid customization</h1>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -281,8 +371,8 @@
<div class="span6">
<h2>Fixed layout</h2>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
<div class="minicon-layout">
<div class="minicon-layout-body"></div>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;body&gt;
@ -295,9 +385,9 @@
<div class="span6">
<h2>Fluid layout</h2>
<p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<div class="minicon-layout fluid">
<div class="minicon-layout-sidebar"></div>
<div class="minicon-layout-body"></div>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt;

2
docs/templates/layout.mustache vendored
View File

@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

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

@ -1045,7 +1045,7 @@
<fieldset>
<legend>{{_i}}Extending form controls{{/i}}</legend>
<div class="control-group">
<label class="control-label">{{_i}}Form sizes{{/i}}</label>
<label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
@ -1074,6 +1074,15 @@
<p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
</div>
</div>
<div class="control-group">
<label class="control-label">{{_i}}Alternate sizes{{/i}}</label>
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<p class="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
<div class="controls">
@ -1209,6 +1218,11 @@
<td><a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a></td>
<td><code>.btn-danger</code></td>
<td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
</tr>
<tr>
<td><a class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</a></td>
<td><code>.btn-inverse</code></td>
<td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
</tr>
</tbody>
</table>

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

@ -22,6 +22,7 @@
</ul>
</li>
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
<li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
@ -171,7 +172,9 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /btn-toolbar -->
<hr>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
</div>
<div class="span8">
<h3>{{_i}}Example markup{{/i}}</h3>
@ -695,7 +698,9 @@
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
</ul>
</li>
</ul>
@ -734,12 +739,14 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
<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>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.{{/i}}</p>
<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>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
&lt;/div&gt;
</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>
<h3>{{_i}}Brand name{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<pre class="prettyprint linenums">
@ -1059,6 +1066,55 @@
<!-- Typographic components
================================================== -->
<section id="typography">
<div class="page-header">
<h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
</div>
<h2>{{_i}}Hero unit{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt;
&lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
&lt;p&gt;{{_i}}Tagline{{/i}}&lt;/p&gt;
&lt;p&gt;
&lt;a class="btn btn-primary btn-large"&gt;
{{_i}}Learn more{{/i}}
&lt;/a&gt;
&lt;/p&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<div class="hero-unit">
<h1>{{_i}}Hello, world!{{/i}}</h1>
<p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
<p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
</div>
</div>
</div><!-- /row -->
<h2>{{_i}}Page header{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
</div>
<div class="span8">
<pre class="prettyprint linenums">
&lt;div class="page-haeder"&gt;
&lt;h1&gt;{{_i}}Example page header{{/i}}&lt;/h1&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
</section>
<!-- Thumbnails
================================================== -->
<section id="thumbnails">

2
docs/templates/pages/javascript.mustache vendored
View File

@ -854,7 +854,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</p>
</div>
<hr>
<h2>{{_i}}Using bootstrap-alerts.js{{/i}}</h2>
<h2>{{_i}}Using bootstrap-alert.js{{/i}}</h2>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$(".alert").alert()</pre>
<h3>{{_i}}Markup{{/i}}</h3>

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

@ -5,7 +5,9 @@
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#grid-system">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#fluidGridSystem">{{_i}}Fluid gird system{{/i}}</a></li>
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ul>
@ -16,12 +18,11 @@
<!-- Grid system
================================================== -->
<section id="grid-system">
<section id="gridSystem">
<div class="page-header">
<h1>{{_i}}Grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
<h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
</div>
<h2>{{_i}}Default grid{{/i}}</h2>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
@ -112,7 +113,87 @@
</div>
</div>
</div>
<h3>{{_i}}Fluid example{{/i}}</h3>
</div><!-- /span6 -->
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span12"&gt;
{{_i}}Level 1 of column{{/i}}
&lt;div class="row"&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
</div>
<h2>{{_i}}Fluid columns{{/i}}</h2>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row-fluid show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Percents, not pixels{{/i}}</h3>
<p>{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Fluid rows{{/i}}</h3>
<p>{{_i}}Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Markup{{/i}}</h3>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
<h2>{{_i}}Fluid nesting{{/i}}</h2>
<div class="row">
<div class="span6">
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}</p>
<div class="row-fluid show-grid">
<div class="span12">
@ -130,10 +211,10 @@
</div>
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
{{_i}}Level 1 of column{{/i}}
&lt;div class="row"&gt;
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;/div&gt;
@ -143,7 +224,16 @@
</div>
</div>
<h2>{{_i}}Grid customization{{/i}}</h2>
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>{{_i}}Grid customization{{/i}}</h1>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -205,8 +295,8 @@
<div class="span6">
<h2>{{_i}}Fixed layout{{/i}}</h2>
<p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.{{/i}}</p>
<div class="minicon-layout">
<div class="minicon-layout-body"></div>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;body&gt;
@ -219,9 +309,9 @@
<div class="span6">
<h2>{{_i}}Fluid layout{{/i}}</h2>
<p>{{_i}}<code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
<div class="minicon-layout fluid">
<div class="minicon-layout-sidebar"></div>
<div class="minicon-layout-body"></div>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt;

2
docs/upgrading.html
View File

@ -15,7 +15,7 @@
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->

3
less/button-groups.less
View File

@ -133,7 +133,8 @@
.btn-primary,
.btn-danger,
.btn-info,
.btn-success {
.btn-success,
.btn-inverse {
.caret {
border-top-color: @white;
.opacity(75);

16
less/buttons.less
View File

@ -16,7 +16,7 @@
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle;
#gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
.buttonBackground(@white, darken(@white, 10%));
border: 1px solid #ccc;
border-bottom-color: #bbb;
.border-radius(4px);
@ -25,6 +25,7 @@
cursor: pointer;
// Give IE7 some love
.reset-filter();
.ie7-restore-left-whitespace();
}
@ -106,7 +107,9 @@
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover {
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
color: @white;
}
@ -115,7 +118,8 @@
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active {
.btn-info.active,
.btn-dark.active {
color: rgba(255,255,255,.75);
}
@ -140,6 +144,10 @@
.btn-info {
.buttonBackground(#5bc0de, #2f96b4);
}
// Inverse appears as dark gray
.btn-inverse {
.buttonBackground(#454545, #262626);
}
// Cross-browser Jank
@ -147,6 +155,8 @@
button.btn,
input[type="submit"].btn {
// Firefox 3.6 only I believe
&::-moz-focus-inner {
padding: 0;
border: 0;

10
less/forms.less
View File

@ -42,7 +42,13 @@ input,
button,
select,
textarea {
#font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
#font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
#font > #family > .sans-serif(); // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
@ -327,6 +333,7 @@ select:focus:required:invalid {
// ---------
.help-block {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 0;
color: @grayLight;
@ -395,6 +402,7 @@ select:focus:required:invalid {
.border-radius(3px 0 0 3px);
}
.uneditable-input {
border-left-color: #eee;
border-right-color: #ccc;
}
.add-on {

41
less/mixins.less
View File

@ -208,13 +208,13 @@
// Setup the mixins to be used
.columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
}
}
.gridColumn(@fluidGridGutterWidth) {
float: left;
margin-left: @fluidGridGutterWidth;
}
// Take these values and mixins, and make 'em do their thang
.generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
.generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
// Row surrounds the columns
.row-fluid {
width: 100%;
@ -228,18 +228,18 @@
margin-left: 0;
}
// Default columns
.span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
.span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
.span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
.span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
.span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
.span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
.span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
.span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
.span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
.span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
.span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
.span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
> .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
> .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
> .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
> .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
> .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
> .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
> .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
> .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
> .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
> .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
> .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
> .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
}
}
}
@ -270,6 +270,19 @@
}
}
// Make a Grid
// -------------------------
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
.makeRow() {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
.makeColumn(@columns: 1) {
float: left;
margin-left: @gridGutterWidth;
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
// Form field states (used in forms.less)

11
less/modals.less
View File

@ -1,6 +1,7 @@
// MODALS
// ------
// Recalculate z-index where appropriate
.modal-open {
.dropdown-menu { z-index: @zindexDropdown + @zindexModal; }
.dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
@ -8,6 +9,7 @@
.tooltip { z-index: @zindexTooltip + @zindexModal; }
}
// Background
.modal-backdrop {
position: fixed;
top: 0;
@ -25,6 +27,7 @@
.opacity(80);
}
// Base modal
.modal {
position: fixed;
top: 50%;
@ -53,9 +56,17 @@
// Close icon
.close { margin-top: 2px; }
}
// Body (where all modal content resises)
.modal-body {
padding: 15px;
}
// Remove bottom margin if need be
.modal-body .modal-form {
margin-bottom: 0;
}
// Footer (for actions)
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;

14
less/navbar.less
View File

@ -81,7 +81,7 @@
margin-top: 5px; // make buttons vertically centered in navbar
}
.btn-group .btn {
margin-top: 0;
margin-top: 0; // then undo the margin here so we don't accidentally double it
}
}
@ -104,6 +104,14 @@
input[type="radio"] {
margin-top: 3px;
}
.input-append,
.input-prepend {
margin-top: 6px;
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
input {
margin-top: 0; // remove the margin on top since it's on the parent
}
}
}
// Navbar search
@ -133,7 +141,7 @@
background-color: @grayLight;
background-color: rgba(255,255,255,.5);
}
// Focus states (we use .focused since IE8 and down doesn't support :focus)
// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
&:focus,
&.focused {
padding: 5px 10px;
@ -194,7 +202,7 @@
}
// Hover
.navbar .nav > li > a:hover {
background-color: transparent;
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
color: @navbarLinkColorHover;
text-decoration: none;
}

28
less/navs.less
View File

@ -21,6 +21,21 @@
background-color: @grayLighter;
}
// Nav headers (for dropdowns and lists)
.nav .nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: @baseLineHeight;
color: @grayLight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// NAV LIST
@ -33,21 +48,12 @@
}
.nav-list > li > a,
.nav-list .nav-header {
display: block;
padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list .nav-header {
font-size: 11px;
font-weight: bold;
line-height: @baseLineHeight;
color: @grayLight;
text-transform: uppercase;
}
.nav-list > li + .nav-header {
margin-top: 9px;
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list .active > a,
.nav-list .active > a:hover {

4
less/responsive.less
View File

@ -215,6 +215,10 @@
.navbar .nav > .divider-vertical {
display: none;
}
.navbar .nav .nav-header {
color: @navbarText;
text-shadow: none;
}
// Nav and dropdown links in navbar
.navbar .nav > li > a,
.navbar .dropdown-menu a {

1
less/variables.less
View File

@ -68,6 +68,7 @@
@navbarHeight: 40px;
@navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark;
@navbarLinkBackgroundHover: transparent;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;