mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-26 13:29:06 +02:00
Code Issues Releases Wiki 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
parent 22ce649910 d5a2785545
commit b86cd3bc3d
29 changed files with 649 additions and 410 deletions
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. // Metadata.
pkg: grunt.file.readJSON('package.json'), pkg: grunt.file.readJSON('package.json'),
banner: '/**\n' + 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' + '* 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', '*/\n',
jqueryCheck: 'if (!jQuery) { throw new Error(\"Bootstrap requires jQuery\") }\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). 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 ### Available Grunt commands
#### Build - `grunt` #### 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` #### 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` #### 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` #### Watch - `grunt watch`
This is a convenience method for watching just Less files and automatically building them whenever you save. 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 and license
Copyright 2013 Twitter, Inc under [the Apache 2.0 license](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 port: 9001
# Custom vars # Custom vars
current_version: 3.0.0
repo: https://github.com/twbs/bootstrap repo: https://github.com/twbs/bootstrap
download: https://github.com/twbs/bootstrap/archive/v3.0.0.zip 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 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>
<li> <li>
<a href="#helper-classes">Helper classes</a> <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>
<li> <li>
<a href="#responsive-utilities">Responsive utilities</a> <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>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> <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"> <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><a href="{{ page.base_url }}2.3.2/">Bootstrap 2.3.2 docs</a></li>
<li class="muted">&middot;</li> <li class="muted">&middot;</li>
<li><a href="{{ site.blog }}">Blog</a></li> <li><a href="{{ site.blog }}">Blog</a></li>

5
_layouts/home.html
View File

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

2
assets/css/docs.css
View File

@@ -642,7 +642,7 @@ h1[id] {
} }
/* Typography */ /* Typography */
.bs-example-type .table td:last-child { .bs-example-type .table .info {
color: #999; color: #999;
vertical-align: middle; 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> <h2 id="glyphicons-examples">Examples</h2>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <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-left"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></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> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
</div> </div>
</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 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"><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> <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> <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> <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="bs-example">
<div class="btn-toolbar" style="margin: 0;"> <div class="btn-toolbar" role="toolbar" style="margin: 0;">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">2</button>
@@ -397,7 +397,7 @@ base_url: "../"
</div> </div>
</div> </div>
{% highlight html %} {% 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> <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> <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> <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="bs-example">
<div class="btn-toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-lg"> <div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button> <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">Middle</button>
<button type="button" class="btn btn-default">Right</button> <button type="button" class="btn btn-default">Right</button>
</div> </div>
</div> </div>
<div class="btn-toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default">Left</button> <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">Middle</button>
<button type="button" class="btn btn-default">Right</button> <button type="button" class="btn btn-default">Right</button>
</div> </div>
</div> </div>
<div class="btn-toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm"> <div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">Left</button> <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">Middle</button>
<button type="button" class="btn btn-default">Right</button> <button type="button" class="btn btn-default">Right</button>
</div> </div>
</div> </div>
<div class="btn-toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-xs"> <div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">Left</button> <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">Middle</button>
@@ -744,7 +744,7 @@ base_url: "../"
<h3 id="btn-dropdowns-sizing">Sizing</h3> <h3 id="btn-dropdowns-sizing">Sizing</h3>
<p>Button dropdowns work with buttons of all sizes.</p> <p>Button dropdowns work with buttons of all sizes.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span> Large button <span class="caret"></span>
@@ -758,7 +758,7 @@ base_url: "../"
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
<div class="btn-toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span> Small button <span class="caret"></span>
@@ -772,7 +772,7 @@ base_url: "../"
</ul> </ul>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
<div class="btn-toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button <span class="caret"></span> Extra small button <span class="caret"></span>
@@ -822,7 +822,7 @@ base_url: "../"
<h3 id="btn-dropdowns-dropup">Dropup variation</h3> <h3 id="btn-dropdowns-dropup">Dropup variation</h3>
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p> <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
<div class="bs-example"> <div class="bs-example">
<div class="btn-toolbar"> <div class="btn-toolbar" role="toolbar">
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button> <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> <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"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
<div class="input-group-btn btn-group"> <div class="input-group-btn">
<!-- Button and dropdown menu --> <!-- Button and dropdown menu -->
</div> </div>
</div> </div>

215
css.html
View File

@@ -80,20 +80,20 @@ base_url: "../"
/* No media query since this is the default in Bootstrap */ /* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */ /* Small devices (tablets, 768px and up) */
@media (min-width: @screen-tablet) { ... } @media (min-width: @screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */ /* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-desktop) { ... } @media (min-width: @screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */ /* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-large-desktop) { ... } @media (min-width: @screen-lg) { ... }
{% endhighlight %} {% 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> <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 %} {% highlight css %}
@media (max-width: @screen-phone-max) { ... } @media (max-width: @screen-phone-max) { ... }
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... } @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { ... } @media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-large-desktop) { ... } @media (min-width: @screen-lg) { ... }
{% endhighlight %} {% endhighlight %}
<h3 id="grid-options">Grid options</h3> <h3 id="grid-options">Grid options</h3>
@@ -588,46 +588,80 @@ base_url: "../"
<!-- Headings --> <!-- Headings -->
<h2 id="type-headings">Headings</h2> <h2 id="type-headings">Headings</h2>
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p> <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"> <div class="bs-example bs-example-type">
<table class="table"> <table class="table">
<tbody> <tbody>
<tr> <tr>
<td><h1>h1. Bootstrap heading</h1></td> <td><h1>h1. Bootstrap heading</h1></td>
<td>Semibold 36px</td> <td class="info">Semibold 36px</td>
</tr> </tr>
<tr> <tr>
<td><h2>h2. Bootstrap heading</h2></td> <td><h2>h2. Bootstrap heading</h2></td>
<td>Semibold 30px</td> <td class="info">Semibold 30px</td>
</tr> </tr>
<tr> <tr>
<td><h3>h3. Bootstrap heading</h3></td> <td><h3>h3. Bootstrap heading</h3></td>
<td>Semibold 24px</td> <td class="info">Semibold 24px</td>
</tr> </tr>
<tr> <tr>
<td><h4>h4. Bootstrap heading</h4></td> <td><h4>h4. Bootstrap heading</h4></td>
<td>Semibold 18px</td> <td class="info">Semibold 18px</td>
</tr> </tr>
<tr> <tr>
<td><h5>h5. Bootstrap heading</h5></td> <td><h5>h5. Bootstrap heading</h5></td>
<td>Semibold 14px</td> <td class="info">Semibold 14px</td>
</tr> </tr>
<tr> <tr>
<td><h6>h6. Bootstrap heading</h6></td> <td><h6>h6. Bootstrap heading</h6></td>
<td>Semibold 12px</td> <td class="info">Semibold 12px</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
{% highlight html %} {% highlight html %}
<h1>...</h1> <h1>h1. Bootstrap heading</h1>
<h2>...</h2> <h2>h2. Bootstrap heading</h2>
<h3>...</h3> <h3>h3. Bootstrap heading</h3>
<h4>...</h4> <h4>h4. Bootstrap heading</h4>
<h5>...</h5> <h5>h5. Bootstrap heading</h5>
<h6>...</h6> <h6>h6. Bootstrap heading</h6>
{% endhighlight %} {% 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 --> <!-- Body copy -->
<h2 id="type-body-copy">Body copy</h2> <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> <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,7 +1480,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-example">Basic example</h2> <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> <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="bs-example">
<form role="form">
<div class="form-group"> <div class="form-group">
<label for="exampleInputEmail1">Email address</label> <label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
@@ -1466,7 +1501,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</label> </label>
</div> </div>
<button type="submit" class="btn btn-default">Submit</button> <button type="submit" class="btn btn-default">Submit</button>
</form><!-- /example --> </form>
</div><!-- /example -->
{% highlight html %} {% highlight html %}
<form role="form"> <form role="form">
<div class="form-group"> <div class="form-group">
@@ -1502,7 +1538,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Always add labels</h4> <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> <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> </div>
<form class="bs-example form-inline" role="form"> <div class="bs-example">
<form class="form-inline" role="form">
<div class="form-group"> <div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label> <label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
@@ -1517,7 +1554,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</label> </label>
</div> </div>
<button type="submit" class="btn btn-default">Sign in</button> <button type="submit" class="btn btn-default">Sign in</button>
</form><!-- /example --> </form>
</div><!-- /example -->
{% highlight html %} {% highlight html %}
<form class="form-inline" role="form"> <form class="form-inline" role="form">
<div class="form-group"> <div class="form-group">
@@ -1540,7 +1578,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-horizontal">Horizontal form</h2> <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> <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="bs-example">
<form class="form-horizontal">
<div class="form-group"> <div class="form-group">
<label for="inputEmail1" class="col-lg-2 control-label">Email</label> <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10"> <div class="col-lg-10">
@@ -1568,6 +1607,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<form class="form-horizontal" role="form"> <form class="form-horizontal" role="form">
<div class="form-group"> <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> <h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p> <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div> </div>
<form class="bs-example"> <div class="bs-example">
<form role="form">
<input type="text" class="form-control" placeholder="Text input"> <input type="text" class="form-control" placeholder="Text input">
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<input type="text" class="form-control" placeholder="Text input"> <input type="text" class="form-control" placeholder="Text input">
{% endhighlight %} {% endhighlight %}
<h3>Textarea</h3> <h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p> <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<form class="bs-example"> <div class="bs-example">
<form role="form">
<textarea class="form-control" rows="3"></textarea> <textarea class="form-control" rows="3"></textarea>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<textarea class="form-control" rows="3"></textarea> <textarea class="form-control" rows="3"></textarea>
{% endhighlight %} {% endhighlight %}
@@ -1628,7 +1672,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Checkboxes and radios</h3> <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> <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> <h4>Default (stacked)</h4>
<form class="bs-example"> <div class="bs-example">
<form role="form">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" value=""> <input type="checkbox" value="">
@@ -1649,6 +1694,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</label> </label>
</div> </div>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -1673,7 +1719,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Inline checkboxes</h4> <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> <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"> <div class="bs-example">
<form role="form">
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label> </label>
@@ -1684,6 +1731,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label> </label>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -1698,7 +1746,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Selects</h3> <h3>Selects</h3>
<p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p> <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
<form class="bs-example"> <div class="bs-example">
<form role="form">
<select class="form-control"> <select class="form-control">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
@@ -1715,6 +1764,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<option>5</option> <option>5</option>
</select> </select>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<select class="form-control"> <select class="form-control">
<option>1</option> <option>1</option>
@@ -1736,7 +1786,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-controls-static">Static control</h2> <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> <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="bs-example">
<form class="form-horizontal" role="form">
<div class="form-group"> <div class="form-group">
<label class="col-lg-2 control-label">Email</label> <label class="col-lg-2 control-label">Email</label>
<div class="col-lg-10"> <div class="col-lg-10">
@@ -1750,6 +1801,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<form class="form-horizontal" role="form"> <form class="form-horizontal" role="form">
<div class="form-group"> <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> <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> <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"> <div class="bs-example">
<form role="form">
<input class="form-control" id="focusedInput" type="text" value="This is focused..."> <input class="form-control" id="focusedInput" type="text" value="This is focused...">
</form> </form>
</div>
{% highlight html %} {% highlight html %}
<input class="form-control" id="focusedInput" type="text" value="This is focused..."> <input class="form-control" id="focusedInput" type="text" value="This is focused...">
{% endhighlight %} {% endhighlight %}
<h3 id="forms-disabled-inputs">Disabled inputs</h3> <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> <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"> <div class="bs-example">
<form role="form">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
{% endhighlight %} {% endhighlight %}
@@ -1802,7 +1858,8 @@ 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> <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> </div>
<form class="bs-example"> <div class="bs-example">
<form role="form">
<fieldset disabled> <fieldset disabled>
<div class="form-group"> <div class="form-group">
<label for="disabledTextInput">Disabled input</label> <label for="disabledTextInput">Disabled input</label>
@@ -1822,8 +1879,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</fieldset> </fieldset>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<form class="form-inline" role="form"> <form role="form">
<fieldset disabled> <fieldset disabled>
<div class="form-group"> <div class="form-group">
<label for="disabledTextInput">Disabled input</label> <label for="disabledTextInput">Disabled input</label>
@@ -1848,7 +1906,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-validation">Validation states</h3> <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> <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="bs-example">
<form role="form">
<div class="form-group has-success"> <div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label> <label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess"> <input type="text" class="form-control" id="inputSuccess">
@@ -1862,6 +1921,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="text" class="form-control" id="inputError"> <input type="text" class="form-control" id="inputError">
</div> </div>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<div class="form-group has-success"> <div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label> <label class="control-label" for="inputSuccess">Input with success</label>
@@ -1883,8 +1943,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Height sizing</h3> <h3>Height sizing</h3>
<p>Create larger or smaller form controls that match button sizes.</p> <p>Create larger or smaller form controls that match button sizes.</p>
<form class="bs-example bs-example-control-sizing"> <div class="bs-example bs-example-control-sizing">
<div class="controls docs-input-sizes"> <form role="form">
<div class="controls">
<input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control input-lg" type="text" placeholder=".input-lg">
<input type="text" class="form-control" placeholder="Default input"> <input type="text" class="form-control" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm"> <input class="form-control input-sm" type="text" placeholder=".input-sm">
@@ -1900,6 +1961,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</select> </select>
</div> </div>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input"> <input class="form-control" type="text" placeholder="Default input">
@@ -1912,7 +1974,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Column sizing</h3> <h3>Column sizing</h3>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p> <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="bs-example">
<form role="form">
<div class="row"> <div class="row">
<div class="col-lg-2"> <div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2"> <input type="text" class="form-control" placeholder=".col-lg-2">
@@ -1925,6 +1988,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-lg-2"> <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> <h2 id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p> <p>Block level help text for form controls.</p>
<form class="bs-example"> <div class="bs-example">
<form role="form">
<input type="text" class="form-control"> <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> <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %} {% endhighlight %}
@@ -2147,7 +2213,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1 id="helper-classes">Helper classes</h1> <h1 id="helper-classes">Helper classes</h1>
</div> </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> <p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-example"> <div class="bs-example">
<p><button type="button" class="close" aria-hidden="true">&times;</button></p> <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> <button type="button" class="close" aria-hidden="true">&times;</button>
{% endhighlight %} {% 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 %} {% highlight html %}
<div class="pull-left">...</div> <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> <div class="pull-right">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight css %} {% highlight css %}
// Classes
.pull-left {
float: left !important;
}
.pull-right { .pull-right {
float: right !important; float: right !important;
} }
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
{% endhighlight %} {% endhighlight %}
<h3>.clearfix</h3> <div class="bs-callout bs-callout-warning">
<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> <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 %} {% highlight html %}
<!-- Usage as a class -->
<div class="clearfix">...</div> <div class="clearfix">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight css %} {% highlight css %}
// Mixin // Mixin itself
.clearfix() { .clearfix() {
&:before, &:before,
&:after { &:after {
@@ -2196,19 +2273,41 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
} }
} }
// Usage // Usage as a Mixin
.element { .element {
.clearfix(); .clearfix();
} }
{% endhighlight %} {% 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 %} {% highlight html %}
<a class="sr-only" href="#content">Skip to content</a> <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 %} {% endhighlight %}
</div> </div>
<!-- Responsive utilities <!-- Responsive utilities
================================================== --> ================================================== -->
<div class="bs-docs-section" id="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"> <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> <p class="help-block">Used to calculate line-height throughout Bootstrap.</p>
</div> </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> </div>
<h3>Code blocks</h3> <h3>Code blocks</h3>

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

@@ -32,100 +32,136 @@
.btn-default { .btn-default {
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e0e0e0));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e6e6e6, 100%); background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e0e0e0, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%); background-image: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%); background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #e0e0e0; border-color: #dbdbdb;
border-color: #ccc; 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,
.btn-default.active { .btn-default.active {
background-color: #e6e6e6; background-color: #e0e0e0;
border-color: #e0e0e0; border-color: #dbdbdb;
} }
.btn-primary { .btn-primary {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#2d6ca2));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #3071a9, 100%); background-image: -webkit-linear-gradient(top, #428bca, 0%, #2d6ca2, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #3071a9 100%); background-image: -moz-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%); background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #2d6ca2; border-color: #2b669a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0); 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,
.btn-primary.active { .btn-primary.active {
background-color: #3071a9; background-color: #2d6ca2;
border-color: #2d6ca2; border-color: #2b669a;
} }
.btn-success { .btn-success {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#449d44)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#419641));
background-image: -webkit-linear-gradient(top, #5cb85c, 0%, #449d44, 100%); background-image: -webkit-linear-gradient(top, #5cb85c, 0%, #419641, 100%);
background-image: -moz-linear-gradient(top, #5cb85c 0%, #449d44 100%); background-image: -moz-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%); background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #419641; border-color: #3e8f3e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); 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,
.btn-success.active { .btn-success.active {
background-color: #449d44; background-color: #419641;
border-color: #419641; border-color: #3e8f3e;
} }
.btn-warning { .btn-warning {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#ec971f)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#eb9316));
background-image: -webkit-linear-gradient(top, #f0ad4e, 0%, #ec971f, 100%); background-image: -webkit-linear-gradient(top, #f0ad4e, 0%, #eb9316, 100%);
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); background-image: -moz-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%); background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #eb9316; border-color: #e38d13;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0); 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,
.btn-warning.active { .btn-warning.active {
background-color: #ec971f; background-color: #eb9316;
border-color: #eb9316; border-color: #e38d13;
} }
.btn-danger { .btn-danger {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c9302c)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c12e2a));
background-image: -webkit-linear-gradient(top, #d9534f, 0%, #c9302c, 100%); background-image: -webkit-linear-gradient(top, #d9534f, 0%, #c12e2a, 100%);
background-image: -moz-linear-gradient(top, #d9534f 0%, #c9302c 100%); background-image: -moz-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%); background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #c12e2a; border-color: #b92c28;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); 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,
.btn-danger.active { .btn-danger.active {
background-color: #c9302c; background-color: #c12e2a;
border-color: #c12e2a; border-color: #b92c28;
} }
.btn-info { .btn-info {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#31b0d5)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#2aabd2));
background-image: -webkit-linear-gradient(top, #5bc0de, 0%, #31b0d5, 100%); background-image: -webkit-linear-gradient(top, #5bc0de, 0%, #2aabd2, 100%);
background-image: -moz-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); background-image: -moz-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%); background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #2aabd2; border-color: #28a4c9;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0); 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,
.btn-info.active { .btn-info.active {
background-color: #31b0d5; background-color: #2aabd2;
border-color: #2aabd2; border-color: #28a4c9;
} }
.thumbnail, .thumbnail,
@@ -148,7 +184,7 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); 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-gradient(linear, left 0%, left 100%, from(#ffffff), to(#f8f8f8));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, #f8f8f8, 100%); background-image: -webkit-linear-gradient(top, #ffffff, 0%, #f8f8f8, 100%);
background-image: -moz-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); 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 { .navbar-default .navbar-nav > .active > a {
background-color: #f8f8f8; 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, .navbar-brand,
@@ -179,7 +222,14 @@
} }
.navbar-inverse .navbar-nav > .active > a { .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, .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; margin-bottom: 10px;
} }
h1 small,
h2 small,
h3 small {
font-size: 65%;
}
h4, h4,
h5, h5,
h6 { h6 {
@@ -498,6 +504,12 @@ h6 {
margin-bottom: 10px; margin-bottom: 10px;
} }
h4 small,
h5 small,
h6 small {
font-size: 75%;
}
h1, h1,
.h1 { .h1 {
font-size: 36px; font-size: 36px;
@@ -528,23 +540,6 @@ h6,
font-size: 12px; 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 { .page-header {
padding-bottom: 9px; padding-bottom: 9px;
margin: 40px 0 20px; 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. * 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") } 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"> <div class="container">
<!-- Example row of columns --> <!-- Example row of columns -->
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-md-4">
<h2>Heading</h2> <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>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> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<h2>Heading</h2> <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>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> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<h2>Heading</h2> <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>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> <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> <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>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> <h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options"> <div class="bs-docs-dl-options">
@@ -297,7 +297,7 @@ bootstrap/
<div class="page-header"> <div class="page-header">
<h1 id="migration">Migrating from 2.x to 3.0</h1> <h1 id="migration">Migrating from 2.x to 3.0</h1>
</div> </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> <h2 id="migration-classes">Major class changes</h2>
@@ -423,6 +423,10 @@ bootstrap/
<td><code>ul.inline</code></td> <td><code>ul.inline</code></td>
<td><code>.list-inline</code></td> <td><code>.list-inline</code></td>
</tr> </tr>
<tr>
<td><code>.muted</code></td>
<td><code>.text-muted</code></td>
</tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.table-responsive --> </div><!-- /.table-responsive -->

14
javascript.html
View File

@@ -273,10 +273,11 @@ $('#myModal').on('show.bs.modal', function (e) {
<td>remote</td> <td>remote</td>
<td>path</td> <td>path</td>
<td>false</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 %} {% highlight html %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %} {% endhighlight %}
</td>
</tr> </tr>
</tbody> </tbody>
</table> </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> <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> <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>
<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> <h2 id="tooltips-usage">Usage</h2>
<p>Trigger the tooltip via JavaScript:</p> <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> <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> <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>
<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> <h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p> <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>selector</td>
<td>string</td> <td>string</td>
<td>false</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>
<tr> <tr>
<td>trigger</td> <td>trigger</td>

38
less/mixins.less
View File

@@ -69,7 +69,15 @@
} }
// CSS image replacement // 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 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() { .hide-text() {
font: ~"0/0" a; font: ~"0/0" a;
color: transparent; color: transparent;
@@ -77,6 +85,14 @@
background-color: transparent; background-color: transparent;
border: 0; 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); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-sm) { @media (min-width: @screen-sm-min) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@@ -567,17 +583,17 @@
// Generate the small column offsets // Generate the small column offsets
.make-sm-column-offset(@columns) { .make-sm-column-offset(@columns) {
@media (min-width: @screen-sm) { @media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-sm-column-push(@columns) { .make-sm-column-push(@columns) {
@media (min-width: @screen-sm) { @media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-sm-column-pull(@columns) { .make-sm-column-pull(@columns) {
@media (min-width: @screen-sm) { @media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
@@ -592,7 +608,7 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-md) { @media (min-width: @screen-md-min) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@@ -600,7 +616,7 @@
// Generate the large column offsets // Generate the large column offsets
.make-md-column-offset(@columns) { .make-md-column-offset(@columns) {
@media (min-width: @screen-md) { @media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
@@ -610,7 +626,7 @@
} }
} }
.make-md-column-pull(@columns) { .make-md-column-pull(@columns) {
@media (min-width: @screen-md) { @media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
@@ -625,7 +641,7 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@@ -633,17 +649,17 @@
// Generate the large column offsets // Generate the large column offsets
.make-lg-column-offset(@columns) { .make-lg-column-offset(@columns) {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-lg-column-push(@columns) { .make-lg-column-push(@columns) {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-lg-column-pull(@columns) { .make-lg-column-pull(@columns) {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns)); 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 { > li {
display: table-cell; display: table-cell;
width: 1%; width: 1%;

48
less/responsive-utilities.less
View File

@@ -41,17 +41,17 @@
.responsive-visibility(); .responsive-visibility();
} }
&.visible-sm { &.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(); .responsive-visibility();
} }
} }
&.visible-md { &.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(); .responsive-visibility();
} }
} }
&.visible-lg { &.visible-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@@ -63,16 +63,16 @@
.responsive-visibility(); .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(); .responsive-visibility();
} }
&.visible-md { &.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(); .responsive-visibility();
} }
} }
&.visible-lg { &.visible-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@@ -85,15 +85,15 @@
} }
} }
&.visible-sm { &.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(); .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(); .responsive-visibility();
} }
&.visible-lg { &.visible-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@@ -106,16 +106,16 @@
} }
} }
&.visible-sm { &.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(); .responsive-visibility();
} }
} }
&.visible-md { &.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(); .responsive-visibility();
} }
} }
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@@ -126,17 +126,17 @@
.responsive-invisibility(); .responsive-invisibility();
} }
&.hidden-sm { &.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(); .responsive-invisibility();
} }
} }
&.hidden-md { &.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(); .responsive-invisibility();
} }
} }
&.hidden-lg { &.hidden-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@@ -148,16 +148,16 @@
.responsive-invisibility(); .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(); .responsive-invisibility();
} }
&.hidden-md { &.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(); .responsive-invisibility();
} }
} }
&.hidden-lg { &.hidden-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@@ -170,15 +170,15 @@
} }
} }
&.hidden-sm { &.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(); .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(); .responsive-invisibility();
} }
&.hidden-lg { &.hidden-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@@ -191,16 +191,16 @@
} }
} }
&.hidden-sm { &.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(); .responsive-invisibility();
} }
} }
&.hidden-md { &.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(); .responsive-invisibility();
} }
} }
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }

2
less/tables.less
View File

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

25
less/theme.less
View File

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

26
less/type.less
View File

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

2
less/utilities.less
View File

@@ -30,7 +30,7 @@
visibility: hidden; visibility: hidden;
} }
.text-hide { .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-large: ceil(@font-size-base * 1.25); // ~18px
@font-size-small: ceil(@font-size-base * 0.85); // ~12px @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-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@@ -200,25 +207,33 @@
// -------------------------------------------------- // --------------------------------------------------
// Extra small screen / phone // Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px; @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 // Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px; @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 // Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px; @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 // Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px; @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 // So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1); @screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md - 1); @screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg - 1); @screen-md-max: (@screen-lg-min - 1);
// Grid system // Grid system

2
package.json
View File

@@ -26,7 +26,7 @@
, "grunt-contrib-uglify": "~0.2.2" , "grunt-contrib-uglify": "~0.2.2"
, "grunt-contrib-qunit": "~0.2.2" , "grunt-contrib-qunit": "~0.2.2"
, "grunt-contrib-watch": "~0.5.1" , "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-jekyll": "~0.3.8"
, "grunt-recess": "~0.3.3" , "grunt-recess": "~0.3.3"
, "browserstack-runner": "~0.0.11" , "browserstack-runner": "~0.0.11"