back
アラート・ダイアログ・折りたたみ表示 (1/5)
■アラートの表示
アプリケーションでは、各種の情報を表示したり、ユーザーに確認や入力などを促すためのインターフェイスというのが用意されています。「アラート」と「ダイアログ」です。Bootstrapにも、これらのインターフェイスを実現するための機能が用意されています。
まずは、もっともシンプルな「アラート」からです。Bootstrapでは、ちょっとしたメッセージなどを表示するのに、以下のようなアラート表示を用意できます。
classに「alert」を指定するだけで、アラートの表示になります。ただし、それだけでは輪郭線だけの表示になるので、実際の利用の際には、あわせて以下のクラスからいずれかを追加します。
alert-info――ちょっとした情報などを表示するものです。
alert-success――なんらかの操作が成功したことを表示するのに使います。
alert-warning――警告の表示です。
alert-danger――危険を伝えるための表示です。
これらを利用することで、アラートの表示を作れます。下にその利用例を挙げておきましょう。４つのアラートが表示されます。
まずは、もっともシンプルな「アラート」からです。Bootstrapでは、ちょっとしたメッセージなどを表示するのに、以下のようなアラート表示を用意できます。
<div class="alert アラートのクラス">
……アラートの内容……
</div>
classに「alert」を指定するだけで、アラートの表示になります。ただし、それだけでは輪郭線だけの表示になるので、実際の利用の際には、あわせて以下のクラスからいずれかを追加します。
alert-info――ちょっとした情報などを表示するものです。
alert-success――なんらかの操作が成功したことを表示するのに使います。
alert-warning――警告の表示です。
alert-danger――危険を伝えるための表示です。
これらを利用することで、アラートの表示を作れます。下にその利用例を挙げておきましょう。４つのアラートが表示されます。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/script.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>アラート・ダイアログ</h1>
<h2 >Alert</h2>
</div>
<div>
<div class="alert alert-info">
<h4>Alert!</h4>
これは、アラートの表示です。
</div>
<div class="alert alert-success">
<h4>Alert!</h4>
これは、アラートの表示です。
</div>
<div class="alert alert-warning">
<h4>Alert!</h4>
これは、アラートの表示です。
</div>
<div class="alert alert-danger">
<h4>Alert!</h4>
これは、アラートの表示です。
</div>
</div>
</div>
</div>
</body>
</html>
| 次へ >> |