Consolidate dropdown docs into single page

diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml
index b65eb6429081cd1562513576415bee2a731c5ee6..8a5477b16a24d3c1186dcc8fb3a0ae7a4e18345d 100644 (file)
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@@ -118,7 +118,6 @@
     - title: Overview
     - title: Transitions
     - title: Modal
-    - title: Dropdowns
     - title: Scrollspy
     - title: Tabs
     - title: Tooltips

diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index 4c4ad61d0fd5ba35eb7c8a2037a931a806578254..efb0f6309f5bb2edb765c8171e54c201cd10dc9e 100644 (file)
--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@@ -3,9 +3,9 @@ layout: page
 title: Dropdowns
 ---
 
-Toggleable, contextual menu for displaying lists of links. Made interactive with the [dropdown JavaScript plugin]({{ site.bsaeurl }}javascript/#dropdowns).
+Toggleable, contextual menu for displaying lists of links. Made interactive with the included dropdown JavaScript plugin.
 
-### Example
+## Example
 
 Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Then add the menu's HTML.
 
@@ -28,7 +28,7 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
 </div>
 {% endexample %}
 
-### Alignment
+## Alignment
 
 By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
 
@@ -43,7 +43,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 </ul>
 {% endhighlight %}
 
-### Menu headers
+## Menu headers
 
 Add a header to label sections of actions in any dropdown menu.
 
@@ -59,7 +59,7 @@ Add a header to label sections of actions in any dropdown menu.
 </ul>
 {% endexample %}
 
-### Menu dividers
+## Menu dividers
 
 Separate groups of related menu items with a divider.
 
@@ -81,7 +81,7 @@ Separate groups of related menu items with a divider.
 </ul>
 {% endexample %}
 
-### Disabled menu items
+## Disabled menu items
 
 Add `.disabled` to a `<li>` in the dropdown to disable the link.
 
@@ -98,3 +98,104 @@ Add `.disabled` to a `<li>` in the dropdown to disable the link.
   </li>
 </ul>
 {% endexample %}
+
+## Usage
+
+Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.open` class on the parent list item.
+
+On mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.**
+
+Note: The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
+
+### Via data attributes
+
+Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
+
+{% highlight html %}
+<div class="dropdown">
+  <button id="dLabel" type="button" data-toggle="dropdown">
+    Dropdown trigger
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+    ...
+  </ul>
+</div>
+{% endhighlight %}
+
+To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`.
+
+{% highlight html %}
+<div class="dropdown">
+  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown">
+    Dropdown trigger
+    <span class="caret"></span>
+  </a>
+
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+    ...
+  </ul>
+</div>
+{% endhighlight %}
+
+### Via JavaScript
+
+Call the dropdowns via JavaScript:
+
+{% highlight js %}
+$('.dropdown-toggle').dropdown()
+{% endhighlight %}
+
+<div class="bs-callout bs-callout-info">
+  <h4><code>data-toggle="dropdown"</code> still required</h4>
+  <p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-toggle="dropdown"</code> is always required to be present on the dropdown's trigger element.</p>
+</div>
+
+### Options
+
+*None.*
+
+### Methods
+
+#### $().dropdown('toggle')
+
+Toggles the dropdown menu of a given navbar or tabbed navigation.
+
+### Events
+
+All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element.
+
+<div class="table-responsive">
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th style="width: 150px;">Event Type</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>show.bs.dropdown</td>
+        <td>This event fires immediately when the show instance method is called.</td>
+      </tr>
+      <tr>
+        <td>shown.bs.dropdown</td>
+        <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
+      </tr>
+      <tr>
+        <td>hide.bs.dropdown</td>
+        <td>This event is fired immediately when the hide instance method has been called.</td>
+      </tr>
+      <tr>
+        <td>hidden.bs.dropdown</td>
+        <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% highlight js %}
+$('#myDropdown').on('show.bs.dropdown', function () {
+  // do something…
+})
+{% endhighlight %}

