0640_alert.html

<!-- 1行用 + 閉じるボタン付き(x4色) -->
<!DOCTYPE html>
<html lang="ja">
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="assets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="assets/jquery.js" type="text/javascript"></script>
    <script src="assets/coffee-script.js" type="text/javascript"></script>
    <script src="assets/bootstrap.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="container">
      <h2>1行用 + 閉じるボタン付き(x4色)</h2>
      <div class="alert">
        <a data-dismiss="alert" class="close">&times;</a>
        <strong>Default: </strong>ニックネームを入力してください
      </div>
      <div class="alert alert-info">
        <a data-dismiss="alert" class="close">&times;</a>
        <strong>Info: </strong>メッセージが1件届いています
      </div>
      <div class="alert alert-success">
        <a data-dismiss="alert" class="close">&times;</a>
        <strong>Success: </strong>メッセージが届いています
      </div>
      <div class="alert alert-error">
        <a data-dismiss="alert" class="close">&times;</a>
        <strong>Error: </strong>エラーが発生しました
      </div>

      <h2>複数行 + 閉じるボタン付き(x4色)</h2>
      <div class="alert alert-block">
        <a data-dismiss="alert" class="close">&times;</a>
        <h4 class="alert-heading">Default</h4>
        ニックネームを入力してください
        <p>
          <a href="#" class="btn btn-small">送信</a> <a href="#" class="btn btn-small">キャンセル</a>
        </p>
      </div>
      <div class="alert alert-block alert-info">
        <a data-dismiss="alert" class="close">&times;</a>
        <h4 class="alert-heading">Info</h4>メッセージが1件届いています
        <p>
          <a href="#" class="btn btn-small">送信</a> <a href="#" class="btn btn-small">キャンセル</a>
        </p>
      </div>
      <div class="alert alert-block alert-success">
        <a data-dismiss="alert" class="close">&times;</a>
        <h4 class="alert-heading">Success</h4>メッセージが届いています
        <p>
          <a href="#" class="btn btn-small">送信</a> <a href="#" class="btn btn-small">キャンセル</a>
        </p>
      </div>
      <div class="alert alert-block alert-error">
        <a data-dismiss="alert" class="close">&times;</a>
        <h4 class="alert-heading">Error</h4>エラーが発生しました
        <ul>
          <li>あれを入力してください</li>
          <li>これも入力してください</li>
          <li>それも入力してください</li>
        </ul>
        <p>
          <a href="#" class="btn btn-small">送信</a> <a href="#" class="btn btn-small">キャンセル</a>
        </p>
      </div>
    </div>
  </body>
</html>