前言

SaUI 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html>
<html lang="zh-CN">
	...
</html>

为了增强跨浏览器表现的一致性，SaUI 使用了 Normalize.css ，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个 CSS 重置样式库。

SaUI 是优先移动设备的。为了确保适当的绘制和触屏缩放，需要在<head>之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视界（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

注意：SaUI 并没有针对 IE 等低版本浏览器进行优化或兼容。但并不表示不支持如 Edge 这样的比较高级点的 MS 系。不过如果你在 Edge 上面（也）发现不可用也纯属正常。

栅格

SaUI 将栅格设计为了12列，每列的宽度为父级的百分比。
父级元素定义.grid样式作用栅格系统。栅格列使用了左浮动定位，类名为.col-*，*的范围从1-12的整数，每个数字各表示占用的列数。
使用.col-offset-*可以使列左偏移对应*的列数宽度。
如果一行内的列数（包括偏移的列数）超过了12列，其余的将会在另一行展现。将 “列” 嵌套进 “行” .row里可以达到强制换行的效果。
注意：栅格列使用了左浮动，在使用时必须理解相应会发生的特性。

.col-1
.col-9.col-offset-2
.col-2
.col-8.col-offset-2
.col-3
.col-7.col-offset-2
.col-4
.col-6.col-offset-2
.col-5
.col-10.col-offset-2
.col-11.col-offset-1
.col-12
<div class="grid">
	<div class="row">
		<div class="col-1">.col-1</div>
		<div class="col-9 col-offset-2">.col-9.col-offset-2</div>
	</div>
	<div class="row">
		<div class="col-2">.col-2</div>
		<div class="col-8 col-offset-2">.col-8.col-offset-2</div>
	</div>
	<div class="row">
		<div class="col-3">.col-3</div>
		<div class="col-7 col-offset-2">.col-7.col-offset-2</div>
	</div>
	<div class="row">
		<div class="col-4">.col-4</div>
		<div class="col-6 col-offset-2">.col-6.col-offset-2</div>
	</div>
	<div class="row">
		<div class="col-5">.col-5</div>
	</div>
	<div class="row">
		<div class="col-10 col-offset-2">.col-10.col-offset-2</div>
	</div>
	<div class="row">
		<div class="col-11 col-offset-1">.col-11.col-offset-1</div>
	</div>
	<div class="row">
		<div class="col-12">.col-12</div>
	</div>
</div>

带间距的栅格

添加上 class .grid-pad可以使每一列栅格之间存在一个 8px 左右的间距，如果栅格列包含在.row里，那么将会在两端设置一个 -8px 的间距，使得列的最两端正常对齐。具体效果参照下面的示例。

.col-6
.col-6
.col-1
.col-11
.col-2
.col-10
.col-3
.col-9
.col-4
.col-8
.col-5
.col-7
.row .col-7
.row .col-5
.row .col-12
<div class="grid grid-pad">
	<div class="col-6">
		<div class="bg-warn">.col-6</div>
	</div>
	<div class="col-6">
		<div class="bg-warn">.col-6</div>
	</div>
	<div class="col-1">
		<div class="bg-warn">.col-1</div>
	</div>
	<div class="col-11">
		<div class="bg-warn">.col-11</div>
	</div>
	<div class="col-2">
		<div class="bg-warn">.col-2</div>
	</div>
	<div class="col-10">
		<div class="bg-warn">.col-10</div>
	</div>
	<div class="col-3">
		<div class="bg-warn">.col-3</div>
	</div>
	<div class="col-9">
		<div class="bg-warn">.col-9</div>
	</div>
	<div class="col-4">
		<div class="bg-warn">.col-4</div>
	</div>
	<div class="col-8">
		<div class="bg-warn">.col-8</div>
	</div>
	<div class="col-5">
		<div class="bg-warn">.col-5</div>
	</div>
	<div class="col-7">
		<div class="bg-warn">.col-7</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div class="bg-error">.col-12</div>
		</div>
	</div>
</div>

响应式的栅格

响应式的栅格在原有的栅格命名上加上了对应各自屏幕尺寸的前缀，具体参照下表。

Class作用屏幕尺寸说明
.col-xs-*手机屏幕只在视窗界面大小<768px的情况下生效
.col-sm-*平板竖屏只在视窗界面大小≥768px和<1024px的情况下生效
.col-md-*平板横屏只在视窗界面大小≥1024px和<1440px的情况下生效
.col-lg-*显示器屏幕只在视窗界面大小≥1440px和<1900px的情况下生效
.col-xl-*大屏显示器只在视窗界面大小≥1900px的情况下生效

同样，每个不同尺寸里也有偏移 class 。只需加上不同的前缀即可，比如：.col-xs-offset-*。

表格

给<table>添加 class .table可以添加默认的 padding、border，同时突出表头。

常规表格

#First NameLast NameNickname
1AngusYoungAY
2SimonWangDa C
3JimZimJimJim

带边框的表格

给表格添加 class .table-bordered就可以给表格及每个单元格增加边框。

#First NameLast NameNickname
1AngusYoungAY
2SimonWangDa C
3JimZimJimJim

斑马纹式的表格

为了让比较大的表格看起来容易区分行，给<table>添加 class .table-striped就可以自动生成斑马纹效果。

#OneTwo
1一One
2二Two
3三Three
4四Four
5五Five
6六Six

鼠标悬停

通过添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。
注意：使用鼠标悬停效果将会强制将表格行的背景颜色去除。

#First NameLast NameNickname
1AngusYoungAY
2SimonWangDa C
3JimZimJimJim

紧凑表格

添加.table-thin类可以让表格更加紧凑，行距和单元格的 padding 都会减少。

#First NameLast NameNickname
1AngusYoungAY
2SimonWangDa C
3JimZimJimJim

表格状态类

在表格的<tr>添加下列的 class 可以表示不同的信息。

#Class
1.table-success
2
3.table-info
4
5.table-warn
6
7.table-danger

表单

为表单<form>添加 class .form就可以作用表单的样式。

将表单里的每一个项包含在 class 为.form-group的容器里可以实现以下不同特性的表单展现。这种做法可以理解为 SaUI 的规范。

常规表单

Cancel
<form class="form">
	<div class="form-group">
		<label for="email">Email:</label>
		<input type="email" id="email" name="email" placeholder="Email">
	</div>
	<div class="form-group">
		<label for="password">Password:</label>
		<input type="password" id="password" name="password" placeholder="Password">
	</div>
	<button type="submit">Submit</button><a href="#" class="btn-text">Cancel</a>
</form>

内联式表单

给表单添加一个 class .form-inline即可实现以下效果的内联式表单（无法作用在小屏幕下）：

<form class="form form-inline">
	<div class="form-group">
		<label for="email2">Email:</label>
		<input type="email" id="email2" name="email" placeholder="Email">
	</div>
	<div class="form-group">
		<label for="password2">Password:</label>
		<input type="password" id="password2" name="password" placeholder="Password">
	</div>
	<div class="form-group">
		<label>
			<input type="checkbox" name="remember" value="yes">Remember me
		</label>
	</div>
	<button type="submit">Submit</button>
</form>

堆叠式表单

给表单添加一个 class .form-stacked即可实现以下效果的堆叠式表单：

