Topbar

Left Right

Title

<div class="topbar">
  <a class="link link-primary pull-left" href="#topbar">Left</a>
  <a class="link link-primary pull-right" href="#topbar">Right</a>
  <h3 class="title">Title</h3>
</div>

Button

<button class="btn btn-primary">class="btn btn-primary"</button>

<button class="btn btn-warning">class="btn btn-warning"</button>

<button class="btn btn-default">class="btn btn-default"</button>

<button class="btn btn-default disabled">class="btn btn-default disabled"</button>

Link Button

class="btn btn-parimary"
<a class="btn btn-primary" href="#button">class="btn btn-primary"</a>

class="btn btn-warning"
<a class="btn btn-warning" href="#button">class="btn btn-warning"</a>

class="btn btn-default"
<a class="btn btn-default" href="#button">class="btn btn-default"</a>

<a class="btn btn-default disabled" href="#button">class="btn btn-default disabled"</a>

List

<ul class="list">
  <li class="item">
    <a class="link link-default" href="#list">
      <img src="x-ui.png">
      <div class="content">
        <h3>List item</h3>
        <p>list item example</p>
      </div>
    </a>
  </li>
  <li class="item">
    <a class="link link-default" href="#list">
      <img src="x-ui.png">
      <div class="content">
        <h3>List item</h3>
        <p>list item example</p>
      </div>
    </a>
  </li>
  <li class="item">
    <a class="link link-default" href="#list">
      <img src="x-ui.png">
      <div class="content">
        <h3>List item</h3>
        <p>list item example</p>
      </div>
    </a>
  </li>
</ul>

Card

<ul class="card w-33">
  <li class="item w-50">
    <a class="link link-default" href="#card">
      <img src="x-ui.png">
      <div class="content">
        <h3>Card item</h3>
        <p>card item example</p>
      </div>
    </a>
  </li>
  <li class="item w-50">
    <a class="link link-default" href="#card">
      <img src="x-ui.png">
      <div class="content">
        <h3>Card item</h3>
        <p>card item example</p>
      </div>
    </a>
  </li>
  <li class="item w-100">
    <a class="link link-default" href="#card">
      <img src="x-ui.png">
      <div class="content">
        <h3>Card item</h3>
        <p>card item example</p>
      </div>
    </a>
  </li>
</ul>

Panel

Panel

Content

Panel Content Example

Panel Content Example

Panel Content Example

<div class="panel">
  <div class="header">
    <h3>Panel</h3>
    <div class="actions">
      <a class="link link-primary" href="#panel">action</a>
      <a class="link link-primary" href="#panel">action</a>
    </div>
  </div>
  <div class="content">
    <h3>Content</h3>
    <p>Panel Content Example</p>
    <p>Panel Content Example</p>
    <p>Panel Content Example</p>
  </div>
  <div class="actions">
    <a class="btn btn-primary" href="#panel">action</a>
    <a class="btn btn-warning" href="#panel">action</a>
  </div>
</div>

Input

<input class="input w-33" type="text">
<input class="input w-33" type="password">
<textarea class="input w-33"></textarea>

Radio Button

<label class="radio-btn">
  <input name="radio-btn" type="radio" value="radio-btn-1">
  <span class="checked">radio-btn 1</span>
</label>
<label class="radio-btn">
  <input name="radio-btn" type="radio" value="radio-btn-2">
  <span>radio-btn 2</span>
</label>
<label class="radio-btn">
  <input name="radio-btn" type="radio" value="radio-btn-3">
  <span>radio-btn 3</span>
</label>

Radio Block



<label class="radio-block">
  <input name="radio-block" type="radio" value="radio-block-1" checked="checked">
  <span class="checked title">radio-block 1</span>
  <span>radio-block 1 example</span>
  <span class="actions">
    <a class="link link-primary" href="#radio-block">Edit</a>
    <a class="link link-primary" href="#radio-block">Delete</a>
  </span>
</label>
<label class="radio-block">
  <input name="radio-block" type="radio" value="radio-block-2">
  <span class="title">radio-block 2</span>
  <span>radio-block 2 example</span>
  <span class="actions">
    <a class="link link-primary" href="#radio-block">Edit</a>
    <a class="link link-primary" href="#radio-block">Delete</a>
  </span>
</label>
<label class="radio-block">
  <input name="radio-block" type="radio" value="radio-block-3">
  <span class="title">radio-block 3</span>
  <span>radio-block 3 example</span>
  <span class="actions">
    <a class="link link-primary" href="#radio-block">Edit</a>
    <a class="link link-primary" href="#radio-block">Delete</a>
  </span>
</label>

Checkbox Button

<label class="check-btn">
  <input name="check-btn" type="checkbox" value="check-btn-1" checked="checked">
  <span class="checked">check-btn 1</span>
</label>
<label class="check-btn">
  <input name="check-btn" type="checkbox" value="check-btn-2">
  <span>check-btn 2</span>
</label>
<label class="check-btn">
  <input name="check-btn" type="checkbox" value="check-btn-3">
  <span>check-btn 3</span>
</label>

Tab

  • 概述
  • 参数
  • 配件

Tab1 - 1

Tab2 - 2

Tab3 - 3

<div class="tab">
  <div class="header">
    <ul>
      <li class="selected" data-href="tab1">概述</li>
      <li data-href="tab2">参数</li>
      <li data-href="tab3">配件</li>
    </ul>
  </div>
  <div class="content">
    <div id="tab1" class="item">
      <h1>Tab1 - 1</h1>
    </div>
    <div id="tab2" class="item">
      <h1>Tab2 - 2</h1>
    </div>
    <div id="tab3" class="item">
      <h1>Tab3 - 3</h1>
    </div>
  </div>
</div>

Spinner

PC: DEMO Github