Bootstrap 4 (부트스트랩) 구성요소, Alert

Alert(알람)은 방문자에게 보내는 경고메시지를 보여줄 때 사용하는 것이지만 텍스트박스와 같이 사용해도 괜찮다.

Jquery를 이용하여 경고 메시지를 보여주고 경고메시지를 닫는 기능을 활용할 수 있다.

Alert의 색상

Bootstrap4는 primary, secondary, success, danger, warning, info, light, dark의 8개 색상을 지원한다. 이 색상은 bootstrap.css에서 변경할 수 있으며 css를 통해 나만의 색상을 부여할 수도 있다.

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="alert alert-primary" role="alert">
          A simple <strong>primary</strong> alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
        </div>
        <div class="alert alert-secondary" role="alert">
          A simple <strong>secondary</strong> alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
        </div>
        <div class="alert alert-success" role="alert">
          A simple <strong>success</strong> alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
        </div>
        <div class="alert alert-danger" role="alert">
          A simple <strong>danger</strong> alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
        </div>
        <div class="alert alert-warning" role="alert">
          A simple <strong>warning</strong> alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
        </div>
        <div class="alert alert-info" role="alert">
          A simple <strong>info</strong> alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
        </div>
        <div class="alert alert-light" role="alert">
          A simple <strong>light</strong> alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
        </div>
        <div class="alert alert-dark" role="alert">
          A simple <strong>dark</strong> alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
        </div>
      </div> <!-- col-sm-12 -->
    </div> <!-- row -->
  </div><!-- container -->

alert-heading

Alert 내부에 제목부분(heading)과 구분선 등을 적용할 수 있다.

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="alert alert-success" role="alert">
          <h4 class="alert-heading">Well done!</h4>
          <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
          <hr>
          <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
        </div>
      </div> <!-- col-sm-12 -->
    </div> <!-- row -->
  </div><!-- container -->

Alert 해제(dismiss)

Alert는 부트스트랩 페이지가 기본적인 구성요소(css, javascript 등)를 모두 갖추었다면 방문자가 Alert를 간단하게 해제할 수 있다.

[참조] Bootstrap(부트스트랩) 시작, 필수 요소, http://passauer1083.tistory.com/2

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <strong>Holy guacamole!</strong> You should check in on some of those fields below.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div> <!-- col-sm-12 -->
    </div> <!-- row -->
  </div><!-- container -->