<form class="form form-stacked">
	<div class="form-group">
		<label for="email3">Email:</label>
		<input type="email" id="email3" name="email" placeholder="Email">
	</div>
	<div class="form-group">
		<label for="password3">Password:</label>
		<input type="password" id="password3" name="password" placeholder="Password">
	</div>
	<div class="form-group">
		<label>Gender:</label>
		<label class="form-radio">
			<input type="radio" name="gender" value="0"> Female
		</label>
		<label class="form-radio">
			<input type="radio" name="gender" value="1"> Male
		</label>
	</div>
	<div class="form-group">
		<label class="form-checkbox">
			<input type="checkbox" name="remember" value="yes">Remember me
		</label>
	</div>
	<button type="submit">Submit</button>
	<button type="reset">Reset</button>
</form>

对齐排列表单

给表单添加一个 class .form-horizontal即可实现以下效果的对齐排列表单：

<form class="form form-horizontal">
	<div class="form-group">
		<label for="email4">Email:</label>
		<input type="email" id="email4" name="email" placeholder="Email" class="form-control">
	</div>
	<div class="form-group">
		<label for="password4">Password:</label>
		<input type="password" id="password4" name="password" placeholder="Password" class="form-control">
	</div>
	<div class="form-group">
		<label for="select2">Gender:</label>
		<div class="form-select">
			<select id="select2" name="select">
				<option value="0">Female</option>
				<option value="1">Male</option>
			</select>
		</div>
	</div>
	<div class="form-group">
		<label class="form-checkbox">
			<input type="checkbox" name="remember" value="yes">Remember me
		</label>
	</div>
	<button type="submit">Submit</button>
	<button type="reset">Reset</button>
</form>

多列排列表单（配合栅格）

在表单上添加栅格的 class .grid即可在内部使用栅格列.col-*以此达到下面多列显示的效果：

<form class="form form-stacked grid">
	<div class="form-group col-4">
		<label>First Name</label>
		<input type="text" class="form-control">
	</div>
	<div class="form-group col-4">
		<label>Last Name</label>
		<input type="text" class="form-control">
	</div>
	<div class="form-group col-4">
		<label>City</label>
		<input type="text" class="form-control">
	</div>
	<div class="form-group col-6">
		<label>Address</label>
		<input type="text" class="form-control">
	</div>
	<div class="form-group col-6">
		<label>Email</label>
		<input type="text" class="form-control">
	</div>
</form>

不一样的 Input

将多个 input 放入同一个父级元素<fieldset>里或者添加 class .input-group就可以以组合的形式展示。

  1. fieldset 组合

    fieldset 组合可以将多个<input>包裹成一个整体，适用在需要填写多个同一所属的表单时，比如联系人资料之类的多个表单项。

    联系资料
    <form class="form">
	<div class="form-group">
		<fieldset>
			<legend>联系资料</legend>
			<input type="text" class="form-control">
			<input type="text" class="form-control">
			<input type="text" class="form-control">
			<input type="text" class="form-control">
		</fieldset>
	</div>
	<div class="form-group">
		<fieldset>
			<input type="text" class="form-control">
			<input type="text" class="form-control">
		</fieldset>
	</div>
</form>

  2. 横向 fieldset 组合

    为 <fieldset> 添加.horizontal类，即可将原本竖向排列的变换为横向排列。

    <form class="form">
	<div class="form-group">
		<fieldset class="horizontal">
			<input type="text" placeholder="姓名">
			<input type="text" placeholder="电话">
			<input type="text" placeholder="地址">
		</fieldset>
	</div>
</form>

  3. 单行组合

    单行组合是由一个<input>和<button>组成的一个水平排列整体，也可以增加一个拥有.input-addon、.input-addon-r类的元素，使这个元素与<input>、<button>组合成一个整体。为了在<input>获取焦点时整个组合更加整体，请务必让<input>作为父级的第一个子元素。

    我们可以在.input-addon、.input-addon-r里面直接输入文本或者使用字体图标也可以使用下拉菜单等组件。

    Type
    Article Title
    Article Content
    <form class="form">
	<div class="form-group">
		<div class="input-group">
			<input type="search" placeholder="Input search keyword">
			<button type="button" class="btn btn-ellipse">Search</button>
		</div>
	</div>
	<div class="form-group">
		<div class="input-group">
			<input type="email" id="email5" placeholder="input email address">
			<label for="email5" aria-label="email" class="input-addon">
				<span aria-hidden="true">@</span>
			</label>
			<button type="button">Submit</button>
		</div>
	</div>
	<div class="form-group">
		<div class="input-group">
			<input type="search" placeholder="Search articles">
			<div class="dropdown input-addon">
				<div class="dropdown-text">Type</div>
				<div class="dropdown-icon"></div>
				<div class="dropdown-menu">
					<div class="dropdown-item"><a href="javascript:;">Article Title</a></div>
					<div class="dropdown-item"><a href="javascript:;">Article Content</a></div>
				</div>
			</div>
			<button type="button" class="btn btn-ellipse">Search</button>
		</div>
	</div>
</form>

  4. 特殊的 Radio 组合（仅 webkit 支持）

    注意：在三个及以上的 Radio 组里从第二到最后第二个之间，如果前一个选中项在右边的话动画效果存在方向错误的 BUG。因此不建议使用，在这仅是作为一个技术研究方案。

  5. 特殊的 Checkbox （仅 webkit 支持）

    为checkbox类型的<input>添加 class .form-switch即可实现以下开关按钮的效果：

    <form class="form">
	<div class="form-group">
		<input type="checkbox" class="form-switch">
		<input type="checkbox" class="form-switch switch-text">
	</div>
	<div class="form-group">
		<input type="checkbox" class="form-switch switch-hollow">
		<input type="checkbox" class="form-switch switch-hollow switch-text">
	</div>
</form>

表单状态

通过设置表单<input>, <select>, <button>的属性，可以为表单项设置禁用（disabled），只读（readonly）等状态，并表现出来。

也可以为表单项增加同级元素.form-error在表单填写错误时响应的显示错误提示

  1. 表单错误状态

    常规表单
    内容不可以为空
    内联式表单
    内容不可以为空
    堆叠表单
    设定长度为 200px 内容不可以为空，内容不可以为空
    内容不可以为空
    请填写内容

    单行组合与错误提示无法自适应贴合，建议使用时设定好相同宽度。其它特殊情况无法自适应宽度的都使用此方法处理。

    对齐排列表单
    内容不可以为空
    内容不可以为空

  2. 禁用状态

    <form class="form">
	<div class="form-group">
		<input type="text" placeholder="Input 禁用" disabled>
	</div>
	<div class="form-group">
		<div class="form-select">
			<select disabled>
				<option>Select 禁用</option>
			</select>
		</div>
	</div>
	<button type="button" disabled>Button 禁用</button>
</form>

  3. 只读状态

    <input type="text" value="Input 只读" readonly>

按钮

给<a>或者<button>添加 class .btn.btn-default，可实现默认按钮样式。
注意：如果需要无边框背景的<a>按钮，直接使用 class .btn-text 即可，不可直接用在<button>上。表单form内的<button>自动适配按钮样式。

A ButtonA Button without border
<a href="#" class="btn btn-default">A Button</a>
<button type="button" class="btn btn-default-o">Button</button>
<a href="#" class="btn-text">A Button without border</a>

按钮的样式

按钮的样式分别有以下几种：

首选操作成功操作信息操作危险操作警告操作
<a href="#" class="btn btn-primary">首选操作</a>
<a href="#" class="btn btn-success">成功操作</a>
<a href="#" class="btn btn-info">信息操作</a>
<a href="#" class="btn btn-danger">危险操作</a>
<a href="#" class="btn btn-warn">警告操作</a>

