4 Bootstrap 4コンポーネント-警告プロンプトボックス(alert)

4 Bootstrap 4コンポーネント-警告プロンプトボックス(alert)

警告ボックススタイル

1、ベーススタイル

2、内部ハイパーリンク色

3、追加情報

2警告ボックス組立体

1、`data-dismiss="alert"`

を使用

2、使用スクリプト

警告プロンプト・ボックス・コンポーネントは、柔軟な事前定義メッセージを提供することによって、一般的なユーザー・アクションに一般的な上下フィードバック・メッセージとプロンプトを提供します.
1警告ボックススタイル
1、基礎スタイル
警告ボックスは、任意の長さのテキストに使用できるカラーコントロールのセット(8つのカラースタイル)、オプションの閉じるボタンのセットです.システムは、(.alert-successなど)8つの正しいスタイルを提供します.

<div class="alert alert-primary" role="alert">
Bootstrap v4.0
div>
<div class="alert alert-secondary" role="alert">
  Bootstrap v4.0
div>
<div class="alert alert-success" role="alert">
 Bootstrap v4.0
div>
<div class="alert alert-danger" role="alert">
 Bootstrap v4.0
div>
<div class="alert alert-warning" role="alert">
Bootstrap v4.0
div>
<div class="alert alert-info" role="alert">
 Bootstrap v4.0
div>
<div class="alert alert-light" role="alert">
Bootstrap v4.0
div>
<div class="alert alert-dark" role="alert">
 Bootstrap v4.0
div>

2、内部ハイパーリンクの色
使用するAlert-linkクラスは、色付き警告テキストボックスのリンクに適切な色を付けることができます(BootStrapには適切な色ソリューションが内蔵されており、最適化されたリンク色ソリューションが自動的に対応します).

<div class="alert alert-primary" role="alert">
 <a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-secondary" role="alert">
  <a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-light" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-dark" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>

3、追加情報
警告ボックスには、タイトル、段落、水平区切りなどの他のHTML要素も含まれます.

<div class="alert alert-primary" role="alert">
 	<h4 class="alert-heading">Bootstrap V4.0h4>
 	<hr>
 	<p>        ：Bootstrap V4.0p>
div>

2警告ボックスコンポーネント.alertとJavaScriptを組み合わせることで、アラーム効果を実現し、ページに貼り付け、自由に閉じることができます.そのポイントは以下の通りです.

は、.alertアラートコンポーネントまたはコンパイルされたBootstrap JavaScriptコードグループを正しくロードしていることを確認します.

JavaScriptコンポーネントを自分でコンパイルする場合は、必要なutilを使用します.jsは含まれています.

は、右上隅に.closeの閉じるボタン効果を定義することができ、.alert-dismissibleクラスをコンテナで参照する必要がある.

警告ボタンには、data-dismiss="alert"を追加してJavaScript動作をトリガし、 要素を使用して、すべてのデバイスで正しい動作応答が得られるようにします.

アラートを閉じるときにアラートプロンプトを生成するには、.fadeおよび.showスタイルが追加されていることを確認します.

1、使用data-dismiss="alert"

 <div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>  ：strong>     Bootstrap V4.0……
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×span>
  button>
div>

注意:

data-dismiss="alert"親要素閉鎖

を実現

.fade .show閉鎖後のフェードアウト効果

を実現した.
2、スクリプトの使用
スクリプトを直接使用して閉じることもできます.コードは次のとおりです.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>  ：strong>     Bootstrap V4.0……
  <button type="button" class="close" >
    <span aria-hidden="true">×span>
  button>
div>

<script type="text/javascript">
	$(".close").click(function(){
		$(".alert").alert("close")
	});
</script>