[javascript] Toastr와 함께 사용하는 부트스트랩

20 Dec 2023

javascript

이번 블로그에서는 Toastr 및 부트스트랩을 사용한 사용자 지정 알림 메시지에 대해 소개하겠습니다.

Toastr란 무엇인가?
부트스트랩과 Toastr 연동
부트스트랩을 활용한 사용자 정의 디자인

Toastr란 무엇인가?

Toastr는 사용자에게 알림을 표시하는 라이브러리입니다. 이 라이브러리는 다양한 애니메이션 효과와 사용하기 쉬운 API를 제공하여 웹 애플리케이션에서 알림 메시지를 보여주는 데에 유용합니다.

부트스트랩과 Toastr 연동

부트스트랩은 인기 있는 프론트엔드 프레임워크로써, 웹 페이지의 디자인과 레이아웃을 향상시키는 데에 널리 사용됩니다. Toastr와 부트스트랩을 함께 사용하여 시각적으로 매력적이고 사용하기 쉬운 알림 메시지를 생성할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body>
  
  <!-- Toastr를 위한 위치 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
  <script>
    // 사용자 정의 알림 메시지
    toastr.success('정상적으로 등록되었습니다.', '성공');
  </script>
  
</body>
</html>

부트스트랩을 활용한 사용자 정의 디자인

부트스트랩을 활용하여 Toastr의 기본적인 디자인을 커스터마이징할 수 있습니다. 다양한 부트스트랩 클래스를 활용하여 알림 메시지의 색상, 폰트, 박스 그림자 등을 사용자 정의할 수 있습니다.

Toastr 및 부트스트랩을 함께 사용하여 웹 애플리케이션에서 시각적으로 매력적이고 사용하기 편리한 알림 메시지를 구현해보세요.

더 많은 정보를 원하시면 Toastr 공식 문서를 확인해보세요.