Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)-부트스트랩 튜토리얼-php.cn

Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? 다음 글에서는 Bootstrap5의 Toast 메시지 Toasts 컴포넌트 사용법을 소개하겠습니다.

Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)

1 토스트 예시

토스트는 모바일 및 데스크톱 운영 체제에서 널리 사용되는 푸시 알림을 모방하도록 설계된 가벼운 알림입니다. Flexbox로 제작되어 정렬 및 위치 지정이 쉽습니다. [관련 추천: "부트스트랩 튜토리얼"]

팝업 프롬프트처럼 토스트 메시지도 자체적으로 초기화해야 하는데 공식 홈페이지의 초기화 방법이 왜 유효하지 않은지 알 수 없습니다. 해외사이트에서 가능한 방법입니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>Popovers</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
          <div id="liveToast" class="toast hide" data-bs-animation="false" role="alert" aria-live="assertive" aria-atomic="true">
            <div>
            <strong>吐司消息提示</strong>
            <small>11 mins ago</small>
            <button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div>
            你有一条短消息！
            </div>
          </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      document.querySelector("#liveToastBtn").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;.toast&#39;)).show();
      }
   </script>
  </body>
</html>

로그인 후 복사

Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)

2 옵션 설정

옵션은 데이터 속성이나 JavaScript를 통해 전달될 수 있습니다. 데이터 속성의 경우 data-bs-animation=""와 같이 data-bs-에 옵션 이름을 추가합니다.

data-bs-animation="true"는 토스트에 CSS 페이드 전환 효과를 적용합니다.
data-bs-autohide="true"는 토스트를 자동으로 숨깁니다.
data-bs-delay="5000", 지연된 토스트 5s 숨기기( 기본 단위는 milliseconds)

위 값은 기본값입니다. 연마 효과에 만족한다면 전혀 작성할 필요가 없습니다. 27.3.1 예제에서는 data-bs-autohide를 설정했습니다. ="false" 스크린샷 촬영이 편리하도록 토스트를 자동으로 숨기지 않도록 설정되어 있습니다. 그렇지 않으면 마우스를 아무 곳이나 클릭하는 한 메시지 상자가 사라집니다.

3 반투명

토스트도 반투명할 수 있으므로 어떤 음식과도 잘 어울립니다. CSS 속성인 background-filter를 지원하는 브라우저는 토스트 아래의 요소를 흐리게 처리하려고 시도합니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
        <div role="alert" aria-live="assertive" aria-atomic="true">
          <div>
          <strong>半透明吐司</strong>
          <small>11 mins ago</small>
          <button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div>
            你有一条短消息！
          </div>
          </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      document.querySelector("#liveToastBtn").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;.toast&#39;)).show();
      }
   </script>
  </body>
</html>

로그인 후 복사

Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)

4 쌓기

는 토스트를 toast-container용기에 포장하여 수직 간격을 추가하여 수행할 수 있습니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn1">显示吐司消息1</button>
        <button type="button" class="btn btn-primary" id="liveToastBtn2">显示吐司消息2</button>
        <div>
          <div id="toast1" role="alert" aria-live="assertive" aria-atomic="true">
          <div>
          <strong>吐司消息</strong>
          <small>刚刚发送</small>
          <button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div>
          第一条消息
          </div>
          </div>
          
          <div  id="toast2" role="alert" aria-live="assertive" aria-atomic="true">
          <div>
          <strong>吐司消息</strong>
          <small>2分钟前</small>
          <button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div>
            第二条消息
          </div>
          </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
       document.querySelector("#liveToastBtn1").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;#toast1&#39;)).show();
      }
      document.querySelector("#liveToastBtn2").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;#toast2&#39;)).show();
      }
   </script>
  </body>
</html>

로그인 후 복사

Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)

5 사용자 정의 콘텐츠

하위 구성 요소를 제거하거나, 공통 클래스를 조정하거나, 마크업을 추가하여 알림을 사용자 정의하세요.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
        <div role="alert" aria-live="assertive" aria-atomic="true">
            <div>
            邀请你穿越到三国！
            <div class="mt-2 pt-2 border-top">
            <button type="button" class="btn btn-primary btn-sm">接受邀请</button>
            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">关闭</button>
            </div>
            </div>
         </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      document.querySelector("#liveToastBtn").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;.toast&#39;)).show();
      }
   </script>
  </body>
</html>

로그인 후 복사

Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)

6가지 색 구성표

위의 예를 바탕으로 색상 범용 카테고리를 통해 다양한 토스트 색 구성표를 만들 수도 있습니다. 다음으로 토스트에 bg-danger와 text-white를 추가한 다음 닫기 버튼에 text-white를 추가합니다. 가장자리를 명확하게 표시하기 위해 border-0을 통해 기본 테두리를 제거합니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>

        <div class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div>
            <div>
            这里是红色背景的
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      document.querySelector("#liveToastBtn").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;.toast&#39;)).show();
      }
   </script>
  </body>
</html>

로그인 후 복사

Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)

7 표시 위치 설정

기본 토스트 메시지는 브라우저 오른쪽 하단에 표시됩니다. 필요에 따라 맞춤 CSS를 사용하여 토스트 위치를 지정하세요. 오른쪽 상단 모서리는 일반적으로 상단 중앙과 마찬가지로 알림에 사용됩니다. 한 번에 하나의 토스트만 표시하려면 토스트에 위치 지정 스타일을 추가하세요.

<form>
<div class="mb-3">
<label for="selectToastPlacement">Toast placement</label>
<select class="form-select mt-2" id="selectToastPlacement">
<option value="" selected>Select a position...</option>
<option value="top-0 start-0">Top left</option>
<option value="top-0 start-50 translate-middle-x">Top center</option>
<option value="top-0 end-0">Top right</option>
<option value="top-50 start-0 translate-middle-y">Middle left</option>
<option value="top-50 start-50 translate-middle">Middle center</option>
<option value="top-50 end-0 translate-middle-y">Middle right</option>
<option value="bottom-0 start-0">Bottom left</option>
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
<option value="bottom-0 end-0">Bottom right</option>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
  <img src="..." class="rounded me-2" alt="...">
  <strong class="me-auto">Bootstrap</strong>
  <small>11 mins ago</small>
</div>
<div class="toast-body">
  Hello, world! This is a toast message.
</div>
</div>
</div>
</div>

로그인 후 복사

위는 공식 예입니다. Bootstrap5 Toasts이를 구동하는 js 코드를 찾지 못했습니다. 하지만 관심 있는 분들은 참고용으로 보시기 바랍니다. 여기서는 위의 코드를 기반으로 왼쪽 상단에 표시되도록 수정했습니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>吐司消息</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
        <div class="position-fixed top-0 start-0 p-3" style="z-index: 5">
          <div id="liveToast" class="toast hide" data-bs-animation="false" role="alert" aria-live="assertive" aria-atomic="true">
            <div>
            <strong>吐司消息提示</strong>
            <small>11 mins ago</small>
            <button type="button" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div>
            你有一条短消息！
            </div>
          </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
     <script>
      document.querySelector("#liveToastBtn").onclick = function() {
        new bootstrap.Toast(document.querySelector(&#39;.toast&#39;)).show();
      }
   </script>
  </body>
</html>

로그인 후 복사

Bootstrap에서 Toasts 구성 요소를 사용하는 방법은 무엇입니까? (예제 설명)