Bootstrap 基礎トレーニング

Bootstrap プラグイン

Bootstrap 警告

この章では、警告(Alerts)およびBootstrapが提供する警告のclassについて説明します。警告(Alerts)は、ユーザーにメッセージのスタイルを定義する方法を提供します。これらは、典型的なユーザーオペレーションに対する上下文情報フィードバックを提供します。

警告ボックスにオプションの閉じるボタンを追加できます。インラインでキャンセル可能な警告ボックスを作成するには、以下を使用してください：警告(Alerts) jQuery プラグイン。

以下の例がその方法を示しています： .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-dangerの1つとして、基本的な警告ボックスを追加します。以下の例がその方法を示しています：

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　　<title>Bootstrap　示例　-　警告(Alerts)/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-成功！よく提出を完了しました。/div>
<div　class="alert　alert-info">情報！この情報に注意してください。</div>
<div　class="alert　alert-warning">警告！请不要提交。</div>
<div　class="alert　alert-danger">错误！请进行一些更改。</div>
</body>
</html>

テストをしてみる ‹/›

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

可取消的警告（Dismissal Alerts）

创建一个可取消的警告（Dismissal Alert）步骤如下：

通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
同时向上面的 <div> class 添加可选的 .alert-dismissable。
添加一个关闭按钮。

下面的示例演示了这点：

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　可取消的警告（Dismissal　Alerts）</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-success　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	成功！很好地完成了提交。
</div>
<div　class="alert　alert-info　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	信息！请注意这个信息。
</div>
<div　class="alert　alert-warning　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	警告！请不要提交。
</div>
<div　class="alert　alert-danger　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	错误！请进行一些更改。
</div>
</body>
</html>

テストをしてみる ‹/›

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

警告(Alerts)中的链接

在警告(Alerts)中创建链接的步骤如下：

通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

在线示例

示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　警告(Alerts)中的链接</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-success">
	<a　href="#"　class="alert-link">成功！很好地完成了提交。</a>
</div>
<div　class="alert　alert-info">
	<a　href="#"　class="alert-link">情報！この情報に注意してください。</a>
</div>
<div　class="alert　alert-warning">
	<a　href="#"　class="alert-link">警告！提出しないでください。</a>
</div>
<div　class="alert　alert-danger">
	<a　href="#"　class="alert-link">エラー！いくつかの変更を行ってください。</a>
</div>
</body>
</html>

テストをしてみる ‹/›

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

Bootstrap プログレスバー Bootstrap スライダー