rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'master' into deprecate-screen-device-vars

Browse Source 
Conflicts:
	less/variables.less
This commit is contained in:
Mark Otto 2013-08-23 22:56:23 -07:00
commit b86cd3bc3d
29 changed files with 649 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Gruntfile.js
View File

@ -9,9 +9,11 @@ module.exports = function(grunt) {
// Metadata.
pkg: grunt.file.readJSON('package.json'),
banner: '/**\n' +
'* <%= pkg.name %>.js v<%= pkg.version %> by @fat and @mdo\n' +
'* Bootstrap v<%= pkg.version %> by @fat and @mdo\n' +
'* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
'* <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
'* Licensed under <%= _.pluck(pkg.licenses, "url").join(", ") %>.\n' +
'*\n' +
'* Designed and built with all the love in the world by @mdo and @fat.\n' +
'*/\n',
jqueryCheck: 'if (!jQuery) { throw new Error(\"Bootstrap requires jQuery\") }\n\n',

12
README.md
View File

@ -1,4 +1,4 @@
# [Bootstrap](http://getbootstrap.com) [![Build Status](https://secure.travis-ci.org/twbs/bootstrap.png)](http://travis-ci.org/twbs/bootstrap)
# [Bootstrap](http://getbootstrap.com) [![Build Status](https://secure.travis-ci.org/twbs/bootstrap.png)](http://travis-ci.org/twbs/bootstrap) [![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.png)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
@ -65,13 +65,13 @@ When completed, you'll be able to run the various Grunt commands provided from t
### Available Grunt commands
#### Build - `grunt`
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [recess] and [UglifyJS].**
#### Only compile CSS and JavaScript - `grunt dist`
`grunt dist` creates the `/dist` directory with compiled files. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
`grunt dist` creates the `/dist` directory with compiled files. **Uses [recess] and [UglifyJS].**
#### Tests - `grunt test`
Runs jshint and qunit tests headlessly in [phantomjs](https://github.com/ariya/phantomjs/) (used for CI). **Requires [phantomjs](https://github.com/ariya/phantomjs/).**
Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI).
#### Watch - `grunt watch`
This is a convenience method for watching just Less files and automatically building them whenever you save.
@ -139,3 +139,7 @@ For more information on SemVer, please visit [http://semver.org/](http://semver.
## Copyright and license
Copyright 2013 Twitter, Inc under [the Apache 2.0 license](LICENSE).
[recess]: http://twitter.github.io/recess/ "recess"
[uglifyjs]: http://lisperator.net/uglifyjs/ "UglifyJS"

1
_config.yml
View File

@ -11,6 +11,7 @@ exclude: [".editorconfig", ".gitignore", ".ruby-version", "bower.json",
port: 9001
# Custom vars
current_version: 3.0.0
repo: https://github.com/twbs/bootstrap
download: https://github.com/twbs/bootstrap/archive/v3.0.0.zip
download_dist: https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip

7
_includes/nav-css.html
View File

@ -76,6 +76,13 @@
</li>
<li>
<a href="#helper-classes">Helper classes</a>
<ul class="nav">
<li><a href="#helper-classes-close">Close icon</a></li>
<li><a href="#helper-classes-floats">Quick floats</a></li>
<li><a href="#helper-classes-clearfix">Clearfix</a></li>
<li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
<li><a href="#helper-classes-image-replacement">Image replacement</a></li>
</ul>
</li>
<li>
<a href="#responsive-utilities">Responsive utilities</a>

2
_layouts/default.html
View File

@ -58,6 +58,8 @@
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links">
<li>Currently v{{ site.current_version }}</li>
<li class="muted">&middot;</li>
<li><a href="{{ page.base_url }}2.3.2/">Bootstrap 2.3.2 docs</a></li>
<li class="muted">&middot;</li>
<li><a href="{{ site.blog }}">Blog</a></li>

5
_layouts/home.html
View File

@ -19,7 +19,7 @@
<ul class="bs-masthead-links">
<li class="current-version">
Currently v3.0.0
Currently v{{ site.current_version }}
</li>
<li>
<a href="{{ page.base_url }}2.3.2/">Bootstrap 2.3.2 docs</a>
@ -36,6 +36,9 @@
<li>
<a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
</li>
<li>
<a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Blog']);">Blog</a>
</li>
</ul>
</footer>

2
assets/css/docs.css
View File

@ -642,7 +642,7 @@ h1[id] {
}
/* Typography */
.bs-example-type .table td:last-child {
.bs-example-type .table .info {
color: #999;
vertical-align: middle;
}

2
assets/js/raw-files.js
View File

File diff suppressed because one or more lines are too long

26
components.html
View File

@ -230,7 +230,7 @@ base_url: "../"
<h2 id="glyphicons-examples">Examples</h2>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
<div class="bs-example">
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
@ -238,7 +238,7 @@ base_url: "../"
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
</div>
</div>
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button>
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button>
@ -379,7 +379,7 @@ base_url: "../"
<h3 id="btn-groups-toolbar">Button toolbar</h3>
<p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
<div class="bs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-toolbar" role="toolbar" style="margin: 0;">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
@ -397,7 +397,7 @@ base_url: "../"
</div>
</div>
{% highlight html %}
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
@ -407,28 +407,28 @@ base_url: "../"
<h3 id="btn-groups-sizing">Sizing</h3>
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
<div class="bs-example">
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
@ -744,7 +744,7 @@ base_url: "../"
<h3 id="btn-dropdowns-sizing">Sizing</h3>
<p>Button dropdowns work with buttons of all sizes.</p>
<div class="bs-example">
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
@ -758,7 +758,7 @@ base_url: "../"
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
@ -772,7 +772,7 @@ base_url: "../"
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button <span class="caret"></span>
@ -822,7 +822,7 @@ base_url: "../"
<h3 id="btn-dropdowns-dropup">Dropup variation</h3>
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
<div class="bs-example">
<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
@ -1163,7 +1163,7 @@ base_url: "../"
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn btn-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>

579
css.html
View File

@ -80,20 +80,20 @@ base_url: "../"
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-tablet) { ... }
@media (min-width: @screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-desktop) { ... }
@media (min-width: @screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-large-desktop) { ... }
@media (min-width: @screen-lg) { ... }
{% endhighlight %}
<p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
{% highlight css %}
@media (max-width: @screen-phone-max) { ... }
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { ... }
@media (min-width: @screen-large-desktop) { ... }
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg) { ... }
{% endhighlight %}
<h3 id="grid-options">Grid options</h3>
@ -588,46 +588,80 @@ base_url: "../"
<!-- Headings -->
<h2 id="type-headings">Headings</h2>
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
<div class="bs-example bs-example-type">
<table class="table">
<tbody>
<tr>
<td><h1>h1. Bootstrap heading</h1></td>
<td>Semibold 36px</td>
<td class="info">Semibold 36px</td>
</tr>
<tr>
<td><h2>h2. Bootstrap heading</h2></td>
<td>Semibold 30px</td>
<td class="info">Semibold 30px</td>
</tr>
<tr>
<td><h3>h3. Bootstrap heading</h3></td>
<td>Semibold 24px</td>
<td class="info">Semibold 24px</td>
</tr>
<tr>
<td><h4>h4. Bootstrap heading</h4></td>
<td>Semibold 18px</td>
<td class="info">Semibold 18px</td>
</tr>
<tr>
<td><h5>h5. Bootstrap heading</h5></td>
<td>Semibold 14px</td>
<td class="info">Semibold 14px</td>
</tr>
<tr>
<td><h6>h6. Bootstrap heading</h6></td>
<td>Semibold 12px</td>
<td class="info">Semibold 12px</td>
</tr>
</tbody>
</table>
</div>
{% highlight html %}
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
{% endhighlight %}
<p>Also included with headings is an autoscaling <code>&lt;small&gt;</code> element. Use it for smaller, gray secondary text in any heading.</p>
<div class="bs-example bs-example-type">
<table class="table">
<tbody>
<tr>
<td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
</tr>
<tr>
<td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
</tr>
<tr>
<td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
</tr>
<tr>
<td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
</tr>
<tr>
<td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
</tr>
<tr>
<td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
</tr>
</tbody>
</table>
</div>
{% highlight html %}
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
{% endhighlight %}
<!-- Body copy -->
<h2 id="type-body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>
@ -1446,27 +1480,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
<form class="bs-example" role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form><!-- /example -->
<div class="bs-example">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /example -->
{% highlight html %}
<form role="form">
<div class="form-group">
@ -1502,22 +1538,24 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div>
<form class="bs-example form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><!-- /example -->
<div class="bs-example">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div><!-- /example -->
{% highlight html %}
<form class="form-inline" role="form">
<div class="form-group">
@ -1540,34 +1578,36 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-horizontal">Horizontal form</h2>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
<form class="bs-example form-horizontal">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
<div class="bs-example">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
</div>
</form>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<form class="form-horizontal" role="form">
<div class="form-group">
@ -1609,18 +1649,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div>
<form class="bs-example">
<input type="text" class="form-control" placeholder="Text input">
</form>
<div class="bs-example">
<form role="form">
<input type="text" class="form-control" placeholder="Text input">
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<input type="text" class="form-control" placeholder="Text input">
{% endhighlight %}
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<form class="bs-example">
<textarea class="form-control" rows="3"></textarea>
</form>
<div class="bs-example">
<form role="form">
<textarea class="form-control" rows="3"></textarea>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<textarea class="form-control" rows="3"></textarea>
{% endhighlight %}
@ -1628,27 +1672,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Checkboxes and radios</h3>
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
<h4>Default (stacked)</h4>
<form class="bs-example">
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<br>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
</form>
<div class="bs-example">
<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<br>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<div class="checkbox">
<label>
@ -1673,17 +1719,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Inline checkboxes</h4>
<p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
<form class="bs-example">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</form>
<div class="bs-example">
<form role="form">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@ -1698,23 +1746,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Selects</h3>
<p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
<form class="bs-example">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
<div class="bs-example">
<form role="form">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<select class="form-control">
<option>1</option>
@ -1736,20 +1786,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-controls-static">Static control</h2>
<p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
<form class="bs-example form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">email@example.com</p>
<div class="bs-example">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</div>
</form>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<form class="form-horizontal" role="form">
<div class="form-group">
@ -1773,18 +1825,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="bs-example">
<input class="form-control" id="focusedInput" type="text" value="This is focused...">
</form>
<div class="bs-example">
<form role="form">
<input class="form-control" id="focusedInput" type="text" value="This is focused...">
</form>
</div>
{% highlight html %}
<input class="form-control" id="focusedInput" type="text" value="This is focused...">
{% endhighlight %}
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<form class="bs-example">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form>
<div class="bs-example">
<form role="form">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
{% endhighlight %}
@ -1802,28 +1858,30 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
<form class="bs-example">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
<div class="bs-example">
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<form class="form-inline" role="form">
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
@ -1848,20 +1906,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-validation">Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
<form class="bs-example">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
</div>
</form>
<div class="bs-example">
<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
@ -1883,23 +1943,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Height sizing</h3>
<p>Create larger or smaller form controls that match button sizes.</p>
<form class="bs-example bs-example-control-sizing">
<div class="controls docs-input-sizes">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input type="text" class="form-control" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<div class="bs-example bs-example-control-sizing">
<form role="form">
<div class="controls">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input type="text" class="form-control" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
<select class="form-control">
<option value="">Default select</option>
</select>
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
</form>
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
<select class="form-control">
<option value="">Default select</option>
</select>
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
@ -1912,19 +1974,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Column sizing</h3>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<form class="bs-example" style="padding-bottom: 15px;">
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
<div class="bs-example">
<form role="form">
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
</form>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<div class="row">
<div class="col-lg-2">
@ -1941,10 +2005,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p>
<form class="bs-example">
<input type="text" class="form-control">
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
<div class="bs-example">
<form role="form">
<input type="text" class="form-control">
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %}
@ -2147,7 +2213,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1 id="helper-classes">Helper classes</h1>
</div>
<h3>Close icon</h3>
<h3 id="helper-classes-close">Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-example">
<p><button type="button" class="close" aria-hidden="true">&times;</button></p>
@ -2156,35 +2223,45 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="close" aria-hidden="true">&times;</button>
{% endhighlight %}
<h3>.pull-left</h3>
<p>Float an element left with a class. Can also be used as a mixin.</p>
<h3 id="helper-classes-floats">Quick floats</h3>
<p>Float an element to the left or right with a class. Classes can also be used as mixins.</p>
{% highlight html %}
<div class="pull-left">...</div>
{% endhighlight %}
{% highlight css %}
.pull-left {
float: left !important;
}
{% endhighlight %}
<h3>.pull-right</h3>
<p>Float an element right with a class. Can also be used as a mixin.</p>
{% highlight html %}
<div class="pull-right">...</div>
{% endhighlight %}
{% highlight css %}
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
{% endhighlight %}
<h3>.clearfix</h3>
<p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
<div class="bs-callout bs-callout-warning">
<h4>Not for use in navbars</h4>
<p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
</div>
<h3 id="helper-classes-clearfix">Clearfix</h3>
<p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
{% highlight html %}
<!-- Usage as a class -->
<div class="clearfix">...</div>
{% endhighlight %}
{% highlight css %}
// Mixin
// Mixin itself
.clearfix() {
&:before,
&:after {
@ -2196,19 +2273,41 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
}
}
// Usage
// Usage as a Mixin
.element {
.clearfix();
}
{% endhighlight %}
<h3>.sr-only</h3>
<p>Hide an element to all users <em>except</em> screen readers. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>.</p>
<h3 id="helper-classes-screen-readers">Screen reader content</h3>
<p>Hide an element to all users <em>except</em> screen readers with <code>.sr-only</code>. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
{% highlight html %}
<a class="sr-only" href="#content">Skip to content</a>
{% endhighlight %}
{% highlight css %}
// Usage as a Mixin
.skip-navigation {
.sr-only();
}
{% endhighlight %}
<h3 id="helper-classes-image-replacement">Image replacement</h3>
<p>Utilize the <code>.text-hide</code> class or mixin to help replace an element's text content with a background image.</p>
{% highlight html %}
<h1 class="text-hide">Custom heading</h1>
{% endhighlight %}
{% highlight css %}
// Usage as a Mixin
.heading {
.text-hide();
}
{% endhighlight %}
</div>
<!-- Responsive utilities
================================================== -->
<div class="bs-docs-section" id="responsive-utilities">

16
customize.html
View File

@ -380,6 +380,22 @@ base_url: "../"
<input type="text" class="form-control" placeholder="1.428571429" data-var="@line-height-base">
<p class="help-block">Used to calculate line-height throughout Bootstrap.</p>
</div>
<div class="col-lg-6">
<label>@font-size-h1</label>
<input type="text" class="form-control" placeholder="floor(@font-size-base * 2.60)" data-var="@font-size-h1">
<label>@font-size-h2</label>
<input type="text" class="form-control" placeholder="floor(@font-size-base * 2.15)" data-var="@font-size-h2">
<label>@font-size-h3</label>
<input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.70)" data-var="@font-size-h3">
</div>
<div class="col-lg-6">
<label>@font-size-h4</label>
<input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.25)" data-var="@font-size-h4">
<label>@font-size-h5</label>
<input type="text" class="form-control" placeholder="@font-size-base" data-var="@font-size-h5">
<label>@font-size-h6</label>
<input type="text" class="form-control" placeholder="ceil(@font-size-base * 0.85)" data-var="@font-size-h6">
</div>
</div>
<h3>Code blocks</h3>