镂空按钮

添加 class .btn-hollow可以显示镂空样式。

<button type="button" class="btn btn-hollow btn-primary">首选操作</button>
<button type="button" class="btn btn-hollow btn-success">成功操作</button>
<button type="button" class="btn btn-hollow btn-ellipse btn-info">信息操作</button>
<button type="button" class="btn btn-hollow btn-danger">危险操作</button>
<button type="button" class="btn btn-hollow btn-warn">警告操作</button>

椭圆按钮

添加 class .btn-ellipse可以将按钮显示为椭圆形按钮。

<button type="button" class="btn btn-ellipse btn-primary">首选操作</button>
<button type="button" class="btn btn-ellipse btn-success">成功操作</button>
<button type="button" class="btn btn-ellipse btn-info">信息操作</button>
<button type="button" class="btn btn-ellipse btn-danger">危险操作</button>
<button type="button" class="btn btn-ellipse btn-warn">警告操作</button>

按钮大小

添加 class .btn-xl，.btn-lg，.btn-sm，.btn-xs定义按钮的大小，默认大小无须定义。

按钮 .btn-xl按钮 .btn-lg默认按钮大小按钮 .btn-sm按钮 .btn-xs

按钮 .btn-xl按钮 .btn-lg默认按钮大小按钮 .btn-sm按钮 .btn-xs

<a href="#" class="btn btn-xl btn-default">按钮 .btn-xl</a>
<a href="#" class="btn btn-lg btn-default">按钮 .btn-lg</a>
<a href="#" class="btn btn-default">默认按钮大小</a>
<a href="#" class="btn btn-sm btn-default">按钮 .btn-sm</a>
<a href="#" class="btn btn-xs btn-default">按钮 .btn-xs</a>

按钮的状态

  1. 禁用

    给按钮添加.btn-disabled class 或者给<button>添加disabled属性可以赋于禁用的样式。

    注意：<a>按钮的禁用状态只是样式上的展现，如果需要行为上的禁用请通过 JS 处理。

    A 按钮禁用
    <a href="#" class="btn btn-primary btn-disabled">A 按钮禁用</a>
<button type="button" disabled class="btn btn-default">Button 按钮禁用</button>

  2. 激活

    按钮的激活状态，一般用在识别当前操作进程的展示。比如选项卡切换的当前态。为按钮添加.btn-active class 即可达到此效果。

    这是 已激活 的按钮这是 未激活 的按钮
    <a href="#" class="btn btn-active btn-primary">这是 已激活 的按钮</a>

图片

响应式图片

通过为图片添加.img-responsive类可以让图片支持响应式布局，从而让图片在其父元素中更好的缩放。

<img src="..." class="img-responsive">

图片形状

通过添加以下相应 class ，可以让图片呈现不同的形状。

<img src="..." class="img-radius">
<img src="..." class="img-circle">
<img src="..." class="img-thumbnail">

配合边框样式.border-*使用可以给图片加上边框，甚至可以重新定义缩略图的边框颜色。

<img src="..." class="img-circle border-warn">

辅助类

响应式可见类

通过设置以下 class ，可以让内容在对应的屏幕尺寸下不可见。具体参照下表：

手机屏幕<768px平板竖屏≥768px平板横屏≥1024px显示器屏幕≥1440px大屏显示器≥1920px
.hidden-sm-down隐藏可见可见可见可见
.hidden-md-down隐藏隐藏可见可见可见
.hidden-lg-down隐藏隐藏隐藏可见可见
.hidden-xl-down隐藏隐藏隐藏隐藏可见
.hidden-xs-up可见隐藏隐藏隐藏隐藏
.hidden-sm-up可见可见隐藏隐藏隐藏
.hidden-md-up可见可见可见隐藏隐藏
.hidden-lg-up可见可见可见可见隐藏

您可以试着调整窗口的大小，体验一下下面示例的变化。

手机屏幕可见

平板竖屏

平板竖屏可见

平板横屏

平板横屏可见

显示器屏幕

显示器屏幕可见

大屏显示器

大屏显示器可见

情境文本颜色

通过颜色来展示意图，这些类可以应用于链接。

这是一段重要的文本

这是一段成功的文本

这是一段信息提示的文本

这是一段错误提示的文本

这是一段警告提示的文本

<p class="text-primary">....</p>
<p class="text-success">....</p>
<p class="text-info">....</p>
<p class="text-error">....</p>
<p class="text-warn">....</p>

情境背景色

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。

这是一段话里包含有一个链接

这是一段话里包含有一个链接

这是一段话里包含有一个链接

这是一段话里包含有一个链接

这是一段话里包含有一个链接

<p class="bg-primary">....</p>
<p class="bg-success">....</p>
<p class="bg-info">....</p>
<p class="bg-error">....</p>
<p class="bg-warn">....</p>

边框

给页面元素加上边框样式只需加上 class .border-*即可。

给这段文字添加了边框 default

给这段文字添加了边框 primary

给这段文字添加了边框 success

给这段文字添加了边框 info

给这段文字添加了边框 error

给这段文字添加了边框 warn

<p class="border-default">...</p>
<p class="border-primary">...</p>
<p class="border-success">...</p>
<p class="border-info">...</p>
<p class="border-error">...</p>
<p class="border-warn">...</p>

三角符号

我们使用 HTML 标签<i>来表示图标。同样这个只是 SaUI 的一个规范。

<i class="caret"></i>

关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。配合.border-*可以给关闭按钮添加一个边框，我们默认了关闭按钮的圆角程度为圆形。也可以给它添加一个.close-animate class 让关闭按钮拥有旋转动画效果。

<a aria-label="Close" class="close"><i aria-hidden="true">&times;</i></a>
<a aria-label="Close" class="close border-default"><i aria-hidden="true">&times;</i></a>
<a aria-label="Close" class="close close-animate"><i aria-hidden="true">&times;</i></a>

快速浮动

.pull-left左浮动，.pull-right右浮动。这两个样式使用了!important来确定 CSS 优先级。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

块元素居中

添加 class .center-block可以让具备宽度的子元素水平居中于父元素。

<div class="center-block">...</div>

清除浮动

通过为父元素添加.clearfix类可以很容易地清除浮动（float）。

<div class="clearfix">
	...
</div>

显示或隐藏内容

添加 class .show，.hidden用来对任意元素显示或隐藏。同样使用了!important来确定 CSS 优先级。

<div class="show">...</div>
<div class="hidden">...</div>

消失的文字

通过添加.text-hide可以将元素的文字隐藏。一般用在通过背景图片表示信息的地方，比如一个 LOGO 的链接。

<a href="#" class="logo text-hide">SaUI Logo</a>

居中文字

添加.text-center可以为内容设置水平居中。

<div class="text-center">...</div>

居右文字

添加.text-right可以为内容设置右边对齐。

<div class="text-right">...</div>

垂直对齐

通过对父元素设置 class .v-align并且指定高度即可对子元素进行垂直居中对齐或底部对齐。
原理是利用父元素的伪元素来对子元素进行vertical-align属性的对齐。

这是居中对齐的子元素
这是底部对齐的子元素
<div class="v-align border-default text-center">
	<div class="align-middle">这是居中对齐的子元素</div>
</div>

<div class="v-align border-default">
	<div class="align-bottom">这是底部对齐的子元素</div>
