按钮案例

提交按钮

按钮 按钮 按钮

你也可以通过添加类名 bg-color-* 来改变按钮颜色，例如

按钮 按钮 按钮 按钮 按钮 按钮

你也可以通过<a>标签添加.button类名创建按钮

按钮 按钮 按钮

命令按钮

是的，分享和链接使用这个选项为家庭或工作 是的，分享和链接使用这个选项为家庭或工作 三级命令，不能按 :) 这是禁用的命令按钮

    <button>按钮</button>
    <button class="default">按钮</button>
    <button disabled>按钮</button>
    <a class="button">按钮</a>

    <button class="command-button">
        是的，分享和链接
        <small>使用这个选项为家庭或工作</small>
    </button>
 
    <button class="command-button default">...</button>
    <button class="command-button" disabled>...</button>

工具条

    <div class="toolbar">
        <button />
        ...
        <button />
    </div>

按钮组合工具条

    <div class="toolbar">
        <div class="toolbar-group">
            <button />
            ...
            <button />
        </div>
        ...
        <div class="toolbar-group">
            <button />
            ...
            <button />
        </div>
    </div>

垂直工具条

    <div class="toolbar-vertical">
        <button />
        ...
        <button />
    </div>

垂直工具条组

    <div class="toolbar-vertical">
        <div class="toolbar-group">
            <button />
            ...
            <button />
        </div>
        ...
        <div class="toolbar-group">
            <button />
            ...
            <button />
        </div>
    </div>

图片按钮

下载资源 保护你的电脑

    <button class="image-button"> 标题 <img/> </button>
    ===================
    <button class="image-button bg-color-darken fg-color-white">下载<img src="images/down.png"/></button>

按钮大小

    <button class="mini"> 按钮标题 </button>
    <button> 按钮标题 </button>
    <button class="big"> 按钮标题 </button>

图标按钮

按钮 按钮 按钮

    <button><i class="icon-*"></i>按钮标题</button>
    <button>按钮标题<i class="icon-*"></i></button>
    <button class="default"><i class="icon-*"></i>按钮标题</button>

快捷键按钮

您可以使用任何标签来创建快捷按钮。 可能是a, button, span, 等等. 你可以使用类名为快捷键按钮设置背景色、前景色以及徽章之类。

收藏夹 用户 100 链接 100

    <button class="shortcut">
        <span class="icon">
            <i class="icon-*"></i>
        </span>
        <span class="label">
            标题
        </span>
        <span class="badge">100</span>
    </button>

分页导航

    <div class="pagination">
        <ul>
            <li class="first"><a></a></li>
            <li class="prev"><a></a></li>
            <li><a>1</a></li>
            ...
            <li class="active"><a>1</a></li>
            <li class="disabled"><a>1</a></li>
            <li class="spaces"><a>...</a></li>
            ...
            <li><a>N</a></li>
            <li class="next"><a></a></li>
            <li class="last"><a></a></li>
        </ul>
    </div>