mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-15 11:59:39 +03:00
Code Activity

Merge branch 'master' into text-emphasis-variant

Browse Source
This commit is contained in:
Mark Otto
2014-01-18 14:11:36 -08:00
parent b886fd2f01 b1721f42cc
commit 689e75e4b1
55 changed files with 2407 additions and 1673 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gruntfile.js
+19 -19
View File
@@ -7,14 +7,14 @@ module.exports = function (grunt) {
grunt.util.linefeed = '\n';
RegExp.quote = function (string) {
return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
}
return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
};
var BsLessdocParser = require('./docs/grunt/bs-lessdoc-parser.js')
var fs = require('fs')
var generateGlyphiconsData = require('./docs/grunt/bs-glyphicons-data-generator.js')
var generateRawFilesJs = require('./docs/grunt/bs-raw-files-generator.js')
var path = require('path')
var BsLessdocParser = require('./docs/grunt/bs-lessdoc-parser.js');
var fs = require('fs');
var generateGlyphiconsData = require('./docs/grunt/bs-glyphicons-data-generator.js');
var generateRawFilesJs = require('./docs/grunt/bs-raw-files-generator.js');
var path = require('path');
// Project configuration.
grunt.initConfig({
@@ -131,11 +131,11 @@ module.exports = function (grunt) {
report: 'min'
},
src: [
'docs/assets/js/less.min.js',
'docs/assets/js/jszip.js',
'docs/assets/js/uglify.min.js',
'docs/assets/js/blob.js',
'docs/assets/js/filesaver.js',
'docs/assets/js/vendor/less.min.js',
'docs/assets/js/vendor/jszip.js',
'docs/assets/js/vendor/uglify.min.js',
'docs/assets/js/vendor/blob.js',
'docs/assets/js/vendor/filesaver.js',
'docs/assets/js/raw-files.js',
'docs/assets/js/customizer.js'
],
@@ -147,7 +147,7 @@ module.exports = function (grunt) {
report: 'min'
},
src: [
'docs/assets/js/holder.js',
'docs/assets/js/vendor/holder.js',
'docs/assets/js/application.js'
],
dest: 'docs/assets/js/docs.min.js'
@@ -325,8 +325,8 @@ module.exports = function (grunt) {
sed: {
versionNumber: {
pattern: (function () {
var old = grunt.option('oldver')
return old ? RegExp.quote(old) : old
var old = grunt.option('oldver');
return old ? RegExp.quote(old) : old;
})(),
replacement: grunt.option('newver'),
recursive: true
@@ -364,16 +364,16 @@ module.exports = function (grunt) {
testSubtasks.push('validate-html');
}
// Only run Sauce Labs tests if there's a Sauce access key
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined'
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined' &&
// Skip Sauce if running a different subset of the test suite
&& (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'sauce-js-unit')) {
(!process.env.TWBS_TEST || process.env.TWBS_TEST === 'sauce-js-unit')) {
testSubtasks.push('connect');
testSubtasks.push('saucelabs-qunit');
}
// Only run BrowserStack tests if there's a BrowserStack access key
if (typeof process.env.BROWSERSTACK_KEY !== 'undefined'
if (typeof process.env.BROWSERSTACK_KEY !== 'undefined' &&
// Skip BrowserStack if running a different subset of the test suite
&& (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'browserstack-js-unit')) {
(!process.env.TWBS_TEST || process.env.TWBS_TEST === 'browserstack-js-unit')) {
testSubtasks.push('browserstack_runner');
}
grunt.registerTask('test', testSubtasks);
_config.yml
+2
View File
@@ -14,6 +14,8 @@ baseurl: /
url: http://localhost:9001
encoding: UTF-8
exclude: ["vendor"]
# Custom vars
current_version: 3.0.3
repo: https://github.com/twbs/bootstrap
browserstack.json
+1
View File
@@ -2,6 +2,7 @@
"username": "--secure--",
"key": "--secure--",
"test_path": "js/tests/index.html",
"debug": true,
"browsers": [
{
"browser": "firefox",
dist/css/bootstrap-theme.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/css/bootstrap.css
Vendored
+8 -4
View File
@@ -251,7 +251,11 @@ table {
border: 1px solid #ddd !important;
}
}
*,
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
@@ -5060,9 +5064,9 @@ button.close {
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
dist/css/bootstrap.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/css/bootstrap.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/js/bootstrap.js
Vendored
+6 -5
View File
@@ -322,7 +322,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
Carousel.prototype.pause = function (e) {
e || (this.paused = true)
if (this.$element.find('.next, .prev').length && $.support.transition.end) {
if (this.$element.find('.next, .prev').length && $.support.transition) {
this.$element.trigger($.support.transition.end)
this.cycle(true)
}
@@ -587,6 +587,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data && options.toggle && option == 'show') option = !option
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
@@ -828,7 +829,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
this.escape()
this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
@@ -881,7 +882,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
this.$element
.removeClass('in')
.attr('aria-hidden', true)
.off('click.dismiss.modal')
.off('click.dismiss.bs.modal')
$.support.transition && this.$element.hasClass('fade') ?
this.$element
@@ -933,7 +934,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
this.$element.on('click.dismiss.modal', $.proxy(function (e) {
this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0])
@@ -1015,7 +1016,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
})
$(document)
.on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
}(jQuery);
dist/js/bootstrap.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/_includes/customizer-variables.html
+2 -2
View File
@@ -131,7 +131,7 @@
<div class="bs-customizer-input">
<label for="input-@line-height-computed">@line-height-computed</label>
<input id="input-@line-height-computed" type="text" value="floor((@font-size-base * @line-height-base))" data-var="@line-height-computed" class="form-control"/>
<p class="help-block">Computed &quot;line-height&quot; (<code>font-size</code> &amp;times; <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p>
<p class="help-block">Computed &quot;line-height&quot; (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p>
</div>
<div class="bs-customizer-input">
<label for="input-@headings-font-family">@headings-font-family</label>
@@ -1117,7 +1117,7 @@
<div class="bs-customizer-input">
<label for="input-@modal-content-fallback-border-color">@modal-content-fallback-border-color</label>
<input id="input-@modal-content-fallback-border-color" type="text" value="#999" data-var="@modal-content-fallback-border-color" class="form-control"/>
<p class="help-block">Modal content border color &lt;strong&gt;for IE8&lt;/strong&gt;</p>
<p class="help-block">Modal content border color <strong>for IE8</strong></p>
</div>
<div class="bs-customizer-input">
<label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label>
docs/_includes/footer.html
+4
View File
@@ -21,6 +21,10 @@
<li><a href="{{ site.expo }}">Expo</a></li>
<li>&middot;</li>
<li><a href="{{ site.blog }}">Blog</a></li>
<li>&middot;</li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li>&middot;</li>
<li><a href="{{ site.repo }}/releases">Releases</a></li>
</ul>
</div>
</footer>
docs/_includes/nav-css.html
+1 -1
View File
@@ -23,7 +23,7 @@
<li><a href="#grid-offsetting">Offsetting columns</a></li>
<li><a href="#grid-nesting">Nesting columns</a></li>
<li><a href="#grid-column-ordering">Column ordering</a></li>
<li><a href="#grid-less">LESS mixins and variables</a></li>
<li><a href="#grid-less">Less mixins and variables</a></li>
</ul>
</li>
<li>
docs/_includes/nav-customize.html
+2 -2
View File
@@ -1,11 +1,11 @@
<li>
<a href="#less">LESS components</a>
<a href="#less">Less components</a>
</li>
<li>
<a href="#plugins">jQuery plugins</a>
</li>
<li>
<a href="#less-variables">LESS variables</a>
<a href="#less-variables">Less variables</a>
<ul class="nav">
<li><a href="#variables-basics">Basics</a></li>
<li><a href="#variables-buttons">Buttons</a></li>
docs/_includes/nav-getting-started.html
-6
View File
@@ -28,12 +28,6 @@
</li>
<li>
<a href="#migration">Migrating from 2.x to 3.0</a>
<ul class="nav">
<li><a href="#migration-classes">Major class changes</a></li>
<li><a href="#migration-new">What's new</a></li>
<li><a href="#migration-dropped">What's removed</a></li>
<li><a href="#migration-notes">Additional notes</a></li>
</ul>
</li>
<li>
<a href="#support">Browser and device support</a>
docs/_includes/nav-migration.html
+12
View File
@@ -0,0 +1,12 @@
<li>
<a href="#classes">Major class changes</a>
</li>
<li>
<a href="#new">What's new</a>
</li>
<li>
<a href="#dropped">What's removed</a>
</li>
<li>
<a href="#notes">Additional notes</a>
</li>
docs/_layouts/default.html
+2
View File
@@ -40,6 +40,8 @@
{% include nav-customize.html %}
{% elsif page.slug == "about" %}
{% include nav-about.html %}
{% elsif page.slug == "migration" %}
{% include nav-migration.html %}
{% endif %}
</ul>
</div>
docs/assets/css/docs.css
+3
View File
@@ -618,6 +618,9 @@ body {
.bs-docs-section {
margin-bottom: 60px;
}
.bs-docs-section:last-child {
margin-bottom: 0;
}
h1[id] {
margin-top: 0;
docs/assets/css/pack.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/assets/js/customize.min.js
Vendored
+9 -9
View File
File diff suppressed because one or more lines are too long
docs/assets/js/docs.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/assets/js/raw-files.js
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/assets/js/blob.js → docs/assets/js/vendor/blob.js
Vendored
View File
docs/assets/js/filesaver.js → docs/assets/js/vendor/filesaver.js
Vendored
View File
docs/assets/js/holder.js → docs/assets/js/vendor/holder.js
Vendored
View File
docs/assets/js/jszip.js → docs/assets/js/vendor/jszip.js
Vendored
View File
docs/assets/js/less.min.js → docs/assets/js/vendor/less.min.js
Vendored
View File
docs/assets/js/uglify.min.js → docs/assets/js/vendor/uglify.min.js
Vendored
View File
docs/css.html
+2 -2
View File
@@ -48,8 +48,8 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
</ul>
<p>These styles can be found within <code>scaffolding.less</code>.</p>
<h3 id="overview-normalize">Normalize</h3>
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
<h3 id="overview-normalize">Normalize.css</h3>
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
<h3 id="overview-container">Containers</h3>
<p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>width</code> at various media query breakpoints to match our grid system.</p>
docs/dist/css/bootstrap-theme.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/examples/blog/index.html
+1 -1
View File
@@ -166,6 +166,6 @@
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/holder.js"></script>
<script src="../../assets/js/docs.min.js"></script>
</body>
</html>
docs/examples/carousel/index.html
+1 -1
View File
@@ -201,6 +201,6 @@
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/holder.js"></script>
<script src="../../assets/js/docs.min.js"></script>
</body>
</html>
docs/examples/cover/index.html
+1 -1
View File
@@ -70,6 +70,6 @@
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/holder.js"></script>
<script src="../../assets/js/docs.min.js"></script>
</body>
</html>
docs/examples/dashboard/index.html
+1 -1
View File
@@ -238,6 +238,6 @@
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/holder.js"></script>
<script src="../../assets/js/docs.min.js"></script>
</body>
</html>
docs/examples/theme/index.html
+1 -1
View File
@@ -379,6 +379,6 @@
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/holder.js"></script>
<script src="../../assets/js/docs.min.js"></script>
</body>
</html>
docs/getting-started.html
+57 -426
View File
@@ -87,7 +87,7 @@ bootstrap/
<p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
<h2 id="whats-included-source">Bootstrap source code</h2>
<p>The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source LESS, JavaScript, and documentation. More specifically, it includes the following and more:</p>
<p>The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:</p>
{% highlight bash %}
bootstrap/
├── less/
@@ -350,418 +350,10 @@ bootstrap/
<!-- Migration
================================================== -->
<div class="bs-docs-section">
<h1 id="migration" class="page-header">Migrating from 2.x to 3.0</h1>
<p class="lead">Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">what's new</a> in the v3.0 release announcement.</p>
<h2 id="migration-classes">Major class changes</h2>
<p>This table shows the style changes between v2.x and v3.0.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Bootstrap 2.x</th>
<th>Bootstrap 3.0</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.row-fluid</code></td>
<td><code>.row</code></td>
</tr>
<tr>
<td><code>.span*</code></td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td><code>.offset*</code></td>
<td><code>.col-md-offset-*</code></td>
</tr>
<tr>
<td><code>.brand</code></td>
<td><code>.navbar-brand</code></td>
</tr>
<tr>
<td><code>.nav-collapse</code></td>
<td><code>.navbar-collapse</code></td>
</tr>
<tr>
<td><code>.nav-toggle</code></td>
<td><code>.navbar-toggle</code></td>
</tr>
<tr>
<td><code>.btn-navbar</code></td>
<td><code>.navbar-btn</code></td>
</tr>
<tr>
<td><code>.hero-unit</code></td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td><code>.icon-*</code></td>
<td><code>.glyphicon .glyphicon-*</code></td>
</tr>
<tr>
<td><code>.btn</code></td>
<td><code>.btn .btn-default</code></td>
</tr>
<tr>
<td><code>.btn-mini</code></td>
<td><code>.btn-xs</code></td>
</tr>
<tr>
<td><code>.btn-small</code></td>
<td><code>.btn-sm</code></td>
</tr>
<tr>
<td><code>.btn-large</code></td>
<td><code>.btn-lg</code></td>
</tr>
<tr>
<td><code>.alert-error</code></td>
<td><code>.alert-danger</code></td>
</tr>
<tr>
<td><code>.visible-phone</code></td>
<td><code>.visible-xs</code></td>
</tr>
<tr>
<td><code>.visible-tablet</code></td>
<td><code>.visible-sm</code></td>
</tr>
<tr>
<td><code>.visible-desktop</code></td>
<td>Split into <code>.visible-md .visible-lg</code></td>
</tr>
<tr>
<td><code>.hidden-phone</code></td>
<td><code>.hidden-xs</code></td>
</tr>
<tr>
<td><code>.hidden-tablet</code></td>
<td><code>.hidden-sm</code></td>
</tr>
<tr>
<td><code>.hidden-desktop</code></td>
<td>Split into <code>.hidden-md .hidden-lg</code></td>
</tr>
<tr>
<td><code>.input-small</code></td>
<td><code>.input-sm</code></td>
</tr>
<tr>
<td><code>.input-large</code></td>
<td><code>.input-lg</code></td>
</tr>
<tr>
<td><code>.input-block-level</code></td>
<td><code>.form-control</code></td>
</tr>
<tr>
<td><code>.control-group</code></td>
<td><code>.form-group</code></td>
</tr>
<tr>
<td><code>.control-group.warning .control-group.error .control-group.success</code></td>
<td><code>.form-group.has-*</code></td>
</tr>
<tr>
<td><code>.checkbox.inline</code> <code>.radio.inline</code></td>
<td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
</tr>
<tr>
<td><code>.input-prepend</code> <code>.input-append</code></td>
<td><code>.input-group</code></td>
</tr>
<tr>
<td><code>.add-on</code></td>
<td><code>.input-group-addon</code></td>
</tr>
<tr>
<td><code>.img-polaroid</code></td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<td><code>ul.unstyled</code></td>
<td><code>.list-unstyled</code></td>
</tr>
<tr>
<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>
<tr>
<td><code>.label</code></td>
<td><code>.label .label-default</code></td>
</tr>
<tr>
<td><code>.label-important</code></td>
<td><code>.label-danger</code></td>
</tr>
<tr>
<td><code>.text-error</code></td>
<td><code>.text-danger</code></td>
</tr>
<tr>
<td><code>.table .error</code></td>
<td><code>.table .danger</code></td>
</tr>
<tr>
<td><code>.bar</code></td>
<td><code>.progress-bar</code></td>
</tr>
<tr>
<td><code>.bar-*</code></td>
<td><code>.progress-bar-*</code></td>
</tr>
<tr>
<td><code>.accordion</code></td>
<td><code>.panel-group</code></td>
</tr>
<tr>
<td><code>.accordion-group</code></td>
<td><code>.panel .panel-default</code></td>
</tr>
<tr>
<td><code>.accordion-heading</code></td>
<td><code>.panel-heading</code></td>
</tr>
<tr>
<td><code>.accordion-body</code></td>
<td><code>.panel-collapse</code></td>
</tr>
<tr>
<td><code>.accordion-inner</code></td>
<td><code>.panel-body</code></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h2 id="migration-new">What's new</h2>
<p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Panels</td>
<td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td>
</tr>
<tr>
<td>List groups</td>
<td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td>
</tr>
<tr>
<td>Glyphicons</td>
<td><code>.glyphicon</code></td>
</tr>
<tr>
<td>Jumbotron</td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td>Extra small grid (&lt;768px)</td>
<td><code>.col-xs-*</code></td>
</tr>
<tr>
<td>Small grid (&ge;768px)</td>
<td><code>.col-sm-*</code></td>
</tr>
<tr>
<td>Medium grid (&ge;992px)</td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td>Large grid (&ge;1200px)</td>
<td><code>.col-lg-*</code></td>
</tr>
<tr>
<td>Responsive utility classes (&ge;1200px)</td>
<td><code>.visible-lg</code> <code>.hidden-lg</code></td>
</tr>
<tr>
<td>Offsets</td>
<td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td>
</tr>
<tr>
<td>Push</td>
<td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td>
</tr>
<tr>
<td>Pull</td>
<td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td>
</tr>
<tr>
<td>Input groups</td>
<td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td>
</tr>
<tr>
<td>Form controls</td>
<td><code>.form-control</code> <code>.form-group</code></td>
</tr>
<tr>
<td>Button group sizes</td>
<td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td>
</tr>
<tr>
<td>Navbar text</td>
<td><code>.navbar-text</code></td>
</tr>
<tr>
<td>Navbar header</td>
<td><code>.navbar-header</code></td>
</tr>
<tr>
<td>Justified tabs / pills</td>
<td><code>.nav-justified</code></td>
</tr>
<tr>
<td>Responsive images</td>
<td><code>.img-responsive</code></td>
</tr>
<tr>
<td>Contextual table rows</td>
<td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td>
</tr>
<tr>
<td>Contextual panels</td>
<td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
</tr>
<tr>
<td>Modal</td>
<td><code>.modal-dialog</code> <code>.modal-content</code></td>
</tr>
<tr>
<td>Thumbnail image</td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<td>Well sizes</td>
<td><code>.well-sm</code> <code>.well-lg</code></td>
</tr>
<tr>
<td>Alert links</td>
<td><code>.alert-link</code></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h2 id="migration-dropped">What's removed</h2>
<p>The following elements have been dropped or changed in v3.0.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Removed from 2.x</th>
<th>3.0 Equivalent</th>
</tr>
</thead>
<tbody>
<tr>
<td>Form actions</td>
<td><code>.form-actions</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Search form</td>
<td><code>.form-search</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Form group with info</td>
<td><code>.control-group.info</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Block level from input</td>
<td><code>.input-block-level</code></td>
<td>No direct equivalent, but <a href="../css/#forms-controls">forms controls</a> are similar.</td>
</tr>
<tr>
<td>Fluid row</td>
<td><code>.row-fluid</code></td>
<td><code>.row</code> (no more fixed grid)</td>
</tr>
<tr>
<td>Controls wrapper</td>
<td><code>.controls</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Controls row</td>
<td><code>.controls-row</code></td>
<td><code>.row</code> or <code>.form-group</code></td>
</tr>
<tr>
<td>Navbar inner</td>
<td><code>.navbar-inner</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Navbar vertical dividers</td>
<td><code>.navbar .divider-vertical</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Dropdown submenu</td>
<td><code>.dropdown-submenu</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Tab alignments</td>
<td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Pill-based tabbable area</td>
<td><code>.pill-content</code></td>
<td><code>.tab-content</code></td>
</tr>
<tr>
<td>Pill-based tabbable area pane</td>
<td><code>.pill-pane</code></td>
<td><code>.tab-pane</code></td>
</tr>
<tr>
<td>Nav lists</td>
<td><code>.nav-list</code> <code>.nav-header</code></td>
<td>No direct equivalent, but <a href="../components/#list-group">list groups</a> and <a href="../javascript/#collapse"><code>.panel-group</code>s</a> are similar.</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h2 id="migration-notes">Additional notes</h2>
<p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p>
<ul>
<li>By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li>
<li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code>&lt;div class="col-*"&gt;&lt;/div&gt;</code> to control input widths.</li>
<li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li>
<li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li>
<li><code>.row</code> is now fluid.</li>
<li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code>&lt;img&gt;</code> size.</li>
<li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li>
<li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
<li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior.</li>
<li>The HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal</code> instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li>
<li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li>
</ul>
<p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p>
<!-- Cross link to new migration page -->
<div class="bs-callout bs-callout-info" id="migration">
<h4>Migrating from v2.x to v3.x</h4>
<p>Looking to migrate from an older version of Bootstrap to v3.x? Check out <a href="../migration">our migration guide</a>.</p>
</div>
@@ -773,14 +365,53 @@ bootstrap/
<p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
<h3 id="support-browsers">Supported browsers</h3>
<p>Specifically, we support the latest versions of the following:</p>
<ul>
<li>Chrome (Mac, Windows, iOS, and Android)</li>
<li>Safari (Mac and iOS only, as the Windows version is being abandoned)</li>
<li>Firefox (Mac, Windows)</li>
<li>Internet Explorer</li>
<li>Opera (Mac, Windows)</li>
</ul>
<p>Specifically, we support the <strong>latest versions</strong> of the following browsers and platforms:</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td></td>
<th>Chrome</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
</thead>
<tbody>
<tr>
<th>Android</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
<td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<th>iOS</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-muted">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
</tr>
<tr>
<th>Mac OS X</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
</tr>
<tr>
<th>Windows</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
</tr>
</tbody>
</table>
</div>
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>
<h3 id="support-ie8-ie9">Internet Explorer 8 and 9</h3>
@@ -926,7 +557,7 @@ if (isAndroid) {
*
* Reset individual elements or override regions to avoid conflicts due to
* global box model settings of Bootstrap. Two options, individual overrides and
* region resets, are available as plain CSS and uncompiled LESS formats.
* region resets, are available as plain CSS and uncompiled Less formats.
*/
/* Option 1A: Override a single element's box model via CSS */
@@ -936,7 +567,7 @@ if (isAndroid) {
box-sizing: content-box;
}
/* Option 1B: Override a single element's box model by using a Bootstrap LESS mixin */
/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
.box-sizing(content-box);
}
@@ -951,7 +582,7 @@ if (isAndroid) {
box-sizing: content-box;
}
/* Option 2B: Reset an entire region with a custom LESS mixin */
/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
&,
*,
@@ -1041,7 +672,7 @@ if (isAndroid) {
<h1 id="customizing" class="page-header">Customizing Bootstrap</h1>
<p class="lead">Bootstrap is best maintained when you treat it as a separate and independently-versioned dependency in your development environment. Doing this makes upgrading Bootstrap easier in the future.</p>
<p>Once you've downloaded and included Bootstrap's styles and scripts, you can customize its components. Just create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.</p>
<p>Once you've downloaded and included Bootstrap's styles and scripts, you can customize its components. Just create a new stylesheet (Less, if you like, or just plain CSS) to house your customizations.</p>
<div class="bs-callout bs-callout-info">
<h4>Compiled or minified?</h4>
@@ -1103,7 +734,7 @@ if (isAndroid) {
<div class="bs-callout bs-callout-info">
<h4>Alternate customization methods</h4>
<p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source <code>.less</code> files (making upgrades super difficult), and the second is mapping source LESS code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither of those options are documented here.</p>
<p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source <code>.less</code> files (making upgrades super difficult), and the second is mapping source Less code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither of those options are documented here.</p>
</div>
<h3>Removing potential bloat</h3>
docs/index.html
+1 -1
View File
@@ -25,7 +25,7 @@ title: Bootstrap
<div class="row">
<div class="col-sm-4">
<img src="assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
<h3>Preprocesors</h3>
<h3>Preprocessors</h3>
<p>In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, <a href="{{ page.base_url }}css#less">Less</a> and <a href="{{ page.base_url }}css#sass">Sass</a>.</p>
</div>
<div class="col-sm-4">
docs/javascript.html
+1 -1
View File
@@ -793,7 +793,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
docs/migration.html
+423
View File
@@ -0,0 +1,423 @@
---
layout: default
title: Migrating to v3.x
slug: migration
lead: "Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed."
---
<!-- Migration
================================================== -->
<div class="bs-docs-section">
<h1 class="page-header">Migrating from 2.x to 3.0</h1>
<p class="lead">Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">what's new</a> in the v3.0 release announcement.</p>
<h2 id="classes">Major class changes</h2>
<p>This table shows the style changes between v2.x and v3.0.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Bootstrap 2.x</th>
<th>Bootstrap 3.0</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.row-fluid</code></td>
<td><code>.row</code></td>
</tr>
<tr>
<td><code>.span*</code></td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td><code>.offset*</code></td>
<td><code>.col-md-offset-*</code></td>
</tr>
<tr>
<td><code>.brand</code></td>
<td><code>.navbar-brand</code></td>
</tr>
<tr>
<td><code>.nav-collapse</code></td>
<td><code>.navbar-collapse</code></td>
</tr>
<tr>
<td><code>.nav-toggle</code></td>
<td><code>.navbar-toggle</code></td>
</tr>
<tr>
<td><code>.btn-navbar</code></td>
<td><code>.navbar-btn</code></td>
</tr>
<tr>
<td><code>.hero-unit</code></td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td><code>.icon-*</code></td>
<td><code>.glyphicon .glyphicon-*</code></td>
</tr>
<tr>
<td><code>.btn</code></td>
<td><code>.btn .btn-default</code></td>
</tr>
<tr>
<td><code>.btn-mini</code></td>
<td><code>.btn-xs</code></td>
</tr>
<tr>
<td><code>.btn-small</code></td>
<td><code>.btn-sm</code></td>
</tr>
<tr>
<td><code>.btn-large</code></td>
<td><code>.btn-lg</code></td>
</tr>
<tr>
<td><code>.alert-error</code></td>
<td><code>.alert-danger</code></td>
</tr>
<tr>
<td><code>.visible-phone</code></td>
<td><code>.visible-xs</code></td>
</tr>
<tr>
<td><code>.visible-tablet</code></td>
<td><code>.visible-sm</code></td>
</tr>
<tr>
<td><code>.visible-desktop</code></td>
<td>Split into <code>.visible-md .visible-lg</code></td>
</tr>
<tr>
<td><code>.hidden-phone</code></td>
<td><code>.hidden-xs</code></td>
</tr>
<tr>
<td><code>.hidden-tablet</code></td>
<td><code>.hidden-sm</code></td>
</tr>
<tr>
<td><code>.hidden-desktop</code></td>
<td>Split into <code>.hidden-md .hidden-lg</code></td>
</tr>
<tr>
<td><code>.input-small</code></td>
<td><code>.input-sm</code></td>
</tr>
<tr>
<td><code>.input-large</code></td>
<td><code>.input-lg</code></td>
</tr>
<tr>
<td><code>.input-block-level</code></td>
<td><code>.form-control</code></td>
</tr>
<tr>
<td><code>.control-group</code></td>
<td><code>.form-group</code></td>
</tr>
<tr>
<td><code>.control-group.warning .control-group.error .control-group.success</code></td>
<td><code>.form-group.has-*</code></td>
</tr>
<tr>
<td><code>.checkbox.inline</code> <code>.radio.inline</code></td>
<td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
</tr>
<tr>
<td><code>.input-prepend</code> <code>.input-append</code></td>
<td><code>.input-group</code></td>
</tr>
<tr>
<td><code>.add-on</code></td>
<td><code>.input-group-addon</code></td>
</tr>
<tr>
<td><code>.img-polaroid</code></td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<td><code>ul.unstyled</code></td>
<td><code>.list-unstyled</code></td>
</tr>
<tr>
<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>
<tr>
<td><code>.label</code></td>
<td><code>.label .label-default</code></td>
</tr>
<tr>
<td><code>.label-important</code></td>
<td><code>.label-danger</code></td>
</tr>
<tr>
<td><code>.text-error</code></td>
<td><code>.text-danger</code></td>
</tr>
<tr>
<td><code>.table .error</code></td>
<td><code>.table .danger</code></td>
</tr>
<tr>
<td><code>.bar</code></td>
<td><code>.progress-bar</code></td>
</tr>
<tr>
<td><code>.bar-*</code></td>
<td><code>.progress-bar-*</code></td>
</tr>
<tr>
<td><code>.accordion</code></td>
<td><code>.panel-group</code></td>
</tr>
<tr>
<td><code>.accordion-group</code></td>
<td><code>.panel .panel-default</code></td>
</tr>
<tr>
<td><code>.accordion-heading</code></td>
<td><code>.panel-heading</code></td>
</tr>
<tr>
<td><code>.accordion-body</code></td>
<td><code>.panel-collapse</code></td>
</tr>
<tr>
<td><code>.accordion-inner</code></td>
<td><code>.panel-body</code></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h2 id="new">What's new</h2>
<p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Panels</td>
<td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td>
</tr>
<tr>
<td>List groups</td>
<td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td>
</tr>
<tr>
<td>Glyphicons</td>
<td><code>.glyphicon</code></td>
</tr>
<tr>
<td>Jumbotron</td>
<td><code>.jumbotron</code></td>
</tr>
<tr>
<td>Extra small grid (&lt;768px)</td>
<td><code>.col-xs-*</code></td>
</tr>
<tr>
<td>Small grid (&ge;768px)</td>
<td><code>.col-sm-*</code></td>
</tr>
<tr>
<td>Medium grid (&ge;992px)</td>
<td><code>.col-md-*</code></td>
</tr>
<tr>
<td>Large grid (&ge;1200px)</td>
<td><code>.col-lg-*</code></td>
</tr>
<tr>
<td>Responsive utility classes (&ge;1200px)</td>
<td><code>.visible-lg</code> <code>.hidden-lg</code></td>
</tr>
<tr>
<td>Offsets</td>
<td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td>
</tr>
<tr>
<td>Push</td>
<td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td>
</tr>
<tr>
<td>Pull</td>
<td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td>
</tr>
<tr>
<td>Input groups</td>
<td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td>
</tr>
<tr>
<td>Form controls</td>
<td><code>.form-control</code> <code>.form-group</code></td>
</tr>
<tr>
<td>Button group sizes</td>
<td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td>
</tr>
<tr>
<td>Navbar text</td>
<td><code>.navbar-text</code></td>
</tr>
<tr>
<td>Navbar header</td>
<td><code>.navbar-header</code></td>
</tr>
<tr>
<td>Justified tabs / pills</td>
<td><code>.nav-justified</code></td>
</tr>
<tr>
<td>Responsive images</td>
<td><code>.img-responsive</code></td>
</tr>
<tr>
<td>Contextual table rows</td>
<td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td>
</tr>
<tr>
<td>Contextual panels</td>
<td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
</tr>
<tr>
<td>Modal</td>
<td><code>.modal-dialog</code> <code>.modal-content</code></td>
</tr>
<tr>
<td>Thumbnail image</td>
<td><code>.img-thumbnail</code></td>
</tr>
<tr>
<td>Well sizes</td>
<td><code>.well-sm</code> <code>.well-lg</code></td>
</tr>
<tr>
<td>Alert links</td>
<td><code>.alert-link</code></td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h2 id="dropped">What's removed</h2>
<p>The following elements have been dropped or changed in v3.0.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Element</th>
<th>Removed from 2.x</th>
<th>3.0 Equivalent</th>
</tr>
</thead>
<tbody>
<tr>
<td>Form actions</td>
<td><code>.form-actions</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Search form</td>
<td><code>.form-search</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Form group with info</td>
<td><code>.control-group.info</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Block level from input</td>
<td><code>.input-block-level</code></td>
<td>No direct equivalent, but <a href="../css/#forms-controls">forms controls</a> are similar.</td>
</tr>
<tr>
<td>Fluid row</td>
<td><code>.row-fluid</code></td>
<td><code>.row</code> (no more fixed grid)</td>
</tr>
<tr>
<td>Controls wrapper</td>
<td><code>.controls</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Controls row</td>
<td><code>.controls-row</code></td>
<td><code>.row</code> or <code>.form-group</code></td>
</tr>
<tr>
<td>Navbar inner</td>
<td><code>.navbar-inner</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Navbar vertical dividers</td>
<td><code>.navbar .divider-vertical</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Dropdown submenu</td>
<td><code>.dropdown-submenu</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Tab alignments</td>
<td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<td>Pill-based tabbable area</td>
<td><code>.pill-content</code></td>
<td><code>.tab-content</code></td>
</tr>
<tr>
<td>Pill-based tabbable area pane</td>
<td><code>.pill-pane</code></td>
<td><code>.tab-pane</code></td>
</tr>
<tr>
<td>Nav lists</td>
<td><code>.nav-list</code> <code>.nav-header</code></td>
<td>No direct equivalent, but <a href="../components/#list-group">list groups</a> and <a href="../javascript/#collapse"><code>.panel-group</code>s</a> are similar.</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<h2 id="notes">Additional notes</h2>
<p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p>
<ul>
<li>By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li>
<li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code>&lt;div class="col-*"&gt;&lt;/div&gt;</code> to control input widths.</li>
<li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li>
<li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li>
<li><code>.row</code> is now fluid.</li>
<li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code>&lt;img&gt;</code> size.</li>
<li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li>
<li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
<li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior.</li>
<li>The HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal</code> instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li>
<li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li>
</ul>
<p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p>
</div>
js/carousel.js
+1 -1
View File
@@ -68,7 +68,7 @@
Carousel.prototype.pause = function (e) {
e || (this.paused = true)
if (this.$element.find('.next, .prev').length && $.support.transition.end) {
if (this.$element.find('.next, .prev').length && $.support.transition) {
this.$element.trigger($.support.transition.end)
this.cycle(true)
}
js/collapse.js
+1
View File
@@ -127,6 +127,7 @@
var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data && options.toggle && option == 'show') option = !option
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
js/modal.js
+4 -4
View File
@@ -50,7 +50,7 @@
this.escape()
this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
@@ -103,7 +103,7 @@
this.$element
.removeClass('in')
.attr('aria-hidden', true)
.off('click.dismiss.modal')
.off('click.dismiss.bs.modal')
$.support.transition && this.$element.hasClass('fade') ?
this.$element
@@ -155,7 +155,7 @@
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
this.$element.on('click.dismiss.modal', $.proxy(function (e) {
this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus.call(this.$element[0])
@@ -237,7 +237,7 @@
})
$(document)
.on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
}(jQuery);
js/tests/index.html
+2 -5
View File
@@ -17,7 +17,7 @@
</script>
<!-- plugin sources -->
<script src="../../js/transition.js"></script>
<script>$.support.transition = false</script>
<script src="../../js/alert.js"></script>
<script src="../../js/button.js"></script>
<script src="../../js/carousel.js"></script>
@@ -47,10 +47,7 @@
</head>
<body>
<div>
<h1 id="qunit-header">Bootstrap Plugin Test Suite</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</div>
</body>
js/tests/unit/modal.js
+3 -4
View File
@@ -157,16 +157,15 @@ $(function () {
test('should trigger hide event once when clicking outside of modal-content', function () {
stop()
$.support.transition = false
var div = $('<div id="modal-test"><div class="contents"></div></div>')
var triggered
var div = $('<div id="modal-test"><div class="contents"></div></div>')
div
.bind('shown.bs.modal', function () {
triggered = 0
$('#modal-test').click()
})
.one('hidden.bs.modal', function () {
div.modal('show')
})
.bind('hide.bs.modal', function () {
triggered += 1
ok(triggered === 1, 'modal hide triggered once')
js/tests/unit/tab.js
+6 -3
View File
@@ -73,11 +73,14 @@ $(function () {
'</ul>'
$(dropHTML).find('ul>li:first a').tab('show').end()
.find('ul>li:last a').on('show', function (event) {
.find('ul>li:last a')
.on('show.bs.tab', function (event) {
equal(event.relatedTarget.hash, '#1-1')
}).on('shown', function (event) {
})
.on('show.bs.tab', function (event) {
equal(event.relatedTarget.hash, '#1-1')
}).tab('show')
})
.tab('show')
})
})
js/tests/unit/tooltip.js
+6 -11
View File
@@ -332,7 +332,7 @@ $(function () {
var tooltip = container.find('.tooltip')
start()
ok(tooltip.offset().top + tooltip.outerHeight() <= tooltiped.offset().top)
ok(Math.round(tooltip.offset().top + tooltip.outerHeight()) <= Math.round(tooltiped.offset().top))
container.remove()
}, 100)
})
@@ -347,7 +347,11 @@ $(function () {
.tooltip('show'),
tooltip = container.find('.tooltip')
ok( Math.round(target.offset().top + (target[0].offsetHeight / 2) - (tooltip[0].offsetHeight / 2)) === Math.round(tooltip.offset().top) )
// this is some dumb hack shit because sub pixels in firefox
var top = Math.round(target.offset().top + (target[0].offsetHeight / 2) - (tooltip[0].offsetHeight / 2))
var top2 = Math.round(tooltip.offset().top)
var topDiff = top - top2
ok(topDiff <= 1 && topDiff >= -1)
target.tooltip('hide')
})
@@ -402,7 +406,6 @@ $(function () {
.tooltip({placement: 'auto'})
.tooltip('show')
ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned bottom')
topTooltip.tooltip('hide')
@@ -415,14 +418,6 @@ $(function () {
ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
rightTooltip.tooltip('hide')
var bottomTooltip = $('<div style="display: inline-block; position: absolute; bottom: 0;" rel="tooltip" title="Bottom tooltip">Bottom Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.tooltip({placement: 'auto bottom'})
.tooltip('show')
ok($('.tooltip').is('.top'), 'bottom positioned tooltip is dynamically positioned top')
bottomTooltip.tooltip('hide')
var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.tooltip({placement: 'auto left'})
js/tests/unit/transition.js
-13
View File
@@ -1,13 +0,0 @@
$(function () {
module('transition')
test('should be defined on jquery support object', function () {
ok($.support.transition !== undefined, 'transition object is defined')
})
test('should provide an end object', function () {
ok($.support.transition ? $.support.transition.end : true, 'end string is defined')
})
})
js/tests/vendor/jquery.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
js/tests/vendor/qunit.css
Vendored
+46 -27
View File
@@ -1,11 +1,12 @@
/**
* QUnit 1.0.0 - A JavaScript Unit Testing Framework
/*!
* QUnit 1.13.0
* http://qunitjs.com/
*
* http://docs.jquery.com/QUnit
* Copyright 2013 jQuery Foundation and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Copyright (c) 2011 John Resig, Jörn Zaefferer
* Dual licensed under the MIT (MIT-LICENSE.txt)
* or GPL (GPL-LICENSE.txt) licenses.
* Date: 2014-01-04T17:09Z
*/
/** Font Family and Sizes */
@@ -20,7 +21,7 @@
/** Resets */
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
margin: 0;
padding: 0;
}
@@ -38,10 +39,10 @@
line-height: 1em;
font-weight: normal;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
#qunit-header a {
@@ -54,6 +55,11 @@
color: #fff;
}
#qunit-testrunner-toolbar label {
display: inline-block;
padding: 0 .5em 0 .1em;
}
#qunit-banner {
height: 5px;
}
@@ -62,6 +68,7 @@
padding: 0.5em 0 0.5em 2em;
color: #5E740B;
background-color: #eee;
overflow: hidden;
}
#qunit-userAgent {
@@ -71,6 +78,9 @@
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
#qunit-modulefilter-container {
float: right;
}
/** Tests: Pass/Fail */
@@ -102,19 +112,24 @@
color: #000;
}
#qunit-tests ol {
#qunit-tests li .runtime {
float: right;
font-size: smaller;
}
.qunit-assert-list {
margin-top: 0.5em;
padding: 0.5em;
background-color: #fff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
box-shadow: inset 0px 2px 13px #999;
-moz-box-shadow: inset 0px 2px 13px #999;
-webkit-box-shadow: inset 0px 2px 13px #999;
.qunit-collapsed {
display: none;
}
#qunit-tests table {
@@ -157,8 +172,7 @@
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li {
margin: 0.5em;
padding: 0.4em 0.5em 0.4em 0.5em;
padding: 5px;
background-color: #fff;
border-bottom: none;
list-style-position: inside;
@@ -167,9 +181,9 @@
/*** Passing Styles */
#qunit-tests li li.pass {
color: #5E740B;
color: #3c510c;
background-color: #fff;
border-left: 26px solid #C6E746;
border-left: 10px solid #C6E746;
}
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
@@ -185,15 +199,15 @@
#qunit-tests li li.fail {
color: #710909;
background-color: #fff;
border-left: 26px solid #EE5757;
border-left: 10px solid #EE5757;
white-space: pre;
}
#qunit-tests > li:last-child {
border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
@@ -216,6 +230,9 @@
border-bottom: 1px solid white;
}
#qunit-testresult .module-name {
font-weight: bold;
}
/** Fixture */
@@ -223,4 +240,6 @@
position: absolute;
top: -10000px;
left: -10000px;
width: 1000px;
height: 1000px;
}
js/tests/vendor/qunit.js
Vendored
+1743 -1085
View File
File diff suppressed because it is too large Load Diff
less/scaffolding.less
+3 -1
View File
@@ -5,7 +5,9 @@
// Reset the box-sizing
*,
* {
.box-sizing(border-box);
}
*:before,
*:after {
.box-sizing(border-box);
less/variables.less
+2 -2
View File
@@ -58,7 +58,7 @@
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` &times; `line-height`) for use with `margin`, `padding`, etc.
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
//** By default, this inherits from the `<body>`.
@@ -548,7 +548,7 @@
@modal-content-bg: #fff;
//** Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
//** Modal content border color <strong>for IE8</strong>
//** Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
//** Modal backdrop background color
package.json
+2 -2
View File
@@ -25,7 +25,7 @@
}
],
"devDependencies": {
"browserstack-runner": "~0.0.13",
"browserstack-runner": "~0.0.14",
"btoa": "~1.1.1",
"grunt": "~0.4.2",
"grunt-banner": "~0.2.0",
@@ -38,7 +38,7 @@
"grunt-contrib-jade": "~0.9.1",
"grunt-contrib-jshint": "~0.8.0",
"grunt-contrib-less": "~0.9.0",
"grunt-contrib-qunit": "~0.3.0",
"grunt-contrib-qunit": "~0.4.0",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-watch": "~0.5.3",
"grunt-csscomb": "~2.0.1",
test-infra/sauce_browsers.yml
+16 -20
View File
@@ -3,35 +3,31 @@
{
browserName: "safari",
platform: "OS X 10.8"
platform: "OS X 10.9"
},
# { # Safari 7 (which requires Mavericks) is not currently supported by Sauce Labs
# browserName: "safari",
# FIXME: keeps timing out frequently for unknown reasons
# {
# browserName: "chrome",
# platform: "OS X 10.9"
# },
{
browserName: "chrome",
browserName: "firefox",
platform: "OS X 10.9"
},
# { # FIXME: currently fails 1 tooltip test
# browserName: "firefox",
# platform: "OS X 10.9"
# },
# Mac Opera not currently supported by Sauce Labs
# { # FIXME: currently fails 1 tooltip test
# browserName: "internet explorer",
# version: "11",
# platform: "Windows 8.1"
# },
# {
# browserName: "internet explorer",
# version: "10",
# platform: "Windows 8"
# },
{
browserName: "internet explorer",
version: "11",
platform: "Windows 8.1"
},
{
browserName: "internet explorer",
version: "10",
platform: "Windows 8"
},
# {
# browserName: "internet explorer",
# version: "9",