List item
list item example
<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>
<a class="link link-primary" href="#link">class="link link-primary"</a>
<a class="link link-warning" href="#link">class="link link-warning"</a>
<a class="link link-default" href="#link">class="link link-default"</a>
<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>
<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 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 class="input w-33" type="text"> <input class="input w-33" type="password"> <textarea class="input w-33"></textarea>
<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>
<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>