From fad885fd8af42ea77775fce3955f6e6e1fb5ac04 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Mon, 30 Mar 2015 20:50:34 -0700 Subject: [PATCH] Consolidate alerts docs into single page --- docs/components/alerts.md | 91 +++++++++++++++++++++++++++++++++++++ docs/javascript/alerts.md | 96 --------------------------------------- 2 files changed, 91 insertions(+), 96 deletions(-) delete mode 100644 docs/javascript/alerts.md diff --git a/docs/components/alerts.md b/docs/components/alerts.md index f11f8fbfa2..bae46ee912 100644 --- 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">×</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">×</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">×</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 index 9b677a7656..0000000000 --- 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">×</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">×</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">×</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 %} -- GitLab