diff --git a/docs/javascript/dropdowns.md b/docs/javascript/dropdowns.md
deleted file mode 100644 (file)
index b1bda33..0000000
--- a/docs/javascript/dropdowns.md
+++ /dev/null
@@ -1,211 +0,0 @@
----
-layout: page
-title: Dropdowns
----
-
-Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.
-
-### Within navbars
-
-<div class="bs-example">
-  <nav id="navbar-example" class="navbar navbar-default navbar-static">
-    <div class="container-fluid">
-      <div class="navbar-header">
-        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="#">Project Name</a>
-      </div>
-      <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
-        <ul class="nav navbar-nav">
-          <li class="dropdown">
-            <button id="drop1" type="button" class="dropdown-toggle" data-toggle="dropdown">
-              Dropdown
-            </button>
-            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-              <li role="presentation" class="divider"></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
-            </ul>
-          </li>
-          <li class="dropdown">
-            <button id="drop2" type="button" class="dropdown-toggle" data-toggle="dropdown">
-              Dropdown 2
-            </button>
-            <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-              <li role="presentation" class="divider"></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
-            </ul>
-          </li>
-        </ul>
-        <ul class="nav navbar-nav navbar-right">
-          <li id="fat-menu" class="dropdown">
-            <button id="drop3" type="button" class="dropdown-toggle" data-toggle="dropdown">
-              Dropdown 3
-            </button>
-            <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-              <li role="presentation" class="divider"></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
-            </ul>
-          </li>
-        </ul>
-      </div><!-- /.nav-collapse -->
-    </div><!-- /.container-fluid -->
-  </nav> <!-- /navbar-example -->
-</div> <!-- /example -->
-
-### Within pills
-
-<div class="bs-example">
-  <ul class="nav nav-pills" role="tablist">
-    <li role="presentation" class="active"><a href="#">Regular link</a></li>
-    <li role="presentation" class="dropdown">
-      <button id="drop4" type="button" data-toggle="dropdown">
-        Dropdown
-      </button>
-      <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-        <li role="presentation" class="divider"></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
-      </ul>
-    </li>
-    <li role="presentation" class="dropdown">
-      <button id="drop5" type="button" data-toggle="dropdown">
-        Dropdown 2
-      </button>
-      <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-        <li role="presentation" class="divider"></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
-      </ul>
-    </li>
-    <li role="presentation" class="dropdown">
-      <button id="drop6" type="button" data-toggle="dropdown">
-        Dropdown 3
-      </button>
-      <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-        <li role="presentation" class="divider"></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
-      </ul>
-    </li>
-  </ul>
-</div>
-
-## Usage
-
-Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.open` class on the parent list item.
-
-On mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.**
-
-Note: The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
-
-### Via data attributes
-
-Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
-
-{% highlight html %}
-<div class="dropdown">
-  <button id="dLabel" type="button" data-toggle="dropdown">
-    Dropdown trigger
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-    ...
-  </ul>
-</div>
-{% endhighlight %}
-
-To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`.
-
-{% highlight html %}
-<div class="dropdown">
-  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown">
-    Dropdown trigger
-    <span class="caret"></span>
-  </a>
-
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-    ...
-  </ul>
-</div>
-{% endhighlight %}
-
-### Via JavaScript
-
-Call the dropdowns via JavaScript:
-
-{% highlight js %}
-$('.dropdown-toggle').dropdown()
-{% endhighlight %}
-
-<div class="bs-callout bs-callout-info">
-  <h4><code>data-toggle="dropdown"</code> still required</h4>
-  <p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-toggle="dropdown"</code> is always required to be present on the dropdown's trigger element.</p>
-</div>
-
-### Options
-
-*None.*
-
-### Methods
-
-#### $().dropdown('toggle')
-
-Toggles the dropdown menu of a given navbar or tabbed navigation.
-
-### Events
-
-All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element.
-
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 150px;">Event Type</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>show.bs.dropdown</td>
-        <td>This event fires immediately when the show instance method is called.</td>
-      </tr>
-      <tr>
-        <td>shown.bs.dropdown</td>
-        <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
-      </tr>
-      <tr>
-        <td>hide.bs.dropdown</td>
-        <td>This event is fired immediately when the hide instance method has been called.</td>
-      </tr>
-      <tr>
-        <td>hidden.bs.dropdown</td>
-        <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% highlight js %}
-$('#myDropdown').on('show.bs.dropdown', function () {
-  // do something…
-})
-{% endhighlight %}