src/scss/bootstrap-4.0.0-alpha.6/js/tests/visual/alert.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   6     <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
   7     <title>Alert</title>
   8   </head>
   9   <body>
  10     <div class="container">
  11       <h1>Alert <small>Bootstrap Visual Test</small></h1>
  12
  13       <div class="alert alert-warning alert-dismissible fade show" role="alert">
  14         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  15           <span aria-hidden="true">&times;</span>
  16         </button>
  17         <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  18       </div>
  19
  20       <div class="alert alert-danger alert-dismissible fade show" role="alert">
  21         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  22           <span aria-hidden="true">&times;</span>
  23         </button>
  24         <p>
  25           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
  26         </p>
  27         <p>
  28           <button type="button" class="btn btn-danger">Danger</button>
  29           <button type="button" class="btn btn-secondary">Secondary</button>
  30         </p>
  31       </div>
  32
  33       <div class="alert alert-danger alert-dismissible fade show" role="alert">
  34         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  35           <span aria-hidden="true">&times;</span>
  36         </button>
  37         <p>
  38           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
  39         </p>
  40         <p>
  41           <button type="button" class="btn btn-danger">Take this action</button>
  42           <button type="button" class="btn btn-primary">Or do this</button>
  43         </p>
  44       </div>
  45     </div>
  46
  47     <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
  48     <script src="../../dist/util.js"></script>
  49     <script src="../../dist/alert.js"></script>
  50   </body>
  51 </html>