master

分支 (3)

管理

管理

master

style

feature/非圆角青绿配色

Light-Year-Admin-Using-Iframe-v4
/
lyear_ui_toasts.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>消息弹窗 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">消息弹窗</div></header>
        <div class="card-body">

          <div class="border-example-toasts">
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
                <strong class="mr-auto">Bootstrap</strong>
                <small>11分钟之前</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="toast-body">
                《隋唐演义》既是中国古代一部白话小说，也是一部演绎历史风云、歌颂的经典传奇英雄之作。
              </div>
            </div>

            <pre>&lt;div class="toast" role="alert" aria-live="assertive" aria-atomic="true"&gt;
  &lt;div class="toast-header"&gt;
    &lt;img src="..." class="rounded mr-2" alt="..."&gt;
    &lt;strong class="mr-auto"&gt;Bootstrap&lt;/strong&gt;
    &lt;small&gt;11分钟之前&lt;/small&gt;
    &lt;button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"&gt;
      &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="toast-body"&gt;
    《隋唐演义》既是中国古代一部白话小说，也是一部演绎历史风云、歌颂的经典传奇英雄之作。
  &lt;/div&gt;
&lt;/div&gt;</pre>
          </div>
          <h6>半透明</h6>
          <div class="border-example-toasts bg-dark">
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
                <strong class="mr-auto">Bootstrap</strong>
                <small class="text-muted">11分钟之前</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="toast-body">
                又名《真仙传道集》或《钟吕传道记》。五代，施肩吾整理。
              </div>
            </div>

            <pre>&lt;div class="toast" role="alert" aria-live="assertive" aria-atomic="true"&gt;
  &lt;div class="toast-header"&gt;
    &lt;img src="..." class="rounded mr-2" alt="..."&gt;
    &lt;strong class="mr-auto"&gt;Bootstrap&lt;/strong&gt;
    &lt;small class="text-muted"&gt;11分钟之前&lt;/small&gt;
    &lt;button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"&gt;
      &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="toast-body"&gt;
    又名《真仙传道集》或《钟吕传道记》。五代，施肩吾整理。
  &lt;/div&gt;
&lt;/div&gt;</pre>
          </div>
          <h6>Stacking</h6>
          <div class="border-example-toasts">
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
                <strong class="mr-auto">Bootstrap</strong>
                <small class="text-muted">刚刚</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="toast-body">
                《管子》基本上是稷下道家推尊管仲之作的集结。即以此为稷下之学的管子学派。
              </div>
            </div>

            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
                <strong class="mr-auto">Bootstrap</strong>
                <small class="text-muted">2秒前</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="toast-body">
                《绣花大盗》是武侠小说家古龙-陆小凤系列的第二个的故事。
              </div>
            </div>

            <pre>&lt;div class="toast" role="alert" aria-live="assertive" aria-atomic="true"&gt;
  &lt;div class="toast-header"&gt;
    &lt;img src="..." class="rounded mr-2" alt="..."&gt;
    &lt;strong class="mr-auto"&gt;Bootstrap&lt;/strong&gt;
    &lt;small class="text-muted"&gt;刚刚&lt;/small&gt;
    &lt;button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"&gt;
      &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="toast-body"&gt;
    《管子》基本上是稷下道家推尊管仲之作的集结。即以此为稷下之学的管子学派。
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="toast" role="alert" aria-live="assertive" aria-atomic="true"&gt;
  &lt;div class="toast-header"&gt;
    &lt;img src="..." class="rounded mr-2" alt="..."&gt;
    &lt;strong class="mr-auto"&gt;Bootstrap&lt;/strong&gt;
    &lt;small class="text-muted"&gt;2秒前&lt;/small&gt;
    &lt;button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"&gt;
      &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="toast-body"&gt;
    《绣花大盗》是武侠小说家古龙-陆小凤系列的第二个的故事。
  &lt;/div&gt;