154
dist/css/bootstrap-theme.css vendored
View File

@ -32,100 +32,136 @@
.btn-default {
text-shadow: 0 1px 0 #fff;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e6e6e6, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e0e0e0));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e0e0e0, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
background-repeat: repeat-x;
border-color: #e0e0e0;
border-color: #dbdbdb;
border-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
}
.btn-default:hover,
.btn-default:focus {
background-color: #e0e0e0;
background-position: 0 -15px;
}
.btn-default:active,
.btn-default.active {
background-color: #e6e6e6;
border-color: #e0e0e0;
background-color: #e0e0e0;
border-color: #dbdbdb;
}
.btn-primary {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #3071a9, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #3071a9 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#2d6ca2));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #2d6ca2, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
background-repeat: repeat-x;
border-color: #2d6ca2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
border-color: #2b669a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #2d6ca2;
background-position: 0 -15px;
}
.btn-primary:active,
.btn-primary.active {
background-color: #3071a9;
border-color: #2d6ca2;
background-color: #2d6ca2;
border-color: #2b669a;
}
.btn-success {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#449d44));
background-image: -webkit-linear-gradient(top, #5cb85c, 0%, #449d44, 100%);
background-image: -moz-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#419641));
background-image: -webkit-linear-gradient(top, #5cb85c, 0%, #419641, 100%);
background-image: -moz-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
background-repeat: repeat-x;
border-color: #419641;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
border-color: #3e8f3e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
}
.btn-success:hover,
.btn-success:focus {
background-color: #419641;
background-position: 0 -15px;
}
.btn-success:active,
.btn-success.active {
background-color: #449d44;
border-color: #419641;
background-color: #419641;
border-color: #3e8f3e;
}
.btn-warning {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#ec971f));
background-image: -webkit-linear-gradient(top, #f0ad4e, 0%, #ec971f, 100%);
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#eb9316));
background-image: -webkit-linear-gradient(top, #f0ad4e, 0%, #eb9316, 100%);
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
background-repeat: repeat-x;
border-color: #eb9316;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
border-color: #e38d13;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
}
.btn-warning:hover,
.btn-warning:focus {
background-color: #eb9316;
background-position: 0 -15px;
}
.btn-warning:active,
.btn-warning.active {
background-color: #ec971f;
border-color: #eb9316;
background-color: #eb9316;
border-color: #e38d13;
}
.btn-danger {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c9302c));
background-image: -webkit-linear-gradient(top, #d9534f, 0%, #c9302c, 100%);
background-image: -moz-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c12e2a));
background-image: -webkit-linear-gradient(top, #d9534f, 0%, #c12e2a, 100%);
background-image: -moz-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
background-repeat: repeat-x;
border-color: #c12e2a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
border-color: #b92c28;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
}
.btn-danger:hover,
.btn-danger:focus {
background-color: #c12e2a;
background-position: 0 -15px;
}
.btn-danger:active,
.btn-danger.active {
background-color: #c9302c;
border-color: #c12e2a;
background-color: #c12e2a;
border-color: #b92c28;
}
.btn-info {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#31b0d5));
background-image: -webkit-linear-gradient(top, #5bc0de, 0%, #31b0d5, 100%);
background-image: -moz-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#2aabd2));
background-image: -webkit-linear-gradient(top, #5bc0de, 0%, #2aabd2, 100%);
background-image: -moz-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
background-repeat: repeat-x;
border-color: #2aabd2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
border-color: #28a4c9;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
}
.btn-info:hover,
.btn-info:focus {
background-color: #2aabd2;
background-position: 0 -15px;
}
.btn-info:active,
.btn-info.active {
background-color: #31b0d5;
border-color: #2aabd2;
background-color: #2aabd2;
border-color: #28a4c9;
}
.thumbnail,
@ -148,7 +184,7 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
}
.navbar {
.navbar-default {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#f8f8f8));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, #f8f8f8, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
@ -160,8 +196,15 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
}
.navbar .navbar-nav > .active > a {
background-color: #f8f8f8;
.navbar-default .navbar-nav > .active > a {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ebebeb), to(#f3f3f3));
background-image: -webkit-linear-gradient(top, #ebebeb, 0%, #f3f3f3, 100%);
background-image: -moz-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
}
.navbar-brand,
@ -179,7 +222,14 @@
}
.navbar-inverse .navbar-nav > .active > a {
background-color: #222222;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#222222), to(#282828));
background-image: -webkit-linear-gradient(top, #222222, 0%, #282828, 100%);
background-image: -moz-linear-gradient(top, #222222 0%, #282828 100%);
background-image: linear-gradient(to bottom, #222222 0%, #282828 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
}
.navbar-inverse .navbar-brand,

2
dist/css/bootstrap-theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

29
dist/css/bootstrap.css vendored
View File

@ -491,6 +491,12 @@ h3 {
margin-bottom: 10px;
}
h1 small,
h2 small,
h3 small {
font-size: 65%;
}
h4,
h5,
h6 {
@ -498,6 +504,12 @@ h6 {
margin-bottom: 10px;
}
h4 small,
h5 small,
h6 small {
font-size: 75%;
}
h1,
.h1 {
font-size: 36px;
@ -528,23 +540,6 @@ h6,
font-size: 12px;
}
h1 small,
.h1 small {
font-size: 24px;
}
h2 small,
.h2 small {
font-size: 18px;
}
h3 small,
.h3 small,
h4 small,
.h4 small {
font-size: 14px;
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
dist/js/bootstrap.js vendored
View File

@ -1,7 +1,9 @@
/**
* bootstrap.js v3.0.0 by @fat and @mdo
* Bootstrap v3.0.0 by @fat and @mdo
* Copyright 2013 Twitter Inc.
* http://www.apache.org/licenses/LICENSE-2.0
* Licensed under http://www.apache.org/licenses/LICENSE-2.0.
*
* Designed and built with all the love in the world by @mdo and @fat.
*/
if (!jQuery) { throw new Error("Bootstrap requires jQuery") }

6
dist/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
examples/jumbotron/index.html
View File

@ -77,17 +77,17 @@
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>

8
getting-started.html
View File

@ -17,7 +17,7 @@ base_url: "../"
<h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
<p>The fastest way to get Bootstrap is to download the compiled and minified versions of our CSS and JavaScript, along with the included fonts. No documentation or original source files are included.</p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download precompiled Bootstrap</a></p>
<h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options">
@ -297,7 +297,7 @@ bootstrap/
<div class="page-header">
<h1 id="migration">Migrating from 2.x to 3.0</h1>
</div>
<p class="lead">Folks looking to upgrade to v3 should use this section as a general upgrade guide. We've outlined some of the major changes and provided tables that highlight key changes. For an overview, <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">read the announcement blog post</a>.</p>
<p class="lead">Bootstrap 3 is not backwards compatible with v2.x. Folks looking to upgrade to v3 should use this section as a general upgrade guide. We've outlined some of the major changes and provided tables that highlight key changes. For an overview, <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">read the announcement blog post</a>.</p>
<h2 id="migration-classes">Major class changes</h2>
@ -423,6 +423,10 @@ bootstrap/
<td><code>ul.inline</code></td>
<td><code>.list-inline</code></td>
</tr>
<tr>
<td><code>.muted</code></td>
<td><code>.text-muted</code></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->

14
javascript.html
View File

@ -273,10 +273,11 @@ $('#myModal').on('show.bs.modal', function (e) {
<td>remote</td>
<td>path</td>
<td>false</td>
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the root of the modal element. If you're using the data api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the root of the modal element. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
{% highlight html %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %}
</td>
</tr>
</tbody>
</table>
@ -804,7 +805,10 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
<h4>Tooltips in button groups and input groups require special setting</h4>
<p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
</div>
<div class="bs-callout bs-callout-info">
<h4>Tooltips on disabled elements require wrapper elements</h4>
<p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>, and apply the tooltip to that element instead.</p>
</div>
<h2 id="tooltips-usage">Usage</h2>
<p>Trigger the tooltip via JavaScript:</p>
@ -967,6 +971,10 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<h4>Popovers in button groups and input groups require special setting</h4>
<p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
</div>
<div class="bs-callout bs-callout-info">
<h4>Popovers on disabled elements require wrapper elements</h4>
<p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>, and apply the popover to that element instead.</p>
</div>
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
@ -1069,7 +1077,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<td>selector</td>
<td>string</td>
<td>false</td>
<td>if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/KPeKS/4/">an informative example</a>.</td>
<td>if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
</tr>
<tr>
<td>trigger</td>

38
less/mixins.less
View File

@ -69,7 +69,15 @@
}
// CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
// that we cannot chain the mixins together in Less, so they are repeated.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() {
font: ~"0/0" a;
color: transparent;
@ -77,6 +85,14 @@
background-color: transparent;
border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
@ -559,7 +575,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -567,17 +583,17 @@
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
@ -592,7 +608,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -600,7 +616,7 @@
// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
@ -610,7 +626,7 @@
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
@ -625,7 +641,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -633,17 +649,17 @@
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}

2
less/navs.less
View File

@ -162,7 +162,7 @@
}
}
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
> li {
display: table-cell;
width: 1%;

48
less/responsive-utilities.less
View File

@ -41,17 +41,17 @@
.responsive-visibility();
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
@ -63,16 +63,16 @@
.responsive-visibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
@ -85,15 +85,15 @@
}
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
@ -106,16 +106,16 @@
}
}
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
@ -126,17 +126,17 @@
.responsive-invisibility();
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
@ -148,16 +148,16 @@
.responsive-invisibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
@ -170,15 +170,15 @@
}
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
@ -191,16 +191,16 @@
}
}
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}

2
less/tables.less
View File

@ -180,7 +180,7 @@ table {
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media (max-width: @screen-sm) {
@media (max-width: @screen-sm-min) {
.table-responsive {
width: 100%;
margin-bottom: 15px;

25
less/theme.less
View File

@ -32,13 +32,20 @@
// Mixin for generating new styles
.btn-styles(@btn-color: #555;) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%));
border-color: darken(@btn-color, 12%);
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
background-repeat: repeat-x;
border-color: darken(@btn-color, 14%);
&:hover,
&:focus {
background-color: darken(@btn-color, 12%);
background-position: 0 -15px;
}
&:active,
&.active {
background-color: darken(@btn-color, 10%);
border-color: darken(@btn-color, 12%);
background-color: darken(@btn-color, 12%);
border-color: darken(@btn-color, 14%);
}
}
@ -91,15 +98,16 @@
// Navbar
// --------------------------------------------------
// Basic navbar
.navbar {
// Default navbar
.navbar-default {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg;);
border-radius: @navbar-border-radius;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
.navbar-nav > .active > a {
background-color: @navbar-default-bg;
#gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%););
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
}
}
.navbar-brand,
@ -112,7 +120,8 @@
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;);
.navbar-nav > .active > a {
background-color: @navbar-inverse-bg;
#gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%););
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
}
.navbar-brand,

26
less/type.less
View File

@ -52,6 +52,7 @@ h1, h2, h3, h4, h5, h6,
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
small {
font-weight: normal;
line-height: 1;
@ -64,25 +65,28 @@ h2,
h3 {
margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2);
small {
font-size: 65%;
}
}
h4,
h5,
h6 {
margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2);
small {
font-size: 75%;
}
}
h1, .h1 { font-size: floor(@font-size-base * 2.60); } // ~36px
h2, .h2 { font-size: floor(@font-size-base * 2.15); } // ~30px
h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
h5, .h5 { font-size: @font-size-base; }
h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
h3 small, .h3 small,
h4 small, .h4 small { font-size: @font-size-base; }
h1, .h1 { font-size: @font-size-h1; }
h2, .h2 { font-size: @font-size-h2; }
h3, .h3 { font-size: @font-size-h3; }
h4, .h4 { font-size: @font-size-h4; }
h5, .h5 { font-size: @font-size-h5; }
h6, .h6 { font-size: @font-size-h6; }
// Page header

2
less/utilities.less
View File

@ -30,7 +30,7 @@
visibility: hidden;
}
.text-hide {
.hide-text();
.text-hide();
}

29
less/variables.less
View File

@ -48,6 +48,13 @@
@font-size-large: ceil(@font-size-base * 1.25); // ~18px
@font-size-small: ceil(@font-size-base * 0.85); // ~12px
@font-size-h1: floor(@font-size-base * 2.60); // ~36px
@font-size-h2: floor(@font-size-base * 2.15); // ~30px
@font-size-h3: ceil(@font-size-base * 1.70); // ~24px
@font-size-h4: ceil(@font-size-base * 1.25); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil(@font-size-base * 0.85); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@ -200,25 +207,33 @@
// --------------------------------------------------
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-phone: @screen-xs;// NOTE: Deprecated in favor of @screen-xs
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px;
@screen-tablet: @screen-sm;// NOTE: Deprecated in favor of @screen-sm
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-desktop: @screen-md;// NOTE: Deprecated in favor of @screen-md
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;// NOTE: Deprecated in favor of @screen-lg
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
// Grid system

2
package.json
View File

@ -26,7 +26,7 @@
, "grunt-contrib-uglify": "~0.2.2"
, "grunt-contrib-qunit": "~0.2.2"
, "grunt-contrib-watch": "~0.5.1"
, "grunt-html-validation": "git://github.com/praveenvijayan/grunt-html-validation.git"
, "grunt-html-validation": "~0.1.4"
, "grunt-jekyll": "~0.3.8"
, "grunt-recess": "~0.3.3"
, "browserstack-runner": "~0.0.11"