Carousel: Add @supports 3D transforms feature query; fixes #15534

Merge pull request #16157 from twbs/fix-16069
Document how to disable transitions in jQuery plugins
2015-03-25 18:38:33 -07:00 · 2015-03-25 18:14:15 -07:00 · 2015-03-25 18:13:29 -07:00 · 2015-03-25 17:56:59 -07:00 · 2015-03-25 17:47:56 -07:00 · 2015-03-25 17:39:44 -07:00
@@ -22,13 +22,14 @@ To get started, check out <http://getbootstrap.com>!

 ## Quick start

-Five quick start options are available:
+Several quick start options are available:

 - [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.3.4.zip).
 - Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
 - Install with [Bower](http://bower.io): `bower install bootstrap`.
 - Install with [npm](https://www.npmjs.com): `npm install bootstrap`.
- Install with [Meteor](https://www.meteor.com/): `meteor add twbs:bootstrap`.
+- Install with [Meteor](https://www.meteor.com): `meteor add twbs:bootstrap`.
+- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap`.

 Read the [Getting started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.

@@ -774,7 +774,10 @@ if (typeof jQuery === 'undefined') {
    if (!isActive) {
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
-        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
+        $(document.createElement('div'))
+          .addClass('dropdown-backdrop')
+          .insertAfter($(this))
+          .on('click', clearMenus)
      }

      var relatedTarget = { relatedTarget: this }
@@ -836,6 +839,8 @@ if (typeof jQuery === 'undefined') {

      if (!$parent.hasClass('open')) return

+      if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
+
      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))

      if (e.isDefaultPrevented()) return
@@ -1092,7 +1097,8 @@ if (typeof jQuery === 'undefined') {
    if (this.isShown && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

-      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+      this.$backdrop = $(document.createElement('div'))
+        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

      this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
@@ -33,7 +33,7 @@
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -88,7 +88,7 @@
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
@@ -173,7 +173,7 @@
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -218,7 +218,7 @@
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -247,7 +247,7 @@
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -272,7 +272,7 @@
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -308,7 +308,7 @@
      <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -352,7 +352,7 @@ body { padding-top: 70px; }
      <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -397,7 +397,7 @@ body { padding-bottom: 70px; }
      <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
      <div class="container-fluid">
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -433,7 +433,7 @@ body { padding-bottom: 70px; }
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -54,6 +54,10 @@
    <li><code>style</code> - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li>
  </ul>

+  <h2 id="download-composer">Install with Composer</h2>
+  <p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="https://getcomposer.org">Composer</a>:</p>
+  {% highlight bash %}$ composer require twbs/bootstrap{% endhighlight %}
+
  <h2 id="download-autoprefixer">Autoprefixer required for Less/Sass</h2>
  <p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> to deal with <a href="http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm">CSS vendor prefixes</a>. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.</p>
 </div>
@@ -19,7 +19,7 @@

  <div class="bs-example">
    <p>
-      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+      <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Link with href
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
@@ -33,7 +33,7 @@
    </div>
  </div>
 {% highlight html %}
-<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
 </a>
 <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
@@ -54,7 +54,7 @@
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
-            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </a>
          </h4>
@@ -68,7 +68,7 @@
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
-            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
            </a>
          </h4>
@@ -82,7 +82,7 @@
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
-            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
            </a>
          </h4>
@@ -100,7 +100,7 @@
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
-        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
@@ -114,7 +114,7 @@
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
-        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
@@ -128,7 +128,7 @@
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
-        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
@@ -148,7 +148,7 @@
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
        <h4 class="panel-title">
-          <a class="collapsed" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1">
+          <a class="collapsed" role="button" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1">
            Collapsible list group
          </a>
        </h4>
@@ -476,7 +476,7 @@ $('#myModal').modal({
  <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
  {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}

-  <h4>.modal('handleUpdate')</h4>
+  <h4><code>.modal('handleUpdate')</code></h4>
  <p>Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.</p>
  <p>Only needed when the height of the modal changes while it is open.</p>
  {% highlight js %}$('#myModal').modal('handleUpdate'){% endhighlight %}
@@ -4,7 +4,7 @@
  <h2 id="tabs-examples">Example tabs</h2>
  <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
  <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
-    <ul id="myTab" class="nav nav-tabs" role="tablist">
+    <ul id="myTabs" class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
      <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
      <li role="presentation" class="dropdown">
@@ -41,7 +41,7 @@
  <p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>

 {% highlight js %}
-$('#myTab a').click(function (e) {
+$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
 })
@@ -50,10 +50,10 @@ $('#myTab a').click(function (e) {
  <p>You can activate individual tabs in several ways:</p>

 {% highlight js %}
-$('#myTab a[href="#profile"]').tab('show') // Select tab by name
-$('#myTab a:first').tab('show') // Select first tab
-$('#myTab a:last').tab('show') // Select last tab
-$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
+$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
+$('#myTabs a:first').tab('show') // Select first tab
+$('#myTabs a:last').tab('show') // Select last tab
+$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
 {% endhighlight %}

  <h3>Markup</h3>
@@ -94,29 +94,12 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
  <h3 id="tabs-methods">Methods</h3>
  <h4><code>$().tab</code></h4>
  <p>
-    Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
+    Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM. In the above examples, the tabs are the <code>&lt;a&gt;</code>s with <code>data-toggle="tab"</code> attributes.
  </p>
-{% highlight html %}
-<ul class="nav nav-tabs" role="tablist" id="myTab">
-  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
-  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
-  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
-  <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
-</ul>

-<div class="tab-content">
-  <div role="tabpanel" class="tab-pane active" id="home">...</div>
-  <div role="tabpanel" class="tab-pane" id="profile">...</div>
-  <div role="tabpanel" class="tab-pane" id="messages">...</div>
-  <div role="tabpanel" class="tab-pane" id="settings">...</div>
-</div>
-
-<script>
-  $(function () {
-    $('#myTab a:last').tab('show')
-  })
-</script>
-{% endhighlight %}
+  <h4><code>.tab('show')</code></h4>
+  <p>Selects the given tab and shows its associated content. Any other tab that was previously selected becomes unselected and its associated content is hidden.</p>
+  {% highlight js %}$('#someTab').tab('show'){% endhighlight %}

  <h3 id="tabs-events">Events</h3>
  <p>When showing a new tab, the events fire in the following order:</p>
@@ -68,18 +68,6 @@ $(function () {
 {% endhighlight %}

  </div>
-  <div class="bs-callout bs-callout-warning" id="callout-tooltip-groups">
-    <h4>Tooltips in button groups and input groups require special setting</h4>
-    <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
-  </div>
-  <div class="bs-callout bs-callout-warning" id="callout-tooltip-hidden">
-    <h4>Don't try to show tooltips on hidden elements</h4>
-    <p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
-  </div>
-  <div class="bs-callout bs-callout-info" id="callout-tooltip-disabled">
-    <h4>Tooltips on disabled elements require wrapper elements</h4>
-    <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p>
-  </div>

  <h2 id="tooltips-usage">Usage</h2>
  <p>The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.</p>
@@ -90,10 +78,7 @@ $('#example').tooltip(options)

  <h3>Markup</h3>
  <p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
-  <div class="bs-callout bs-callout-warning" id="callout-tooltip-multiline">
-    <h4>Multiple-line links</h4>
-    <p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
-  </div>
+
 {% highlight html %}
 <!-- HTML to write -->
 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
@@ -107,6 +92,27 @@ $('#example').tooltip(options)
 </div>
 {% endhighlight %}

+  <div class="bs-callout bs-callout-warning" id="callout-tooltip-multiline">
+    <h4>Multiple-line links</h4>
+    <p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
+  </div>
+  <div class="bs-callout bs-callout-warning" id="callout-tooltip-groups">
+    <h4>Tooltips in button groups and input groups require special setting</h4>
+    <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
+  </div>
+  <div class="bs-callout bs-callout-warning" id="callout-tooltip-hidden">
+    <h4>Don't try to show tooltips on hidden elements</h4>
+    <p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
+  </div>
+  <div class="bs-callout bs-callout-warning" id="callout-tooltip-accessibility">
+    <h4>Accessible tooltips for keyboard and assistive technology users</h4>
+    <p>For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a <code>tabindex="0"</code> attribute.</p>
+  </div>
+  <div class="bs-callout bs-callout-info" id="callout-tooltip-disabled">
+    <h4>Tooltips on disabled elements require wrapper elements</h4>
+    <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p>
+  </div>
+
  <h3 id="tooltips-options">Options</h3>
  <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <div class="table-responsive">
@@ -3,6 +3,13 @@

  <h2>About transitions</h2>
  <p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this&mdash;it's already there.</p>
+
  <h2>What's inside</h2>
  <p>Transition.js is a basic helper for <code>transitionEnd</code> events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
+
+  <h2>Disabling transitions</h2>
+  <p>Transitions can be globally disabled using the following JavaScript snippet, which must come after <code>transition.js</code> (or <code>bootstrap.js</code> or <code>bootstrap.min.js</code>, as the case may be) has loaded:</p>
+{% highlight js %}
+$.support.transition = false
+{% endhighlight %}
 </div>
@@ -1,7 +1,7 @@
 <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
-      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
+      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
@@ -9,7 +9,7 @@
      </button>
      <a href="../" class="navbar-brand">Bootstrap</a>
    </div>
-    <nav class="collapse navbar-collapse bs-navbar-collapse">
+    <nav id="bs-navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
          <a href="../getting-started/">Getting started</a>
@@ -774,7 +774,10 @@ if (typeof jQuery === 'undefined') {
    if (!isActive) {
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
-        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
+        $(document.createElement('div'))
+          .addClass('dropdown-backdrop')
+          .insertAfter($(this))
+          .on('click', clearMenus)
      }

      var relatedTarget = { relatedTarget: this }
@@ -836,6 +839,8 @@ if (typeof jQuery === 'undefined') {

      if (!$parent.hasClass('open')) return

+      if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
+
      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))

      if (e.isDefaultPrevented()) return
@@ -1092,7 +1097,8 @@ if (typeof jQuery === 'undefined') {
    if (this.isShown && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

-      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+      this.$backdrop = $(document.createElement('div'))
+        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

      this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
@@ -80,6 +80,10 @@ lead: "Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on m
          <td><code>.btn-large</code></td>
          <td><code>.btn-lg</code></td>
        </tr>
+        <tr>
+          <td><code>.alert</code></td>
+          <td><code>.alert .alert-warning</code></td>
+        </tr>
        <tr>
          <td><code>.alert-error</code></td>
          <td><code>.alert-danger</code></td>
@@ -34,7 +34,10 @@
    if (!isActive) {
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
-        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
+        $(document.createElement('div'))
+          .addClass('dropdown-backdrop')
+          .insertAfter($(this))
+          .on('click', clearMenus)
      }

      var relatedTarget = { relatedTarget: this }
@@ -96,6 +99,8 @@

      if (!$parent.hasClass('open')) return

+      if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
+
      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))

      if (e.isDefaultPrevented()) return
@@ -190,7 +190,8 @@
    if (this.isShown && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

-      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+      this.$backdrop = $(document.createElement('div'))
+        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

      this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
@@ -82,7 +82,7 @@ $(function () {
    assert.expect(1)
    var done = assert.async()

-    var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
+    var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')

    $('<div id="test1"/>')
      .appendTo('#qunit-fixture')
@@ -98,7 +98,7 @@ $(function () {
    assert.expect(1)
    var done = assert.async()

-    var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
+    var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')

    $('<div id="test1" class="in"/>')
      .appendTo('#qunit-fixture')
@@ -114,8 +114,8 @@ $(function () {
    assert.expect(2)
    var done = assert.async()

-    var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
-    var $alt = $('<a data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
+    var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
+    var $alt = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')

    $('<div id="test1"/>')
      .appendTo('#qunit-fixture')
@@ -132,8 +132,8 @@ $(function () {
    assert.expect(2)
    var done = assert.async()

-    var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
-    var $alt = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
+    var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
+    var $alt = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')

    $('<div id="test1" class="in"/>')
      .appendTo('#qunit-fixture')
@@ -215,15 +215,15 @@ $(function () {
        + '</div>'
    var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')

-    var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
+    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))

    $('<div id="body1" class="in"/>').appendTo($groups.eq(0))

-    var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
+    var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))

    $('<div id="body2"/>').appendTo($groups.eq(1))

-    var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
+    var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))

    $('<div id="body3"/>')
      .appendTo($groups.eq(2))
@@ -249,15 +249,15 @@ $(function () {
        + '</div>'
    var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')

-    var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
+    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))

    $('<div id="body1" class="in"/>').appendTo($groups.eq(0))

-    var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
+    var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))

    $('<div id="body2"/>').appendTo($groups.eq(1))

-    var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"/>').appendTo($groups.eq(2))
+    var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent=".accordion"/>').appendTo($groups.eq(2))

    $('<div id="body3"/>')
      .appendTo($groups.eq(2))
@@ -276,7 +276,7 @@ $(function () {
    assert.expect(1)
    var done = assert.async()

-    var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
+    var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')

    $('<div id="test1"/>')
      .appendTo('#qunit-fixture')
@@ -292,7 +292,7 @@ $(function () {
    assert.expect(1)
    var done = assert.async()

-    var $target = $('<a data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
+    var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')

    $('<div id="test1" class="in"/>')
      .appendTo('#qunit-fixture')
@@ -308,8 +308,8 @@ $(function () {
    assert.expect(2)
    var done = assert.async()

-    var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
-    var $alt = $('<a data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
+    var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
+    var $alt = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')

    $('<div id="test1"/>')
      .appendTo('#qunit-fixture')
@@ -326,8 +326,8 @@ $(function () {
    assert.expect(2)
    var done = assert.async()

-    var $target = $('<a data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
-    var $alt = $('<a data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
+    var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
+    var $alt = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')

    $('<div id="test1" class="in"/>')
      .appendTo('#qunit-fixture')
@@ -351,15 +351,15 @@ $(function () {
        + '</div>'
    var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')

-    var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
+    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))

    $('<div id="body1" aria-expanded="true" class="in"/>').appendTo($groups.eq(0))

-    var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
+    var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))

    $('<div id="body2" aria-expanded="false"/>').appendTo($groups.eq(1))

-    var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
+    var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))

    $('<div id="body3" aria-expanded="false"/>')
      .appendTo($groups.eq(2))
@@ -385,7 +385,7 @@ $(function () {
    var showFired = false
    var $groups   = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')

-    var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
+    var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))

    $('<div id="body1" class="collapse"/>')
      .appendTo($groups.eq(0))
@@ -393,7 +393,7 @@ $(function () {
        showFired = true
      })

-    var $target2 = $('<a data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
+    var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
    var $body2   = $('<div id="body2" class="collapse"/>').appendTo($groups.eq(1))

    $target2.trigger('click')
@@ -414,7 +414,7 @@ $(function () {
    assert.expect(1)
    var done = assert.async()

-    var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
+    var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')

    $('<div id="test1" class="in"/>')
      .appendTo('#qunit-fixture')
@@ -429,7 +429,7 @@ $(function () {
    assert.expect(1)
    var done = assert.async()

-    var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
+    var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')

    $('<div id="test1"/>')
      .appendTo('#qunit-fixture')
@@ -350,4 +350,42 @@ $(function () {

    assert.ok(!$(document.activeElement).parent().is('.disabled'), '.disabled is not focused')
  })
+
+  QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {
+    assert.expect(1)
+    var dropdownHTML = '<div class="btn-group">'
+        + '<button type="button" data-toggle="dropdown">Dropdown</button>'
+        + '<ul class="dropdown-menu" role="menu">'
+        + '<li><input id="textField" type="text" /></li>'
+        + '</ul>'
+        + '</div>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+      .trigger('click')
+
+    $('#textField').trigger('click')
+
+    assert.ok($dropdown.parent('.btn-group').hasClass('open'), 'dropdown menu is open')
+  })
+
+  QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
+    assert.expect(1)
+    var dropdownHTML = '<div class="btn-group">'
+        + '<button type="button" data-toggle="dropdown">Dropdown</button>'
+        + '<ul class="dropdown-menu" role="menu">'
+        + '<li><textarea id="textArea"></textarea></li>'
+        + '</ul>'
+        + '</div>'
+    var $dropdown = $(dropdownHTML)
+      .appendTo('#qunit-fixture')
+      .find('[data-toggle="dropdown"]')
+      .bootstrapDropdown()
+      .trigger('click')
+
+    $('#textArea').trigger('click')
+
+    assert.ok($dropdown.parent('.btn-group').hasClass('open'), 'dropdown menu is open')
+  })
 })
@@ -26,7 +26,7 @@
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
-          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            Collapsible Group Item #1
          </a>
        </h4>
@@ -40,7 +40,7 @@
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
-          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
            Collapsible Group Item #2
          </a>
        </h4>
@@ -54,7 +54,7 @@
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
-          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
            Collapsible Group Item #3
          </a>
        </h4>
@@ -76,7 +76,7 @@
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
-                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                  </a>
                </h4>
@@ -90,7 +90,7 @@
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
-                  <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                  </a>
                </h4>
@@ -25,28 +25,12 @@
      line-height: 1;
    }

-    // WebKit CSS3 transforms for supported devices
-    @media all and (transform-3d), (-webkit-transform-3d) {
-      .transition-transform(~'0.6s ease-in-out');
-      .backface-visibility(~'hidden');
-      .perspective(1000);
-
-      &.next,
-      &.active.right {
-        .translate3d(100%, 0, 0);
-        left: 0;
-      }
-      &.prev,
-      &.active.left {
-        .translate3d(-100%, 0, 0);
-        left: 0;
-      }
-      &.next.left,
-      &.prev.right,
-      &.active {
-        .translate3d(0, 0, 0);
-        left: 0;
-      }
+    // CSS3 transforms for supported devices
+    @media all and (transform-3d), (-webkit-transform-3d) { // WebKit, old Blink
+      .carousel-css3-transforms();
+    }
+    @supports (transform: translate3d(0,0,0)) { // Firefox, recent Blink
+      .carousel-css3-transforms();
    }
  }

@@ -18,6 +18,7 @@
 // Components
@import "mixins/alerts.less";
@import "mixins/buttons.less";
+@import "mixins/carousel.less";
@import "mixins/panels.less";
@import "mixins/pagination.less";
@import "mixins/list-group.less";
@@ -0,0 +1,22 @@
+.carousel-css3-transforms() {
+  .transition-transform(~'0.6s ease-in-out');
+  .backface-visibility(~'hidden');
+  .perspective(1000);
+
+  &.next,
+  &.active.right {
+    .translate3d(100%, 0, 0);
+    left: 0;
+  }
+  &.prev,
+  &.active.left {
+    .translate3d(-100%, 0, 0);
+    left: 0;
+  }
+  &.next.left,
+  &.prev.right,
+  &.active {
+    .translate3d(0, 0, 0);
+    left: 0;
+  }
+}
@@ -76,18 +76,12 @@
  ],
  "jspm": {
    "main": "js/bootstrap",
-    "directories": {
-      "example": "examples",
-      "lib": "dist"
-    },
    "shim": {
      "js/bootstrap": {
-        "imports": "jquery",
+        "deps": "jquery",
        "exports": "$"
      }
    },
-    "buildConfig": {
-      "uglify": true
-    }
+    "files": ["css", "fonts", "js"]
  }
 }
Autor	SHA1	Mensagem	Data
Chris Rebert	18e1bfa662	Carousel: Add @supports 3D transforms feature query; fixes #15534	2015-03-25 18:38:33 -07:00
Chris Rebert	d6714d1383	Merge pull request #16157 from twbs/fix-16069 Document how to disable transitions in jQuery plugins	2015-03-25 18:14:15 -07:00
Chris Rebert	e3c10d0d01	Merge pull request #16156 from twbs/fix-16115 Properly document $(...).tab('show') method	2015-03-25 18:13:29 -07:00
Chris Rebert	e8a5112b31	Document how to disable transitions in jQuery plugins; fixes #16069 [skip sauce]	2015-03-25 17:56:59 -07:00
Chris Rebert	343827081f	Properly document $(...).tab('show') method; fixes #16115 [skip sauce]	2015-03-25 17:47:56 -07:00
Chris Rebert	1bafd4c829	docs: #myTab => #myTabs, to slightly increase clarity	2015-03-25 17:39:44 -07:00
Chris Rebert	2f3076f20a	add missing <code> within docs heading for `.modal('handleUpdate')`	2015-03-24 15:15:21 -07:00
Chris Rebert	d37bc2ae65	Merge pull request #15987 from twbs/fix-15972 add role="button" to a[data-toggle="collapse"]	2015-03-24 08:57:56 -07:00
Patrick H. Lauke	3685aff68f	Merge pull request #16140 from patrickhlauke/toggle-navigation-aria-expanded Add aria-expanded to navbar toggles	2015-03-24 10:48:36 +00:00
Patrick H. Lauke	04280335f6	Add aria-expanded and aria-controls to docs navbar toggle Also, use id rather class name for the navigation, as it's unique and lets us use correct aria-controls (and without the use of id, aria-expanded does not get updated correctly by the current dropdown toggle script)	2015-03-24 10:32:53 +00:00
Patrick H. Lauke	dc4aa004d4	Add aria-expanded to navbar toggles	2015-03-24 10:30:12 +00:00
Patrick H. Lauke	13546cac35	Merge pull request #16136 from patrickhlauke/docs-tooltip Callout for tooltips and keyboard/AT accessibility	2015-03-23 22:18:39 +00:00
Patrick H. Lauke	6c2548e031	Move all tooltip callouts into appropriate section Before, most callouts hierarchically came under Examples > Four directions, which is not appropriate. Now they're under Markup	2015-03-23 22:06:22 +00:00
Patrick H. Lauke	debcb1de59	Callout for tooltips and keyboard/AT accessibility Include callout explicitly mentioning tooltips should only be added to focusable elements. Closes #16134	2015-03-23 21:53:30 +00:00
Bootstrap's Grunt bot	e22a73fd38	automatic `grunt dist`	2015-03-21 23:10:30 +00:00
Emmanuel Bourgerie	fa9d28b634	Fix #16072 : Clicking into input field within dropdown no longer closes the dropdown Closes #16073 by merging it	2015-03-21 16:00:15 -07:00
Chris Rebert	74ae498800	Fix #16117 more permanently/generically	2015-03-21 15:33:13 -07:00
Patrick H. Lauke	777c013997	Merge pull request #16117 from vsn4ik/inc_quick_start Increment quick start options to six in readme.md	2015-03-21 10:11:47 +00:00
vsn4ik	a07bc07889	Increment quick start options to six [skip validator] [skip sauce]	2015-03-21 08:21:39 +03:00
Rodrigo Prado	fbe0836a8f	Add docs on how to install Bootstrap via composer Closes #16113 Closes #16114 [skip sauce]	2015-03-20 18:42:03 -07:00
Chris Rebert	fb74d72764	Merge pull request #16107 from vikynandha/migration-doc Add `.alert-warning` related change to migration doc	2015-03-19 10:03:48 -07:00
Vignesh Nandha Kumar	5281d7b4bc	Add `.alert-warning` related change to migration doc	2015-03-19 17:27:38 +05:30
Bootstrap's Grunt bot	eece194763	automatic `grunt dist`	2015-03-19 05:30:30 +00:00
Chris Rebert	9aad9a4164	Merge pull request #16024 from twbs/unnecessary-parsing avoid unnecessary HTML string building+parsing	2015-03-18 22:28:07 -07:00
Chris Rebert	cb4144af85	Merge pull request #16101 from guybedford/master Update jspm configuration	2015-03-18 22:04:54 -07:00
Guy Bedford	09ccd432b8	update jspm configuration	2015-03-18 12:59:55 +02:00
Bootstrap's Grunt bot	f5250d0a0e	automatic `grunt dist`	2015-03-16 15:50:28 +00:00
Chris Rebert	a14665e73e	avoid unnecessary HTML string building+parsing	2015-03-09 06:47:34 -07:00
Chris Rebert	cc39f5c52d	add role="button" to a[data-toggle="collapse"]; fixes #15972	2015-03-03 13:18:36 -08:00