<div class="ub-alert danger lg">
    <i class="iconfont icon-close-o"></i> 危险提示
</div>
<div class="ub-alert success lg">
    <i class="iconfont icon-checked"></i> 成功提示
</div>
<div class="ub-alert warning lg">
    <i class="iconfont icon-warning"></i> 警告提示
</div>

<div class="ub-alert danger">
    <i class="iconfont icon-close-o"></i> 危险提示
</div>
<div class="ub-alert success">
    <i class="iconfont icon-checked"></i> 成功提示
</div>
<div class="ub-alert warning">
    <i class="iconfont icon-warning"></i> 警告提示
</div>

<div class="ub-breadcrumb">
    <a href="#">首页</a>
    <a href="#">UI加速器</a>
    <a href="#">样式学院</a>
    <a class="active" href="#">ModStart是一个快速开发框架</a>
</div>

<button class="btn btn-lg">按钮</button>
<button class="btn btn-lg btn-primary">按钮</button>
<button class="btn btn-lg btn-success">按钮</button>
<button class="btn btn-lg btn-danger">按钮</button>
<button class="btn btn-lg btn-warning">按钮</button>
<button class="btn btn-lg btn-primary-line">按钮</button>
<button class="btn btn-lg btn-round">按钮</button>

<button class="btn btn-sm">按钮</button>
<button class="btn btn-sm btn-primary">按钮</button>
<button class="btn btn-sm btn-success">按钮</button>
<button class="btn btn-sm btn-danger">按钮</button>
<button class="btn btn-sm btn-warning">按钮</button>
<button class="btn btn-sm btn-primary-line">按钮</button>
<button class="btn btn-sm btn-round">按钮</button>

<button class="btn">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-primary-line">按钮</button>
<button class="btn btn-round">按钮</button>

<div class="row">
    <div class="col-md-3 col-12">
        <div class="ub-placeholder">col-md-3 col-12</div>
    </div>
    <div class="col-md-3 col-12">
        <div class="ub-placeholder">col-md-3 col-12</div>
    </div>
    <div class="col-md-3 col-12">
        <div class="ub-placeholder">col-md-3 col-12</div>
    </div>
    <div class="col-md-3 col-12">
        <div class="ub-placeholder">col-md-3 col-12</div>
    </div>
</div>

<div class="ub-panel tw-shadow">
    <div class="head">
        <div class="more">
            <a href="#">更多</a>
        </div>
        <div class="title">面板标题</div>
    </div>
    <div class="body">
        <p>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</p>
        <p>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</p>
    </div>
</div>