KISSY提供的Button样式
Source
Output
QRCode
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>KISSY提供的Button样式</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/tables.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/button/assets/dpl.css">
<style type="text/css">
.para {
margin: 1em 0;
}
.container{
width: 90%;
}
</style>
<script type="text/javascript" src="//g.alicdn.com/kissy/k/5.0.1/seed.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>KISSY提供的Button样式</h1>
</div>
<table class="table table-bordered table-striped" id="table">
<thead>
<tr>
<th>按钮</th>
<th>应用的样式（class=""）</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="ks-button">Default</div>
</td>
<td><code>ks-button</code></td>
<td>默认的灰色按钮，并带有渐变色</td>
</tr>
<tr>
<td>
<div class="ks-button ks-button-primary">Primary</div>
</td>
<td><code>ks-button ks-button-primary</code></td>
<td>提供更深的色度来表明在按钮组中是最重要的行为</td>
</tr>
<tr>
<td>
<div class="ks-button ks-button-info">Info</div>
</td>
<td><code>ks-button ks-button-info</code></td>
<td>默认样式的一种替代方案</td>
</tr>
<tr>
<td>
<div class="ks-button ks-button-success">Success</div>
</td>
<td><code>ks-button ks-button-success</code></td>
<td>表示一个成功的或者有积极意义的行为</td>
</tr>
<tr>
<td>
<div class="ks-button ks-button-warning">Warning</div>
</td>
<td><code>ks-button ks-button-warning</code></td>
<td>表明警告，并需要采取这种行为的操作</td>
</tr>
<tr>
<td>
<div class="ks-button ks-button-danger">Danger</div>
</td>
<td><code>ks-button ks-button-danger</code></td>
<td>表明一个危险的或者潜在的有消极意义的行为</td>
</tr>
<tr>
<td>
<div class="ks-button ks-button-inverse">Inverse</div>
</td>
<td><code>ks-button ks-button-inverse</code></td>
<td>深灰色的按钮，默认按钮的一种替代按钮，跟语义无关的操作</td>
</tr>
</tbody>
</table>
<div class="row" id="common">
<div class="span8">
<h3>按钮的行为</h3>
<p>
一般而言，按钮仅当链接作为一个行为对象时来使用时。
例如“下载”应当为一个按钮，“最近活动”应该是一个链接。
</p>
</div>
<div class="span8">
<h3>多种尺寸</h3>
<p>你喜欢大的还是小的按钮？添加样式<code>.ks-button-large</code>, <code>.ks-button-small</code>或者 <code>.ks-button-mini</code>实现不同的样式。</p>
<div class="para">
<div class="ks-button ks-button-large ks-button-primary">
Primary action
</div>
<div class="ks-button ks-button-large">Action</div>
</div>
<div class="para">
<div class="ks-button ks-button-small ks-button-primary">
Primary action
</div>
<div class="ks-button ks-button-small">Action</div>
</div>
<div class="para">
<div class="ks-button ks-button-mini ks-button-primary">
Primary action
</div>
<div class="ks-button ks-button-mini">Action</div>
</div>
<br>
<h3>不可用状态</h3>
<p>对于不可用的按钮来说,
添加 <code>ks-button-disabled</code>
</p>
<div class="para">
<div class="ks-button ks-button-large ks-button-primary ks-button-disabled">
Primary link
</div>
<div class="ks-button ks-button-large ks-button-disabled">
Common link
</div>
</div>
</div>
</div>
<div class="row" id="checkable">
<span class="span8">
<h3>Button Groups</h3>
通过 <code>ks-button-group</code> 样式把一批 button 放置在一起，可以形成一个按钮组
</span>
<span class="span8">
<h3>Button Group demo</h3>
<div class="ks-button-group">
<div class="ks-button">left</div>
<div class="ks-button">middle</div>
<div class="ks-button">right</div>
</div>
</span>
</div>
</div>
</body>
</html>