doncare-ui
/
tag.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>彩色标记</title>
<link href="assets/css/doncare.css" type="text/css" rel="stylesheet" />
<link href="assets/css/doncare.frame.css" type="text/css" rel="stylesheet" />
<link href="assets/font/icon200.css" type="text/css" rel="stylesheet">
<!--[if lt IE 8]>
<link href="assets/font/icon200ie7.css" type="text/css" rel="stylesheet">
<![endif]-->
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="assets/js/doncare.js" type="text/javascript" defer></script>
<script src="assets/js/doncare.page.js" type="text/javascript" defer></script>
<script src="assets/js/doncare.frame.js" type="text/javascript" defer></script>
</head>
<body>
<div id="header" class="header">
    <div class="header-left">

    </div>
    <div class="header-option">
        <a href="javascript:;" onclick="DC.page.open('icon.html');" ><i class="icon-sign-left"></i>图标库</a>
        <a href="javascript:;" onclick="DC.page.open('alert.html');" ><i class="icon-sign-right"></i>警告框</a>
    </div>
</div>
<div id="main" class="main">

    <div class="block">
        <div class="block-header">
            <span>自适应尺寸的彩色标记</span>
        </div>
        <div class="block-main">
            <h2>这是标题，今天你去哪了？<span class="tag">关注!</span></h2>
            <h3>这是标题，今天你去哪了？<span class="tag">关注!</span></h3>
            <h4>这是标题，今天你去哪了？<span class="tag">关注!</span></h4>
            <h5>这是标题，今天你去哪了？<span class="tag">关注!</span></h5>
            <div class="code-block">
                <pre>
&lt;h3&gt;这是标题，今天你去哪了？&lt;span class="tag"&gt;关注!&lt;/span&gt;&lt;/h3&gt;</pre>
            </div>
        </div>
    </div>

    <div class="block transparent">
        <div class="block-header">
            <span>多彩的标记</span>
        </div>
        <div class="block-main">
            <p>
                <span class="tag">默认</span>
                <span class="tag tag-primary">primary</span>
                <span class="tag tag-success">success</span>
                <span class="tag tag-info">info</span>
                <span class="tag tag-warning">warning</span>
                <span class="tag tag-danger">danger</span>
                <span class="tag tag-love">love</span>
            </p>
            <div class="code-block">
                <pre>
&lt;h3&gt;这是标题，今天你去哪了？&lt;span class="tag"&gt;关注!&lt;/span&gt;&lt;/h3&gt;</pre>
            </div>
        </div>
    </div>

    <div class="block">
        <div class="block-header">
            <span>圆润的徽章</span>
        </div>
        <div class="block-main">
            <p>
                <span class="badge">默认</span>
                <span class="badge badge-primary">primary</span>
                <span class="badge badge-success">success</span>
                <span class="badge badge-info">info</span>
                <span class="badge badge-warning">warning</span>
                <span class="badge badge-danger">danger</span>
                <span class="badge badge-love">love</span>
            </p>
            <div class="code-block">
                <pre>
&lt;p&gt;
    &lt;span class="badge"&gt;默认&lt;/span&gt;
    &lt;span class="badge badge-primary"&gt;primary&lt;/span&gt;
    &lt;span class="badge badge-success"&gt;success&lt;/span&gt;
    &lt;span class="badge badge-info"&gt;info&lt;/span&gt;
    &lt;span class="badge badge-warning"&gt;warning&lt;/span&gt;
    &lt;span class="badge badge-danger"&gt;danger&lt;/span&gt;
    &lt;span class="badge badge-love"&gt;love&lt;/span&gt;
&lt;/p&gt;</pre>
            </div>
        </div>
    </div>

</div>
</body>
</html>