Light-Year-Admin-Using-Iframe-v4
/
lyear_ui_badges.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是一个基于Bootstrap v4.4.1的后台管理系统的HTML模板。">
<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">

          <h1>浮生六记 <span class="badge badge-secondary">沈复</span></h1>
          <h2>道德经 <span class="badge badge-secondary">老子</span></h2>
          <h3>菜根谭 <span class="badge badge-secondary">洪应明</span></h3>
          <h4>牡丹亭 <span class="badge badge-secondary">汤显祖</span></h4>
          <h5>西厢记 <span class="badge badge-secondary">王实甫</span></h5>
          <h6>纳兰词 <span class="badge badge-secondary">纳兰性德</span></h6>

          <div class="lyear-divider">徽章可用作链接或按钮的一部分，以提供统计数字样式。</div>
          <button type="button" class="btn btn-primary">
            未读消息 <span class="badge badge-light">4</span>
          </button>

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

    <div class="col-md-12">
      <div class="card">
        <header class="card-header"><div class="card-title">情景标签</div ></header>
        <div class="card-body">

          <span class="badge badge-primary">历史小说</span>
          <span class="badge badge-success">当代小说</span>
          <span class="badge badge-info">都市小说</span>
          <span class="badge badge-warning">科幻小说</span>
          <span class="badge badge-danger">名人传记</span>
          <span class="badge badge-dark">悬疑小说</span>
          <span class="badge badge-secondary">古文典籍</span>
          <span class="badge badge-purple">玄幻仙侠</span>
          <span class="badge badge-pink">言情小说</span>
          <span class="badge badge-cyan">国外名著</span>
          <span class="badge badge-yellow">武侠小说</span>
          <span class="badge badge-brown">儿童文学</span>
          <span class="badge badge-light">散文随笔</span>
          <span class="badge badge-muted">黄冈密卷</span>

          <div class="lyear-divider">椭圆形的</div>

          <span class="badge badge-pill badge-primary">历史小说</span>
          <span class="badge badge-pill badge-success">当代小说</span>
          <span class="badge badge-pill badge-info">都市小说</span>
          <span class="badge badge-pill badge-warning">科幻小说</span>
          <span class="badge badge-pill badge-danger">名人传记</span>
          <span class="badge badge-pill badge-dark">悬疑小说</span>
          <span class="badge badge-pill badge-secondary">古文典籍</span>
          <span class="badge badge-pill badge-purple">玄幻仙侠</span>
          <span class="badge badge-pill badge-pink">言情小说</span>
          <span class="badge badge-pill badge-cyan">国外名著</span>
          <span class="badge badge-pill badge-yellow">武侠小说</span>
          <span class="badge badge-pill badge-brown">儿童文学</span>
          <span class="badge badge-pill badge-light">散文随笔</span>
          <span class="badge badge-pill badge-muted">黄冈密卷</span>
          <span class="badge badge-pill badge-info">6</span>

          <div class="lyear-divider">链接标签</div>

          <a href="#!" class="badge badge-primary">历史小说</a>
          <a href="#!" class="badge badge-success">当代小说</a>
          <a href="#!" class="badge badge-info">都市小说</a>
          <a href="#!" class="badge badge-warning">科幻小说</a>
          <a href="#!" class="badge badge-danger">名人传记</a>
          <a href="#!" class="badge badge-dark">悬疑小说</a>
          <a href="#!" class="badge badge-secondary">古文典籍</a>
          <a href="#!" class="badge badge-purple">玄幻仙侠</a>
          <a href="#!" class="badge badge-pink">言情小说</a>
          <a href="#!" class="badge badge-cyan">国外名著</a>
          <a href="#!" class="badge badge-yellow">武侠小说</a>
          <a href="#!" class="badge badge-brown">儿童文学</a>
          <a href="#!" class="badge badge-light">散文随笔</a>
          <a href="#!" class="badge badge-muted">黄冈密卷</a>

          <div class="lyear-divider">颜色淡一些的</div>

          <span class="badge badge-primary-light">历史小说</span>
          <span class="badge badge-success-light">当代小说</span>
          <span class="badge badge-info-light">都市小说</span>
          <span class="badge badge-warning-light">科幻小说</span>
          <span class="badge badge-danger-light">名人传记</span>
          <span class="badge badge-purple-light">玄幻仙侠</span>
          <span class="badge badge-brown-light">儿童文学</span>

          <div class="lyear-divider">边框带圆点</div>

          <a href="#!" class="badge badge-outline-primary">历史小说</a>
          <a href="#!" class="badge badge-outline-success">当代小说</a>
          <a href="#!" class="badge badge-outline-info">都市小说</a>
          <a href="#!" class="badge badge-outline-warning">科幻小说</a>
          <a href="#!" class="badge badge-outline-danger">名人传记</a>
          <a href="#!" class="badge badge-outline-dark">悬疑小说</a>
          <a href="#!" class="badge badge-outline-secondary">古文典籍</a>
          <a href="#!" class="badge badge-outline-purple">玄幻仙侠</a>
          <a href="#!" class="badge badge-outline-pink">言情小说</a>
          <a href="#!" class="badge badge-outline-cyan">国外名著</a>
          <a href="#!" class="badge badge-outline-yellow">武侠小说</a>
          <a href="#!" class="badge badge-outline-brown">儿童文学</a>

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

    <div class="col-md-12">
      <div class="card">
        <header class="card-header"><div class="card-title">圆形的</div></header>
        <div class="card-body">
          <span class="badge badge-dot-sm badge-dot badge-primary"></span>
          <span class="badge badge-dot-sm badge-dot badge-success"></span>
          <span class="badge badge-dot-sm badge-dot badge-info"></span>
          <span class="badge badge-dot-sm badge-dot badge-warning"></span>
          <span class="badge badge-dot-sm badge-dot badge-danger"></span>
          <span class="badge badge-dot-sm badge-dot badge-dark"></span>
          <span class="badge badge-dot-sm badge-dot badge-secondary"></span>
          <span class="badge badge-dot-sm badge-dot badge-purple"></span>
          <span class="badge badge-dot-sm badge-dot badge-pink"></span>
          <span class="badge badge-dot-sm badge-dot badge-cyan"></span>
          <span class="badge badge-dot-sm badge-dot badge-yellow"></span>
          <span class="badge badge-dot-sm badge-dot badge-brown"></span>
          <br/>
          <span class="badge badge-dot badge-primary"></span>
          <span class="badge badge-dot badge-success"></span>
          <span class="badge badge-dot badge-info"></span>
          <span class="badge badge-dot badge-warning"></span>
          <span class="badge badge-dot badge-danger"></span>
          <span class="badge badge-dot badge-dark"></span>
          <span class="badge badge-dot badge-secondary"></span>
          <span class="badge badge-dot badge-purple"></span>
          <span class="badge badge-dot badge-pink"></span>
          <span class="badge badge-dot badge-cyan"></span>
          <span class="badge badge-dot badge-yellow"></span>
          <span class="badge badge-dot badge-brown"></span>
          <br/>
          <span class="badge badge-dot-lg badge-dot badge-primary"></span>
          <span class="badge badge-dot-lg badge-dot badge-success"></span>
          <span class="badge badge-dot-lg badge-dot badge-info"></span>
          <span class="badge badge-dot-lg badge-dot badge-warning"></span>
          <span class="badge badge-dot-lg badge-dot badge-danger"></span>
          <span class="badge badge-dot-lg badge-dot badge-dark"></span>
          <span class="badge badge-dot-lg badge-dot badge-secondary"></span>
          <span class="badge badge-dot-lg badge-dot badge-purple"></span>
          <span class="badge badge-dot-lg badge-dot badge-pink"></span>
          <span class="badge badge-dot-lg badge-dot badge-cyan"></span>
          <span class="badge badge-dot-lg badge-dot badge-yellow"></span>
          <span class="badge badge-dot-lg badge-dot badge-brown"></span>
          <br/>
          <span class="badge badge-dot-xl badge-dot badge-primary"></span>
          <span class="badge badge-dot-xl badge-dot badge-success"></span>
          <span class="badge badge-dot-xl badge-dot badge-info"></span>
          <span class="badge badge-dot-xl badge-dot badge-warning"></span>
          <span class="badge badge-dot-xl badge-dot badge-danger"></span>
          <span class="badge badge-dot-xl badge-dot badge-dark"></span>
          <span class="badge badge-dot-xl badge-dot badge-secondary"></span>
          <span class="badge badge-dot-xl badge-dot badge-purple"></span>
          <span class="badge badge-dot-xl badge-dot badge-pink"></span>
          <span class="badge badge-dot-xl badge-dot badge-cyan"></span>
          <span class="badge badge-dot-xl badge-dot badge-yellow"></span>
          <span class="badge badge-dot-xl badge-dot badge-brown"></span>
        </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>
</body>
</html>