复选框

单选框

切换控制

    <label class="checkbox">
        <input type="checkbox">
        <span>CheckBox Caption</span>
    </label>
 
    <label class="radiobox">
        <input type="radio">
        <span>CheckBox Caption</span>
    </label>
 
    <label class="switch">
        <input type="checkbox">
        <span>CheckBox Caption</span>
    </label>

按钮

    <input type="button" value="按钮"/>
    <input type="submit" value="Submit"/>
    <input type="reset"  value="Reset"/>
    <input type="button" disabled value="按钮"/>

文本框

    <div class="input-control text">
        <input type="text[email, phone, url]" />
        <span class="helper"></span>
    </div>

密码框

    <div class="input-control password">
        <input type="password" />
        <span class="helper"></span>
    </div>

选择

    <div class="input-control select">
        <select>
            <option>...</option>
        </select>
    </div>

    <div class="input-control select">
        <select multiple="">
            <option>...</option>
        </select>
    </div>

    <div class="input-control textarea">
        <textarea>
        </textarea>
    </div>

表单标记 (Fieldset)

    <fieldset>
        <legend>...</legend>
        ...
    </fieldset>

input 使用 spanN class

    <div class="input-control text spanN">
        <input type="text" />
        <span class="helper"></span>
    </div>

推送按钮

You can also change the color of the button by
adding bg-color-* class. Example:

You can use tag <a> for creating button with class .button

命令按钮

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

    <button class="command-button">
        Yes, share and connect
        <small>Use this option for home or work</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"> Caption <img/> </button>
    ===================
    <button class="image-button bg-color-darken fg-color-white">Download<img src="images/down.png"/></button>

Any size of button

    <button class="mini"> Caption </button>
    <button> Caption </button>
    <button class="big"> Caption </button>

图标按钮

    <button><i class="icon-*"></i>Caption</button>
    <button><i class="icon-* right"></i>Caption</button>
    <button><i class="icon-* white"></i>Caption</button>