Bootstrap4 基本教程

Bootstrap4 情報ポップアップ

Bootstrap 4 情報ポップアップを簡単に実現できます。

警告ポップアップは.alertクラスを使用し、.alertを追加して簡単に情報ポップアップを実現できます。-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lightまたは.alert-darkクラスを使用して実現:

例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap サンプル</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>警告ポップアップ</h2>
　　<p>警告ポップアップは.alertクラスを使用し、特定の意味を持つ色クラスを追加して実現できます:</p>
　　<div　class="alert　alert-success">
　　　　<strong>成功！</<strong>　指定の操作が成功したときの表示情報を設定します。
　　</div>
　　<div　class="alert　alert-info">
　　　　<strong>情報！</<strong>　この情報に注意してください。
　　</div>
　　<div　class="alert　alert-warning">
　　　　<strong>警告！</<strong>　警告情報を設定します。
　　</div>
　　<div　class="alert　alert-danger">
　　　　strong>エラー!/強調してください　失敗した操作
　　</div>
　　<div　class="alert　alert-primary">
　　　　strong>首选!/strong>　重要な操作情報です。
　　</div>
　　<div　class="alert　alert-secondary">
　　　　strong>次要的!/strong>　重要でない情報を表示します。
　　</div>
　　<div　class="alert　alert-dark">
　　　　<strong>濃いグレー!/strong>　濃いグレーのトースト通知。
　　</div>
　　<div　class="alert　alert-light">
　　　　<strong>淡いグレー!/strong>淡いグレーのトースト通知。
　　</div>
</div>
</body>
</html>

テストを見てみる ‹/›

警告ポップアップにリンクを追加

警告ポップアップ内でリンクタグにalert-リンククラスを使用して、一致する警告ポップアップの色を設定するリンク：

例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap サンプル</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>警告ポップアップにリンクを追加</h2>
　　<p>警告ポップアップ内でリンクタグにalert-リンククラスを使用して、一致する警告ポップアップの色を設定するリンク：</p>
　　<div　class="alert　alert-success">
　　　　<strong>成功！</強調してください<a href="#" class="alert-link">この情報</a>。
　　</div>
　　<div　class="alert　alert-info">
　　　　<strong>情報！</強調してください<a href="#" class="alert-link">この情報</a>。
　　</div>
　　<div　class="alert　alert-warning">
　　　　<strong>警告！</強調してください<a href="#" class="alert-link">この情報</a>。
　　</div>
　　<div　class="alert　alert-danger">
　　　　strong>エラー!/強調してください<a href="#" class="alert-link">この情報</a>。
　　</div>
　　<div　class="alert　alert-primary">
　　　　strong>首选!/強調してください<a href="#" class="alert-link">この情報</a>。
　　</div>
　　<div　class="alert　alert-secondary">
　　　　strong>次要的!/強調してください<a href="#" class="alert-link">この情報</a>。
　　</div>
　　<div　class="alert　alert-dark">
　　　　<strong>濃いグレー!/強調してください<a href="#" class="alert-link">この情報</a>。
　　</div>
　　<div　class="alert　alert-light">
　　　　灰色!/強調してください<a href="#" class="alert-link">この情報</a>。
　　</div>
</div>
</body>
</html>

テストを見てみる ‹/›

トーストを閉じる

トーストの中の div に .alert-dismissible クラスを設定し、閉じるボタンのリンクに class="close" と data-dismiss="alert" クラスを設定してトーストの閉じる操作を設定します。

例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap サンプル</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>トーストを閉じる</h2>
　　<p>トーストの中の div に .alert-dismissible クラスを設定し、閉じるボタンのリンクに class="close" と data-dismiss="alert" クラスを使用してトーストの閉じる操作を設定します。</p>
　　<div　class="alert　alert-成功　警報-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>成功！</<strong>　指定の操作が成功したときの表示情報を設定します。
　　</div>
　　<div　class="alert　alert-情報　警報-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>情報！</<strong>　この情報に注意してください。
　　</div>
　　<div　class="alert　alert-警告　警報-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>警告！</<strong>　警告情報を設定します。
　　</div>
　　<div　class="alert　alert-危険　警報-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>エラー!/strong>　失敗した操作。
　　</div>
　　<div　class="alert　alert-primary　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>首选!/strong>　重要な操作情報です。
　　</div>
　　<div　class="alert　alert-secondary　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>次要的!/strong>　重要でない情報を表示します。
　　</div>
　　<div　class="alert　alert-dark　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>濃いグレー!/strong>　濃いグレーのトースト通知。
　　</div>
　　<div　class="alert　alert-light　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>淡いグレー!/strong>淡いグレーのトースト通知。
　　</div>
</div>
</body>
</html>

テストを見てみる ‹/›

注意: × (×) は HTML 実体文字で、アルファベット "x" ではなく閉じる操作を表します。

トーストアニメーション

.fade と .show クラスは、トーストを閉じる際のフェードアウトとフェードイン効果を設定するために使用されます：

例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap サンプル</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>トーストアニメーション</h2>
　　<p>.fade と .show クラスは、トーストを閉じる際のフェードアウトとフェードイン効果を設定するために使用されます：</p>
　　<div　class="alert　alert-成功　警報-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>成功！</<strong>　指定の操作が成功したときの表示情報を設定します。
　　</div>
　　<div　class="alert　alert-情報　警報-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>情報！</<strong>　この情報に注意してください。
　　</div>
　　<div　class="alert　alert-警告　警報-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>警告！</<strong>　警告情報を設定します。
　　</div>
　　<div　class="alert　alert-危険　警報-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>エラー!/strong>　失敗した操作。
　　</div>
　　<div　class="alert　alert-primary　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>首选!/strong>　重要な操作情報です。
　　</div>
　　<div　class="alert　alert-secondary　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>次要的!/strong>　重要でない情報を表示します。
　　</div>
　　<div　class="alert　alert-dark　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>濃いグレー!/strong>　濃いグレーのトースト通知。
　　</div>
　　<div　class="alert　alert-light　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>淡いグレー!/strong>淡いグレーのトースト通知。
　　</div>
</div>
</body>
</html>

テストを見てみる ‹/›

Bootstrap4 ボタン Bootstrap4 Jumbotron