<?php
/**
 * Title: 徽章 Badge
 * Slug: gcoa/badge
 * Categories: ui-elements
 * Keywords: 徽章 Badge
 * Block Types: core/html
 */
?>
<!-- gc:html -->
<div class="page-header">
    <h2 class="header-title">徽章 Badge</h2>
    <div class="header-sub-title">
        <nav class="breadcrumb breadcrumb-dash">
            <a href="#" class="breadcrumb-item"><i class="anticon anticon-home m-r-5"></i>首页</a>
            <a class="breadcrumb-item" href="#">UI元素</a>
            <span class="breadcrumb-item active">徽章 Badge</span>
        </nav>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <h4>基础徽章</h4>
        <p>徽章大小，直接继承父元素的大小 </p>
        <div class="m-t-25">
            <h1>示例标题 <span class="badge badge-primary lh-1">New</span></h1>
            <h2>示例标题 <span class="badge badge-primary lh-1">New</span></h2>
            <h3>示例标题 <span class="badge badge-primary lh-1">New</span></h3>
            <h4>示例标题 <span class="badge badge-primary lh-1">New</span></h4>
            <h5>示例标题 <span class="badge badge-primary lh-1">New</span></h5>
            <h6>示例标题 <span class="badge badge-primary lh-1">New</span></h6>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <h4>样式</h4>
        <p>添加以下任何样式，更改徽章的外观。</p>
        <div class="m-t-25">
            <span class="badge badge-default">默认</span>
            <span class="badge badge-primary">主要</span>
            <span class="badge badge-secondary">次要</span>
            <span class="badge badge-success">成功</span>
            <span class="badge badge-danger">危险</span>
            <span class="badge badge-warning">警告</span>
            <span class="badge badge-info">信息</span>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <h4>药丸徽章</h4>
        <p>使用class样式 <code>.badge-pill</code> 使徽章圆角 (一个较大的圆角边框 <code>border-radius</code> and 水平内边距 <code>padding</code>). </p>
        <div class="m-t-25">
            <span class="badge badge-pill badge-default">首页</span>
            <span class="badge badge-pill badge-primary">主要</span>
            <span class="badge badge-pill badge-secondary">次要</span>
            <span class="badge badge-pill badge-success">成功</span>
            <span class="badge badge-pill badge-danger">危险</span>
            <span class="badge badge-pill badge-warning">警告</span>
            <span class="badge badge-pill badge-info">信息</span>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <h4>双色调徽章</h4>
        <p>我们预设了一系列双色调徽章样式，用于不同情况。 </p>
        <div class="m-t-25">
            <span class="badge badge-pill badge-magenta">magenta</span>
            <span class="badge badge-pill badge-red">red</span>
            <span class="badge badge-pill badge-volcano">volcano</span>
            <span class="badge badge-pill badge-orange">orange</span>
            <span class="badge badge-pill badge-gold">gold</span>
            <span class="badge badge-pill badge-lime">lime</span>
            <span class="badge badge-pill badge-green">green</span>
            <span class="badge badge-pill badge-cyan">cyan</span>
            <span class="badge badge-pill badge-blue">blue</span>
            <span class="badge badge-pill badge-geekblue">geekblue</span>
            <span class="badge badge-pill badge-purple">purple</span>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <h4>链接</h4>
        <p>在<code>&lt;a&gt;</code>元素上使用class样式 <code>.badge-*</code> 可以快速提供具有悬停和焦点状态的 <em>可操作的</em> 徽章 </p>
        <div class="m-t-25">
            <a href="#" class="badge badge-primary">主要</a>
            <a href="#" class="badge badge-secondary">次要</a>
            <a href="#" class="badge badge-success">成功</a>
            <a href="#" class="badge badge-danger">危险</a>
            <a href="#" class="badge badge-warning">警告</a>
            <a href="#" class="badge badge-info">信息</a>
        </div>
    </div>
</div>
<!-- /gc:html -->