</div>

图标

SaUI 的图标目前使用 Font Awesome v4.7.0，涵盖除部分国内社交网站图标以外的其他常见图标。

在使用上只需将前缀更改为sa-icon，图标原有的命名保持不变。在元素上（我们建议使用<i>）添加上sa-icon sa-icon-*就可以显示图标。

  1. 图标尺寸

    图标拥有6种大小尺寸，添加 class .sa-icon-lg、.sa-icon-2x、.sa-icon-3x、.sa-icon-4x、.sa-icon-5x就可以，默认大小不需要添加。

    <i aria-hidden="true" class="sa-icon sa-icon-weixin sa-icon-2x"></i>

  2. 图标颜色

    图标的颜色受元素字体颜色作用，使用不同颜色的图标直接另外定义即可。

    <i aria-hidden="true" class="sa-icon sa-icon-weixin sa-icon-3x text-success"></i>

  3. 动画图标

    Font Awesome 提供了几个 class 来实现不同的动画动作，允许对任何图标使用。分别是：

    • .sa-icon-spin 匀速旋转
    • .sa-icon-pulse 8帧旋转

    在.sa-icon-spinner、.sa-icon-refresh、.sa-icon-cog这几个图标上使用可以获得最佳表现效果。

    <i aria-hidden="true" class="sa-icon sa-icon-spinner sa-icon-spin sa-icon-3x"></i>
<i aria-hidden="true" class="sa-icon sa-icon-spinner sa-icon-pulse sa-icon-3x"></i>

  4. 固定宽度

    Font Awesome 在绘制图标的时候不同图标宽度有差异，添加.sa-icon-fw将图标设置为固定的宽度，解决宽度不一致的对称问题。

    •  QQ
    •  Skype
    •  WeChat
    •  Visa
    •  Long Arrow Up

    •  QQ
    •  Skype
    •  WeChat
    •  Visa
    •  Long Arrow Up
    <ul>
	<li><i class="sa-icon sa-icon-fw sa-icon-qq"></i> QQ</li>
	<li><i class="sa-icon sa-icon-fw sa-icon-skype"></i> Skype</li>
	<li><i class="sa-icon sa-icon-fw sa-icon-weixin"></i> WeChat</li>
	<li><i class="sa-icon sa-icon-fw sa-icon-cc-visa"></i> Visa</li>
	<li><i class="sa-icon sa-icon-fw sa-icon-long-arrow-up"></i> Long Arrow Up</li>
</ul>

  5. 图标按钮

    <a class="btn btn-ellipse btn-primary"><i class="sa-icon sa-icon-lg sa-icon-fw sa-icon-qq"></i></a>
<a class="btn btn-ellipse btn-success"><i class="sa-icon sa-icon-lg sa-icon-fw sa-icon-wechat"></i></a>
<a class="btn btn-ellipse btn-danger"><i class="sa-icon sa-icon-lg sa-icon-fw sa-icon-weibo"></i></a>
<a class="btn btn-ellipse btn-primary"><i class="sa-icon sa-icon-lg sa-icon-fw sa-icon-facebook"></i></a>
<a class="btn btn-ellipse btn-info"><i class="sa-icon sa-icon-lg sa-icon-fw sa-icon-twitter"></i></a>

<button class="btn btn-default-o"><i class="sa-icon sa-icon-lg sa-icon-fw sa-icon-cog"></i>设置</button>
<button class="btn btn-danger"><i class="sa-icon sa-icon-lg sa-icon-fw sa-icon-trash-o"></i>删除</button>
<button class="btn btn-info"><i class="sa-icon sa-icon-lg sa-icon-fw sa-icon-save"></i>保存</button>
<button class="btn btn-success"><i class="sa-icon sa-icon-lg sa-icon-fw sa-icon-check"></i>完成</button>

查看所有图标的 class 命名可以在这里查阅。

组件

SaUI 提供了一系列 UI 组件，方便快速的实现页面布局及交互效果。交互效果由sa.ui.js来实现，这是由 SaUI 开发的用于实现组件布局交互的 JS 插件，如果您的网站上并没有使用带有JS标识的 UI 组件就无须引入此 JS 文件。

sa.ui.js依赖于 jQuery ，文件自身体积较小，在当前广泛应用 jQuery 的情况下使用此版本是比较好的选择。
在命名上为了将来可能出现的另外一些依赖版本，我们将依赖 jQuery 的版本命名为jquery.sa.ui.js使其更符合 jQuery 插件的命名规则，当然由于 Zepto 与 jQuery 保持了一致的 API 所以在移动端使用 Zepto 的情况下也可以正常使用。

下拉菜单JS

下拉菜单的展开可由点击事件触发，具体实现是通过 JS 为 dropdown 添加/移除.dorpdown-open class，您也可以直接使用 hover 状态展开的方式。

  1. 常规的下拉菜单

    常规的下拉菜单
    这是第一个
    这是第二个
    这是第三个
    <div class="dropdown">
	<div class="dropdown-text">常规的下拉菜单</div>
	<div class="dropdown-icon"></div>
	<div class="dropdown-menu">
		<div class="dropdown-item"><a href="#">这是第一个</a></div>
		<div class="dropdown-item"><a href="#">这是第二个</a></div>
		<div class="dropdown-item"><a href="#">这是第三个</a></div>
	</div>
</div>

  2. 左右对齐的下拉菜单

    在 dropdown 上添加 class .dropdown-right即可实现下面的效果。
    注意：下面的示例为了表现更为直观一些，对整个dropdown 使用了.pull-*，实际上右对齐并不会使 dropdown 产生右浮动。

    左对齐的
    这是第一个菜单项
    默认是左对齐的
    这是第三个
    右对齐的
    右对齐指的是 menu 的展开对齐方式
    并不是这个 dropdown 的位置
    这个位置是使用了.pull-right 使其右浮动

     

     

     

     

     

    <div class="dropdown dropdown-right">
	...
</div>

  3. 默认展开的下拉菜单

    在 dropdown 上添加 class .dropdown-open即可实现下面的效果。

    这是默认展开的
    这是第一个
    这是第二个
    这是第三个

     

     

     

    <div class="dropdown dropdown-open">
	...
</div>

  4. 鼠标悬停展开

    在 dropdown 上添加 class .dropdown-hover即可实现以下的效果。

    鼠标放上来就会展开
    这是第一个
    这是第二个
    这是第三个
    <div class="dropdown dropdown-hover">
		...
</div>

  5. 下拉菜单的各种子项

    在.dropdown-menu里添加以下 class 的子节点可以展示对应的样式。

    • .dropdown-head 标题行
    • .dropdown-disabled 禁用项
    • .dropdown-divider 分隔线
    操作菜单

     

     

     

     

     

     

     

     

     

     

    <div class="dropdown">
	<div class="dropdown-text">操作菜单</div>
	<div class="dropdown-icon"></div>
	<ul class="dropdown-menu">
		<li class="dropdown-head">个人</li>
		<li class="dropdown-item">
			<a href="#dropdown"><i class="sa-icon sa-icon-fw sa-icon-home"></i>&nbsp;首页</a>
		</li>
		<li class="dropdown-item">
			<a href="#dropdown"><i class="sa-icon sa-icon-fw sa-icon-envelope"></i>&nbsp;邮件</a>
		</li>
		<li class="dropdown-item dropdown-disabled">
			<a><i class="sa-icon sa-icon-fw sa-icon-phone"></i>&nbsp;电话</a>
		</li>
		<li class="dropdown-divider"></li>
		<li class="dropdown-item">
			<a href="#dropdown"><i class="sa-icon sa-icon-fw sa-icon-user-plus"></i>&nbsp;添加联系人</a>
		</li>
		<li class="dropdown-head">设置</li>
		<li class="dropdown-item">
			<a href="#dropdown">系统设置<i class="pull-right sa-icon sa-icon-gear"></i></a>
		</li>
		<li class="dropdown-item">
			<a href="#dropdown">退出<i class="pull-right sa-icon sa-icon-power-off"></i></a>
		</li>
	</ul>
