mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-11 08:04:59 +02:00
Merge branch 'master' into text-emphasis-variant
This commit is contained in:
Mark Otto
38
Gruntfile.js
38
Gruntfile.js
@@ -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);
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
"username": "--secure--",
|
||||
"key": "--secure--",
|
||||
"test_path": "js/tests/index.html",
|
||||
"debug": true,
|
||||
"browsers": [
|
||||
{
|
||||
"browser": "firefox",
|
||||
|
||||
2
dist/css/bootstrap-theme.css.map
vendored
2
dist/css/bootstrap-theme.css.map
vendored
File diff suppressed because one or more lines are too long
12
dist/css/bootstrap.css
vendored
12
dist/css/bootstrap.css
vendored
@@ -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);
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
11
dist/js/bootstrap.js
vendored
11
dist/js/bootstrap.js
vendored
@@ -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);
|
||||
|
||||
2
dist/js/bootstrap.min.js
vendored
2
dist/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -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 "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 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 <strong>for IE8</strong></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>
|
||||
|
||||
@@ -21,6 +21,10 @@
|
||||
<li><a href="{{ site.expo }}">Expo</a></li>
|
||||
<li>·</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>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
12
docs/_includes/nav-migration.html
Normal file
12
docs/_includes/nav-migration.html
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -618,6 +618,9 @@ body {
|
||||
.bs-docs-section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.bs-docs-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1[id] {
|
||||
margin-top: 0;
|
||||
|
||||
2
docs/assets/css/pack.min.css
vendored
2
docs/assets/css/pack.min.css
vendored
File diff suppressed because one or more lines are too long
18
docs/assets/js/customize.min.js
vendored
18
docs/assets/js/customize.min.js
vendored
File diff suppressed because one or more lines are too long
2
docs/assets/js/docs.min.js
vendored
2
docs/assets/js/docs.min.js
vendored
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>
|
||||
<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>
|
||||
|
||||
2
docs/dist/css/bootstrap-theme.css.map
vendored
2
docs/dist/css/bootstrap-theme.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
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 -->
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 (<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>
|
||||
<!-- 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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
423
docs/migration.html
Normal file
423
docs/migration.html
Normal 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 (<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) {
|
||||
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)
|
||||
}
|
||||
|
||||
@@ -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]()
|
||||
})
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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')
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
@@ -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'})
|
||||
|
||||
@@ -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')
|
||||
})
|
||||
|
||||
})
|
||||
2
js/tests/vendor/jquery.js
vendored
2
js/tests/vendor/jquery.js
vendored
File diff suppressed because one or more lines are too long
73
js/tests/vendor/qunit.css
vendored
73
js/tests/vendor/qunit.css
vendored
@@ -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;
|
||||
}
|
||||
|
||||
2828
js/tests/vendor/qunit.js
vendored
2828
js/tests/vendor/qunit.js
vendored
File diff suppressed because it is too large
Load Diff
@@ -5,7 +5,9 @@
|
||||
|
||||
// Reset the box-sizing
|
||||
|
||||
*,
|
||||
* {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
*:before,
|
||||
*:after {
|
||||
.box-sizing(border-box);
|
||||
|
||||
@@ -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` × `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
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user