How to use Toasts component in Bootstrap? (example explanation)-Bootstrap Tutorial-php.cn

How to use Toasts component in

Bootstrap? The following article will introduce to you the usage of the toast message Toasts component in Bootstrap5. I hope it will be helpful to you!

How to use Toasts component in Bootstrap? (example explanation)

1 Toasts Example

Toasts is a lightweight notification designed to mimic mobile and desktop operating systems Push notifications have become popular. They are built with flexbox so they are easy to align and position. [Related recommendations: "bootstrap tutorial"]

Like the pop-up prompt, the toast message also needs to be initialized by itself. I don’t know why the initialization method on the official website is invalid. I found a feasible method on a foreign website. method.

<!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>

Copy after login

How to use Toasts component in Bootstrap? (example explanation)

2 Setting options

Options can be passed through data attributes or JavaScript. For data attributes, append the option name to data-bs-, such as: data-bs-animation="".

data-bs-animation="true" Apply CSS fade transition effect to toast
data-bs-autohide="true" Automatically hide toast
data-bs-delay="5000", delay hiding toast for 5s (default unit: milliseconds)

The above values are the default values. If you are satisfied with the grinding effect, there is no need to write it at all. Well, in the 27.3.1 example, I set data-bs-autohide="false" to not automatically hide the toast, so that it is convenient to take screenshots, otherwise the message box will disappear as long as the mouse is clicked anywhere.

3 Translucent

Toasts can also be translucent and therefore blend in with anything they may appear on. Browsers that support the CSS attribute background-filter will also try to blur the elements below the toast.

<!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>

Copy after login

How to use Toasts component in Bootstrap? (example explanation)

4 Stacking

You can stack toasts by packaging them in toast-container containers, which will Add some spacing vertically.

<!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>

Copy after login

How to use Toasts component in Bootstrap? (example explanation)

5 Custom content

Customize toast by removing child components, adjusting common classes, or adding markup.

<!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>

Copy after login

How to use Toasts component in Bootstrap? (example explanation)

6 Color Scheme

Based on the above example, you can also create different toast color schemes through our color general categories. Next, we add bg-danger and text-white to toast, and then add text-white to the close button. In order to make the edges appear clearly, the default borders are removed via 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>

Copy after login

How to use Toasts component in Bootstrap? (example explanation)

7 Set the display position

The default toast message is displayed in the lower right corner of the browser. According to requirements, use custom CSS to specify the toast position. The top right corner is usually used for notifications, as is the top middle. If you only want to display one toast at a time, put the positioning style on the toast.

<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>

Copy after login

The above is the official example, Bootstrap5 ToastsI didn’t find the driver js code. But it can be given as a reference for everyone. If you are interested, you can study it. Here I have modified it to be displayed in the upper left corner based on the above code.

<!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>

Copy after login

How to use Toasts component in Bootstrap? (example explanation)

For more knowledge about bootstrap, please visit: bootstrap basic tutorial! !

The above is the detailed content of How to use Toasts component in Bootstrap? (example explanation). For more information, please follow other related articles on the PHP Chinese website!