</div>

页头

添加 class .page-header到对应的<div>元素上就可以实现页头效果。

这是页头的标题页头的小标题

<div class="page-header">
	<h1>这是页头的标题<small>页头的小标题</small></h1>
</div>

徽章

添加 class .badge到对应的元素上。比如<span>等。

  1. 默认样式

    123456
    DefaultPrimarySuccessInfoDangerWarning
    <span class="badge">1</span>
<span class="badge badge-primary">2</span>
<span class="badge badge-success">3</span>
<span class="badge badge-info">4</span>
<span class="badge badge-danger">5</span>
<span class="badge badge-warn">6</span>
<br>
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warn">Warning</span>

  2. 圆角样式

    添加.badge-radius class 可以将徽章呈现圆角样式。

    123456
    DefaultPrimarySuccessInfoDangerWarning
    <span class="badge badge-radius">1</span>
<span class="badge badge-radius badge-primary">2</span>
<span class="badge badge-radius badge-success">3</span>
<span class="badge badge-radius badge-info">4</span>
<span class="badge badge-radius badge-danger">5</span>
<span class="badge badge-radius badge-warn">6</span>
<br>
<span class="badge badge-radius">Default</span>
<span class="badge badge-radius badge-primary">Primary</span>
<span class="badge badge-radius badge-success">Success</span>
<span class="badge badge-radius badge-info">Info</span>
<span class="badge badge-radius badge-danger">Danger</span>
<span class="badge badge-radius badge-warn">Warning</span>

  3. 椭圆样式

    添加.badge-round class 可以呈现椭圆样式。椭圆样式默认在内容较少的情况下显示为正圆，这是因为椭圆的圆度与默认的徽章大小匹配导致。

    123456
    DefaultPrimarySuccessInfoDangerWarning
    <span class="badge badge-round">1</span>
<span class="badge badge-round badge-primary">2</span>
<span class="badge badge-round badge-success">3</span>
<span class="badge badge-round badge-info">4</span>
<span class="badge badge-round badge-danger">5</span>
<span class="badge badge-round badge-warn">6</span>
<br>
<span class="badge badge-round">Default</span>
<span class="badge badge-round badge-primary">Primary</span>
<span class="badge badge-round badge-success">Success</span>
<span class="badge badge-round badge-info">Info</span>
<span class="badge badge-round badge-danger">Danger</span>
<span class="badge badge-round badge-warn">Warning</span>

  4. 与按钮的组合

    使用.badge-tips class 可以将徽章显示在父元素的右上角。

    <button type="button" class="btn btn-ellipse btn-primary">Button
	<span class="badge badge-round badge-danger">12</span>
</button>
<button type="button" class="btn btn-default">Button
	<span class="badge badge-round badge-tips">99+</span>
</button>

分页

带有展示页码的分页组件，可以很方便的用在应用或搜索结果中。

  1. 默认分页

    为<ul>元素添加 class .paging就可以实现分页样式。分页组件包含以下子项装饰类：

    • .paging-prev 上一页按钮样式
    • .paging-next 下一页按钮样式
    • .paging-active 当前页按钮样式
    • .paging-disabled 禁用按钮样式
    <ul class="paging">
	<li class="paging-prev paging-disabled"><a>Previous</a></li>
	<li class="paging-active"><a>1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li>...</li>
	<li><a href="#">11</a></li>
	<li><a href="#">12</a></li>
	<li class="paging-next"><a href="#">Next</a></li>
</ul>

  2. 带边框的分页

    添加.paging-bordered class 可以让每个分页按钮都带上边框。

    <ul class="paging paging-bordered">
	...
</ul>

  3. 组合的分页

    添加.paging-group class 可以让分页看起来更像一个整体，并带有边框样式。

    <ul class="paging paging-group">
	...
</ul>

  4. 对齐的分页

    分页组件默认是左对齐的，添加 class .paging-center可以将分页按钮居中对齐，需要右对齐的分页直使使用右浮动.pull-right实现。

    <ul class="paging paging-group pull-right">
	...
</ul>
<ul class="paging paging-group paging-center">
	...
</ul>
<ul class="paging paging-center">
	...
</ul>
<ul class="paging paging-bordered paging-center">
	...
</ul>

  5. 翻页

    .paging-pager可以显示一个只有 Previous 和 Next 的翻页组件。默认是居中对齐，如果为子项加上各自的装饰类就可将两个按钮各居左右。

    注意：翻页类会将分页组件里除去 Previous 和 Next 之外的其他子项隐藏。

    <ul class="paging paging-pager">
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
</ul>
<ul class="paging paging-pager">
	<li class="paging-prev"><a href="#">Previous</a></li>
	<li class="paging-next"><a href="#">Next</a></li>
</ul>
<ul class="paging paging-pager">
	<li><a href="#">Previous</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">Next</a></li>
</ul>

进度条

直接使用<progress>元素可以实现基本的进度条效果。

也可以通过命名class 为.progress的<div>来实现，只需为其添加子元素.progress-bar即可。

  1. 默认样式

    <progress max="100" value="25"></progress>
<div class="progress">
	<div role="progressbar" aria-valuenow="44" aria-valuemin="0" aria-valuemax="100" style="width: 44%;" class="progress-bar"></div>
</div>

  2. 带进度文字的进度条

    添加 class .progress-text

    <progress class="progress-text" max="100" value="34"></progress>
<div class="progress progress-text">
	<div role="progressbar" aria-valuenow="44" aria-valuemin="0" aria-valuemax="100" style="width: 44%;" class="progress-bar"></div>
</div>

  3. 超小进度条

    添加 class .progress-small

    <progress class="progress-small" max="100" value="24"></progress>
<div class="progress progress-small">
	<div role="progressbar" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100" style="width: 84%;" class="progress-bar"></div>
</div>

  4. 情境色的进度条

    注意：这个类型的进度条不支持直接使用 <progress>元素的进度条。

    <div class="progress progress-text">
	<div role="progressbar" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100" style="width: 54%;" class="progress-bar progress-success"></div>
</div>
<div class="progress progress-text">
	<div role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" style="width: 64%;" class="progress-bar progress-danger"></div>
</div>
<div class="progress progress-text">
	<div role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%;" class="progress-bar progress-warn"></div>
</div>

  5. 条纹效果

    添加 class .progress-striped可实现进度条的条纹效果，.progress-animate则可以为进度条添加动画效果。
    注意：这个类型的进度条不支持直接使用 <progress>元素的进度条。

    <div class="progress progress-text">
	<div role="progressbar" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100" style="width: 54%;" class="progress-bar progress-striped progress-success"></div>
</div>
<div class="progress progress-text">
	<div role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" style="width: 64%;" class="progress-bar progress-striped progress-danger"></div>
</div>
<div class="progress progress-text">
	<div role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%;" class="progress-bar progress-striped progress-animate progress-warn"></div>
