Skip to content

B
bootstrap
Commit 910e78d2 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

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

parents 49d565a6 9fa8bde4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1303 additions and 938 deletions
docs/assets/css/bootstrap-responsive.css
View file @ 910e78d2
......@@ -77,6 +77,9 @@
width: auto;
padding: 0 20px;
}
.row-fluid {
width: 100%;
}
.row {
margin-left: 0;
}
......@@ -89,81 +92,122 @@
}
@media (min-width: 768px) and (max-width: 940px) {
.container {
width: 748px;
padding-left: 10px;
padding-right: 10px;
width: 724px;
padding-left: 20px;
padding-right: 20px;
}
.span1 {
width: 44px;
width: 42px;
}
.span2 {
width: 108px;
width: 104px;
}
.span3 {
width: 172px;
width: 166px;
}
.span4 {
width: 236px;
width: 228px;
}
.span5 {
width: 300px;
width: 290px;
}
.span6 {
width: 364px;
width: 352px;
}
.span7 {
width: 428px;
width: 414px;
}
.span8 {
width: 492px;
width: 476px;
}
.span9 {
width: 556px;
width: 538px;
}
.span10 {
width: 620px;
width: 600px;
}
.span11 {
width: 684px;
width: 662px;
}
.span12 {
width: 748px;
width: 724px;
}
.offset1 {
margin-left: 84px;
margin-left: 82px;
}
.offset2 {
margin-left: 148px;
margin-left: 144px;
}
.offset3 {
margin-left: 212px;
margin-left: 206px;
}
.offset4 {
margin-left: 276px;
margin-left: 268px;
}
.offset5 {
margin-left: 340px;
margin-left: 330px;
}
.offset6 {
margin-left: 404px;
margin-left: 392px;
}
.offset7 {
margin-left: 468px;
margin-left: 454px;
}
.offset8 {
margin-left: 532px;
margin-left: 516px;
}
.offset9 {
margin-left: 596px;
margin-left: 578px;
}
.offset10 {
margin-left: 660px;
margin-left: 640px;
}
.offset11 {
margin-left: 724px;
margin-left: 702px;
}
.row-fluid {
width: 102.76243093919337%;
margin-left: -2.762430939%;
}
.row-fluid [class*="span"] {
float: left;
margin-left: 2.762430939%;
}
.row-fluid .span1 {
width: 5.6451612899588115%;
}
.row-fluid .span2 {
width: 13.978494622708812%;
}
.row-fluid .span3 {
width: 22.31182795545881%;
}
.row-fluid .span4 {
width: 30.64516128820881%;
}
.row-fluid .span5 {
width: 38.97849462095881%;
}
.row-fluid .span6 {
width: 47.311827953708814%;
}
.offset12 {
margin-left: 788px;
.row-fluid .span7 {
width: 55.645161286458816%;
}
.row-fluid .span8 {
width: 63.97849461920882%;
}
.row-fluid .span9 {
width: 72.31182795195882%;
}
.row-fluid .span10 {
width: 80.64516128470882%;
}
.row-fluid .span11 {
width: 88.97849461745884%;
}
.row-fluid .span12 {
width: 97.31182795020881%;
}
}
@media (max-width: 940px) {
......@@ -172,25 +216,26 @@
}
.navbar-fixed-top {
position: static;
margin-bottom: 36px;
margin-bottom: 18px;
}
.navbar-inner {
padding: 10px;
padding: 5px;
background-image: none;
}
.navbar .container {
padding: 0;
}
.navbar .brand {
float: none;
display: block;
padding-left: 15px;
padding-right: 15px;
margin: 0;
padding-left: 10px;
padding-right: 10px;
margin: 0 0 0 -5px;
}
.navbar .nav-collapse {
clear: left;
}
.navbar .nav {
float: none;
margin: 9px 0;
margin: 0 0 9px;
}
.navbar .nav > li {
float: none;
......@@ -217,8 +262,10 @@
}
.navbar .dropdown-menu {
position: static;
display: block;
top: auto;
left: auto;
float: none;
display: block;
max-width: none;
margin: 0 15px;
padding: 0;
......@@ -263,60 +310,133 @@
height: 0;
}
}
/*
@media (min-width: 1210px) {
// Reset grid variables
@gridColumns: 12;
@gridColumnWidth: 70px;
@gridGutterWidth: 30px;
@siteWidth: 1170px;
// Bring grid mixins to recalculate widths
.columns(@columns: 1) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
.offset(@columns: 1) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
@media (min-width: 1200px) {
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
.container {
width: @siteWidth;
width: 1170px;
}
.row {
margin-left: @gridGutterWidth * -1;
margin-left: -30px;
}
[class*="span"] {
margin-left: @gridGutterWidth;
}
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
.span3 { .columns(3); }
.span4 { .columns(4); }
.span5 { .columns(5); }
.span6 { .columns(6); }
.span7 { .columns(7); }
.span8 { .columns(8); }
.span9 { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
// Offset column options
.offset1 { .offset(1); }
.offset2 { .offset(2); }
.offset3 { .offset(3); }
.offset4 { .offset(4); }
.offset5 { .offset(5); }
.offset6 { .offset(6); }
.offset7 { .offset(7); }
.offset8 { .offset(8); }
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
.offset12 { .offset(12); }
margin-left: 30px;
}
.span1 {
width: 70px;
}
.span2 {
width: 170px;
}
.span3 {
width: 270px;
}
.span4 {
width: 370px;
}
.span5 {
width: 470px;
}
.span6 {
width: 570px;
}
.span7 {
width: 670px;
}
.span8 {
width: 770px;
}
.span9 {
width: 870px;
}
.span10 {
width: 970px;
}
.span11 {
width: 1070px;
}
.span12 {
width: 1170px;
}
.offset1 {
margin-left: 130px;
}
.offset2 {
margin-left: 230px;
}
.offset3 {
margin-left: 330px;
}
.offset4 {
margin-left: 430px;
}
.offset5 {
margin-left: 530px;
}
.offset6 {
margin-left: 630px;
}
.offset7 {
margin-left: 730px;
}
.offset8 {
margin-left: 830px;
}
.offset9 {
margin-left: 930px;
}
.offset10 {
margin-left: 1030px;
}
.offset11 {
margin-left: 1130px;
}
.row-fluid {
width: 102.56143440326584%;
margin-left: -2.56%;
}
.row-fluid [class*="span"] {
float: left;
margin-left: 2.56%;
}
.row-fluid .span1 {
width: 5.832601732615312%;
}
.row-fluid .span2 {
width: 14.16126839928198%;
}
.row-fluid .span3 {
width: 22.489935065948643%;
}
.row-fluid .span4 {
width: 30.818601732615313%;
}
.row-fluid .span5 {
width: 39.14726839928198%;
}
.row-fluid .span6 {
width: 47.47593506594863%;
}
.row-fluid .span7 {
width: 55.8046017326153%;
}
.row-fluid .span8 {
width: 64.13326839928197%;
}
.row-fluid .span9 {
width: 72.46193506594864%;
}
.row-fluid .span10 {
width: 80.7906017326153%;
}
.row-fluid .span11 {
width: 89.11926839928198%;
}
.row-fluid .span12 {
width: 97.44793506594864%;
}
}
*/
\ No newline at end of file
docs/assets/css/bootstrap.css
View file @ 910e78d2
This diff is collapsed.
docs/assets/css/docs.css
View file @ 910e78d2
......@@ -106,35 +106,6 @@ hr.soften {
}
/* Benefits list in masthead */
.benefits {
display: none;
width: 260px;
position: absolute;
right: 0;
bottom: 0;
}
.benefits ul {
list-style: none;
margin: 0;
}
.benefits li {
font-size: 16px;
font-weight: 300;
line-height: 35px;
color: #555;
}
.benefits li + li {
border-top: 1px solid #f5f5f5;
}
.benefits h4 {
color: #555;
}
.benefits span {
padding-right: 5px;
color: #999;
}
/* Specific jumbotrons
------------------------- */
/* supporting docs pages */
......@@ -175,7 +146,6 @@ hr.soften {
margin: 0;
padding-top: 11px;
padding-bottom: 11px;
font-size: 13px;
border-left: 1px solid #f5f5f5;
border-right: 1px solid #e5e5e5;
-webkit-border-radius: 0;
......@@ -500,6 +470,30 @@ hr.soften {
/* Color swatches on LESS docs page
-------------------------------------------------- */
/* Sets the width of the td */
.swatch-col {
width: 30px;
}
/* Le swatch */
.swatch {
display: inline-block;
width: 30px;
height: 20px;
margin: -6px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* For white swatches, give a border */
.swatch-bordered {
width: 28px;
height: 18px;
border: 1px solid #eee;
}
/* Misc
-------------------------------------------------- */
......@@ -522,6 +516,7 @@ h2 + .row {
/* Example sites showcase */
.example-sites img {
max-width: 100%;
margin: 0 auto;
}
.marketing-byline {
margin: -18px 0 27px;
......@@ -548,19 +543,6 @@ form.well {
margin: 18px 0;
}
/* Form docs for horizontal forms */
.form-docs {
padding-left: 10px;
}
.form-docs h3,
.form-docs p,
.form-docs li {
color: #777;
}
.form-docs hr {
margin: 18px 0;
}
/* Fake the :focus state to demo it */
.focused {
border-color: rgba(82,168,236,.8);
......@@ -646,6 +628,10 @@ form.well {
padding: 10px 14px;
margin: 0 auto 10px;
}
/* Masthead (home page jumbotron) */
.masthead {
padding-top: 0;
}
/* Don't space out quick links so much */
.quick-links {
......@@ -669,8 +655,9 @@ form.well {
display: block;
max-width: 300px;
margin: 0 auto 18px;
text-align: center;
}
.example-sites img {
.example-sites .thumbnail > img {
max-width: 270px;
}
......@@ -689,17 +676,8 @@ form.well {
left: auto;
}
/* Forms docs */
.form-docs {
padding-left: 0; /* down from 10px */
}
}
@media (min-width: 940px) {
.nav-collapse.collapse {
height: auto !important;
}
}
@media (max-width: 768px) {
......@@ -726,7 +704,7 @@ form.well {
.subnav .nav > li > a {
border: 0;
}
.subnav .nav > li + li a {
.subnav .nav > li + li > a {
border-top: 1px solid #e5e5e5;
}
......@@ -792,15 +770,26 @@ form.well {
}
@media (max-width: 940px) {
/* Unfloat brand */
.navbar-fixed-top .brand {
float: none;
float: left;
margin-left: 0;
padding-left: 15px;
padding-right: 15px;
padding-left: 10px;
padding-right: 10px;
}
}
/* LARGE DESKTOP SCREENS */
@media (min-width: 1210px) {
/* Update subnav container */
.subnav-fixed .nav {
width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
}
}
docs/base-css.html
View file @ 910e78d2
......@@ -952,22 +952,20 @@ For example, <code>section</code> should be wrapped as inline.
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>What's included</h3>
<p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p>
<ul>
<li>text inputs (text, password, email, etc)</li>
<li>checkbox</li>
<li>radio</li>
<li>select</li>
<li>multiple select</li>
<li>file input</li>
<li>textarea</li>
</ul>
<hr>
<h3>New defaults with v2.0</h3>
<p>Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.</p>
</div>
<h3>What's included</h3>
<p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p>
<ul>
<li>text inputs (text, password, email, etc)</li>
<li>checkbox</li>
<li>radio</li>
<li>select</li>
<li>multiple select</li>
<li>file input</li>
<li>textarea</li>
</ul>
<hr>
<h3>New defaults with v2.0</h3>
<p>Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.</p>
</div>
</div>
......@@ -1047,19 +1045,17 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>Redesigned browser states</h3>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
<hr>
<h3>Form validation</h3>
<p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
<h3>Redesigned browser states</h3>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
<hr>
<h3>Form validation</h3>
<p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
<pre class="prettyprint linenums">
&lt;fieldset
class="control-group error"&gt;
…
&lt;/fieldset&gt;
</pre>
</div>
</div>
</div>
......@@ -1152,14 +1148,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>Prepend &amp; append inputs</h3>
<p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
<hr>
<h3>Checkboxes and radios</h3>
<p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p>
<p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
</div>
<h3>Prepend &amp; append inputs</h3>
<p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
<hr>
<h3>Checkboxes and radios</h3>
<p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p>
<p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
<hr>
<h4>Inline forms and append/prepend</h4>
<p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p>
</div>
</div><!-- /row -->
</section>
......@@ -1410,7 +1407,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div>
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code> and on hover in the docs we show a light red background color show the icon's size.
<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.
</div>
<br>
......@@ -1497,7 +1494,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon envelope"></i></span>
<input class="span32" id="iconInput" size="16" type="text">
<input class="span2" id="iconInput" type="text">
</div>
</div>
</div>
......
docs/components.html
View file @ 910e78d2
This diff is collapsed.
docs/download.html
View file @ 910e78d2
......@@ -135,12 +135,8 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
<!--
<h3>Responsive</h3>
<label class="checkbox"><input type="checkbox" value=""> Max-width 480px</label>
<label class="checkbox"><input type="checkbox" value=""> Max-width 768px</label>
<label class="checkbox"><input type="checkbox" value=""> Max-width 1210px</label>
-->
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> Responsive layouts</label>
</div><!-- /span -->
</div><!-- /row -->
</section>
......
docs/examples.html
View file @ 910e78d2
......@@ -82,20 +82,50 @@
</header>
<!-- EXAMPLES
================================================== -->
<section id="examples">
<div class="page-header">
<h1>Examples from 1.x</h1>
</div>
<p><a href="../examples/container-app.html">Container app</a></p>
<p><a href="../examples/fluid.html">Fluid layout</a></p>
<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
<p><a href="../examples/hero.html">Hero marketing site</a></p>
</section>
<ul class="thumbnails bootstrap-examples">
<li class="span4">
<a href="../examples/hero.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Basic marketing site</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/fluid.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fluid layout</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/fluid-reverse.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fluid layout reversed</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/container-app.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Container application</h3>
<p></p>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fullscreen</h3>
<p></p>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Simple layout</h3>
<p></p>
</li>
</ul>
<!-- Footer
......
docs/index.html
View file @ 910e78d2
......@@ -82,18 +82,6 @@
<a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">View project on GitHub</a>
<a href="assets/bootstrap.zip" class="btn btn-large">Download Bootstrap</a>
</p>
<div class="benefits">
<h4>Feature highlights</h4>
<ul>
<li><span>&#10004;</span> Built on LESS</li>
<li><span>&#10004;</span> Complete style guide docs</li>
<li><span>&#10004;</span> Fully responsive design</li>
<li><span>&#10004;</span> Small footprint (10kb gzipped)</li>
<li><span>&#10004;</span> Support for IE7 and up</li>
<li><span>&#10004;</span> Custom jQuery plugins</li>
<li><span>&#10004;</span> Dozens of components</li>
</ul>
</div>
</div>
<ul class="quick-links">
......
docs/less.html
View file @ 910e78d2
This diff is collapsed.
docs/scaffolding.html
View file @ 910e78d2
......@@ -124,7 +124,6 @@
<div class="row show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
......@@ -390,7 +389,7 @@
@media (min-width: 768px) and (max-width: 940px) { ... }
// Large desktop
@media (min-width: 1210px) { .. }
@media (min-width: 1200px) { .. }
</pre>
</div>
</div>
......
docs/templates/pages/base-css.mustache
View file @ 910e78d2
......@@ -880,22 +880,20 @@
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>{{_i}}What's included{{/i}}</h3>
<p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
<ul>
<li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
<li>{{_i}}checkbox{{/i}}</li>
<li>{{_i}}radio{{/i}}</li>
<li>{{_i}}select{{/i}}</li>
<li>{{_i}}multiple select{{/i}}</li>
<li>{{_i}}file input{{/i}}</li>
<li>{{_i}}textarea{{/i}}</li>
</ul>
<hr>
<h3>{{_i}}New defaults with v2.0{{/i}}</h3>
<p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
</div>
<h3>{{_i}}What's included{{/i}}</h3>
<p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
<ul>
<li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
<li>{{_i}}checkbox{{/i}}</li>
<li>{{_i}}radio{{/i}}</li>
<li>{{_i}}select{{/i}}</li>
<li>{{_i}}multiple select{{/i}}</li>
<li>{{_i}}file input{{/i}}</li>
<li>{{_i}}textarea{{/i}}</li>
</ul>
<hr>
<h3>{{_i}}New defaults with v2.0{{/i}}</h3>
<p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
</div>
</div>
......@@ -975,19 +973,17 @@
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>{{_i}}Redesigned browser states{{/i}}</h3>
<p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.{{/i}}</p>
<hr>
<h3>{{_i}}Form validation{{/i}}</h3>
<p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.{{/i}}</p>
<h3>{{_i}}Redesigned browser states{{/i}}</h3>
<p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.{{/i}}</p>
<hr>
<h3>{{_i}}Form validation{{/i}}</h3>
<p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;fieldset
class="control-group error"&gt;
…
&lt;/fieldset&gt;
</pre>
</div>
</div>
</div>
......@@ -1080,14 +1076,15 @@
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
<p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
<hr>
<h3>{{_i}}Checkboxes and radios{{/i}}</h3>
<p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
<p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
</div>
<h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
<p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
<hr>
<h3>{{_i}}Checkboxes and radios{{/i}}</h3>
<p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
<p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
<hr>
<h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
<p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
</div>
</div><!-- /row -->
</section>
......@@ -1338,7 +1335,7 @@
</div>
</div>
<div class="alert alert-info">
{{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code> and on hover in the docs we show a light red background color show the icon's size.{{/i}}
{{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
</div>
<br>
......@@ -1425,7 +1422,7 @@
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon envelope"></i></span>
<input class="span32" id="iconInput" size="16" type="text">
<input class="span2" id="iconInput" type="text">
</div>
</div>
</div>
......
docs/templates/pages/components.mustache
View file @ 910e78d2
This diff is collapsed.
docs/templates/pages/download.mustache
View file @ 910e78d2
......@@ -63,12 +63,8 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
<!--
<h3>{{_i}}Responsive{{/i}}</h3>
<label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 480px{{/i}}</label>
<label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 768px{{/i}}</label>
<label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 1210px{{/i}}</label>
-->
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> {{_i}}Responsive layouts{{/i}}</label>
</div><!-- /span -->
</div><!-- /row -->
</section>
......
docs/templates/pages/examples.mustache
View file @ 910e78d2
......@@ -10,17 +10,47 @@
</header>
<!-- EXAMPLES
================================================== -->
<section id="examples">
<div class="page-header">
<h1>{{_i}}Examples from 1.x{{/i}}</h1>
</div>
<p><a href="../examples/container-app.html">Container app</a></p>
<p><a href="../examples/fluid.html">Fluid layout</a></p>
<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
<p><a href="../examples/hero.html">Hero marketing site</a></p>
</section>
<ul class="thumbnails bootstrap-examples">
<li class="span4">
<a href="../examples/hero.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Basic marketing site</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/fluid.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fluid layout</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/fluid-reverse.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fluid layout reversed</h3>
<p></p>
</li>
<li class="span4">
<a href="../examples/container-app.html" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Container application</h3>
<p></p>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Fullscreen</h3>
<p></p>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
<h3>Simple layout</h3>
<p></p>
</li>
</ul>
docs/templates/pages/index.mustache
View file @ 910e78d2
......@@ -10,18 +10,6 @@
<a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
<a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap{{/i}}</a>
</p>
<div class="benefits">
<h4>{{_i}}Feature highlights{{/i}}</h4>
<ul>
<li><span>&#10004;</span> {{_i}}Built on LESS{{/i}}</li>
<li><span>&#10004;</span> {{_i}}Complete style guide docs{{/i}}</li>
<li><span>&#10004;</span> {{_i}}Fully responsive design{{/i}}</li>
<li><span>&#10004;</span> {{_i}}Small footprint (10kb gzipped){{/i}}</li>
<li><span>&#10004;</span> {{_i}}Support for IE7 and up{{/i}}</li>
<li><span>&#10004;</span> {{_i}}Custom jQuery plugins{{/i}}</li>
<li><span>&#10004;</span> {{_i}}Dozens of components{{/i}}</li>
</ul>
</div>
</div>
<ul class="quick-links">
......
docs/templates/pages/less.mustache
View file @ 910e78d2
This diff is collapsed.
docs/templates/pages/scaffolding.mustache
View file @ 910e78d2
......@@ -52,7 +52,6 @@
<div class="row show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
......@@ -318,7 +317,7 @@
@media (min-width: 768px) and (max-width: 940px) { ... }
// {{_i}}Large desktop{{/i}}
@media (min-width: 1210px) { .. }
@media (min-width: 1200px) { .. }
</pre>
</div>
</div>
......
docs/templates/pages/upgrading.mustache
View file @ 910e78d2
......@@ -114,6 +114,15 @@
<li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
<li>{{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}</li>
</ul>
<h3>{{_i}}Navbar (formerly topbar){{/i}}</h3>
<ul>
<li>{{_i}}Base class changed from <code>.topbar</code> to <code>.navbar</code>{{/i}}</li>
<li>{{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed){{/i}}</li>
<li>{{_i}}Added vertical dividers to top-level nav{{/i}}</li>
<li>{{_i}}Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.{{/i}}</li>
<li>{{_i}}Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.{{/i}}</li>
<li>{{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <a href="./components.html#navbar">See navbar docs</a> for how to utilize.{{/i}}</li>
</ul>
<h3>{{_i}}Dropdown menus{{/i}}</h3>
<ul>
<li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>
......
docs/upgrading.html
View file @ 910e78d2
......@@ -186,6 +186,15 @@
<li>Pills were restyled to be less rounded by default</li>
<li>Pills now have dropdown menu support (they share the same markup and styles as tabs)</li>
</ul>
<h3>Navbar (formerly topbar)</h3>
<ul>
<li>Base class changed from <code>.topbar</code> to <code>.navbar</code></li>
<li>Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed)</li>
<li>Added vertical dividers to top-level nav</li>
<li>Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.</li>
<li>Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.</li>
<li>Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <a href="./components.html#navbar">See navbar docs</a> for how to utilize.</li>
</ul>
<h3>Dropdown menus</h3>
<ul>
<li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
......
examples/container-app.html
View file @ 910e78d2
......@@ -25,7 +25,7 @@
text-align: center; /* center align it with the container */
}
.container {
width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 10 columns and not 12. */
}
/* The white background content wrapper */
......
examples/fluid-reverse.html
View file @ 910e78d2
......@@ -28,7 +28,7 @@
<body>
<div class="navbar navbar-fixed">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="fluid-container">
<a class="brand" href="#">Project name</a>
......@@ -37,7 +37,7 @@
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<p class="pull-right">Logged in as <a href="#">username</a></p>
<p class="navbar-text pull-right">Logged in as <a href="#">username</a></p>
</div>
</div>
</div>
......@@ -45,24 +45,23 @@
<div class="fluid-container sidebar-right">
<div class="fluid-sidebar">
<div class="well">
<h5>Sidebar</h5>
<ul>
<ul class="nav list">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
</ul>
<h5>Sidebar</h5>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
</ul>
<h5>Sidebar</h5>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
......
examples/fluid.html
View file @ 910e78d2
This diff is collapsed.
examples/hero.html
View file @ 910e78d2
......@@ -16,8 +16,10 @@
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
......@@ -28,15 +30,22 @@
<body>
<div class="navbar navbar-fixed">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
......@@ -46,7 +55,7 @@
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn primary large">Learn more &raquo;</a></p>
</div>
......@@ -69,11 +78,20 @@
</div>
</div>
<hr>
<footer>
<p>&copy; Company 2012</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../js/tests/vendor/jquery.js"></script>
<script src="../js/bootstrap-transition.js"></script>
<script src="../js/bootstrap-collapse.js"></script>
</body>
</html>
js/README.md
View file @ 910e78d2
......@@ -73,7 +73,7 @@ Each plugin should expose it's raw constructor on a `Constructor` property -- ac
### DATA ACCESSOR
Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data api like this:
Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data API like this:
$('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor
......
less/accordion.less
View file @ 910e78d2
......@@ -9,7 +9,8 @@
// Group == heading + body
.accordion-group {
background-color: #f5f5f5;
margin-bottom: 2px;
border: 1px solid #e5e5e5;
.border-radius(4px);
}
.accordion-heading {
......@@ -19,9 +20,6 @@
display: block;
padding: 8px 15px;
}
.accordion-body {
margin-bottom: 2px;
}
// Inner needs the styles because you can't animate properly with any styles on the element
.accordion-inner {
......
less/alerts.less
View file @ 910e78d2
......@@ -18,6 +18,7 @@
// Adjust close link position
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: 18px;
}
......
less/forms.less
View file @ 910e78d2
......@@ -175,6 +175,11 @@ input[type="hidden"] {
.checkbox.inline + .checkbox.inline {
margin-left: 10px; // space out consecutive inline controls
}
// But don't forget to remove their padding on first-child
.controls > .radio.inline:first-child,
.controls > .checkbox.inline:first-child {
padding-top: 5px; // has to be padding because margin collaspes
}
......@@ -490,9 +495,20 @@ select:focus:required:invalid {
}
}
.form-search label,
.form-inline label {
.form-inline label,
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
display: inline-block;
}
// Make the prepend and append add-on vertical-align: middle;
.form-search .input-append .add-on,
.form-inline .input-prepend .add-on,
.form-search .input-append .add-on,
.form-inline .input-prepend .add-on {
vertical-align: middle;
}
// Margin to space out fieldsets
.control-group {
......
less/grid.less
View file @ 910e78d2
// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
// Default grid sizing
// -------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@gridTotalWidth: @gridRowWidth;
// Columns and offseting mixins
// ----------------------------
.columns(@columns: 1) {
//width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth);
}
.offset(@columns: 1) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
float: left;
margin-left: @gridGutterWidth;
}
// Grid rows and columns
// ---------------------
.row {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
// Find all .span# classes within .row and give them the necessary properties for grid columns
// (supported by all browsers back to IE7)
// Credit to @dhg for the idea
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
[class*="span"] {
.gridColumn();
}
......@@ -39,3 +65,42 @@
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
// FLUID GRID SYSTEM
// -----------------
// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1.
.row-fluid {
@gridColumnWidth: 6.382978723%;
@gridGutterWidth: 2.127659574%;
width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
margin-left: 0 - @gridGutterWidth;
// Redeclare the mixins
.gridColumn() {
float: left;
margin-left: @gridGutterWidth;
}
[class*="span"] {
.gridColumn();
}
.fluidColumns(@columns: 1) {
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
}
// Redeclare the columns
.span1 { .fluidColumns(1); }
.span2 { .fluidColumns(2); }
.span3 { .fluidColumns(3); }
.span4 { .fluidColumns(4); }
.span5 { .fluidColumns(5); }
.span6 { .fluidColumns(6); }
.span7 { .fluidColumns(7); }
.span8 { .fluidColumns(8); }
.span9 { .fluidColumns(9); }
.span10 { .fluidColumns(10); }
.span11 { .fluidColumns(11); }
.span12 { .fluidColumns(12); }
}
less/labels.less
View file @ 910e78d2
......@@ -9,8 +9,8 @@
text-transform: uppercase;
background-color: @grayLight;
.border-radius(3px);
&.important { background-color: @errorText; }
&.warning { background-color: @orange; }
&.success { background-color: @successText; }
&.info { background-color: @infoText; }
}
.label-important { background-color: @errorText; }
.label-warning { background-color: @orange; }
.label-success { background-color: @successText; }
.label-info { background-color: @infoText; }
less/layouts.less
View file @ 910e78d2
......@@ -10,34 +10,8 @@
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.fluid-container {
position: relative;
min-width: @siteWidth;
.container-fluid {
padding-left: @gridGutterWidth;
padding-right: @gridGutterWidth;
.clearfix();
}
// Sidebars (left and right options)
.fluid-sidebar {
width: @fluidSidebarWidth;
margin: 0 20px 18px;
}
.sidebar-left { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; }
.sidebar-right { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; }
// Float the sidebars accordingly
.sidebar-left .fluid-sidebar {
float: left;
margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1;
}
.sidebar-right .fluid-sidebar {
float: right;
margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1;
}
// The main content area
.fluid-content {
float: left;
width: 100%;
}
}
\ No newline at end of file
less/mixins.less
View file @ 910e78d2
......@@ -133,31 +133,12 @@
// Site container
// -------------------------
.container-fixed() {
width: @siteWidth;
width: @gridTotalWidth;
margin-left: auto;
margin-right: auto;
.clearfix();
}
// Columns and offseting
// -------------------------
.columns(@columns: 1) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
.offset(@columns: 1) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
float: left;
margin-left: @gridGutterWidth;
}
// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
.makeColumn(@columnSpan: 1) {
.gridColumn();
.columns(@columnSpan);
}
// CSS3 PROPERTIES
......
less/navbar.less
View file @ 910e78d2
......@@ -7,11 +7,15 @@
.navbar {
overflow: visible;
margin-bottom: @baseLineHeight;
}
// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
.navbar-inner {
background-color: @navbarBackground;
padding-left: 20px;
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);
}
......@@ -21,8 +25,8 @@
display: none;
float: right;
padding: 7px 10px;
margin-left: 10px;
margin-right: 10px;
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);
......@@ -38,6 +42,10 @@
.btn-navbar .i-bar + .i-bar {
margin-top: 3px;
}
.nav-collapse.collapse {
height: auto !important; // Required to be !important to override native collapse plugin
}
// Brand, links, text, and buttons
.navbar {
......@@ -138,20 +146,9 @@
}
// STATIC OR FIXED?
// ----------------
// FIXED NAVBAR
// ------------
// Static navbar
.navbar-static {
margin-bottom: @baseLineHeight;
}
.navbar-static .navbar-inner {
padding-left: 20px;
padding-right: 20px;
.border-radius(4px);
}
// Fixed navbar
.navbar-fixed-top {
position: fixed;
top: 0;
......@@ -159,6 +156,11 @@
left: 0;
z-index: @zindexFixedNavbar;
}
.navbar-fixed-top .navbar-inner {
padding-left: 0;
padding-right: 0;
.border-radius(0);
}
// NAVIGATION
......
less/pager.less
View file @ 910e78d2
......@@ -13,10 +13,15 @@
}
.pager a {
display: inline-block;
padding: 6px 15px;
background-color: #f5f5f5;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
.border-radius(15px);
}
.pager a:hover {
text-decoration: none;
background-color: #f5f5f5;
}
.pager .next a {
float: right;
}
......
less/progress-bars.less
View file @ 910e78d2
......@@ -53,7 +53,7 @@
}
// Striped bars
.progress.striped .bar {
.progress-striped .bar {
#gradient > .striped(#62c462);
.background-size(40px 40px);
}
......@@ -71,25 +71,25 @@
// ------
// Danger (red)
.progress.danger .bar {
.progress-danger .bar {
#gradient > .vertical(#ee5f5b, #c43c35);
}
.progress.danger.striped .bar {
.progress-danger.progress-striped .bar {
#gradient > .striped(#ee5f5b);
}
// Success (green)
.progress.success .bar {
.progress-success .bar {
#gradient > .vertical(#62c462, #57a957);
}
.progress.success.striped .bar {
.progress-success.progress-striped .bar {
#gradient > .striped(#62c462);
}
// Info (teal)
.progress.info .bar {
.progress-info .bar {
#gradient > .vertical(#5bc0de, #339bb9);
}
.progress.info.striped .bar {
.progress-info.progress-striped .bar {
#gradient > .striped(#5bc0de);
}
less/responsive.less
View file @ 910e78d2
......@@ -115,6 +115,10 @@
width: auto;
padding: 0 20px;
}
// Fluid rows
.row-fluid {
width: 100%;
}
// Undo negative margin on rows
.row {
margin-left: 0;
......@@ -135,10 +139,10 @@
@media (min-width: 768px) and (max-width: 940px) {
// Reset grid variables
@gridColumns: 16;
@gridColumnWidth: 44px;
@gridColumns: 12;
@gridColumnWidth: 42px;
@gridGutterWidth: 20px;
@siteWidth: 748px;
@siteWidth: 724px;
// Bring grid mixins to recalculate widths
.columns(@columns: 1) {
......@@ -148,11 +152,11 @@
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
// 16cols at 30px wide with 16px gutters
// 12cols at 44px wide with 20px gutters
.container {
width: @siteWidth;
padding-left: 10px;
padding-right: 10px;
padding-left: 20px;
padding-right: 20px;
}
// Default columns
......@@ -181,8 +185,43 @@
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
.offset12 { .offset(12); }
// FLUID GRID
// ----------
.row-fluid {
@gridColumnWidth: 5.801104972%;
@gridGutterWidth: 2.762430939%;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@gridTotalWidth: @gridRowWidth;
width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
margin-left: 0 - @gridGutterWidth;
// Redeclare the mixins
.gridColumn() {
float: left;
margin-left: @gridGutterWidth;
}
[class*="span"] {
.gridColumn();
}
.fluidColumns(@columns: 1) {
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
}
// Redeclare the columns
.span1 { .fluidColumns(1); }
.span2 { .fluidColumns(2); }
.span3 { .fluidColumns(3); }
.span4 { .fluidColumns(4); }
.span5 { .fluidColumns(5); }
.span6 { .fluidColumns(6); }
.span7 { .fluidColumns(7); }
.span8 { .fluidColumns(8); }
.span9 { .fluidColumns(9); }
.span10 { .fluidColumns(10); }
.span11 { .fluidColumns(11); }
.span12 { .fluidColumns(12); }
}
}
......@@ -199,10 +238,10 @@
// Unfix the navbar
.navbar-fixed-top {
position: static;
margin-bottom: @baseLineHeight * 2;
margin-bottom: @baseLineHeight;
}
.navbar-inner {
padding: 10px;
padding: 5px;
background-image: none;
}
.navbar .container {
......@@ -210,16 +249,18 @@
}
// Account for brand name
.navbar .brand {
float: none;
display: block;
padding-left: 15px;
padding-right: 15px;
margin: 0;
padding-left: 10px;
padding-right: 10px;
margin: 0 0 0 -5px;
}
// Nav collapse clears brand
.navbar .nav-collapse {
clear: left;
}
// Block-level the nav
.navbar .nav {
float: none;
margin: (@baseLineHeight / 2) 0;
margin: 0 0 (@baseLineHeight / 2);
}
.navbar .nav > li {
float: none;
......@@ -248,8 +289,10 @@
// Dropdowns in the navbar
.navbar .dropdown-menu {
position: static;
display: block;
top: auto;
left: auto;
float: none;
display: block;
max-width: none;
margin: 0 15px;
padding: 0;
......@@ -291,6 +334,7 @@
display: block;
}
// Hide everything in the navbar save .brand and toggle button */
.nav-collapse {
overflow: hidden;
height: 0;
......@@ -301,8 +345,8 @@
// LARGE DESKTOP & UP
// ------------------
/*
@media (min-width: 1210px) {
@media (min-width: 1200px) {
// Reset grid variables
@gridColumns: 12;
......@@ -310,6 +354,14 @@
@gridGutterWidth: 30px;
@siteWidth: 1170px;
// Thumbnails
.thumbnails {
margin-left: @gridGutterWidth * -1;
}
.thumbnails > li {
margin-left: @gridGutterWidth;
}
// Bring grid mixins to recalculate widths
.columns(@columns: 1) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
......@@ -317,7 +369,6 @@
.offset(@columns: 1) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
.container {
width: @siteWidth;
}
......@@ -354,7 +405,42 @@
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
.offset12 { .offset(12); }
// FLUID GRID
// ----------
.row-fluid {
@gridColumnWidth: 5.982%;
@gridGutterWidth: 2.56%;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@gridTotalWidth: @gridRowWidth;
width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
margin-left: 0 - @gridGutterWidth;
// Redeclare the mixins
.gridColumn() {
float: left;
margin-left: @gridGutterWidth;
}
[class*="span"] {
.gridColumn();
}
.fluidColumns(@columns: 1) {
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
}
// Redeclare the columns
.span1 { .fluidColumns(1); }
.span2 { .fluidColumns(2); }
.span3 { .fluidColumns(3); }
.span4 { .fluidColumns(4); }
.span5 { .fluidColumns(5); }
.span6 { .fluidColumns(6); }
.span7 { .fluidColumns(7); }
.span8 { .fluidColumns(8); }
.span9 { .fluidColumns(9); }
.span10 { .fluidColumns(10); }
.span11 { .fluidColumns(11); }
.span12 { .fluidColumns(12); }
}
}
*/
\ No newline at end of file
less/thumbnails.less
View file @ 910e78d2
......@@ -27,6 +27,8 @@ a.thumbnail:hover {
.thumbnail > img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.thumbnail .caption {
padding: 9px;
......
less/variables.less
View file @ 910e78d2
......@@ -30,15 +30,6 @@
@pink: #c3325f;
@purple: #7a43b6;
// Grid system
// Modify the grid styles in mixins.less
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Fluid width sidebar
@fluidSidebarWidth: 220px;
// Typography
@baseFontSize: 13px;
@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
......
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