表单

统一表单控件的基础样式。

控件默认样式

优化控件的默认样式，使其行内垂直对齐，无须添加任何样式类。 注意：空白将占据横向空间，如果要保持横向间距统一应设置控件容器 font-size:0;

按钮

应用常规状态色的按钮。

<a class="button primary" type="button" value="primary">primary</a>
<a class="button secondary" type="button" value="secondary">secondary</a>
<input class="success" type="button" value="success" />
<input class="danger" type="button" value="danger" />
<input class="warning" type="button" value="warning" />
<input class="information" type="button" value="information" />
<button class="light" type="button">light</button>
<button class="dark" type="button">dark</button>

应用轻量状态色的按钮。

<a class="button pale primary" type="button" value="primary">primary</a>
<a class="button pale secondary" type="button" value="secondary">secondary</a>
<input class="pale success" type="button" value="success" />
<input class="pale danger" type="button" value="danger" />
<input class="pale warning" type="button" value="warning" />
<input class="pale information" type="button" value="information" />
<button class="pale light" type="button">light</button>
<button class="pale dark" type="button">dark</button>

按钮组合

通过 group 样式类包裹 input(type="button") 或 button，组合按钮将合并边界使其成为一体。

<div class="group">
	<button class="primary" type="button">1</button>
	<button class="primary" type="button">2</button>
	<button class="primary" type="button">3</button>
</div>
<div class="group">
	<button class="primary" type="button"><</button>
	<button class="information" type="button">1</button>
	<button class="information" type="button">2</button>
	<button class="information" type="button">3</button>
	<button class="primary" type="button">></button>
</div>

输入框组合

通过 group 样式类包裹 label 、 button 和输入框，使其组合成一体。

<div class="group">
	<label>关键字</label>
	<input type="text" />
	<button type="button">搜索</button>
</div>
<div class="group">
	<label class="light">关键字</label>
	<input type="text" />
	<button class="primary" type="button">搜索</button>
</div>
<div class="group">
	<input type="text" placeholder="用户名" />
	<label class="light">@</label>
	<input type="text" placeholder="主机" />
</div>