</div>

  6. 堆叠进度条

    注意：这个类型的进度条不支持直接使用 <progress>元素的进度条。

    <div class="progress progress-text">
	<div role="progressbar" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100" style="width: 23%;" class="progress-bar progress-success"></div>
	<div role="progressbar" aria-valuenow="16" aria-valuemin="0" aria-valuemax="100" style="width: 16%;" class="progress-bar progress-danger"></div>
	<div role="progressbar" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100" style="width: 42%;" class="progress-bar progress-warn"></div>
</div>

卡片

卡片是一个灵活可扩展的内容区域。它包含有卡片头、卡片脚和卡片图等可选的元素。可以组成很多常用的页面布局。

  1. 普通的卡片

    迷途

    沿着鸽子的哨音

    我寻找着你

    高高的森林挡住了天空

    小路上

    一颗迷途的蒲公英

    把我引向蓝灰色的湖泊

    在微微摇晃的倒影中

    我找到了你

    那深不可测的眼睛

    ——北岛

    <div class="card">
	<div class="card-head">迷途</div>
	<div class="card-body">
		<p>沿着鸽子的哨音</p>
		<p>我寻找着你</p>
		<p>高高的森林挡住了天空</p>
		<p>小路上</p>
		<p>一颗迷途的蒲公英</p>
		<p>把我引向蓝灰色的湖泊</p>
		<p>在微微摇晃的倒影中</p>
		<p>我找到了你</p>
		<p>那深不可测的眼睛</p>
	</div>
	<div class="card-foot">
		<p class="text-right">——北岛</p>
	</div>
</div>

  2. 图文混合卡片

    卡片内的图片有三种情形式展现，分别是：

    • .card-image-top 顶部图
    • .card-image-bottom 底部图
    • .card-image-overlay 垫底图

    和所有以梦为马的诗人一样

    我也愿将自己埋葬在四周高高的山上 守望平静的家园

    面对大河我无限惭愧

    我年华虚度 空有一身疲倦

    以梦为马

    SaUI Live

    2016.08.20

    Sign up

    从明天起，做一个幸福的人

    喂马、劈柴，周游世界

    从明天起，关心粮食和蔬菜

    我有一所房子，面朝大海，春暖花开

    从明天起，和每一个亲人通信

    告诉他们我的幸福

    那幸福的闪电告诉我的

    我将告诉每一个人

    给每一条河每一座山取一个温暖的名字

    <div class="card">
	<div class="card-image-top"><img src="..."></div>
	<div class="card-body">
		...
	</div>
</div>

<div class="card">
	<div class="card-image-overlay"><img src="..."></div>
	<div class="card-body">
		...
	</div>
</div>

<div class="card">
	<div class="card-body">
		...
	</div>
	<div class="card-image-bottom"><img src="..."></div>
</div>

  3. 列表混合卡片

    卡片内的列表在<ul>元素上添加 class .list.listing将会应用卡片列表样式。

    卡片的内容标题要够粗
    这是小标题颜色就要不一样些

    内容块和列表的组合

    • Canton China
    • 13800138000
    • 1986.06.22
    • 链接
    列表
    • Canton China
    • 13800138000
    • 1986.06.22
    • 链接

    别管以后将如何结束，至少我们曾经相聚过。不必费心地彼此约束，更不需要言语的承诺。
    只要我们曾经拥有过，对你我来讲已经足够。人的一生有许多回忆，只愿你的追亿有个我。

    • Canton China
    • 13800138000
    • 1986.06.22
    • 链接
    <div class="card">
	<div class="card-body">
		...
	</div>
	<ul class="list listing">
		<li><i class="sa-icon sa-icon-fw sa-icon-map-marker"></i>Canton China</li>
		<li><i class="sa-icon sa-icon-fw sa-icon-phone"></i>13800138000</li>
		<li><i class="sa-icon sa-icon-fw sa-icon-calendar-o"></i>1986.06.22</li>
		<li><i class="sa-icon sa-icon-fw sa-icon-link"></i><a href="#">链接</a></li>
	</ul>
	<div class="card-image-bottom"><img src="..."></div>
</div>

  4. 背景色

    为卡片添加.bg-*的 class 就可以应用主题色了。

    头顶的太阳 燃烧着青春的余热
    它从来不会放弃 照耀着我们行进
    寒冬不经过这里 那只是迷雾的山林
    走完苍老的石桥 感到潮湿的味道

    翻过那青山 你说你看头顶斗笠的人们
    海风拂过椰树吹散一路的风尘
    这里就像与闹市隔绝的又一个世界
    让我们疲倦的身体在这里 长久地停歇

    我们的时光 是无忧的时光
    精彩的年月 不会被什么改写
    放纵的笑语 时常回荡在我们耳旁
    那些路上的脚印 永远不会被掩藏

    这年代 季节快 许多花儿开
    风徘徊 云发呆 美景关在大门外
    等谁摘 不自在 慢慢才明白
    花已开 没人来 其实根本不奇怪

    我是好美好美的红蔷薇
    不枉春天来一回
    绽放到天黑 惹得路人醉
    平淡看待自己枯萎

    就在这一瞬间
    才发现 你就在我身边
    就在这一瞬间
    才发现 失去了你的容颜

    <div class="card bg-primary">
	<div class="card-body">
		...
	</div>
</div>

  5. 文本对齐

    直接使用文本对齐 class .text-center .text-right，默认左对齐。

    安和桥

    让我再看你一遍
    从南到北
    像是被五环路蒙住的双眼

    点击这里
    安和桥

    让我再看你一遍
    从南到北
    像是被五环路蒙住的双眼

    点击这里
    安和桥

    让我再看你一遍
    从南到北
    像是被五环路蒙住的双眼

    点击这里
    <div class="card text-center">
	<div class="card-body">
		...
	</div>
</div>

  6. 布局

    结合栅格系统.grid .grid-pad可以实现多样化的布局。

    南方姑娘
    赵雷

    北方的村庄住着一个南方姑娘，她总是喜欢穿着带花的裙子站在路旁边，她的话不多但笑起来是那么平静悠扬。

    赞
    南方姑娘
    赵雷

    北方的村庄住着一个南方姑娘，她总是喜欢穿着带花的裙子站在路旁边，她的话不多但笑起来是那么平静悠扬。

    喜欢
    南方姑娘
    赵雷

    北方的村庄住着一个南方姑娘，她总是喜欢穿着带花的裙子站在路旁边，她的话不多但笑起来是那么平静悠扬。

    踩

    南方姑娘
    赵雷

    北方的村庄住着一个南方姑娘，她总是喜欢穿着带花的裙子站在路旁边，她的话不多但笑起来是那么平静悠扬。

    赞
    南方姑娘
    赵雷

    北方的村庄住着一个南方姑娘，她总是喜欢穿着带花的裙子站在路旁边，她的话不多但笑起来是那么平静悠扬。

    喜欢
    南方姑娘
    赵雷

    北方的村庄住着一个南方姑娘，她总是喜欢穿着带花的裙子站在路旁边，她的话不多但笑起来是那么平静悠扬。

    踩
    <div class="grid">
	<div class="col-4">
		<div class="card">
			<div class="card-image-top"><img src="..."></div>
			<div class="card-body">
				<div class="card-title">南方姑娘</div>
				<div class="card-subtitle">赵雷</div>
				<p>北方的村庄住着一个南方姑娘，她总是喜欢穿着带花的裙子站在路旁边，她的话不多但笑起来是那么平静悠扬。</p>
			</div>
			<div class="card-foot text-right">
				<a class="btn btn-primary"><i class="sa-icon sa-icon-fw sa-icon-thumbs-up"></i>赞</a>
			</div>
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			...
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			...
		</div>
	</div>
