mirror of https://github.com/twbs/bootstrap.git
Merge branch 'master' into bg-variant
This commit is contained in:
Mark Otto
commit
cd1bea0616
38
Gruntfile.js
38
Gruntfile.js
|
|
@ -7,14 +7,14 @@ module.exports = function (grunt) {
|
||||||
grunt.util.linefeed = '\n';
|
grunt.util.linefeed = '\n';
|
||||||
|
|
||||||
RegExp.quote = function (string) {
|
RegExp.quote = function (string) {
|
||||||
return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
|
return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
|
||||||
}
|
};
|
||||||
|
|
||||||
var BsLessdocParser = require('./docs/grunt/bs-lessdoc-parser.js')
|
var BsLessdocParser = require('./docs/grunt/bs-lessdoc-parser.js');
|
||||||
var fs = require('fs')
|
var fs = require('fs');
|
||||||
var generateGlyphiconsData = require('./docs/grunt/bs-glyphicons-data-generator.js')
|
var generateGlyphiconsData = require('./docs/grunt/bs-glyphicons-data-generator.js');
|
||||||
var generateRawFilesJs = require('./docs/grunt/bs-raw-files-generator.js')
|
var generateRawFilesJs = require('./docs/grunt/bs-raw-files-generator.js');
|
||||||
var path = require('path')
|
var path = require('path');
|
||||||
|
|
||||||
// Project configuration.
|
// Project configuration.
|
||||||
grunt.initConfig({
|
grunt.initConfig({
|
||||||
|
|
@ -131,11 +131,11 @@ module.exports = function (grunt) {
|
||||||
report: 'min'
|
report: 'min'
|
||||||
},
|
},
|
||||||
src: [
|
src: [
|
||||||
'docs/assets/js/less.min.js',
|
'docs/assets/js/vendor/less.min.js',
|
||||||
'docs/assets/js/jszip.js',
|
'docs/assets/js/vendor/jszip.js',
|
||||||
'docs/assets/js/uglify.min.js',
|
'docs/assets/js/vendor/uglify.min.js',
|
||||||
'docs/assets/js/blob.js',
|
'docs/assets/js/vendor/blob.js',
|
||||||
'docs/assets/js/filesaver.js',
|
'docs/assets/js/vendor/filesaver.js',
|
||||||
'docs/assets/js/raw-files.js',
|
'docs/assets/js/raw-files.js',
|
||||||
'docs/assets/js/customizer.js'
|
'docs/assets/js/customizer.js'
|
||||||
],
|
],
|
||||||
|
|
@ -147,7 +147,7 @@ module.exports = function (grunt) {
|
||||||
report: 'min'
|
report: 'min'
|
||||||
},
|
},
|
||||||
src: [
|
src: [
|
||||||
'docs/assets/js/holder.js',
|
'docs/assets/js/vendor/holder.js',
|
||||||
'docs/assets/js/application.js'
|
'docs/assets/js/application.js'
|
||||||
],
|
],
|
||||||
dest: 'docs/assets/js/docs.min.js'
|
dest: 'docs/assets/js/docs.min.js'
|
||||||
|
|
@ -325,8 +325,8 @@ module.exports = function (grunt) {
|
||||||
sed: {
|
sed: {
|
||||||
versionNumber: {
|
versionNumber: {
|
||||||
pattern: (function () {
|
pattern: (function () {
|
||||||
var old = grunt.option('oldver')
|
var old = grunt.option('oldver');
|
||||||
return old ? RegExp.quote(old) : old
|
return old ? RegExp.quote(old) : old;
|
||||||
})(),
|
})(),
|
||||||
replacement: grunt.option('newver'),
|
replacement: grunt.option('newver'),
|
||||||
recursive: true
|
recursive: true
|
||||||
|
|
@ -364,16 +364,16 @@ module.exports = function (grunt) {
|
||||||
testSubtasks.push('validate-html');
|
testSubtasks.push('validate-html');
|
||||||
}
|
}
|
||||||
// Only run Sauce Labs tests if there's a Sauce access key
|
// 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
|
// 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('connect');
|
||||||
testSubtasks.push('saucelabs-qunit');
|
testSubtasks.push('saucelabs-qunit');
|
||||||
}
|
}
|
||||||
// Only run BrowserStack tests if there's a BrowserStack access key
|
// 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
|
// 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');
|
testSubtasks.push('browserstack_runner');
|
||||||
}
|
}
|
||||||
grunt.registerTask('test', testSubtasks);
|
grunt.registerTask('test', testSubtasks);
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,8 @@ baseurl: /
|
||||||
url: http://localhost:9001
|
url: http://localhost:9001
|
||||||
encoding: UTF-8
|
encoding: UTF-8
|
||||||
|
|
||||||
|
exclude: ["vendor"]
|
||||||
|
|
||||||
# Custom vars
|
# Custom vars
|
||||||
current_version: 3.0.3
|
current_version: 3.0.3
|
||||||
repo: https://github.com/twbs/bootstrap
|
repo: https://github.com/twbs/bootstrap
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
"username": "--secure--",
|
"username": "--secure--",
|
||||||
"key": "--secure--",
|
"key": "--secure--",
|
||||||
"test_path": "js/tests/index.html",
|
"test_path": "js/tests/index.html",
|
||||||
|
"debug": true,
|
||||||
"browsers": [
|
"browsers": [
|
||||||
{
|
{
|
||||||
"browser": "firefox",
|
"browser": "firefox",
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -251,7 +251,11 @@ table {
|
||||||
border: 1px solid #ddd !important;
|
border: 1px solid #ddd !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
*,
|
* {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
*:before,
|
*:before,
|
||||||
*:after {
|
*:after {
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
|
|
@ -5060,9 +5064,9 @@ button.close {
|
||||||
-moz-transition: -moz-transform .3s ease-out;
|
-moz-transition: -moz-transform .3s ease-out;
|
||||||
-o-transition: -o-transform .3s ease-out;
|
-o-transition: -o-transform .3s ease-out;
|
||||||
transition: transform .3s ease-out;
|
transition: transform .3s ease-out;
|
||||||
-webkit-transform: translate(0, -25%);
|
-webkit-transform: translate(0, -25%);
|
||||||
-ms-transform: translate(0, -25%);
|
-ms-transform: translate(0, -25%);
|
||||||
transform: translate(0, -25%);
|
transform: translate(0, -25%);
|
||||||
}
|
}
|
||||||
.modal.in .modal-dialog {
|
.modal.in .modal-dialog {
|
||||||
-webkit-transform: translate(0, 0);
|
-webkit-transform: translate(0, 0);
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -322,7 +322,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
|
||||||
Carousel.prototype.pause = function (e) {
|
Carousel.prototype.pause = function (e) {
|
||||||
e || (this.paused = true)
|
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.$element.trigger($.support.transition.end)
|
||||||
this.cycle(true)
|
this.cycle(true)
|
||||||
}
|
}
|
||||||
|
|
@ -587,6 +587,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
|
||||||
var data = $this.data('bs.collapse')
|
var data = $this.data('bs.collapse')
|
||||||
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
|
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 (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
|
||||||
if (typeof option == 'string') data[option]()
|
if (typeof option == 'string') data[option]()
|
||||||
})
|
})
|
||||||
|
|
@ -828,7 +829,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
|
||||||
|
|
||||||
this.escape()
|
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 () {
|
this.backdrop(function () {
|
||||||
var transition = $.support.transition && that.$element.hasClass('fade')
|
var transition = $.support.transition && that.$element.hasClass('fade')
|
||||||
|
|
@ -881,7 +882,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
|
||||||
this.$element
|
this.$element
|
||||||
.removeClass('in')
|
.removeClass('in')
|
||||||
.attr('aria-hidden', true)
|
.attr('aria-hidden', true)
|
||||||
.off('click.dismiss.modal')
|
.off('click.dismiss.bs.modal')
|
||||||
|
|
||||||
$.support.transition && this.$element.hasClass('fade') ?
|
$.support.transition && this.$element.hasClass('fade') ?
|
||||||
this.$element
|
this.$element
|
||||||
|
|
@ -933,7 +934,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
|
||||||
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
|
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
|
||||||
.appendTo(document.body)
|
.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
|
if (e.target !== e.currentTarget) return
|
||||||
this.options.backdrop == 'static'
|
this.options.backdrop == 'static'
|
||||||
? this.$element[0].focus.call(this.$element[0])
|
? this.$element[0].focus.call(this.$element[0])
|
||||||
|
|
@ -1015,7 +1016,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap requires jQuery'
|
||||||
})
|
})
|
||||||
|
|
||||||
$(document)
|
$(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') })
|
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
|
||||||
|
|
||||||
}(jQuery);
|
}(jQuery);
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -131,7 +131,7 @@
|
||||||
<div class="bs-customizer-input">
|
<div class="bs-customizer-input">
|
||||||
<label for="input-@line-height-computed">@line-height-computed</label>
|
<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"/>
|
<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 "line-height" (<code>font-size</code> &times; <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p>
|
<p class="help-block">Computed "line-height" (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="bs-customizer-input">
|
<div class="bs-customizer-input">
|
||||||
<label for="input-@headings-font-family">@headings-font-family</label>
|
<label for="input-@headings-font-family">@headings-font-family</label>
|
||||||
|
|
@ -1117,7 +1117,7 @@
|
||||||
<div class="bs-customizer-input">
|
<div class="bs-customizer-input">
|
||||||
<label for="input-@modal-content-fallback-border-color">@modal-content-fallback-border-color</label>
|
<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"/>
|
<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 <strong>for IE8</strong></p>
|
<p class="help-block">Modal content border color <strong>for IE8</strong></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="bs-customizer-input">
|
<div class="bs-customizer-input">
|
||||||
<label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label>
|
<label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label>
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,10 @@
|
||||||
<li><a href="{{ site.expo }}">Expo</a></li>
|
<li><a href="{{ site.expo }}">Expo</a></li>
|
||||||
<li>·</li>
|
<li>·</li>
|
||||||
<li><a href="{{ site.blog }}">Blog</a></li>
|
<li><a href="{{ site.blog }}">Blog</a></li>
|
||||||
|
<li>·</li>
|
||||||
|
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
|
||||||
|
<li>·</li>
|
||||||
|
<li><a href="{{ site.repo }}/releases">Releases</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
<li><a href="#grid-offsetting">Offsetting columns</a></li>
|
<li><a href="#grid-offsetting">Offsetting columns</a></li>
|
||||||
<li><a href="#grid-nesting">Nesting 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-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>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<li>
|
<li>
|
||||||
<a href="#less">LESS components</a>
|
<a href="#less">Less components</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#plugins">jQuery plugins</a>
|
<a href="#plugins">jQuery plugins</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#less-variables">LESS variables</a>
|
<a href="#less-variables">Less variables</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li><a href="#variables-basics">Basics</a></li>
|
<li><a href="#variables-basics">Basics</a></li>
|
||||||
<li><a href="#variables-buttons">Buttons</a></li>
|
<li><a href="#variables-buttons">Buttons</a></li>
|
||||||
|
|
|
||||||
|
|
@ -28,12 +28,6 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#migration">Migrating from 2.x to 3.0</a>
|
<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>
|
||||||
<li>
|
<li>
|
||||||
<a href="#support">Browser and device support</a>
|
<a href="#support">Browser and device support</a>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -40,6 +40,8 @@
|
||||||
{% include nav-customize.html %}
|
{% include nav-customize.html %}
|
||||||
{% elsif page.slug == "about" %}
|
{% elsif page.slug == "about" %}
|
||||||
{% include nav-about.html %}
|
{% include nav-about.html %}
|
||||||
|
{% elsif page.slug == "migration" %}
|
||||||
|
{% include nav-migration.html %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -618,6 +618,9 @@ body {
|
||||||
.bs-docs-section {
|
.bs-docs-section {
|
||||||
margin-bottom: 60px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
.bs-docs-section:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
h1[id] {
|
h1[id] {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -48,8 +48,8 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
||||||
</ul>
|
</ul>
|
||||||
<p>These styles can be found within <code>scaffolding.less</code>.</p>
|
<p>These styles can be found within <code>scaffolding.less</code>.</p>
|
||||||
|
|
||||||
<h3 id="overview-normalize">Normalize</h3>
|
<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</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>
|
<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>
|
<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>
|
<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>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -166,6 +166,6 @@
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- 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="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||||
<script src="../../dist/js/bootstrap.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -201,6 +201,6 @@
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- 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="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||||
<script src="../../dist/js/bootstrap.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -70,6 +70,6 @@
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- 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="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||||
<script src="../../dist/js/bootstrap.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -238,6 +238,6 @@
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- 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="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||||
<script src="../../dist/js/bootstrap.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -379,6 +379,6 @@
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- 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="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||||
<script src="../../dist/js/bootstrap.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
<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>
|
<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 %}
|
{% highlight bash %}
|
||||||
bootstrap/
|
bootstrap/
|
||||||
├── less/
|
├── less/
|
||||||
|
|
@ -350,418 +350,10 @@ bootstrap/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Migration
|
<!-- Cross link to new migration page -->
|
||||||
================================================== -->
|
<div class="bs-callout bs-callout-info" id="migration">
|
||||||
<div class="bs-docs-section">
|
<h4>Migrating from v2.x to v3.x</h4>
|
||||||
<h1 id="migration" class="page-header">Migrating from 2.x to 3.0</h1>
|
<p>Looking to migrate from an older version of Bootstrap to v3.x? Check out <a href="../migration">our migration guide</a>.</p>
|
||||||
<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 (<768px)</td>
|
|
||||||
<td><code>.col-xs-*</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Small grid (≥768px)</td>
|
|
||||||
<td><code>.col-sm-*</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Medium grid (≥992px)</td>
|
|
||||||
<td><code>.col-md-*</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Large grid (≥1200px)</td>
|
|
||||||
<td><code>.col-lg-*</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Responsive utility classes (≥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><div class="col-*"></div></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><img></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>
|
</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>
|
<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>
|
<h3 id="support-browsers">Supported browsers</h3>
|
||||||
<p>Specifically, we support the latest versions of the following:</p>
|
<p>Specifically, we support the <strong>latest versions</strong> of the following browsers and platforms:</p>
|
||||||
<ul>
|
<div class="table-responsive">
|
||||||
<li>Chrome (Mac, Windows, iOS, and Android)</li>
|
<table class="table table-bordered table-striped">
|
||||||
<li>Safari (Mac and iOS only, as the Windows version is being abandoned)</li>
|
<thead>
|
||||||
<li>Firefox (Mac, Windows)</li>
|
<tr>
|
||||||
<li>Internet Explorer</li>
|
<td></td>
|
||||||
<li>Opera (Mac, Windows)</li>
|
<th>Chrome</th>
|
||||||
</ul>
|
<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>
|
<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>
|
<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
|
* Reset individual elements or override regions to avoid conflicts due to
|
||||||
* global box model settings of Bootstrap. Two options, individual overrides and
|
* 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 */
|
/* Option 1A: Override a single element's box model via CSS */
|
||||||
|
|
@ -936,7 +567,7 @@ if (isAndroid) {
|
||||||
box-sizing: content-box;
|
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 {
|
.element {
|
||||||
.box-sizing(content-box);
|
.box-sizing(content-box);
|
||||||
}
|
}
|
||||||
|
|
@ -951,7 +582,7 @@ if (isAndroid) {
|
||||||
box-sizing: content-box;
|
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 {
|
.reset-box-sizing {
|
||||||
&,
|
&,
|
||||||
*,
|
*,
|
||||||
|
|
@ -1041,7 +672,7 @@ if (isAndroid) {
|
||||||
<h1 id="customizing" class="page-header">Customizing Bootstrap</h1>
|
<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 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">
|
<div class="bs-callout bs-callout-info">
|
||||||
<h4>Compiled or minified?</h4>
|
<h4>Compiled or minified?</h4>
|
||||||
|
|
@ -1103,7 +734,7 @@ if (isAndroid) {
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
<div class="bs-callout bs-callout-info">
|
||||||
<h4>Alternate customization methods</h4>
|
<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>
|
</div>
|
||||||
|
|
||||||
<h3>Removing potential bloat</h3>
|
<h3>Removing potential bloat</h3>
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ title: Bootstrap
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-4">
|
<div class="col-sm-4">
|
||||||
<img src="assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
|
<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>
|
<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>
|
||||||
<div class="col-sm-4">
|
<div class="col-sm-4">
|
||||||
|
|
|
||||||
|
|
@ -793,7 +793,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<!-- Nav tabs -->
|
<!-- Nav tabs -->
|
||||||
<ul class="nav 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="#profile" data-toggle="tab">Profile</a></li>
|
||||||
<li><a href="#messages" data-toggle="tab">Messages</a></li>
|
<li><a href="#messages" data-toggle="tab">Messages</a></li>
|
||||||
<li><a href="#settings" data-toggle="tab">Settings</a></li>
|
<li><a href="#settings" data-toggle="tab">Settings</a></li>
|
||||||
|
|
|
||||||
|
|
@ -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 (<768px)</td>
|
||||||
|
<td><code>.col-xs-*</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Small grid (≥768px)</td>
|
||||||
|
<td><code>.col-sm-*</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Medium grid (≥992px)</td>
|
||||||
|
<td><code>.col-md-*</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Large grid (≥1200px)</td>
|
||||||
|
<td><code>.col-lg-*</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Responsive utility classes (≥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><div class="col-*"></div></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><img></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>
|
||||||
|
|
@ -68,7 +68,7 @@
|
||||||
Carousel.prototype.pause = function (e) {
|
Carousel.prototype.pause = function (e) {
|
||||||
e || (this.paused = true)
|
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.$element.trigger($.support.transition.end)
|
||||||
this.cycle(true)
|
this.cycle(true)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -127,6 +127,7 @@
|
||||||
var data = $this.data('bs.collapse')
|
var data = $this.data('bs.collapse')
|
||||||
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
|
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 (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
|
||||||
if (typeof option == 'string') data[option]()
|
if (typeof option == 'string') data[option]()
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
|
|
||||||
this.escape()
|
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 () {
|
this.backdrop(function () {
|
||||||
var transition = $.support.transition && that.$element.hasClass('fade')
|
var transition = $.support.transition && that.$element.hasClass('fade')
|
||||||
|
|
@ -103,7 +103,7 @@
|
||||||
this.$element
|
this.$element
|
||||||
.removeClass('in')
|
.removeClass('in')
|
||||||
.attr('aria-hidden', true)
|
.attr('aria-hidden', true)
|
||||||
.off('click.dismiss.modal')
|
.off('click.dismiss.bs.modal')
|
||||||
|
|
||||||
$.support.transition && this.$element.hasClass('fade') ?
|
$.support.transition && this.$element.hasClass('fade') ?
|
||||||
this.$element
|
this.$element
|
||||||
|
|
@ -155,7 +155,7 @@
|
||||||
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
|
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
|
||||||
.appendTo(document.body)
|
.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
|
if (e.target !== e.currentTarget) return
|
||||||
this.options.backdrop == 'static'
|
this.options.backdrop == 'static'
|
||||||
? this.$element[0].focus.call(this.$element[0])
|
? this.$element[0].focus.call(this.$element[0])
|
||||||
|
|
@ -237,7 +237,7 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
$(document)
|
$(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') })
|
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
|
||||||
|
|
||||||
}(jQuery);
|
}(jQuery);
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- plugin sources -->
|
<!-- plugin sources -->
|
||||||
<script src="../../js/transition.js"></script>
|
<script>$.support.transition = false</script>
|
||||||
<script src="../../js/alert.js"></script>
|
<script src="../../js/alert.js"></script>
|
||||||
<script src="../../js/button.js"></script>
|
<script src="../../js/button.js"></script>
|
||||||
<script src="../../js/carousel.js"></script>
|
<script src="../../js/carousel.js"></script>
|
||||||
|
|
@ -47,10 +47,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div>
|
||||||
<h1 id="qunit-header">Bootstrap Plugin Test Suite</h1>
|
<div id="qunit"></div>
|
||||||
<h2 id="qunit-banner"></h2>
|
|
||||||
<h2 id="qunit-userAgent"></h2>
|
|
||||||
<ol id="qunit-tests"></ol>
|
|
||||||
<div id="qunit-fixture"></div>
|
<div id="qunit-fixture"></div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -157,16 +157,15 @@ $(function () {
|
||||||
test('should trigger hide event once when clicking outside of modal-content', function () {
|
test('should trigger hide event once when clicking outside of modal-content', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var div = $('<div id="modal-test"><div class="contents"></div></div>')
|
|
||||||
var triggered
|
var triggered
|
||||||
|
var div = $('<div id="modal-test"><div class="contents"></div></div>')
|
||||||
|
|
||||||
div
|
div
|
||||||
.bind('shown.bs.modal', function () {
|
.bind('shown.bs.modal', function () {
|
||||||
triggered = 0
|
triggered = 0
|
||||||
$('#modal-test').click()
|
$('#modal-test').click()
|
||||||
})
|
})
|
||||||
.one('hidden.bs.modal', function () {
|
|
||||||
div.modal('show')
|
|
||||||
})
|
|
||||||
.bind('hide.bs.modal', function () {
|
.bind('hide.bs.modal', function () {
|
||||||
triggered += 1
|
triggered += 1
|
||||||
ok(triggered === 1, 'modal hide triggered once')
|
ok(triggered === 1, 'modal hide triggered once')
|
||||||
|
|
|
||||||
|
|
@ -73,11 +73,14 @@ $(function () {
|
||||||
'</ul>'
|
'</ul>'
|
||||||
|
|
||||||
$(dropHTML).find('ul>li:first a').tab('show').end()
|
$(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')
|
equal(event.relatedTarget.hash, '#1-1')
|
||||||
}).on('shown', function (event) {
|
})
|
||||||
|
.on('show.bs.tab', function (event) {
|
||||||
equal(event.relatedTarget.hash, '#1-1')
|
equal(event.relatedTarget.hash, '#1-1')
|
||||||
}).tab('show')
|
})
|
||||||
|
.tab('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -332,7 +332,7 @@ $(function () {
|
||||||
var tooltip = container.find('.tooltip')
|
var tooltip = container.find('.tooltip')
|
||||||
|
|
||||||
start()
|
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()
|
container.remove()
|
||||||
}, 100)
|
}, 100)
|
||||||
})
|
})
|
||||||
|
|
@ -347,7 +347,11 @@ $(function () {
|
||||||
.tooltip('show'),
|
.tooltip('show'),
|
||||||
tooltip = container.find('.tooltip')
|
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')
|
target.tooltip('hide')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -402,7 +406,6 @@ $(function () {
|
||||||
.tooltip({placement: 'auto'})
|
.tooltip({placement: 'auto'})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
|
|
||||||
|
|
||||||
ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned bottom')
|
ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned bottom')
|
||||||
|
|
||||||
topTooltip.tooltip('hide')
|
topTooltip.tooltip('hide')
|
||||||
|
|
@ -415,14 +418,6 @@ $(function () {
|
||||||
ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
|
ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
|
||||||
rightTooltip.tooltip('hide')
|
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>')
|
var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
|
||||||
.appendTo('#dynamic-tt-test')
|
.appendTo('#dynamic-tt-test')
|
||||||
.tooltip({placement: 'auto left'})
|
.tooltip({placement: 'auto left'})
|
||||||
|
|
|
||||||
|
|
@ -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')
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
* Date: 2014-01-04T17:09Z
|
||||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
|
||||||
* or GPL (GPL-LICENSE.txt) licenses.
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/** Font Family and Sizes */
|
/** Font Family and Sizes */
|
||||||
|
|
@ -20,7 +21,7 @@
|
||||||
|
|
||||||
/** Resets */
|
/** 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;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -38,10 +39,10 @@
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
border-radius: 15px 15px 0 0;
|
border-radius: 5px 5px 0 0;
|
||||||
-moz-border-radius: 15px 15px 0 0;
|
-moz-border-radius: 5px 5px 0 0;
|
||||||
-webkit-border-top-right-radius: 15px;
|
-webkit-border-top-right-radius: 5px;
|
||||||
-webkit-border-top-left-radius: 15px;
|
-webkit-border-top-left-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#qunit-header a {
|
#qunit-header a {
|
||||||
|
|
@ -54,6 +55,11 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#qunit-testrunner-toolbar label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 .5em 0 .1em;
|
||||||
|
}
|
||||||
|
|
||||||
#qunit-banner {
|
#qunit-banner {
|
||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
|
|
@ -62,6 +68,7 @@
|
||||||
padding: 0.5em 0 0.5em 2em;
|
padding: 0.5em 0 0.5em 2em;
|
||||||
color: #5E740B;
|
color: #5E740B;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#qunit-userAgent {
|
#qunit-userAgent {
|
||||||
|
|
@ -71,6 +78,9 @@
|
||||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#qunit-modulefilter-container {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
/** Tests: Pass/Fail */
|
/** Tests: Pass/Fail */
|
||||||
|
|
||||||
|
|
@ -102,19 +112,24 @@
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#qunit-tests ol {
|
#qunit-tests li .runtime {
|
||||||
|
float: right;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qunit-assert-list {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
border-radius: 15px;
|
border-radius: 5px;
|
||||||
-moz-border-radius: 15px;
|
-moz-border-radius: 5px;
|
||||||
-webkit-border-radius: 15px;
|
-webkit-border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
box-shadow: inset 0px 2px 13px #999;
|
.qunit-collapsed {
|
||||||
-moz-box-shadow: inset 0px 2px 13px #999;
|
display: none;
|
||||||
-webkit-box-shadow: inset 0px 2px 13px #999;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#qunit-tests table {
|
#qunit-tests table {
|
||||||
|
|
@ -157,8 +172,7 @@
|
||||||
#qunit-tests b.failed { color: #710909; }
|
#qunit-tests b.failed { color: #710909; }
|
||||||
|
|
||||||
#qunit-tests li li {
|
#qunit-tests li li {
|
||||||
margin: 0.5em;
|
padding: 5px;
|
||||||
padding: 0.4em 0.5em 0.4em 0.5em;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
list-style-position: inside;
|
list-style-position: inside;
|
||||||
|
|
@ -167,9 +181,9 @@
|
||||||
/*** Passing Styles */
|
/*** Passing Styles */
|
||||||
|
|
||||||
#qunit-tests li li.pass {
|
#qunit-tests li li.pass {
|
||||||
color: #5E740B;
|
color: #3c510c;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-left: 26px solid #C6E746;
|
border-left: 10px solid #C6E746;
|
||||||
}
|
}
|
||||||
|
|
||||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||||
|
|
@ -185,15 +199,15 @@
|
||||||
#qunit-tests li li.fail {
|
#qunit-tests li li.fail {
|
||||||
color: #710909;
|
color: #710909;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-left: 26px solid #EE5757;
|
border-left: 10px solid #EE5757;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
}
|
}
|
||||||
|
|
||||||
#qunit-tests > li:last-child {
|
#qunit-tests > li:last-child {
|
||||||
border-radius: 0 0 15px 15px;
|
border-radius: 0 0 5px 5px;
|
||||||
-moz-border-radius: 0 0 15px 15px;
|
-moz-border-radius: 0 0 5px 5px;
|
||||||
-webkit-border-bottom-right-radius: 15px;
|
-webkit-border-bottom-right-radius: 5px;
|
||||||
-webkit-border-bottom-left-radius: 15px;
|
-webkit-border-bottom-left-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||||
|
|
@ -216,6 +230,9 @@
|
||||||
|
|
||||||
border-bottom: 1px solid white;
|
border-bottom: 1px solid white;
|
||||||
}
|
}
|
||||||
|
#qunit-testresult .module-name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
/** Fixture */
|
/** Fixture */
|
||||||
|
|
||||||
|
|
@ -223,4 +240,6 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10000px;
|
top: -10000px;
|
||||||
left: -10000px;
|
left: -10000px;
|
||||||
|
width: 1000px;
|
||||||
|
height: 1000px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -5,7 +5,9 @@
|
||||||
|
|
||||||
// Reset the box-sizing
|
// Reset the box-sizing
|
||||||
|
|
||||||
*,
|
* {
|
||||||
|
.box-sizing(border-box);
|
||||||
|
}
|
||||||
*:before,
|
*:before,
|
||||||
*:after {
|
*:after {
|
||||||
.box-sizing(border-box);
|
.box-sizing(border-box);
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
|
|
||||||
//** Unit-less `line-height` for use in components like buttons.
|
//** Unit-less `line-height` for use in components like buttons.
|
||||||
@line-height-base: 1.428571429; // 20/14
|
@line-height-base: 1.428571429; // 20/14
|
||||||
//** Computed "line-height" (`font-size` × `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
|
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
||||||
|
|
||||||
//** By default, this inherits from the `<body>`.
|
//** By default, this inherits from the `<body>`.
|
||||||
|
|
@ -548,7 +548,7 @@
|
||||||
@modal-content-bg: #fff;
|
@modal-content-bg: #fff;
|
||||||
//** Modal content border color
|
//** Modal content border color
|
||||||
@modal-content-border-color: rgba(0,0,0,.2);
|
@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-content-fallback-border-color: #999;
|
||||||
|
|
||||||
//** Modal backdrop background color
|
//** Modal backdrop background color
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"browserstack-runner": "~0.0.13",
|
"browserstack-runner": "~0.0.14",
|
||||||
"btoa": "~1.1.1",
|
"btoa": "~1.1.1",
|
||||||
"grunt": "~0.4.2",
|
"grunt": "~0.4.2",
|
||||||
"grunt-banner": "~0.2.0",
|
"grunt-banner": "~0.2.0",
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
"grunt-contrib-jade": "~0.9.1",
|
"grunt-contrib-jade": "~0.9.1",
|
||||||
"grunt-contrib-jshint": "~0.8.0",
|
"grunt-contrib-jshint": "~0.8.0",
|
||||||
"grunt-contrib-less": "~0.9.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-uglify": "~0.2.7",
|
||||||
"grunt-contrib-watch": "~0.5.3",
|
"grunt-contrib-watch": "~0.5.3",
|
||||||
"grunt-csscomb": "~2.0.1",
|
"grunt-csscomb": "~2.0.1",
|
||||||
|
|
|
||||||
|
|
@ -3,35 +3,31 @@
|
||||||
|
|
||||||
{
|
{
|
||||||
browserName: "safari",
|
browserName: "safari",
|
||||||
platform: "OS X 10.8"
|
platform: "OS X 10.9"
|
||||||
},
|
},
|
||||||
# { # Safari 7 (which requires Mavericks) is not currently supported by Sauce Labs
|
# FIXME: keeps timing out frequently for unknown reasons
|
||||||
# browserName: "safari",
|
# {
|
||||||
|
# browserName: "chrome",
|
||||||
# platform: "OS X 10.9"
|
# platform: "OS X 10.9"
|
||||||
# },
|
# },
|
||||||
|
|
||||||
{
|
{
|
||||||
browserName: "chrome",
|
browserName: "firefox",
|
||||||
platform: "OS X 10.9"
|
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
|
# Mac Opera not currently supported by Sauce Labs
|
||||||
|
|
||||||
# { # FIXME: currently fails 1 tooltip test
|
{
|
||||||
# browserName: "internet explorer",
|
browserName: "internet explorer",
|
||||||
# version: "11",
|
version: "11",
|
||||||
# platform: "Windows 8.1"
|
platform: "Windows 8.1"
|
||||||
# },
|
},
|
||||||
|
{
|
||||||
# {
|
browserName: "internet explorer",
|
||||||
# browserName: "internet explorer",
|
version: "10",
|
||||||
# version: "10",
|
platform: "Windows 8"
|
||||||
# platform: "Windows 8"
|
},
|
||||||
# },
|
|
||||||
# {
|
# {
|
||||||
# browserName: "internet explorer",
|
# browserName: "internet explorer",
|
||||||
# version: "9",
|
# version: "9",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue