rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

markdownify js alerts

Browse Source
This commit is contained in:
Mark Otto 2014-07-13 00:53:59 -07:00
parent d1f699765e
commit 5a823fba7e
1 changed files with 72 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
docs/javascript/alerts.md
View File

@ -3,19 +3,21 @@ layout: page
title: Alerts
---
<div class="bs-docs-section">
<h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1>
Add dismiss functionality to all alert messages with this plugin.
<h2 id="alerts-examples">Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
## Examples
{% example html %}
<div class="alert alert-warning 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>
<button type="button" class="close" data-dismiss="alert">
<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>
</div><!-- /example -->
{% endexample %}
<div class="bs-example">
{% 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>
<h4>Oh snap! You got an error!</h4>
@ -25,29 +27,43 @@ title: Alerts
<button type="button" class="btn btn-secondary">Or do this</button>
</p>
</div>
</div><!-- /example -->
{% endexample %}
## Usage
<h2 id="alerts-usage">Usage</h2>
<p>Enable dismissal of an alert via JavaScript:</p>
{% highlight js %}$(".alert").alert(){% endhighlight %}
Enable dismissal of an alert via JavaScript:
<h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
{% highlight html %}<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>{% endhighlight %}
{% highlight js %}
$(".alert").alert()
{% endhighlight %}
<h3>Methods</h3>
### Markup
<h4>$().alert()</h4>
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
Just add `data-dismiss="alert"` to your close button to automatically give an alert close functionality.
{% highlight html %}
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
{% endhighlight %}
### Methods
#### $().alert()
Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the `.fade` and `.in` class already applied to them.
#### .alert('close')
Closes an alert.
<h4>.alert('close')</h4>
<p>Closes an alert.</p>
{% highlight js %}$(".alert").alert('close'){% endhighlight %}
### Events
Bootstrap's alert class exposes a few events for hooking into alert functionality.
<h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
@ -67,10 +83,10 @@ title: Alerts
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
</div>
{% highlight js %}
$('#my-alert').on('closed.bs.alert', function () {
// do something…
})
{% endhighlight %}
</div>