</div>

<div class="grid grid-pad">
	<div class="col-4">
		<div class="card">
			<div class="card-image-top"><img src="..."></div>
			<div class="card-body">
				<div class="card-title">南方姑娘</div>
				<div class="card-subtitle">赵雷</div>
				<p>北方的村庄住着一个南方姑娘，她总是喜欢穿着带花的裙子站在路旁边，她的话不多但笑起来是那么平静悠扬。</p>
			</div>
			<div class="card-foot text-right">
				<a class="btn btn-primary"><i class="sa-icon sa-icon-fw sa-icon-thumbs-up"></i>赞</a>
			</div>
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			...
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			...
		</div>
	</div>
</div>

列表

  1. 常规列表

    常规带分割线的列表，可以用在常规的信息列表上，比如数据标题索引页等。

    • 列表一
    • 列表二
    • 列表三
    • 列表四
    <ul class="list listing">
	<li>列表一</li>
	<li>列表二</li>
	<li>列表三</li>
	<li>列表四</li>
</ul>

  2. 面包屑

    面包屑列表可以方便的展示当前页面所在位置及上下关联关系。

    <ul class="list crumbs">
	<li><a href="#list">一级</a></li>
	<li><a href="#list">二级</a></li>
	<li>三级</li>
</ul>

<ul class="list crumbs italic">
	<li><a href="#list">一级</a></li>
	<li><a href="#list">二级</a></li>
	<li><a href="#list">三级</a></li>
	<li>四级</li>
</ul>

  3. 时间轴

    利用时间轴组件，可以非常方便的展示按时间排序的内容。

    • 01/08

      v0.1.0 beta

      我发布了 beta 版，这是第一个对外的测试版，希望能收到大家的反馈。

    • 01/07

      Hell world

      这是我第一次见到这个世界，一切都是那么的新奇。您好，我叫 SaUI 请多指教。

    <ul class="list time-line">
	<li>
		<div class="line-date">01/08</div>
		<div class="line-content">
			<h4>v0.1.0 beta</h4>
			<p>我发布了 beta 版，这是第一个对外的测试版，希望能收到大家的反馈。</p>
		</div>
	</li>
	<li>
		<div class="line-date">01/07</div>
		<div class="line-content">
			<h4>Hell world</h4>
			<p>这是我第一次见到这个世界，一切都是那么的新奇。您好，我叫 SaUI 请多指教。</p>
		</div>
	</li>
</ul>

弹框JS

创建一个交互的弹框，可使用模态或非模态的类型。使用 .dialog class 可以呈现弹框的样式，但是不建议直接使用，为了完整的交互效果请通过 JS 调用的方式来使用。
借助sa.ui.js可以将指定的元素内容包载进弹框里。

这是弹框的标题

这是内容，在这里可以使用几乎所有的 HTML 元素。

比如：

又比如：

确定取消

Hello world!

这块内容将会出现在自定义的模态窗里，通过$(selector).dialog()调用。

弹出一个 Alert弹出一个 Confirm弹出一个自定义的模态弹框
<a role="dialog" data-type="alert" data-content="您看到了一个弹框了" class="btn btn-default">弹出一个 Alert</a>
<a role="dialog" data-type="confirm" data-content="您确定您看到了一个弹框了吗？" data-event="funcYes" class="btn btn-default">弹出一个 Confirm</a>
<a role="dialog" data-custom=".test-dialog" class="btn btn-default" data-title="自定义模态窗" data-size="95%,480">弹出一个自定义的模态窗</a>

将触发对象设置role="dialog"属性可以使其拥有触发弹框的功能。设置data-type可以使用默认的两种弹框类型alert、confirm，并显示data-content里的内容。使用自定义的data-custom则可指定一个选择器，Dialog 会将选择器的对象填充至弹框的内容区。data-title定义标题，data-size定义大小，定义data-event则可以在弹框关闭时触发对应的事件。

信息提示JS

信息提示可以方便的在一些地方展示详情的提示浮层。支持上下左右四个方向的展示。

提示的内容在触发对象的后面添加 class 为.tooltip的元素。

触发对象声明属性role="tooltip"、data-placement="*"可以由sa.ui.js触发，也可自行通过 JS 去触发，只需为触发对象添加data-active的属性即可。data-placement的值表示四个方向的指令：top, left, bottom, right。

向左
Tooltip on the left
向上
Tooltip on the top
向下
Tooltip on the bottom
向右

Tooltip on the right,

And this is a multi-line text.

<a role="tooltip" data-placement="left" class="btn btn-default">向左</a>
<div class="tooltip">Tooltip on the left</div>
<a role="tooltip" data-placement="top" class="btn btn-default">向上</a>
<div class="tooltip">Tooltip on the top</div>
<a role="tooltip" data-placement="bottom" class="btn btn-default">向下</a>
<div class="tooltip">Tooltip on the bottom</div>
<a role="tooltip" data-placement="right" class="btn btn-default">向右</a>
<div class="tooltip">Tooltip on the right</div>

日历JS

日历控件是一个非常常见的网页表单内容。但是浏览器自带的datetime表单控件非常的不美观以及不同浏览器的表现形式并不相同。所以出现了 SaUI 统一风格的日历控件，并且更好用。

对设置了 role 属性为 calendar的<input type="datetime-local">、<input type="date">以及其它的容器元素将应用上日历组件，并根据不同的属性设置展示不同的效果。

不同于别的组件，本组件对于展示的内容大部分由 JS 来完成，因此部分展示形式无法完全自定义。具体使用方式请参照下面不同的示例。

属性设置

属性值说明
rolecalendar* 必须
将该元素定义为日历组件的触发对象
data-editabletrue | false可手动输入日期时间，如果组件在使用时需要操作时间则必须开启
data-languagezh-cn | en | ko | ja日历文字的显示语言，默认根据浏览器的语言设置获取
data-auto-closetrue | false选择日期后直接关闭日历弹层，开启手动输入和范围选择时此属性失效
data-week-start1-7日历展示时周的起始值，数值对应从星期一到星期天
data-todaytrue | false显示跳转到当天日历列表的按钮
data-show-timetrue | false显示时间，如果是普通容器元素需要输出时间内容则必须
data-minyyyy-MM-ddThh:mm:ss最小日期限制，比如 2018-01-01T12:34:56
data-maxyyyy-MM-ddThh:mm:ss最大日期限制，比如 2018-01-01T12:34:56
step1显示最小单位到秒，只在 <input> 元素里使用
minyyyy-MM-ddThh:mm:ss等同于 data-min ，只在 <input> 元素里使用
maxyyyy-MM-ddThh:mm:ss等同于 data-max ，只在 <input> 元素里使用
data-rangetrue | false使日历组件展示方式变为范围选择，必须按要求使用范围选择的 DOM 结构
data-split- 或任意字符* 必须
当组件为范围选择时两个日期之间的连接符

  1. 单排日历选择器

    单排日历选择器，只显示单一的月份进行某一日期与时间的选择，直接对datetime input进行属性设置即可应用。

    <!-- input 单选，显示时间，显示秒，可手动输入，最大最小限制，日语显示 -->
