Bootstrap 基礎教程

Bootstrap プラグイン

Bootstrap 警告框（Alert）プラグイン

警告框(Alert)メッセージは、一般的にエンドユーザーに警告や確認メッセージなどの情報を表示するために使用されます。警告框(Alert)プラグインを使用すると、すべての警告框メッセージにキャンセル（ dismiss ）機能を追加できます。

使い方

警告框のキャンセル（ dismissal ）機能を有効にする方法は以下の2種類があります：

データ属性を使用して：データAPI（Data API）を使用してキャンセル可能機能を追加するには、閉じるボタンに以下を追加してください： data-dismiss="alert"、警告ボックスに自動的に閉じる機能が追加されます。
```
<a　data-dismiss="alert"　href="#"　aria-hidden="true">
　　　　×
</a>
```
JavaScriptを使用して：JavaScriptを使用してキャンセル可能機能を追加：
```
$(".alert").alert()
```

オンラインサンプル

以下の例では、data属性を介して警告框(Alert)プラグインの使用法を示しています。

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　警告框(Alert)プラグイン</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="alert　alert-warning">
	<a　href="#"　class="close"　data-dismiss="alert">
		×
	</a>
	<strong>警告！</strong>/<strong>ネットワーク接続に問題があります。</strong>
</div>
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

オプション

オプションはありません。

メソッド

以下は、警告框(Alert)プラグインで役立つメソッドの一部です：

メソッド	説明	サンプル
.alert()	このメソッドは、すべての警告ボックスに閉じる機能を追加します。	$('#identifier').alert();
閉じるメソッド .alert('close')	すべての警告ボックスを閉じます。	$('#identifier').alert('close');

アニメーション効果をオンにする場合、以下を追加してください： .fade および .in class。

オンラインサンプル

以下の例では、 .alert() 方法の使い方：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　サンプル　-　>警告框(Alert)插件　alert()　方法</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>警告框(Alert)插件　alert()　方法</h2>
<div　id="myAlert"　class="alert　alert-success">
　　　　<a　href="#"　class="close"　data-dismiss="alert">×</a>
　　　　成功！</結果は成功しました。
</div>
<div　id="myAlert2"　class="alert　alert-warning">
　　　　<a　href="#"　class="close"　data-dismiss="alert">×</a>
　　　　<strong>警告！</strong>/<strong>ネットワーク接続に問題があります。</strong>
</div>
　
<script>
$(function(){
　　　　$(".close").click(function(){
　　　　　　　　$("#myAlert").alert();
　　　　　　　　$("#myAlert2").alert();
　　　　});
});
</script>
</body>
</html>

テストをしてみる‹/›

以下の例では、 .alert('close') 方法の使い方：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　サンプル　-　>警告框(Alert)插件　alert('close')　方法</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>警告框(Alert)插件　alert('close')　方法</h2>
<div　id="myAlert"　class="alert　alert-success">
　　　　<a　href="#"　class="close"　data-dismiss="alert">×</a>
　　　　成功！</結果は成功しました。
</div>
<div　id="myAlert2"　class="alert　alert-warning">
　　　　<a　href="#"　class="close"　data-dismiss="alert">×</a>
　　　　<strong>警告！</strong>/<strong>ネットワーク接続に問題があります。</strong>
</div>
　
<script>
$(function(){
　　　　$(".close").click(function(){
　　　　　　　　$("#myAlert").alert('close');
　　　　　　　　$("#myAlert2").alert('close');
　　　　});
});
</script>
</body>
</html>

テストをしてみる‹/›

すべての警告ボックスに閉じる機能が適用されています。つまり、任意の警告ボックスを閉じると、残りの警告ボックスも閉じられます。

イベント

以下のテーブルには、警告ボックス(Alert)プラグインで使用されるイベントが示されています。これらのイベントは、関数内でフックとして使用できます。

イベント	説明	サンプル
close.bs.alert	close.bs.alertが呼び出されたときに、 close サンプルメソッドが実行されるとすぐにこのイベントがトリガーされます。	$('#myalert').bind('close.bs.alert',　function　()　{ 　　//　アクションを実行します... )
closed.bs.alert	警告ボックスが閉じられた際にこのイベントがトリガーされます（CSSのトランジション効果が完了するまで待機します）。	$('#myalert').bind('closed.bs.alert',　function　()　{ 　　　　//　アクションを実行します... )

オンラインサンプル

以下のサンプルでは、警告ボックス(Alert)プラグインのイベントを示しています：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　警告ボックス(Alert)プラグインのイベント</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　id="myAlert"　class="alert　alert-success">
	<a　href="#"　class="close"　data-dismiss="alert">×</a>
	成功！</結果は成功しました。
</div>
<script type="text/javascript">
$(function(){
	$("#myAlert").bind('closed.bs.alert', function () {
		alert("警告メッセージボックスが閉じられました。");
	});
});
</script>　　
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

Bootstrap ボタンプラグイン Bootstrap アラートプラグイン