H-ui前端框架

按钮

不支持圆角和背景渐变浏览器，如IE系列，会显示扁平纯色直角效果。

HTML代码

<input class="btn btn-default" type="button" value="默认">
<input class="btn btn-default radius" type="button" value="圆角效果">
<input class="btn btn-default round" type="button" value="椭圆效果">
<input class="btn btn-primary radius" type="button" value="主要">
<input class="btn radius btn-secondary" type="button" value="次要">
<input class="btn btn-success radius" type="button" value="成功">
<input class="btn radius btn-warning" type="button" value="警告">
<input class="btn btn-danger radius" type="button" value="危险">
<input class="btn btn-link radius" type="button" value="链接">
<input class="btn disabled radius" type="button" value="禁用">

<input class="btn btn-primary size-XL radius" type="button" value="特大按钮">
<input class="btn btn-primary size-L radius" type="button" value="大按钮">
<input class="btn btn-primary size-M radius" type="button" value="默认尺寸">
<input class="btn btn-primary size-S radius" type="button" value="小按钮">
<input class="btn btn-primary size-MINI radius" type="button" value="迷你按钮">

表格

1.表格基本样式

class说明	表格样式
.table	默认样式
.table-border	带水平线
.table-bg th	带背景
.table -bordered	带外边框
.radius	圆角
.table-striped	奇数行背景设为浅灰色

2.表格数据样式

class说明	数据行样式
.ative	悬停在行
.success	成功或积极
.warning	警告或出错
.danger	危险

HTML代码

<table class="table table-border table-bg table-bordered">
  <thead>
    <tr><th width="20%">Class</th><th>描述</th></tr>
  </thead>
  <tbody>
    <tr class="active"><th>.active</th><td>悬停在行</td></tr>
    <tr class="success"><th>.success</th><td>成功或积极</td></tr>
    <tr class="warning"><th>.warning</th><td>警告或出错</td></tr>
    <tr class="danger"><th>.danger</th><td>危险</td></tr>
  </tbody>
</table>

表单

1.文本框

尺寸	class
迷你尺寸	input-text radius size-MINI
小尺寸	input-text radius size-S
默认尺寸	input-text radius size-M
大尺寸	input-text radius size-L
特大尺寸	input-text radius size-XL

2.radio，checkbox(已封装)

HTML代码

<div class="skin-minimal">
  <div class="check-box">
    <input type="checkbox" id="checkbox-1">
    <label for="checkbox-1">复选框</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="checkbox-2" checked>
    <label for="checkbox-2">复选框 checked状态</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="checkbox-disabled" disabled>
    <label for="checkbox-disabled">Disabled</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="checkbox-disabled-checked" checked disabled>
    <label for="checkbox-disabled-checked">Disabled &amp; checked</label>
  </div>
</div>
<div class="mt-20 skin-minimal">
  <div class="radio-box">
    <input type="radio" id="radio-1" name="demo-radio1">
    <label for="radio-1">单选按钮</label>
  </div>
  <div class="radio-box">
    <input type="radio" id="radio-2" name="demo-radio1" checked>
    <label for="radio-2">单选按钮 checked状态</label>
  </div>
  <div class="radio-box">
    <input type="radio" id="radio-disabled" disabled>
    <label for="radio-disabled">Disabled</label>
  </div>
  <div class="radio-box">
    <input type="radio" id="radio-disabled-checked" checked disabled>
    <label for="radio-disabled-checked">Disabled &amp; checked</label>
  </div>
</div>

3.Select

HTML代码

<span class="select-box">
  <select class="select" size="1" name="demo1">
    <option value="" selected>默认select</option>
    <option value="1">菜单一</option>
    <option value="2">菜单二</option>
    <option value="3">菜单三</option>
  </select>
</span>

 

来源：oschina

链接：https://my.oschina.net/stupidpotato/blog/3165420