<input type="datetime-local" role="calendar" min="2010-03-02T00:00:00" max="2019-01-02T23:59:59" step="1" data-editable="true" data-language="ja">

<!-- input 单选，不显示时间，不可手动输入，选择后自动关闭，最大最小限制 -->
<input type="date" role="calendar" min="2018-02-18" max="2018-04-18" data-auto-close="true" value="2018-03-04">

<!-- 容器单选，显示时间，不显示秒，周从星期一开始，显示跳到今天按钮，可手动输入 -->
<input type="text" role="calendar" data-week-start="1" data-today="true" data-editable="true" data-show-time="true" value="2010-01-01 13:58">

  2. 双排日历选择器

    双排日历选择器，显示两个月份信息，分别设置起始和结束日期，来选择一段日期范围。



    2018-01-01 20:002018-01-03 19:59
    <!-- 范围选择，不显示时间，周从星期六开始，最大限制，不可手动输入 -->
<div role="calendar" data-max="2019-02-28T23:59:59" data-week-start="6" data-range="true" data-split="至">
	<input type="date" value="2010-01-01">
	<input type="date" value="2010-01-20">
</div>

<!-- 范围选择，显示时间，显示秒，最大最小限制，可手动输入，周从星期一开始 -->
<div role="calendar" data-min="2018-01-01T00:00:00" data-max="2019-02-28T23:59:59" data-week-start="1" data-range="true" data-split="到">
	<input type="datetime-local" step="1">
	<input type="datetime-local" step="1">
</div>

<!-- 范围选择，显示时间，不显示秒，最大最小限制，可手动输入，周从星期一开始 -->
<div role="calendar" data-min="2018-01-01T00:00:00" data-max="2019-02-28T23:59:59" data-week-start="1" data-range="true" data-editable="true" data-show-time="true" data-split=" | ">
	<span role="range">2018-01-01 20:00</span>
	<span role="range">2018-01-03 19:59</span>
</div>

导航

导航是一个很特别的东西，几乎应用在所有的网站上，并且在每一个网站上也有多处应用。比如常见的导航，菜单，选项卡，面包屑等等。
在这里我们统称为导航，使用 class .nav即可将一个容器定义为导航，内部则按照<ul>标签结构定义。

  1. 竖排导航

    <div class="nav">
	<ul>
		<li class="nav-active"><a href="#">首页</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">关于</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>
</div>

  2. 横排导航

    添加 class .nav-horizontal即可将导航横排。

    <div class="nav nav-horizontal">
	<ul>
		<li class="nav-active"><a href="#">首页</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">关于</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>
</div>

  3. 标签式导航

    添加 class .nav-tabs可以将导航更改为标签选项卡样式。

    <div class="nav nav-tabs">
	<ul>
		<li class="nav-active"><a href="#">首页</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">关于</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>
</div>

  4. 带右对齐的导航

    在横排导航内的菜单项<li>添加 class .nav-right将使用右浮动作用该菜单项，使其右对齐。

    <div class="nav nav-horizontal">
	<ul>
		<li class="nav-right"><a href="#">联系我们</a></li>
	</ul>
</div>

  5. 两端对齐的导航

    添加 class .nav-justify可以让导航等宽两端对齐。


    <div class="nav nav-justify">
	<ul>
		...
	</ul>
</div>

  6. 带头部的导航

    添加.nav-header可以声明导航的头部，配合其他类的使用可以实现不同的效果。

    SaUI
    <div class="nav nav-horizontal">
	<a class="nav-header">SaUI</a>
	<ul>
		...
	</ul>
</div>

  7. 带多级菜单的导航

    多级菜单的实现是由在上级<li>里添加<ul>实现的，并不需要多余的东西。
    注意：只支持三级的菜单。

    SaUI
    <div class="nav nav-horizontal">
	<div class="nav-header">SaUI</div>
	<ul>
		<li class="nav-active"><a href="#">首页</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">关于</a></li>
		<li><a href="#">联系我们</a>
			<ul>
				<li><a href="#">通过邮件</a></li>
				<li><a href="#">通过电话</a></li>
				<li><a href="#">上门拜访</a>
					<ul>
						<li><a href="#">北京门店</a></li>
						<li><a href="#">广州门店</a></li>
						<li><a href="#">上海门店</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

左侧菜单导航JS

左侧菜单导航是一个响应式导航，主要是针对在移动端屏幕小而适配的。它能在屏幕空间不足的情况下自动收缩，而在足够的情况下默认展开。通过sa.ui.js它还优化了在移动端的滚动效果。

添加.nav-menu class 则可以使用左侧菜单导航，表现上与一般的常规竖排导航并无区别。
但要作用特性还需为这个导航定义属性role="menu" data-width="*"，还要为其的触发对象添加role="menu-toggle"，剩下的就交由sa.ui.js来完成。

示例效果参照本页的左侧菜单，请在移动端查看最终效果
<div role="menu" data-width="1000" class="nav nav-menu menu-open">
	<!--
		添加 .hidden-md-down 使其在小屏幕下隐藏，避免出现两个 .nav-header
		当然也可以只写一个，本例里使用了两个不同的 .nav-header 用于表现不同的效果
	-->
	<a href="http://saui.omooer.com" title="SaUI" class="nav-header hidden-md-down"><span>SaUI</span></a>
	<!-- 添加菜单图标作为菜单展开的触发对象 .hidden-sm-up 使其在大屏幕下隐藏 -->
	<div class="nav-header hidden-sm-up" role="menu-toggle"><i class="sa-icon sa-icon-bars text-primary"></i></div>
	<ul>
		<li><a href="#">前言</a></li>
		<li><a href="#">栅格</a></li>
		<li><a href="#">表格</a></li>
		<li><a href="#">表单</a></li>
		<li><a href="#">按钮</a></li>
		<li><a href="#">图片</a></li>
	</ul>
</div>

导航条

导航条是一个物殊的导航类，可以用来应用各种工具栏之类的布局。使用非常简单，只需要原来的导航上面加上 class .nav-bar就可以应用导航条的样式。导航条的一些基本样式与横排导航几乎一致而且它还具备完整的栅格系统，您可以在里面使用.col-*这样的栅格列。

SaUI
<div class="nav nav-bar">
	<div class="nav-header">SaUI</div>
	<ul>
		<li class="nav-active"><a href="#">首页</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">关于</a>
			<ul>
				<li><a href="#">加入我们</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</li>
		<li>
			<div class="dropdown dropdown-hover">
				<div class="dropdown-text">这是一个下拉项</div>
				<div class="dropdown-icon"></div>
				<div class="dropdown-menu">
					<div class="dropdown-item"><a href="#">这是第一个很长很长很长的菜单</a></div>
					<div class="dropdown-item"><a href="#">这是第二个</a></div>
					<div class="dropdown-item"><a href="#">这是第三个</a></div>
					<div class="dropdown-item"><a href="#">这是第四个</a></div>
				</div>
			</div>
		</li>
		<li class="nav-form nav-right">
			<form class="form">
				<button type="button">OPEN</button>
				<div class="form-group">
					<div class="input-group">
						<input type="search" placeholder="搜索">
						<button type="button">搜索</button>
					</div>
				</div>
			</form>
		</li>
	</ul>
</div>

 

 

 

 

 

 

 

 

本页面示例代码使用了 Prism.js 进行语法高亮。

Powered by SaUI © 2016-2023 O'Mooer Works.