Consolidate alerts docs into single page

diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index f11f8fbfa2f6faada1c3143b7a576f914cd7391d..bae46ee9129a43efe5765b6065db1b8515dc44c4 100644 (file)
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -64,3 +64,94 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
   <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
 </div>
 {% endexample %}
+
+
+## Examples
+
+{% example html %}
+<div class="alert alert-warning alert-dismissible fade in" role="alert">
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+    <span class="sr-only">Close</span>
+  </button>
+  <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
+</div>
+{% endexample %}
+
+When using a `.close` button, it must be the first child of the `.alert-dismissible` and no text content may come before it in the markup.
+
+{% example html %}
+<div class="alert alert-danger alert-dismissible fade in" role="alert">
+  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+  <h5 class="alert-heading">Sorry, something went wrong.</h5>
+  <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
+  <p>
+    <button type="button" class="btn btn-danger">Take this action</button>
+    <button type="button" class="btn btn-secondary">Or do this</button>
+  </p>
+</div>
+{% endexample %}
+
+## Usage
+
+Enable dismissal of an alert via JavaScript:
+
+{% highlight js %}
+$(".alert").alert()
+{% endhighlight %}
+
+### Markup
+
+Just add `data-dismiss="alert"` to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.
+
+{% highlight html %}
+<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+  <span aria-hidden="true">&times;</span>
+  <span class="sr-only">Close</span>
+</button>
+{% endhighlight %}
+
+To have your alerts use animation when closing, make sure they have the `.fade` and `.in` classes already applied to them.
+
+### Methods
+
+#### $().alert()
+
+Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.)
+
+#### $().alert('close')
+
+Closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, the alert will fade out before it is removed.
+
+{% highlight js %}$(".alert").alert('close'){% endhighlight %}
+
+### Events
+
+Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
+
+<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>close.bs.alert</td>
+        <td>This event fires immediately when the <code>close</code> instance method is called.</td>
+      </tr>
+      <tr>
+        <td>closed.bs.alert</td>
+        <td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% highlight js %}
+$('#myAlert').on('closed.bs.alert', function () {
+  // do something…
+})
+{% endhighlight %}

diff --git a/docs/javascript/alerts.md b/docs/javascript/alerts.md
deleted file mode 100644 (file)
index 9b677a7..0000000
--- a/docs/javascript/alerts.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-layout: page
-title: Alerts
----
-
-Add dismiss functionality to all alert messages with this plugin.
-
-## Examples
-
-{% example html %}
-<div class="alert alert-warning alert-dismissible fade in" role="alert">
-  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-    <span aria-hidden="true">&times;</span>
-    <span class="sr-only">Close</span>
-  </button>
-  <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
-</div>
-{% endexample %}
-
-When using a `.close` button, it must be the first child of the `.alert-dismissible` and no text content may come before it in the markup.
-
-{% example html %}
-<div class="alert alert-danger alert-dismissible fade in" role="alert">
-  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-  <h5 class="alert-heading">Sorry, something went wrong.</h5>
-  <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
-  <p>
-    <button type="button" class="btn btn-danger">Take this action</button>
-    <button type="button" class="btn btn-secondary">Or do this</button>
-  </p>
-</div>
-{% endexample %}
-
-## Usage
-
-Enable dismissal of an alert via JavaScript:
-
-{% highlight js %}
-$(".alert").alert()
-{% endhighlight %}
-
-### Markup
-
-Just add `data-dismiss="alert"` to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.
-
-{% highlight html %}
-<button type="button" class="close" data-dismiss="alert" aria-label="Close">
-  <span aria-hidden="true">&times;</span>
-  <span class="sr-only">Close</span>
-</button>
-{% endhighlight %}
-
-To have your alerts use animation when closing, make sure they have the `.fade` and `.in` classes already applied to them.
-
-### Methods
-
-#### $().alert()
-
-Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.)
-
-#### $().alert('close')
-
-Closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, the alert will fade out before it is removed.
-
-{% highlight js %}$(".alert").alert('close'){% endhighlight %}
-
-### Events
-
-Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
-
-<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>close.bs.alert</td>
-        <td>This event fires immediately when the <code>close</code> instance method is called.</td>
-      </tr>
-      <tr>
-        <td>closed.bs.alert</td>
-        <td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-{% highlight js %}
-$('#myAlert').on('closed.bs.alert', function () {
-  // do something…
-})
-{% endhighlight %}