diff options
Diffstat (limited to 'docs')
39 files changed, 354 insertions, 133 deletions
diff --git a/docs/_data/browser-bugs.yml b/docs/_data/browser-bugs.yml index 1feb7c312..690efef74 100644 --- a/docs/_data/browser-bugs.yml +++ b/docs/_data/browser-bugs.yml @@ -80,6 +80,16 @@ - browser: > + Chrome (OS X) + summary: > + Caps Lock indicator not shown in `<input type="password">` with `display: block` + upstream_bug: > + Chromium#460200 + origin: > + Bootstrap#15832 + +- + browser: > Chrome summary: > `display: table;` within `display: block;` forces sibling content to new line. @@ -172,6 +182,16 @@ - browser: > + Safari (OS X) + summary: > + Caps Lock indicator not shown in `<input type="password">` with `display: block` + upstream_bug: > + WebKit#141804, Safari#19892433 + origin: > + Bootstrap#15832 + +- + browser: > Safari (iOS) summary: > `transform: translate3d(0,0,0);` rendering bug. diff --git a/docs/_data/translations.yml b/docs/_data/translations.yml index 0978cd1fe..2340b99f1 100644 --- a/docs/_data/translations.yml +++ b/docs/_data/translations.yml @@ -11,7 +11,7 @@ - name: French code: fr description: Bootstrap en Français - url: http://www.oneskyapp.com/docs/bootstrap/fr + url: http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/ - name: German code: de @@ -31,12 +31,12 @@ - name: Russian code: ru description: Bootstrap по-русски - url: http://www.oneskyapp.com/docs/bootstrap/ru + url: http://www.oneskyapp.com/ru/docs/bootstrap/ - name: Spanish code: es description: Bootstrap en Español - url: http://www.oneskyapp.com/docs/bootstrap/es + url: http://www.oneskyapp.com/es/docs/bootstrap/ - name: Ukrainian code: uk diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 32305cb7c..10f87af42 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -6,7 +6,7 @@ <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> - <p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p>Code licensed under <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p> <ul class="bs-docs-footer-links text-muted"> <li>Currently v{{ site.current_version }}</li> <li>·</li> diff --git a/docs/_includes/social-buttons.html b/docs/_includes/social-buttons.html index 9e0a1505e..37e2ca28a 100644 --- a/docs/_includes/social-buttons.html +++ b/docs/_includes/social-buttons.html @@ -7,10 +7,10 @@ <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe> </li> <li class="follow-btn"> - <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a> + <a href="https://twitter.com/getbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @getbootstrap</a> </li> <li class="tweet-btn"> - <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Bootstrap">Tweet</a> + <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="getbootstrap" data-related="mdo:Creator of Bootstrap">Tweet</a> </li> </ul> </div> diff --git a/docs/about/license.md b/docs/about/license.md index 402624163..24746dbca 100644 --- a/docs/about/license.md +++ b/docs/about/license.md @@ -7,7 +7,7 @@ Bootstrap is released under the MIT license and is copyright {{ site.time | date #### It requires you to: -* Include the license and copyright notice in your works +* Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works #### It permits you to: diff --git a/docs/assets/css/src/anchor.css b/docs/assets/css/src/anchor.css new file mode 100644 index 000000000..69c6f5dcd --- /dev/null +++ b/docs/assets/css/src/anchor.css @@ -0,0 +1,60 @@ +/** +* Store the link icon as a base64 embedded icon font. +*/ +@font-face { + font-family: 'anchorjs-link'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); + font-weight: normal; + font-style: normal; +} + +.anchorjs-icon { + font-family: 'anchorjs-link'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Icon Rendering */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/** +* Link placement and hover behavior. +*/ +.anchorjs-link { + float: left; + width: 1em; + height: 1em; + margin-left: -1.2em; + opacity: 0; + color: inherit; + text-align: center; +} + +@media (max-width: 480px) { + .anchorjs-link { + display: none; + } +} + +*:hover > .anchorjs-link, +.anchorjs-link:focus { + opacity: .75; + transition: color .16s linear; +} +*:hover > .anchorjs-link:hover { + opacity: 1; + text-decoration: none; +} +.anchorjs-icon { + font-size: 60%; + vertical-align: .2em; +} +.anchorjs-icon:before { + content: "\e600"; +} diff --git a/docs/assets/js/src/application.js b/docs/assets/js/src/application.js index a349157a2..df44da540 100644 --- a/docs/assets/js/src/application.js +++ b/docs/assets/js/src/application.js @@ -9,7 +9,7 @@ * details, see http://creativecommons.org/licenses/by/3.0/. */ -/* global ZeroClipboard */ +/* global ZeroClipboard, addAnchors */ !function ($) { 'use strict'; @@ -153,3 +153,8 @@ }) }(jQuery) + +;(function () { + 'use strict'; + addAnchors('.bs-docs-container h1, .bs-docs-container h2, .bs-docs-container h3, .bs-docs-container h4, .bs-docs-container h5'); +})(); diff --git a/docs/assets/js/vendor/anchor.js b/docs/assets/js/vendor/anchor.js new file mode 100644 index 000000000..e5ddfa725 --- /dev/null +++ b/docs/assets/js/vendor/anchor.js @@ -0,0 +1,48 @@ +/*! + * AnchorJS - v0.1.0 - 2014-08-17 + * https://github.com/bryanbraun/anchorjs + * Copyright (c) 2014 Bryan Braun; Licensed MIT + */ + +function addAnchors(selector) { + 'use strict'; + + // Sensible default selector, if none is provided. + if (!selector) { + selector = 'h1, h2, h3, h4, h5, h6'; + } else if (typeof selector !== 'string') { + throw new Error('AnchorJS accepts only strings; you used a ' + typeof selector); + } + + // Select any elements that match the provided selector. + var elements = document.querySelectorAll(selector); + + // Loop through the selected elements. + for (var i = 0; i < elements.length; i++) { + var elementID; + + if (elements[i].hasAttribute('id')) { + elementID = elements[i].getAttribute('id'); + } else { + // We need to create an ID on our element. First, we find which text selection method is available to the browser. + var textMethod = document.body.textContent ? 'textContent' : 'innerText'; + + // Get the text inside our element + var roughText = elements[i][textMethod]; + + // Refine it so it makes a good ID. Makes all lowercase and hyphen separated. + // Ex. Hello World > hello-world + var tidyText = roughText.replace(/\s+/g, '-').toLowerCase(); + + // Assign it to our element. + // Currently the setAttribute element is only supported in IE9 and above. + elements[i].setAttribute('id', tidyText); + + // Grab it for use in our anchor. + elementID = tidyText; + } + var anchor = '<a class="anchorjs-link" href="#' + elementID + '"><span class="anchorjs-icon"></span></a>'; + + elements[i].innerHTML += anchor; + } +} diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 8d22110eb..f17b1ad22 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -11,6 +11,7 @@ // Import the syntax highlighting @import "syntax"; +// @import "anchor"; // TODO: move anchor from src to scss directory // Local docs variables $bs-purple: #563d7c; diff --git a/docs/components/helpers.md b/docs/components/helpers.md index 6e5bac318..844db2d9f 100644 --- a/docs/components/helpers.md +++ b/docs/components/helpers.md @@ -94,14 +94,14 @@ Set an element to `display: block;` and center via `margin`. Available as a mixi {% endexample %} {% highlight scss %} -// Classes +// Class .center-block { display: block; margin-left: auto; margin-right: auto; } -// Usage as mixins +// Usage as a mixin .element { @include center-block; } @@ -126,7 +126,7 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes } } -// Usage as a Mixin +// Usage as a mixin .element { @include clearfix; } @@ -151,12 +151,12 @@ The `.invisible` class can be used to toggle only the visibility of an element, {% endhighlight %} {% highlight scss %} -// Classes +// Class .invisible { visibility: hidden; } -// Usage as mixin +// Usage as a mixin .element { .invisible(); } @@ -171,7 +171,7 @@ Hide an element to all devices **except screen readers** with `.sr-only`. Combin {% endhighlight %} {% highlight scss %} -// Usage as a Mixin +// Usage as a mixin .skip-navigation { @include sr-only; @include sr-only-focusable; @@ -187,7 +187,7 @@ Utilize the `.text-hide` class or mixin to help replace an element's text conten {% endhighlight %} {% highlight scss %} -// Usage as a Mixin +// Usage as a mixin .heading { @include text-hide; } diff --git a/docs/content/forms.md b/docs/content/forms.md index f1068a01b..ac056a8b9 100644 --- a/docs/content/forms.md +++ b/docs/content/forms.md @@ -336,7 +336,7 @@ We remove the default `outline` styles on some form controls and apply a `box-sh ## Disabled states -Add the `disabled` boolean attribute on an `<input>`, `<select>`, or `<textarea>` to prevent user input and trigger a slightly different look. +Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor. {% highlight html %} <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> @@ -379,7 +379,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi ## Readonly inputs -Add the `readonly` boolean attribute on an input to prevent user input and style the input as disabled. +Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.< {% example html %} <input class="form-control" type="text" placeholder="Readonly input here…" readonly> @@ -389,6 +389,12 @@ Add the `readonly` boolean attribute on an input to prevent user input and style Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles. +<div class="bs-callout bs-callout-warning" id="callout-form-validation-state-accessibility"> + <h4>Conveying validation state to assistive technologies and colorblind users</h4> + <p>Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.</p> + <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), include a <a href="../components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="../components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.</p> +</div> + {% example html %} <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Input with success</label> diff --git a/docs/content/images.md b/docs/content/images.md index da5c6bf99..6b691fb0e 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -37,3 +37,7 @@ Add classes to an `<img>` element to easily style images in any project. <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail"> {% endhighlight %} + +## Aligning images + +To center images with `.img-responsive`, use `.center-block`. For all other images, use `.text-center`. [See the helper classes section](/css/helpers) for more details about `.center-block` usage. diff --git a/docs/dist/js/bootstrap.js b/docs/dist/js/bootstrap.js index 584fe3ba2..c72454d9a 100644 --- a/docs/dist/js/bootstrap.js +++ b/docs/dist/js/bootstrap.js @@ -306,10 +306,10 @@ if (typeof jQuery === 'undefined') { this.$element = $(element) this.$indicators = this.$element.find('.carousel-indicators') this.options = options - this.paused = - this.sliding = - this.interval = - this.$active = + this.paused = null + this.sliding = null + this.interval = null + this.$active = null this.$items = null this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this)) @@ -811,7 +811,7 @@ if (typeof jQuery === 'undefined') { return $this.trigger('click') } - var desc = ' li:not(.divider):visible a' + var desc = ' li:not(.disabled):visible a' var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc) if (!$items.length) return @@ -915,12 +915,13 @@ if (typeof jQuery === 'undefined') { // ====================== var Modal = function (element, options) { - this.options = options - this.$body = $(document.body) - this.$element = $(element) - this.$backdrop = - this.isShown = null - this.scrollbarWidth = 0 + this.options = options + this.$body = $(document.body) + this.$element = $(element) + this.$backdrop = null + this.isShown = null + this.originalBodyPad = null + this.scrollbarWidth = 0 if (this.options.remote) { this.$element @@ -1149,17 +1150,23 @@ if (typeof jQuery === 'undefined') { } Modal.prototype.checkScrollbar = function () { - this.bodyIsOverflowing = document.body.scrollHeight > document.documentElement.clientHeight + var fullWindowWidth = window.innerWidth + if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8 + var documentElementRect = document.documentElement.getBoundingClientRect() + fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left) + } + this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth this.scrollbarWidth = this.measureScrollbar() } Modal.prototype.setScrollbar = function () { var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10) + this.originalBodyPad = document.body.style.paddingRight || '' if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth) } Modal.prototype.resetScrollbar = function () { - this.$body.css('padding-right', '') + this.$body.css('padding-right', this.originalBodyPad) } Modal.prototype.measureScrollbar = function () { // thx walsh @@ -1241,11 +1248,11 @@ if (typeof jQuery === 'undefined') { // =============================== var Tooltip = function (element, options) { - this.type = - this.options = - this.enabled = - this.timeout = - this.hoverState = + this.type = null + this.options = null + this.enabled = null + this.timeout = null + this.hoverState = null this.$element = null this.init('tooltip', element, options) @@ -1278,6 +1285,10 @@ if (typeof jQuery === 'undefined') { this.options = this.getOptions(options) this.$viewport = this.options.viewport && $(this.options.viewport.selector || this.options.viewport) + if (this.$element[0] instanceof document.constructor && !this.options.selector) { + throw new Error('`selector` option must be specified when initializing ' + this.type + ' on the window.document object!'); + } + var triggers = this.options.trigger.split(' ') for (var i = triggers.length; i--;) { @@ -1498,10 +1509,10 @@ if (typeof jQuery === 'undefined') { this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], isVertical) } - Tooltip.prototype.replaceArrow = function (delta, dimension, isHorizontal) { + Tooltip.prototype.replaceArrow = function (delta, dimension, isVertical) { this.arrow() - .css(isHorizontal ? 'left' : 'top', 50 * (1 - delta / dimension) + '%') - .css(isHorizontal ? 'top' : 'left', '') + .css(isVertical ? 'left' : 'top', 50 * (1 - delta / dimension) + '%') + .css(isVertical ? 'top' : 'left', '') } Tooltip.prototype.setContent = function () { @@ -1514,7 +1525,7 @@ if (typeof jQuery === 'undefined') { Tooltip.prototype.hide = function (callback) { var that = this - var $tip = this.tip() + var $tip = $(this.$tip) var e = $.Event('hide.bs.' + this.type) function complete() { @@ -1531,7 +1542,7 @@ if (typeof jQuery === 'undefined') { $tip.removeClass('in') - $.support.transition && this.$tip.hasClass('fade') ? + $.support.transition && $tip.hasClass('fade') ? $tip .one('bsTransitionEnd', complete) .emulateTransitionEnd(Tooltip.TRANSITION_DURATION) : @@ -1774,11 +1785,6 @@ if (typeof jQuery === 'undefined') { return (this.$arrow = this.$arrow || this.tip().find('.popover-arrow')) } - Popover.prototype.tip = function () { - if (!this.$tip) this.$tip = $(this.options.template) - return this.$tip - } - // POPOVER PLUGIN DEFINITION // ========================= @@ -1827,10 +1833,8 @@ if (typeof jQuery === 'undefined') { // ========================== function ScrollSpy(element, options) { - var process = $.proxy(this.process, this) - - this.$body = $('body') - this.$scrollElement = $(element).is('body') ? $(window) : $(element) + this.$body = $(document.body) + this.$scrollElement = $(element).is(document.body) ? $(window) : $(element) this.options = $.extend({}, ScrollSpy.DEFAULTS, options) this.selector = (this.options.target || '') + ' .nav li > a' this.offsets = [] @@ -1838,7 +1842,7 @@ if (typeof jQuery === 'undefined') { this.activeTarget = null this.scrollHeight = 0 - this.$scrollElement.on('scroll.bs.scrollspy', process) + this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this)) this.refresh() this.process() } @@ -1854,20 +1858,19 @@ if (typeof jQuery === 'undefined') { } ScrollSpy.prototype.refresh = function () { - var offsetMethod = 'offset' - var offsetBase = 0 + var that = this + var offsetMethod = 'offset' + var offsetBase = 0 + + this.offsets = [] + this.targets = [] + this.scrollHeight = this.getScrollHeight() if (!$.isWindow(this.$scrollElement[0])) { offsetMethod = 'position' offsetBase = this.$scrollElement.scrollTop() } - this.offsets = [] - this.targets = [] - this.scrollHeight = this.getScrollHeight() - - var self = this - this.$body .find(this.selector) .map(function () { @@ -1882,8 +1885,8 @@ if (typeof jQuery === 'undefined') { }) .sort(function (a, b) { return a[0] - b[0] }) .each(function () { - self.offsets.push(this[0]) - self.targets.push(this[1]) + that.offsets.push(this[0]) + that.targets.push(this[1]) }) } @@ -1923,8 +1926,8 @@ if (typeof jQuery === 'undefined') { this.clear() var selector = this.selector + - '[data-target="' + target + '"],' + - this.selector + '[href="' + target + '"]' + '[data-target="' + target + '"],' + + this.selector + '[href="' + target + '"]' var active = $(selector) .parents('li') @@ -2077,7 +2080,7 @@ if (typeof jQuery === 'undefined') { element.removeClass('fade') } - if (element.parent('.dropdown-menu')) { + if (element.parent('.dropdown-menu').length) { element .closest('li.dropdown') .addClass('active') @@ -2164,8 +2167,8 @@ if (typeof jQuery === 'undefined') { .on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this)) this.$element = $(element) - this.affixed = - this.unpin = + this.affixed = null + this.unpin = null this.pinnedOffset = null this.checkPosition() diff --git a/docs/examples/blog/index.html b/docs/examples/blog/index.html index 81ffc7c54..c38e49844 100644 --- a/docs/examples/blog/index.html +++ b/docs/examples/blog/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -164,6 +165,7 @@ <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> - <script src="../../assets/js/docs.min.js"></script> + <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> + <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index b2aa55aac..3e88fd0ff 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -50,8 +51,13 @@ <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> +<<<<<<< HEAD <div class="carousel-item active"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> +======= + <div class="item active"> + <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> +>>>>>>> master <div class="container"> <div class="carousel-caption text-left"> <h1>Example headline.</h1> @@ -60,8 +66,13 @@ </div> </div> </div> +<<<<<<< HEAD <div class="carousel-item"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> +======= + <div class="item"> + <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> +>>>>>>> master <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> @@ -70,8 +81,13 @@ </div> </div> </div> +<<<<<<< HEAD <div class="carousel-item"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> +======= + <div class="item"> + <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> +>>>>>>> master <div class="container"> <div class="carousel-caption text-right"> <h1>One more for good measure.</h1> @@ -101,19 +117,19 @@ <!-- Three columns of text below the carousel --> <div class="row"> <div class="col-lg-4"> - <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;"> + <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> <h2>Heading</h2> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> - <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;"> + <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> <h2>Heading</h2> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> - <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" style="width: 140px; height: 140px;"> + <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> @@ -131,20 +147,20 @@ <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> </div> <div class="col-md-5"> - <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div> </div> <hr class="featurette-divider"> <div class="row featurette"> - <div class="col-md-5"> - <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> - </div> - <div class="col-md-7"> + <div class="col-md-7 col-md-push-5"> <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> </div> + <div class="col-md-5 col-md-pull-7"> + <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + </div> </div> <hr class="featurette-divider"> @@ -155,7 +171,7 @@ <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> </div> <div class="col-md-5"> - <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> + <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> </div> </div> @@ -178,6 +194,9 @@ <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> - <script src="../../assets/js/docs.min.js"></script> + <!-- Just to make our placeholder images work. Don't actually copy the next line! --> + <script src="../../assets/js/vendor/holder.js"></script> + <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> + <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/examples/cover/index.html b/docs/examples/cover/index.html index 9b1aefd3e..4de5614d1 100644 --- a/docs/examples/cover/index.html +++ b/docs/examples/cover/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -64,6 +65,7 @@ <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> - <script src="../../assets/js/docs.min.js"></script> + <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> + <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index 9c4eb6ac4..bc6cb017a 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -232,6 +233,9 @@ <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> - <script src="../../assets/js/docs.min.js"></script> + <!-- Just to make our placeholder images work. Don't actually copy the next line! --> + <script src="../../assets/js/vendor/holder.js"></script> + <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> + <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html index bf50845aa..72e9f6bcd 100644 --- a/docs/examples/grid/index.html +++ b/docs/examples/grid/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html index d94378b8c..008205608 100644 --- a/docs/examples/jumbotron/index.html +++ b/docs/examples/jumbotron/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html index 1d3d6e3cc..ad3de8352 100644 --- a/docs/examples/justified-nav/index.html +++ b/docs/examples/justified-nav/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -24,6 +25,8 @@ <div class="container"> + <!-- The justified navigation menu is meant for single line per list item. + Multiple lines will require custom code not provided by Bootstrap. --> <div class="masthead"> <h3 class="text-muted">Project name</h3> <nav> diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html index f23ec5e07..3a52a710d 100644 --- a/docs/examples/narrow-jumbotron/index.html +++ b/docs/examples/narrow-jumbotron/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> @@ -23,7 +24,7 @@ <body> <div class="container"> - <div class="header"> + <div class="header clearfix"> <nav> <ul class="nav nav-pills pull-right"> <li class="nav-item active"> diff --git a/docs/examples/narrow-jumbotron/narrow-jumbotron.css b/docs/examples/narrow-jumbotron/narrow-jumbotron.css index 323db95fd..28cf77381 100644 --- a/docs/examples/narrow-jumbotron/narrow-jumbotron.css +++ b/docs/examples/narrow-jumbotron/narrow-jumbotron.css @@ -14,11 +14,11 @@ body { /* Custom page header */ .header { + padding-bottom: 1rem; border-bottom: .05rem solid #e5e5e5; } /* Make the masthead heading the same height as the navigation */ .header h3 { - padding-bottom: 1.5rem; margin-top: 0; margin-bottom: 0; line-height: 3rem; diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html index 0655c7080..03ebfc763 100644 --- a/docs/examples/navbar/index.html +++ b/docs/examples/navbar/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html index 6571657fd..cedf1ee75 100644 --- a/docs/examples/offcanvas/index.html +++ b/docs/examples/offcanvas/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> diff --git a/docs/examples/signin/index.html b/docs/examples/signin/index.html index 388ed8628..9fb60b33c 100644 --- a/docs/examples/signin/index.html +++ b/docs/examples/signin/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> diff --git a/docs/examples/starter-template/index.html b/docs/examples/starter-template/index.html index 3d5eeb206..961f741b1 100644 --- a/docs/examples/starter-template/index.html +++ b/docs/examples/starter-template/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html index 16c27d410..110d9bd5f 100644 --- a/docs/examples/sticky-footer-navbar/index.html +++ b/docs/examples/sticky-footer-navbar/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> diff --git a/docs/examples/sticky-footer/index.html b/docs/examples/sticky-footer/index.html index 538a33a69..dd5b4e39a 100644 --- a/docs/examples/sticky-footer/index.html +++ b/docs/examples/sticky-footer/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> diff --git a/docs/examples/tooltip-viewport/index.html b/docs/examples/tooltip-viewport/index.html index c3908db93..9e0db971c 100644 --- a/docs/examples/tooltip-viewport/index.html +++ b/docs/examples/tooltip-viewport/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../assets/ico/favicon.ico"> diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md index 1d60957ea..c1a23da35 100644 --- a/docs/getting-started/accessibility.md +++ b/docs/getting-started/accessibility.md @@ -7,13 +7,20 @@ Bootstrap follows common web standards and—with minimal extra effort—can be ### Skip navigation -If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link [before the navigation](http://a11yproject.com/posts/skip-nav-links/). Using the `.sr-only` class will visually hide the skip link, and the `.sr-only-focusable` class will ensure that the link becomes visible once focused (for sighted keyboard users). +If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users). + +<div class="bs-callout bs-callout-danger" id="callout-skiplinks"> + <p>Due to long-standing shortcomings/bugs in Chrome (see <a href="https://code.google.com/p/chromium/issues/detail?id=262171" title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) and Internet Explorer (see this article on <a href="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p> + <p>In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with <code>tabindex="-1"</code> when they are clicked with the mouse) with <code>#content:focus { outline: none; }</code>.</p> + <p>Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.</p> +</div> {% highlight html %} <body> <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a> - <div class="container" id="content"> - The main page content. + ... + <div class="container" id="content" tabindex="-1"> + <!-- The main page content --> </div> </body> {% endhighlight %} diff --git a/docs/getting-started/community.md b/docs/getting-started/community.md index d6270c381..d9a8cd166 100644 --- a/docs/getting-started/community.md +++ b/docs/getting-started/community.md @@ -9,6 +9,7 @@ Stay up to date on the development of Bootstrap and reach out to the community w - Chat with fellow Bootstrappers using IRC in the `irc.freenode.net` server, in the [##twitter-bootstrap channel](irc://irc.freenode.net/%23twitter-bootstrap). - For help using Bootstrap, ask on [StackOverflow using the tag `twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3). - Find inspiring examples of people building with Bootstrap at the [Bootstrap Expo](http://expo.getbootstrap.com). +- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability. -You can also follow [@twbootstrap on Twitter](https://twitter.com/twbootstrap) for the latest gossip and awesome music videos. +You can also follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap) for the latest gossip and awesome music videos. diff --git a/docs/getting-started/compiling.md b/docs/getting-started/compiling.md index 38aa249d5..1d5b29d0e 100644 --- a/docs/getting-started/compiling.md +++ b/docs/getting-started/compiling.md @@ -7,7 +7,7 @@ Bootstrap uses [Grunt](http://gruntjs.com) for its build system, with convenient ### Install Grunt -**To install Grunt, you must first [download and install node.js](http://nodejs.org/download/)** (which includes npm). npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js. +**To install Grunt, you must first [download and install node.js](http://nodejs.org/download/)** (which includes npm). npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js. From the command line: @@ -17,7 +17,7 @@ From the command line: When completed, you'll be able to run the various Grunt commands provided from the command line. -**Unfamiliar with npm? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding. +**Unfamiliar with npm? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding. [install-ruby]: https://www.ruby-lang.org/en/documentation/installation/ [gembundler]: http://bundler.io/ diff --git a/docs/getting-started/template.md b/docs/getting-started/template.md index 97982c2da..c1293c921 100644 --- a/docs/getting-started/template.md +++ b/docs/getting-started/template.md @@ -14,6 +14,7 @@ Copy the HTML below to begin working with a minimal Bootstrap document. <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags. --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> @@ -23,7 +24,7 @@ Copy the HTML below to begin working with a minimal Bootstrap document. <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> diff --git a/docs/index.html b/docs/index.html index d0ae59d72..80a0fe6d6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,7 +4,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f --- -<main class="bs-docs-masthead" id="content" role="main"> +<main class="bs-docs-masthead" id="content" role="main" tabindex="-1"> <div class="container"> <span class="bs-docs-booticon outline">B</span> <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p> diff --git a/docs/javascript/carousel.md b/docs/javascript/carousel.md index d69725a59..36b302579 100644 --- a/docs/javascript/carousel.md +++ b/docs/javascript/carousel.md @@ -208,6 +208,7 @@ Bootstrap's carousel class exposes two events for hooking into carousel function - `direction`: The direction in which the carousel is sliding (either `"left"` or `"right"`). - `relatedTarget`: The DOM element that is being slid into place as the active item. +All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`). <div class="table-responsive"> <table class="table table-bordered table-striped"> diff --git a/docs/javascript/modal.md b/docs/javascript/modal.md index 22c74f31c..4ae9f95ba 100644 --- a/docs/javascript/modal.md +++ b/docs/javascript/modal.md @@ -248,15 +248,69 @@ For modals that simply appear rather than fade in to view, remove the `.fade` cl </div> {% endhighlight %} +## Using the grid system + +To take advantage of the Bootstrap grid system within a modal, just nest `.container-fluid within the `.modal-body` and then use the normal grid system classes within this container. + +{% example html %} +<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> + <h4 class="modal-title" id="gridModalLabel">Modal title</h4> + </div> + <div class="modal-body"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-4">.col-md-4</div> + <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> + </div> + <div class="row"> + <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> + <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> + </div> + <div class="row"> + <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> + </div> + <div class="row"> + <div class="col-sm-9"> + Level 1: .col-sm-9 + <div class="row"> + <div class="col-xs-8 col-sm-6"> + Level 2: .col-xs-8 .col-sm-6 + </div> + <div class="col-xs-4 col-sm-6"> + Level 2: .col-xs-4 .col-sm-6 + </div> + </div> + </div> + </div> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Save changes</button> + </div> + </div> + </div> +</div> +<div class="bs-example bs-example-padded-bottom"> + <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal"> + Launch demo modal + </button> +</div> +{% endexample %} + ## Varying modal content based on trigger button Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`. -<div class="bs-example" style="padding-bottom: 24px;"> +{% example html %} +<div class="bs-example"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button> - + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> @@ -287,42 +341,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff </div> </div> </div> - -{% highlight html %} -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> -<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button> - -<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - <span class="sr-only">Close</span> - </button> - <h4 class="modal-title" id="exampleModalLabel">New message</h4> - </div> - <div class="modal-body"> - <form> - <div class="form-group"> - <label for="recipient-name" class="control-label">Recipient:</label> - <input type="text" class="form-control" id="recipient-name"> - </div> - <div class="form-group"> - <label for="message-text" class="control-label">Message:</label> - <textarea class="form-control" id="message-text"></textarea> - </div> - </form> - </div> - <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> - <button type="button" class="btn btn-primary">Send message</button> - </div> - </div> - </div> -</div> -{% endhighlight %} +{% endexample %} {% highlight js %} $('#exampleModal').on('show.bs.modal', function (event) { @@ -336,6 +355,10 @@ $('#exampleModal').on('show.bs.modal', function (event) { }) {% endhighlight %} +## Modals with dynamic heights + +If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` to readjust the modal's position in case a scrollbar appears. + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. @@ -423,7 +446,7 @@ Manually hides a modal. **Returns to the caller before the modal has actually be ### Events -Bootstrap's modal class exposes a few events for hooking into modal functionality. +Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`). <div class="table-responsive"> <table class="table table-bordered table-striped"> diff --git a/docs/javascript/popovers.md b/docs/javascript/popovers.md index fc5206e8a..e1e2c9664 100644 --- a/docs/javascript/popovers.md +++ b/docs/javascript/popovers.md @@ -289,7 +289,8 @@ Toggles an element's popover. **Returns to the caller before the popover has act #### .popover('destroy') -Hides and destroys an element's popover. +Hides and destroys an element's popover. Popvoers that use delegation (which are created using [the `selector` option](#popovers-options)) cannot be individually destroyed on descendant trigger elements. + {% highlight js %}$('#element').popover('destroy'){% endhighlight %} diff --git a/docs/javascript/scrollspy.md b/docs/javascript/scrollspy.md index 5ae045fd1..892d641da 100644 --- a/docs/javascript/scrollspy.md +++ b/docs/javascript/scrollspy.md @@ -74,9 +74,9 @@ body { {% endhighlight %} {% highlight html %} -<body data-spy="scroll" data-target=".navbar-example"> +<body data-spy="scroll" data-target="#navbar-example"> ... - <div class="navbar-example"> + <div id="navbar-example"> <ul class="nav nav-tabs" role="tablist"> ... </ul> @@ -90,7 +90,7 @@ body { After adding `position: relative;` in your CSS, call the scrollspy via JavaScript: {% highlight js %} -$('body').scrollspy({ target: '.navbar-example' }) +$('body').scrollspy({ target: '#navbar-example' }) {% endhighlight %} <div class="bs-callout bs-callout-danger"> diff --git a/docs/javascript/tooltips.md b/docs/javascript/tooltips.md index 2e8e11470..aa5d8661f 100644 --- a/docs/javascript/tooltips.md +++ b/docs/javascript/tooltips.md @@ -259,7 +259,7 @@ Toggles an element's tooltip. **Returns to the caller before the tooltip has act #### .tooltip('destroy') -Hides and destroys an element's tooltip. +Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#tooltips-options)) cannot be individually destroyed on descendant trigger elements. {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %} |