&lt;/div&gt;</pre>
          </div>

        </div>
      </div>
    </div>

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">布局</div></header>
        <div class="card-body">

          <div class="border-example-toasts bg-dark">
            <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
              <div class="toast" style="position: absolute; top: 0; right: 0;">
                <div class="toast-header">
                  <svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
                  <strong class="mr-auto">Bootstrap</strong>
                  <small>一个小时之前</small>
                  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="toast-body">
                  《大唐新语》，又名《唐新语》、《大唐世说新语》、《唐世说新语》、《世说》、《大唐新话》等，是一部笔记小说集。
                </div>
              </div>
            </div>

            <pre>&lt;div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"&gt;
  &lt;div class="toast" style="position: absolute; top: 0; right: 0;"&gt;
    &lt;div class="toast-header"&gt;
      &lt;img src="..." class="rounded mr-2" alt="..."&gt;
      &lt;strong class="mr-auto"&gt;Bootstrap&lt;/strong&gt;
      &lt;small&gt;一个小时之前&lt;/small&gt;
      &lt;button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"&gt;
        &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="toast-body"&gt;
      《大唐新语》，又名《唐新语》、《大唐世说新语》、《唐世说新语》、《世说》、《大唐新话》等，是一部笔记小说集。
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          </div>

          <div class="border-example-toasts bg-dark">
            <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 250px;">
              <!-- Position it -->
              <div style="position: absolute; top: 0; right: 0;">

                <!-- Then put toasts within -->
                <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                  <div class="toast-header">
                    <svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
                    <strong class="mr-auto">Bootstrap</strong>
                    <small class="text-muted">刚刚</small>
                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="toast-body">
                    班固等人根据汉章帝建初四年（公元79）经学辩论的结果撰集而成。
                  </div>
                </div>

                <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                  <div class="toast-header">
                    <svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
                    <strong class="mr-auto">Bootstrap</strong>
                    <small class="text-muted">2秒之前</small>
                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="toast-body">
                    《白虎通义》是中国汉代讲论五经同异，统一今文经义的一部重要著作。
                  </div>
                </div>
              </div>
            </div>

            <pre>&lt;div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 250px;"&gt;
  &lt;!-- Position it --&gt;
  &lt;div style="position: absolute; top: 0; right: 0;"&gt;

    &lt;!-- Then put toasts within --&gt;
    &lt;div class="toast" role="alert" aria-live="assertive" aria-atomic="true"&gt;
      &lt;div class="toast-header"&gt;
        &lt;img src="..." class="rounded mr-2" alt="..."&gt;
        &lt;strong class="mr-auto"&gt;Bootstrap&lt;/strong&gt;
        &lt;small class="text-muted"&gt;刚刚&lt;/small&gt;
        &lt;button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"&gt;
          &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="toast-body"&gt;
        班固等人根据汉章帝建初四年（公元79）经学辩论的结果撰集而成。
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="toast" role="alert" aria-live="assertive" aria-atomic="true"&gt;
      &lt;div class="toast-header"&gt;
        &lt;img src="..." class="rounded mr-2" alt="..."&gt;
        &lt;strong class="mr-auto"&gt;Bootstrap&lt;/strong&gt;
        &lt;small class="text-muted"&gt;2秒之前&lt;/small&gt;
        &lt;button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"&gt;
          &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="toast-body"&gt;
        《白虎通义》是中国汉代讲论五经同异，统一今文经义的一部重要著作。
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          </div>

          <div class="border-example-toasts bg-dark">
            <!-- Flexbox container for aligning the toasts -->
            <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

              <!-- Then put toasts within -->
              <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                  <svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
                  <strong class="mr-auto">Bootstrap</strong>
                  <small>30分钟之前</small>
                  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="toast-body">
                  又名《云合奇踪》、《皇明英烈传》、《皇明开运英武传》等，章回体小说，全书分为十卷。
                </div>
              </div>
            </div>

            <pre>&lt;!-- Flexbox container for aligning the toasts --&gt;
&lt;div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;"&gt;

  &lt;!-- Then put toasts within --&gt;
  &lt;div class="toast" role="alert" aria-live="assertive" aria-atomic="true"&gt;
    &lt;div class="toast-header"&gt;
      &lt;img src="..." class="rounded mr-2" alt="..."&gt;
      &lt;strong class="mr-auto"&gt;Bootstrap&lt;/strong&gt;
      &lt;small&gt;30分钟之前&lt;/small&gt;
      &lt;button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"&gt;
        &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="toast-body"&gt;
      又名《云合奇踪》、《皇明英烈传》、《皇明开运英武传》等，章回体小说，全书分为十卷。
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
          </div>

        </div>
      </div>
    </div>

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">Accessibility</div></header>
        <div class="card-body">

          <div class="border-example-toasts">
            <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
              <div class="toast-header">
                <svg class="rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
                <strong class="mr-auto">Bootstrap</strong>
                <small>11分钟之前</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="toast-body">
                元修《辽史》共116卷，包括本纪30卷，志32卷，表8卷，列传45卷，以及国语解1卷。
              </div>
            </div>

          <pre>&lt;div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false"&gt;
  &lt;div class="toast-header"&gt;
    &lt;img src="..." class="rounded mr-2" alt="..."&gt;
    &lt;strong class="mr-auto"&gt;Bootstrap&lt;/strong&gt;
    &lt;small&gt;11分钟之前&lt;/small&gt;
    &lt;button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"&gt;
      &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="toast-body"&gt;
    元修《辽史》共116卷，包括本纪30卷，志32卷，表8卷，列传45卷，以及国语解1卷。
  &lt;/div&gt;
&lt;/div&gt;</pre>
          </div>

        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
// 消息弹窗
$(".toast").toast({autohide:false}).toast("show");
</script>
</body>
</html>