부트스트랩-Alerts

부트스트랩에서 Alerts 대해 알아보고자 한다.  본 글은 부트스트랩 4.3.1 을 기준으로 작성되었다. 
부트스트랩은 style의 class개념만 잘 이해하면 보고 따라할 수 있게 되어 있으니 하나 하나 따라 해 보시죠...  

---

<div class="alert alert-primary" role="alert">원하는 메시지</div>

클래스의 alert 와 그하위 alert-primary 를 사용하면 아래와 같이 alert 를 보여줄수 있습니다. 

적용모습

Well done! You successfully read this important alert message.

소스코드 

<div class="alert alert-primary" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

 

이와 같이 원하는 alert를 만들어 줄수 있다. 

alert 하위에 있는 class종류를 보면 다음과 같다. 

1. alert-primary
2. alert-secondary
3. alert-success
4. alert-info
5. alert-warning
6. alert-danger
7. alert-light
8. alert-dark
9. alert-link
10. alert-dismissible
11. alert-heading

앞에서 사용한 alert 하위에 적용해주면 소스가 반영된다. 반영된 모습을 보자.

 

---

alert-secondary

적용모습

Well done! You successfully read this important alert message.

소스코드 

<div class="alert alert-secondary" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

 

alert-success

적용모습

Well done! You successfully read this important alert message.

소스코드 

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

 

 

alert-dismissible

이 class를 사용하게 되면 닫기 버튼이 생기게 된다 x를 누르면 창이 닫힙니다.

적용모습

Holy guacamole! You should check in on some of those fields below.

소스코드 

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

 

alert-heading

적용모습

Well done!

You successfully read this important alert message.

소스코드 

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  You successfully read this important alert message.
</div>

 

 

alert-heading 을 사용한 결과가  상단에 여백이 생겨나오는데,  티스토리에 적용하니 약간 다르게 나오는것 같다. 

여튼 이런식으로 사용하면 되겠다.  나머지 속성은 각자 원하는 속성을 사용하면 되겠네요.