<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蜘蛛出行框架1.0</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="dists/css/style.css"/>
<link rel="stylesheet" type="text/css" href="dists/css/bootstrap-datetimepicker.css"/>
<link rel="stylesheet" type="text/css" href="docs/assets/css/docs.min.css"/>
<link rel="stylesheet" type="text/css" href="dists/css/home.css"/>
<link rel="stylesheet" type="text/css" href="dists/css/prettify.min.css"/>
<link rel="stylesheet" type="text/css" href="dists/css/module.css"/>
<link rel="stylesheet" type="text/css" href="dists/css/xcConfirm.css"/>
<style type="text/css">
button:focus{outline:none!important;}
</style>
</head>
<body style="background-color: #fbfbfc;" onload="prettyPrint()">
<!--head-->
<div class="zzhead">
<img width="33" src="dists/images/Artboard.png"/>
<h1>ZZ Frame</h1>
</div>
<!--body-->
<div class="zzbody ub">
<!--menu-->
<div class="zzmenu">
<div style="padding: 20px 0px 40px 20px;" class="bs-docs-sidebar affix-top" role="complementary">
<ul class="nav bs-docs-sidenav nav_1">
<li class="active">
<a href="#form">表单</a>
<ul class="nav nav_2">
<li class=""><a href="#form-input-standard">标准输入框</a></li>
<li class=""><a href="#form-input-useful">常用输入框</a></li>
<li class=""><a href="#form-input-textaea">文本域</a></li>
<li class=""><a href="#form-input-radiocheck">多选和单选框</a></li>
<li class=""><a href="#form-input-inlineselect">内联多选和单选框</a></li>
<li class=""><a href="#form-input-select">下拉列表</a></li>
<li class=""><a href="#form-input-noneinput">禁用输入框</a></li>
<li class=""><a href="#form-input-nonefieldset">禁用表单组</a></li>
</ul>
</li>
<li class="">
<a href="#button">按钮</a>
<ul class="nav nav_2">
<li class=""><a href="#btn-before">预定义样式按钮</a></li>
<li class=""><a href="#btn-sizing">按钮尺寸</a></li>
<li class=""><a href="#btn-none">按钮禁用状态</a></li>
<li class=""><a href="#btn-icon">带图标按钮</a></li>
<li class=""><a href="#btn-label">标签</a></li>
</ul>
</li>
<li class="">
<a href="#table">表格</a>
<ul class="nav nav_2">
<li class=""><a href="#table-noborder">无纵向分割线表格</a></li>
<li class=""><a href="#btn-border">有分割线表格</a></li>
</ul>
</li>
<li class="">
<a href="#module">组件</a>
<ul class="nav nav_2">
<li class=""><a href="#module-time-select">时间选择器</a></li>
<li class=""><a href="#module-dim-select">模态框</a></li>
<li class=""><a href="#module-page-select">分页插件</a></li>
<li class=""><a href="#module-calendar-select">日历插件</a></li>
<li class=""><a href="#module-dropdown-select">下拉筛选</a></li>
<li class=""><a href="#module-easyalert-select">简易弹框</a></li>
<li class=""><a href="#module-alert-select">提示弹框</a></li>
<li class=""><a href="#module-confirm-select">警告弹框</a></li>
<li class=""><a href="#module-prompt-select">输入弹框</a></li>
<li class=""><a href="#module-panel-select">面板</a></li>
</ul>
</li>
</ul>
<!--<a class="back-to-top" href="#top">
返回顶部
</a>-->
</div>
</div>
<!--content-->
<div class="zzcontent ub-f1">
<!--一级列表、、、表单-->
<div>
<!--一级标题-->
<h1 id="form" class="page-header">表单</h1>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="form-input-standard">标准输入框（input）</h2>
<p>描述:单独的表单控件会被自动赋予一些全局样式。<code>width</code>为100%。将控件包裹到 <code>.form-group</code>中会给控件之间加一些间隙以获得最好的排列。
</p>
<!--例子-->
<div class="bs-example">
<div class="form-group">
<input type="test" class="form-control" id="" placeholder="线路">
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><div class="form-group">
<input type="test" class="form-control" id="" placeholder="线路">
</div></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--常用输入框 例子有三种-->
<div style="margin-bottom: 30px;">
<h2 id="form-input-useful">常用输入框（input）</h2>
<p>描述:常用输入框宽高为151*28(包括边框)，<code>.form-inline</code>类可使其内容左对齐并且表现为<code>inline-block</code>级别的控件。一些检索查询页面会经常用到。
控件具体宽度要可以根据项目具体给出，我们会在后期给出各种宽度的类。
</p>
<!--例子-->
<div class="bs-example">
<div class="form-inline">
<span id="">用户名：</span>
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="用户名">
</div>
<span id="">密码：</span>
<div class="form-group">
<input type="password" class="form-control" id="" placeholder="密码">
</div>
<span id="">价格：</span>
<div class="form-group">
<div class="input-group">
<input class="form-control" type="email" placeholder="价格">
<div class="input-group-addon">元</div>
</div>
</div>
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><div class="form-inline">
<span id="">用户名：</span>
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="用户名">
</div>
<span id="">密码：</span>
<div class="form-group">
<input type="password" class="form-control" id="" placeholder="密码">
</div>
<span id="">价格：</span>
<div class="form-group">
<div class="input-group">
<input class="form-control" type="email" placeholder="价格">
<div class="input-group-addon">元</div>
</div>
</div>
</div></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--文本域-->
<div style="margin-bottom: 30px;">
<h2 id="form-input-textaea">文本域（textarea）</h2>
<p>描述:支持多行文本的表单控件。可根据需要改变<code>rows</code>属性。禁止拖动加<code>resize: none;</code>属性即可。
</p>
<!--例子-->
<div class="bs-example">
<textarea class="form-control" rows="4"></textarea>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><textarea class="form-control" rows="4"></textarea></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--文本域-->
<div style="margin-bottom: 30px;">
<h2 id="form-input-radiocheck">多选和单选框（radio、checkbox）</h2>
<p>描述:多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
设置了<code> disabled</code>属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的<code>label</code>标签，
如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 <code>.disabled</code>类赋予<code> .radio</code>、<code>.radio-inline</code>、<code>.checkbox</code>、<code>.checkbox-inline</code>。
</p>
<!--例子-->
<div class="bs-example">
<div class="checkbox">
<label>
<input type="checkbox" value="">
这是一个可以选的多选框
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
这是一个不可选的多选框
</label>
</div>
<br>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="option1" checked>
这是一个默认选中且可以选的单选框
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="option2">
这是一个可以选的单选框
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
这是一个不可选的单选框
</label>
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><div class="checkbox">
<label>
<input type="checkbox" value="">
这是一个可以选的多选框
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
这是一个不可选的多选框
</label>
</div>
<br>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="option1" checked>
这是一个默认选中且可以选的单选框
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="option2">
这是一个可以选的单选框
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
这是一个不可选的单选框
</label>
</div></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--文本域-->
<div style="margin-bottom: 30px;">
<h2 id="form-input-inlineselect">内联多选和单选框（radio、checkbox）</h2>
<p>描述:通过将 <code>.checkbox-inline</code> 或 <code>.radio-inline</code> 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
</p>
<!--例子-->
<div class="bs-example">
<label class="checkbox-inline">
<input type="checkbox" id="" value="1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="3"> 3
</label>
<br>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="" value="1" checked> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="" value="2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="" value="3"> 3
</label>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><label class="checkbox-inline">
<input type="checkbox" id="" value="1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="" value="1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="" value="2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="" value="3"> 3
</label></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="form-input-select">下拉列表（select）</h2>
<p>描述:分两种，一种是宽度为100%，不常用；一种是默认宽度（字的宽度），两种都可自定义宽度。
</p>
<!--例子-->
<div class="bs-example">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<div class="form-inline">
<select class="form-control">
<option value="">预订时间</option>
<option value="">出发时间</option>
</select>
<select class="form-control">
<option value="0">请选择</option>
<option value="255">直通巴士</option>
<option value="256">穿梭巴士</option>
<option value="284">城际商务车</option>
<option value="368">打包产品</option>
</select>
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="form-inline">
<select class="form-control">
<option value="">预订时间</option>
<option value="">出发时间</option>
</select>
<select class="form-control">
<option value="0">请选择</option>
<option value="255">直通巴士</option>
<option value="256">穿梭巴士</option>
<option value="284">城际商务车</option>
<option value="368">打包产品</option>
</select>
</div></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="form-input-noneinput">禁用输入框（input）</h2>
<p>描述:禁用输入框状态。并能对外观做一些修改，使其更直观。</p>
<!--例子-->
<div class="bs-example">
<input class="form-control" id="disabledInput" type="text" placeholder="被禁用的输入框" disabled="disabled">
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><input class="form-control" id="disabledInput" type="text" placeholder="被禁用的输入框" disabled="disabled"></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="form-input-nonefieldset">禁用表单组（fieldset）</h2>
<p>描述:为 <code><fieldset></code> 设置 disabled 属性,可以禁用 <code><fieldset></code> 中包含的所有控件。</p>
<!--例子-->
<div class="bs-example">
<fieldset disabled="disabled">
<div class="form-group">
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><fieldset disabled="disabled">
<div class="form-group">
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
</div>
<!--一级列表、、、表单-->
<div>
<!--一级标题-->
<h1 id="button" class="page-header">按钮</h1>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="btn-before">预定义样式按钮（button）</h2>
<p>描述:使用下面列出的类可以快速创建一个带有预定义样式的按钮。</p>
<!--例子-->
<div class="bs-example">
<div class="form-group">
<button type="button" class="btn btn-import">重要</button>
<button type="button" class="btn btn-secondary">次要</button>
<button type="button" class="btn btn-default">普通</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">链接</button>
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><div class="form-group">
<button type="button" class="btn btn-import">重要</button>
<button type="button" class="btn btn-secondary">次要</button>
<button type="button" class="btn btn-default">普通</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">链接</button>
</div></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="btn-sizing">按钮尺寸（button）</h2>
<p>描述:使用 <code>.btn-lg</code> 、<code>.btn-sm</code> 或 <code>.btn-xs</code> 可以获得不同尺寸的按钮。</p>
<!--例子-->
<div class="bs-example">
<p>
<button type="button" class="btn btn-primary btn-lg">大按钮</button>
<button type="button" class="btn btn-default btn-lg">大按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary">普通按钮</button>
<button type="button" class="btn btn-default">普通按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">小按钮</button>
<button type="button" class="btn btn-default btn-sm">小按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">非常小按钮</button>
<button type="button" class="btn btn-default btn-xs">非常小按钮</button>
</p>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><p>
<button type="button" class="btn btn-primary btn-lg">大按钮</button>
<button type="button" class="btn btn-default btn-lg">大按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary">普通按钮</button>
<button type="button" class="btn btn-default">普通按钮</button>
<p>
<button type="button" class="btn btn-primary btn-sm">小按钮</button>
<button type="button" class="btn btn-default btn-sm">小按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">非常小按钮</button>
<button type="button" class="btn btn-default btn-xs">非常小按钮</button>
</p></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="btn-none">按钮禁用状态（button）</h2>
<p>描述:为 <code><button></code> 元素添加 <code>disabled</code> 属性，使其表现出禁用状态。</p>
<!--例子-->
<div class="bs-example">
<button type="button" class="btn btn-primary" disabled="disabled">Button</button>
<button type="button" class="btn btn-default" disabled="disabled">Button</button>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><button type="button" class="btn btn-primary" disabled="disabled">Button</button>
<button type="button" class="btn btn-default" disabled="disabled">Button</button></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="btn-icon">带图标按钮（button）</h2>
<p>描述:图标颜色和大小会继承字体的颜色和大小，很方便且简单。</p>
<!--例子-->
<div class="bs-example">
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-star"></span> 提交
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star"></span> 提交
</button>
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-plus"></span> 添加线路
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span> 添加线路
</button>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-star"></span> 提交
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star"></span> 提交
</button>
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-plus"></span> 添加线路
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span> 添加线路
</button></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="btn-label">标签（label）</h2>
<p>描述:图标颜色和大小会继承字体的颜色和大小，很方便且简单。</p>
<!--例子-->
<div class="bs-example">
<span class="label label-default">普通</span>
<span class="label label-primary">主要</span>
<span class="label label-success">成功</span>
<span class="label label-info">信息</span>
<span class="label label-warning">警告</span>
<span class="label label-danger">危险</span>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><span class="label label-default">普通</span>
<span class="label label-primary">主要</span>
<span class="label label-success">成功</span>
<span class="label label-info">信息</span>
<span class="label label-warning">警告</span>
<span class="label label-danger">危险</span></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
</div>
<!--一级列表、、、表单-->
<div>
<!--一级标题-->
<h1 id="table" class="page-header">表格</h1>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="table-noborder">无纵向分割线表格（table）</h2>
<p>描述:此表格为常规表格，最小宽度为880px，当表格父元素小于880时，表格为左右滚动效果，当表格大于880px时，表格自适应。</p>
<!--例子-->
<div class="bs-example">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>订单编号</th>
<th>预订时间</th>
<th>订单渠道</th>
<th>预订产品</th>
<th>出发时间</th>
<th>联系人</th>
<th>状态</th>
<th>支付方式</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-star"></span></td>
<td>下单时间</td>
<td>渠道订单号</td>
<td>贵宾成人票</td>
<td>出发时间</td>
<td>name</td>
<td>状态</td>
<td>pay_type</td>
<td>cancelOrder</td>
</tr>
<tr>
<td><a>10086</a></td>
<td>下单时间</td>
<td>渠道订单号</td>
<td>贵宾成人票</td>
<td>出发时间</td>
<td>name</td>
<td>状态</td>
<td>pay_type</td>
<td>cancelOrder</td>
</tr>
<tr>
<td><a>10086</a></td>
<td>下单时间</td>
<td>渠道订单号</td>
<td>贵宾成人票</td>
<td>出发时间</td>
<td>name</td>
<td>状态</td>
<td>pay_type</td>
<td>cancelOrder</td>
</tr>
<tr>
<td><a>10086</a></td>
<td>下单时间</td>
<td>渠道订单号</td>
<td>贵宾成人票</td>
<td>出发时间</td>
<td>name</td>
<td>状态</td>
<td>pay_type</td>
<td>cancelOrder</td>
</tr>
<tr>
<td><a>10086</a></td>
<td>下单时间</td>
<td>渠道订单号</td>
<td>贵宾成人票</td>
<td>出发时间</td>
<td>name</td>
<td>状态</td>
<td>pay_type</td>
<td>cancelOrder</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>订单编号</th>
<th>预订时间</th>
<th>订单渠道</th>
<th>预订产品</th>
<th>出发时间</th>
<th>联系人</th>
<th>状态</th>
<th>支付方式</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>订单编号</td>
<td>下单时间</td>
<td>渠道订单号</td>
<td>贵宾成人票</td>
<td>出发时间</td>
<td>name</td>
<td>状态</td>
<td>pay_type</td>
<td>cancelOrder</td>
</tr>
</tbody>
</table>
</div></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="btn-border">有分割线表格（table）</h2>
<p>描述:此表格为有分割线，自适应法则同上，主要用于有合并单元格的情况用的。默认不带悬停效果，想加直接给 <code><table></code> 标签加 <code>.table-hover</code> 即可</p>
<!--例子-->
<div class="bs-example">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>线路</th>
<th>出发地</th>
<th>目的地</th>
<th>出发时间</th>
<th>车次</th>
<th>座位等级</th>
<th>序号</th>
<th>打印</th>
<th>改签</th>
<th>退票</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">QDSH-Z001(千岛湖-上海市)</td>
<td rowspan="2">千岛湖(绿城千岛湖喜来登度假酒店)</td>
<td rowspan="2">上海市(黄浦旅游集散站)</td>
<td>14:10</td>
<td>1</td>
<td>普通座</td>
<td>N8</td>
<td>否</td>
<td>否</td>
<td>否</td>
<td>94.00</td>
</tr>
<tr>
<td>14:10</td>
<td>1</td>
<td>普通座</td>
<td>N9</td>
<td>否</td>
<td>否</td>
<td>否</td>
<td>94.00</td>
</tr>
<tr>
<td colspan="9"></td>
<td>总额</td>
<td>¥188</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>线路</th>
<th>出发地</th>
<th>目的地</th>
<th>出发时间</th>
<th>车次</th>
<th>座位等级</th>
<th>序号</th>
<th>打印</th>
<th>改签</th>
<th>退票</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">QDSH-Z001(千岛湖-上海市)</td>
<td rowspan="2">千岛湖(绿城千岛湖喜来登度假酒店)</td>
<td rowspan="2">上海市(黄浦旅游集散站)</td>
<td>14:10</td>
<td>1</td>
<td>普通座</td>
<td>N8</td>
<td>否</td>
<td>否</td>
<td>否</td>
<td>94.00</td>
</tr>
<tr>
<td>14:10</td>
<td>1</td>
<td>普通座</td>
<td>N9</td>
<td>否</td>
<td>否</td>
<td>否</td>
<td>94.00</td>
</tr>
<tr>
<td colspan="9"></td>
<td>总额</td>
<td>¥188</td>
</tr>
</tbody>
</table>
</div></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
</div>
<!--一级列表、、、表单-->
<div>
<!--一级标题-->
<h1 id="module" class="page-header">组件</h1>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="module-time-select">时间选择器（timepicker）</h2>
<p>描述:选择小时和分钟的组件。其中每个组件必须设置id，否则不起作用。</p>
<!--例子-->
<div class="bs-example">
<div id="time_1" class="timepicker_box">
<span class="form-inline timepicker">
<input type="text" class="form-control" readonly>
<span class="glyphicon glyphicon-time"></span>
</span>
<div class="timepicker_select">
<div class="select_hour_box">
</div>
<div class="select_minute_box">
</div>
</div>
</div>
<div id="time_2" class="timepicker_box">
<span class="form-inline timepicker">
<input type="text" class="form-control" readonly>
<span class="glyphicon glyphicon-time"></span>
</span>
<div class="timepicker_select">
<div class="select_hour_box">
</div>
<div class="select_minute_box">
</div>
</div>
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><!-- CSS -->
<link rel="stylesheet" type="text/css" href="dist/css/module.css"/>
<!-- HTML -->
<div id="time_id" class="timepicker_box">
<span class="form-inline timepicker">
<input type="text" class="form-control" readonly>
<span class="glyphicon glyphicon-time"></span>
</span>
<div class="timepicker_select">
<div class="select_hour_box"></div>
<div class="select_minute_box"></div>
</div>
</div>
<!-- JS -->
<script src="dist/js/module.js" type="text/javascript" charset="utf-8"></script></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="module-dim-select">模态框（）</h2>
<p>描述:</p>
<!--例子-->
<div class="bs-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大模态框</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小模态框</button>
<!--大模态框-->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
这里是内容
</div>
</div>
</div>
<!-- 小模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
这里是内容
</div>
</div>
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大模态框</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小模态框</button>
<!--大模态框-->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
这里是内容
</div>
</div>
</div>
<!-- 小模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
这里是内容
</div>
</div>
</div></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="module-page-select">分页</h2>
<p>描述:这是一个分页</p>
<!--例子-->
<div class="bs-example">
<!--HTML-->
<div class="pageDiv"></div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><!--HTML-->
<div class="pageDiv"></div>
<!--JS-->
<script type="text/javascript">
$(".pageDiv").createPage({
pageCount: 10, //总页数
current: 1, //当前页
turndown: 'true', //是否显示跳转框，显示为true，不现实为false,一定记得加上引号...
backFn: function (p) {
//这里是翻页后的请求
}
});
</script></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="module-calendar-select">日历插件</h2>
<p>描述:这是一个日历插件</p>
<!--例子-->
<div class="bs-example">
<!--HTML-->
<div class="input-group date form_date">
<input class="form-control" size="16" type="text" value="2017-02-23" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><!--CSS-->
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-datetimepicker.css"/>
<!--HTML-->
<div class="input-group date form_date">
<input class="form-control" size="16" type="text" value="2017-02-23" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<!--JS-->
<script src="dist/js/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(".form_date").datetimepicker({
format: 'yyyy-mm-dd',
autoclose:true,
minView:2,
pickerPosition:"bottom-left"
});
</script></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="module-dropdown-select">下拉筛选</h2>
<p>描述:这是一个下拉筛选</p>
<!--例子-->
<div class="bs-example">
<!--HTML-->
<select class="select_screen">
<option value="出发地1">出发地1</option>
<option value="出发地2">出发地2</option>
<option value="出发地3">出发地3</option>
<option value="出发地4">出发地4</option>
<option value="出发地5">出发地5</option>
</select>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><!--HTML-->
<select class="select_screen">
<option value="出发地1">出发地1</option>
<option value="出发地2">出发地2</option>
<option value="出发地3">出发地3</option>
<option value="出发地4">出发地4</option>
<option value="出发地5">出发地5</option>
</select>
<!--JS-->
<script type="text/javascript">
$('.select_screen').comboSelect();
</script></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="module-easyalert-select">简易弹框</h2>
<p>描述:这是一个简易的弹框，显示2.5秒后消失，传两个参数（字符串），第一个是提示文字，第二个是弹框类型（success,warning,error）可不填，默认success。</p>
<!--例子-->
<div class="bs-example">
<!--HTML-->
<button onclick="easyAlert('这是成功提示信息！','success')" class="btn btn-default">成功提示</button>
<button onclick="easyAlert('这是警告提示信息！','warning')" class="btn btn-default">警告提示</button>
<button onclick="easyAlert('这是错误提示信息！','error')" class="btn btn-default">错误提示</button>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><button onclick="easyAlert('这是成功提示信息！','success')" class="btn btn-default">成功提示</button>
<button onclick="easyAlert('这是警告提示信息！','warning')" class="btn btn-default">警告提示</button>
<button onclick="easyAlert('这是错误提示信息！','error')" class="btn btn-default">错误提示</button></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="module-alert-select">提示弹框</h2>
<p>描述:这是一个类alert，可以传两个参数，第一个是文字信息，第二个是点击确定后的回调。</p>
<!--例子-->
<div class="bs-example">
<!--HTML-->
<button onclick="ZZAlertInfo('这是提示信息！')" class="btn btn-default">提示</button>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><!--CSS-->
<link rel="stylesheet" href="http://img.zhizhuchuxing.cn/zzframe/dists/css/xcConfirm.css" />
<!--HTML-->
<button onclick="ZZAlertInfo('这是提示信息！')" class="btn btn-default">提示</button>
<!--JS-->
<script src="http://img.zhizhuchuxing.cn/zzframe/dists/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="module-confirm-select">警告弹框</h2>
<p>描述:这是一个类confirm，可以传四个参数，第一个是文字信息，第二个是点击确定后的回调，第三个是点击取消后的回调，第四个是点击关闭后的回调</p>
<!--例子-->
<div class="bs-example">
<!--HTML-->
<button onclick="ZZConfirm('这是警告信息！')" class="btn btn-default">警告</button>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><!--CSS-->
<link rel="stylesheet" href="http://img.zhizhuchuxing.cn/zzframe/dists/css/xcConfirm.css" />
<!--HTML-->
<button onclick="ZZConfirm('这是警告信息！')" class="btn btn-default">警告</button>
<!--JS-->
<script src="http://img.zhizhuchuxing.cn/zzframe/dists/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="module-prompt-select">输入弹框</h2>
<p>描述:prompt，可以传三个参数，第一个是文字信息，第二个是点击确定后的回调，第三个是点击关闭后的回调</p>
<!--例子-->
<div class="bs-example">
<!--HTML-->
<button onclick="ZZInput('这里是文字信息！')" class="btn btn-default">输入弹框</button>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><!--CSS-->
<link rel="stylesheet" href="http://img.zhizhuchuxing.cn/zzframe/dists/css/xcConfirm.css" />
<!--HTML-->
<button onclick="ZZInput('这里是文字信息！')" class="btn btn-default">输入弹框</button>
<!--JS-->
<script src="http://img.zhizhuchuxing.cn/zzframe/dists/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="module-panel-select">面板</h2>
<p>描述:这是一个面板</p>
<!--例子-->
<div class="bs-example">
<!--HTML-->
<div class="panel panel-default">
<div class="panel-heading">这是面板的头部</div>
<div class="panel-body">
这里放内容
</div>
</div>
</div>
<!--代码-->
<div class="zero-clipboard"><span class="btn-clipboard copy">Copy</span></div>
<div class="highlight">
<pre class="prettyprint">
<code class="html"><!--HTML-->
<div class="panel panel-default">
<div class="panel-heading">这是面板的头部</div>
<div class="panel-body">
这里放内容
</div>
</div></code>
</pre>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
</div>
<!--一级列表、、、表单-->
<div>
<!--一级标题-->
<h1 id="picture" class="page-header">图标</h1>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
<!--二级标题-->
<!--标准输入框-->
<div style="margin-bottom: 30px;">
<h2 id="forms-example">Glyphicons 字体图标</h2>
<p>描述:包括200个来自 Glyphicon Halflings 的字体图标。。</p>
<!--例子-->
<div class="bs-example">
<div class="bs-glyphicons">
<ul class="bs-glyphicons-list">
<li>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
</li>
<li>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon-class">glyphicon glyphicon-plus</span>
</li>
<li>
<span class="glyphicon glyphicon-euro"></span>
<span class="glyphicon-class">glyphicon glyphicon-euro</span>
</li>
<li>
<span class="glyphicon glyphicon-minus"></span>
<span class="glyphicon-class">glyphicon glyphicon-minus</span>
</li>
<li>
<span class="glyphicon glyphicon-cloud"></span>
<span class="glyphicon-class">glyphicon glyphicon-cloud</span>
</li>
<li>
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon-class">glyphicon glyphicon-envelope</span>
</li>
<li>
<span class="glyphicon glyphicon-pencil"></span>
<span class="glyphicon-class">glyphicon glyphicon-pencil</span>
</li>
<li>
<span class="glyphicon glyphicon-glass"></span>
<span class="glyphicon-class">glyphicon glyphicon-glass</span>
</li>
<li>
<span class="glyphicon glyphicon-music"></span>
<span class="glyphicon-class">glyphicon glyphicon-music</span>
</li>
<li>
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon-class">glyphicon glyphicon-search</span>
</li>
<li>
<span class="glyphicon glyphicon-heart"></span>
<span class="glyphicon-class">glyphicon glyphicon-heart</span>
</li>
<li>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon-class">glyphicon glyphicon-star</span>
</li>
<li>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon-class">glyphicon glyphicon-star-empty</span>
</li>
<li>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon-class">glyphicon glyphicon-user</span>
</li>
<li>
<span class="glyphicon glyphicon-film"></span>
<span class="glyphicon-class">glyphicon glyphicon-film</span>
</li>
<li>
<span class="glyphicon glyphicon-th-large"></span>
<span class="glyphicon-class">glyphicon glyphicon-th-large</span>
</li>
<li>
<span class="glyphicon glyphicon-th"></span>
<span class="glyphicon-class">glyphicon glyphicon-th</span>
</li>
<li>
<span class="glyphicon glyphicon-th-list"></span>
<span class="glyphicon-class">glyphicon glyphicon-th-list</span>
</li>
<li>
<span class="glyphicon glyphicon-ok"></span>
<span class="glyphicon-class">glyphicon glyphicon-ok</span>
</li>
<li>
<span class="glyphicon glyphicon-remove"></span>
<span class="glyphicon-class">glyphicon glyphicon-remove</span>
</li>
<li>
<span class="glyphicon glyphicon-zoom-in"></span>
<span class="glyphicon-class">glyphicon glyphicon-zoom-in</span>
</li>
<li>
<span class="glyphicon glyphicon-zoom-out"></span>
<span class="glyphicon-class">glyphicon glyphicon-zoom-out</span>
</li>
<li>
<span class="glyphicon glyphicon-off"></span>
<span class="glyphicon-class">glyphicon glyphicon-off</span>
</li>
<li>
<span class="glyphicon glyphicon-signal"></span>
<span class="glyphicon-class">glyphicon glyphicon-signal</span>
</li>
<li>
<span class="glyphicon glyphicon-cog"></span>
<span class="glyphicon-class">glyphicon glyphicon-cog</span>
</li>
<li>
<span class="glyphicon glyphicon-trash"></span>
<span class="glyphicon-class">glyphicon glyphicon-trash</span>
</li>
<li>
<span class="glyphicon glyphicon-home"></span>
<span class="glyphicon-class">glyphicon glyphicon-home</span>
</li>
<li>
<span class="glyphicon glyphicon-file"></span>
<span class="glyphicon-class">glyphicon glyphicon-file</span>
</li>
<li>
<span class="glyphicon glyphicon-time"></span>
<span class="glyphicon-class">glyphicon glyphicon-time</span>
</li>
<li>
<span class="glyphicon glyphicon-road"></span>
<span class="glyphicon-class">glyphicon glyphicon-road</span>
</li>
<li>
<span class="glyphicon glyphicon-download-alt"></span>
<span class="glyphicon-class">glyphicon glyphicon-download-alt</span>
</li>
<li>
<span class="glyphicon glyphicon-download"></span>
<span class="glyphicon-class">glyphicon glyphicon-download</span>
</li>
<li>
<span class="glyphicon glyphicon-upload"></span>
<span class="glyphicon-class">glyphicon glyphicon-upload</span>
</li>
<li>
<span class="glyphicon glyphicon-inbox"></span>
<span class="glyphicon-class">glyphicon glyphicon-inbox</span>
</li>
<li>
<span class="glyphicon glyphicon-play-circle"></span>
<span class="glyphicon-class">glyphicon glyphicon-play-circle</span>
</li>
<li>
<span class="glyphicon glyphicon-repeat"></span>
<span class="glyphicon-class">glyphicon glyphicon-repeat</span>
</li>
<li>
<span class="glyphicon glyphicon-refresh"></span>
<span class="glyphicon-class">glyphicon glyphicon-refresh</span>
</li>
<li>
<span class="glyphicon glyphicon-list-alt"></span>
<span class="glyphicon-class">glyphicon glyphicon-list-alt</span>
</li>
<li>
<span class="glyphicon glyphicon-lock"></span>
<span class="glyphicon-class">glyphicon glyphicon-lock</span>
</li>
<li>
<span class="glyphicon glyphicon-flag"></span>
<span class="glyphicon-class">glyphicon glyphicon-flag</span>
</li>
<li>
<span class="glyphicon glyphicon-headphones"></span>
<span class="glyphicon-class">glyphicon glyphicon-headphones</span>
</li>
<li>
<span class="glyphicon glyphicon-volume-off"></span>
<span class="glyphicon-class">glyphicon glyphicon-volume-off</span>
</li>
<li>
<span class="glyphicon glyphicon-volume-down"></span>
<span class="glyphicon-class">glyphicon glyphicon-volume-down</span>
</li>
<li>
<span class="glyphicon glyphicon-volume-up"></span>
<span class="glyphicon-class">glyphicon glyphicon-volume-up</span>
</li>
<li>
<span class="glyphicon glyphicon-qrcode"></span>
<span class="glyphicon-class">glyphicon glyphicon-qrcode</span>
</li>
<li>
<span class="glyphicon glyphicon-barcode"></span>
<span class="glyphicon-class">glyphicon glyphicon-barcode</span>
</li>
<li>
<span class="glyphicon glyphicon-tag"></span>
<span class="glyphicon-class">glyphicon glyphicon-tag</span>
</li>
<li>
<span class="glyphicon glyphicon-tags"></span>
<span class="glyphicon-class">glyphicon glyphicon-tags</span>
</li>
<li>
<span class="glyphicon glyphicon-book"></span>
<span class="glyphicon-class">glyphicon glyphicon-book</span>
</li>
<li>
<span class="glyphicon glyphicon-bookmark"></span>
<span class="glyphicon-class">glyphicon glyphicon-bookmark</span>
</li>
<li>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon-class">glyphicon glyphicon-print</span>
</li>
<li>
<span class="glyphicon glyphicon-camera"></span>
<span class="glyphicon-class">glyphicon glyphicon-camera</span>
</li>
<li>
<span class="glyphicon glyphicon-font"></span>
<span class="glyphicon-class">glyphicon glyphicon-font</span>
</li>
<li>
<span class="glyphicon glyphicon-bold"></span>
<span class="glyphicon-class">glyphicon glyphicon-bold</span>
</li>
<li>
<span class="glyphicon glyphicon-italic"></span>
<span class="glyphicon-class">glyphicon glyphicon-italic</span>
</li>
<li>
<span class="glyphicon glyphicon-text-height"></span>
<span class="glyphicon-class">glyphicon glyphicon-text-height</span>
</li>
<li>
<span class="glyphicon glyphicon-text-width"></span>
<span class="glyphicon-class">glyphicon glyphicon-text-width</span>
</li>
<li>
<span class="glyphicon glyphicon-align-left"></span>
<span class="glyphicon-class">glyphicon glyphicon-align-left</span>
</li>
<li>
<span class="glyphicon glyphicon-align-center"></span>
<span class="glyphicon-class">glyphicon glyphicon-align-center</span>
</li>
<li>
<span class="glyphicon glyphicon-align-right"></span>
<span class="glyphicon-class">glyphicon glyphicon-align-right</span>
</li>
<li>
<span class="glyphicon glyphicon-align-justify"></span>
<span class="glyphicon-class">glyphicon glyphicon-align-justify</span>
</li>
<li>
<span class="glyphicon glyphicon-list"></span>
<span class="glyphicon-class">glyphicon glyphicon-list</span>
</li>
<li>
<span class="glyphicon glyphicon-indent-left"></span>
<span class="glyphicon-class">glyphicon glyphicon-indent-left</span>
</li>
<li>
<span class="glyphicon glyphicon-indent-right"></span>
<span class="glyphicon-class">glyphicon glyphicon-indent-right</span>
</li>
<li>
<span class="glyphicon glyphicon-facetime-video"></span>
<span class="glyphicon-class">glyphicon glyphicon-facetime-video</span>
</li>
<li>
<span class="glyphicon glyphicon-picture"></span>
<span class="glyphicon-class">glyphicon glyphicon-picture</span>
</li>
<li>
<span class="glyphicon glyphicon-map-marker"></span>
<span class="glyphicon-class">glyphicon glyphicon-map-marker</span>
</li>
<li>
<span class="glyphicon glyphicon-adjust"></span>
<span class="glyphicon-class">glyphicon glyphicon-adjust</span>
</li>
<li>
<span class="glyphicon glyphicon-tint"></span>
<span class="glyphicon-class">glyphicon glyphicon-tint</span>
</li>
<li>
<span class="glyphicon glyphicon-edit"></span>
<span class="glyphicon-class">glyphicon glyphicon-edit</span>
</li>
<li>
<span class="glyphicon glyphicon-share"></span>
<span class="glyphicon-class">glyphicon glyphicon-share</span>
</li>
<li>
<span class="glyphicon glyphicon-check"></span>
<span class="glyphicon-class">glyphicon glyphicon-check</span>
</li>
<li>
<span class="glyphicon glyphicon-move"></span>
<span class="glyphicon-class">glyphicon glyphicon-move</span>
</li>
<li>
<span class="glyphicon glyphicon-step-backward"></span>
<span class="glyphicon-class">glyphicon glyphicon-step-backward</span>
</li>
<li>
<span class="glyphicon glyphicon-fast-backward"></span>
<span class="glyphicon-class">glyphicon glyphicon-fast-backward</span>
</li>
<li>
<span class="glyphicon glyphicon-backward"></span>
<span class="glyphicon-class">glyphicon glyphicon-backward</span>
</li>
<li>
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon-class">glyphicon glyphicon-play</span>
</li>
<li>
<span class="glyphicon glyphicon-pause"></span>
<span class="glyphicon-class">glyphicon glyphicon-pause</span>
</li>
<li>
<span class="glyphicon glyphicon-stop"></span>
<span class="glyphicon-class">glyphicon glyphicon-stop</span>
</li>
<li>
<span class="glyphicon glyphicon-forward"></span>
<span class="glyphicon-class">glyphicon glyphicon-forward</span>
</li>
<li>
<span class="glyphicon glyphicon-fast-forward"></span>
<span class="glyphicon-class">glyphicon glyphicon-fast-forward</span>
</li>
<li>
<span class="glyphicon glyphicon-step-forward"></span>
<span class="glyphicon-class">glyphicon glyphicon-step-forward</span>
</li>
<li>
<span class="glyphicon glyphicon-eject"></span>
<span class="glyphicon-class">glyphicon glyphicon-eject</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon-class">glyphicon glyphicon-chevron-left</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon-class">glyphicon glyphicon-chevron-right</span>
</li>
<li>
<span class="glyphicon glyphicon-plus-sign"></span>
<span class="glyphicon-class">glyphicon glyphicon-plus-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-minus-sign"></span>
<span class="glyphicon-class">glyphicon glyphicon-minus-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-remove-sign"></span>
<span class="glyphicon-class">glyphicon glyphicon-remove-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-ok-sign"></span>
<span class="glyphicon-class">glyphicon glyphicon-ok-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-question-sign"></span>
<span class="glyphicon-class">glyphicon glyphicon-question-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-info-sign"></span>
<span class="glyphicon-class">glyphicon glyphicon-info-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-screenshot"></span>
<span class="glyphicon-class">glyphicon glyphicon-screenshot</span>
</li>
<li>
<span class="glyphicon glyphicon-remove-circle"></span>
<span class="glyphicon-class">glyphicon glyphicon-remove-circle</span>
</li>
<li>
<span class="glyphicon glyphicon-ok-circle"></span>
<span class="glyphicon-class">glyphicon glyphicon-ok-circle</span>
</li>
<li>
<span class="glyphicon glyphicon-ban-circle"></span>
<span class="glyphicon-class">glyphicon glyphicon-ban-circle</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon-class">glyphicon glyphicon-arrow-left</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-right"></span>
<span class="glyphicon-class">glyphicon glyphicon-arrow-right</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-up"></span>
<span class="glyphicon-class">glyphicon glyphicon-arrow-up</span>
</li>
<li>
<span class="glyphicon glyphicon-arrow-down"></span>
<span class="glyphicon-class">glyphicon glyphicon-arrow-down</span>
</li>
<li>
<span class="glyphicon glyphicon-share-alt"></span>
<span class="glyphicon-class">glyphicon glyphicon-share-alt</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-full"></span>
<span class="glyphicon-class">glyphicon glyphicon-resize-full</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-small"></span>
<span class="glyphicon-class">glyphicon glyphicon-resize-small</span>
</li>
<li>
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="glyphicon-class">glyphicon glyphicon-exclamation-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-gift"></span>
<span class="glyphicon-class">glyphicon glyphicon-gift</span>
</li>
<li>
<span class="glyphicon glyphicon-leaf"></span>
<span class="glyphicon-class">glyphicon glyphicon-leaf</span>
</li>
<li>
<span class="glyphicon glyphicon-fire"></span>
<span class="glyphicon-class">glyphicon glyphicon-fire</span>
</li>
<li>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon-class">glyphicon glyphicon-eye-open</span>
</li>
<li>
<span class="glyphicon glyphicon-eye-close"></span>
<span class="glyphicon-class">glyphicon glyphicon-eye-close</span>
</li>
<li>
<span class="glyphicon glyphicon-warning-sign"></span>
<span class="glyphicon-class">glyphicon glyphicon-warning-sign</span>
</li>
<li>
<span class="glyphicon glyphicon-plane"></span>
<span class="glyphicon-class">glyphicon glyphicon-plane</span>
</li>
<li>
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon-class">glyphicon glyphicon-calendar</span>
</li>
<li>
<span class="glyphicon glyphicon-random"></span>
<span class="glyphicon-class">glyphicon glyphicon-random</span>
</li>
<li>
<span class="glyphicon glyphicon-comment"></span>
<span class="glyphicon-class">glyphicon glyphicon-comment</span>
</li>
<li>
<span class="glyphicon glyphicon-magnet"></span>
<span class="glyphicon-class">glyphicon glyphicon-magnet</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="glyphicon-class">glyphicon glyphicon-chevron-up</span>
</li>
<li>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon-class">glyphicon glyphicon-chevron-down</span>
</li>
<li>
<span class="glyphicon glyphicon-retweet"></span>
<span class="glyphicon-class">glyphicon glyphicon-retweet</span>
</li>
<li>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="glyphicon-class">glyphicon glyphicon-shopping-cart</span>
</li>
<li>
<span class="glyphicon glyphicon-folder-close"></span>
<span class="glyphicon-class">glyphicon glyphicon-folder-close</span>
</li>
<li>
<span class="glyphicon glyphicon-folder-open"></span>
<span class="glyphicon-class">glyphicon glyphicon-folder-open</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-vertical"></span>
<span class="glyphicon-class">glyphicon glyphicon-resize-vertical</span>
</li>
<li>
<span class="glyphicon glyphicon-resize-horizontal"></span>
<span class="glyphicon-class">glyphicon glyphicon-resize-horizontal</span>
</li>
<li>
<span class="glyphicon glyphicon-hdd"></span>
<span class="glyphicon-class">glyphicon glyphicon-hdd</span>
</li>
<li>
<span class="glyphicon glyphicon-bullhorn"></span>
<span class="glyphicon-class">glyphicon glyphicon-bullhorn</span>
</li>
<li>
<span class="glyphicon glyphicon-bell"></span>
<span class="glyphicon-class">glyphicon glyphicon-bell</span>
</li>
<li>
<span class="glyphicon glyphicon-certificate"></span>
<span class="glyphicon-class">glyphicon glyphicon-certificate</span>
</li>
<li>
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon-class">glyphicon glyphicon-thumbs-up</span>
</li>
<li>
<span class="glyphicon glyphicon-thumbs-down"></span>
<span class="glyphicon-class">glyphicon glyphicon-thumbs-down</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-right"></span>
<span class="glyphicon-class">glyphicon glyphicon-hand-right</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-left"></span>
<span class="glyphicon-class">glyphicon glyphicon-hand-left</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-up"></span>
<span class="glyphicon-class">glyphicon glyphicon-hand-up</span>
</li>
<li>
<span class="glyphicon glyphicon-hand-down"></span>
<span class="glyphicon-class">glyphicon glyphicon-hand-down</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-right"></span>
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-right</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-left"></span>
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-left</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-up"></span>
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-up</span>
</li>
<li>
<span class="glyphicon glyphicon-circle-arrow-down"></span>
<span class="glyphicon-class">glyphicon glyphicon-circle-arrow-down</span>
</li>
<li>
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon-class">glyphicon glyphicon-globe</span>
</li>
<li>
<span class="glyphicon glyphicon-wrench"></span>
<span class="glyphicon-class">glyphicon glyphicon-wrench</span>
</li>
<li>
<span class="glyphicon glyphicon-tasks"></span>
<span class="glyphicon-class">glyphicon glyphicon-tasks</span>
</li>
<li>
<span class="glyphicon glyphicon-filter"></span>
<span class="glyphicon-class">glyphicon glyphicon-filter</span>
</li>
<li>
<span class="glyphicon glyphicon-briefcase"></span>
<span class="glyphicon-class">glyphicon glyphicon-briefcase</span>
</li>
<li>
<span class="glyphicon glyphicon-fullscreen"></span>
<span class="glyphicon-class">glyphicon glyphicon-fullscreen</span>
</li>
<li>
<span class="glyphicon glyphicon-dashboard"></span>
<span class="glyphicon-class">glyphicon glyphicon-dashboard</span>
</li>
<li>
<span class="glyphicon glyphicon-paperclip"></span>
<span class="glyphicon-class">glyphicon glyphicon-paperclip</span>
</li>
<li>
<span class="glyphicon glyphicon-heart-empty"></span>
<span class="glyphicon-class">glyphicon glyphicon-heart-empty</span>
</li>
<li>
<span class="glyphicon glyphicon-link"></span>
<span class="glyphicon-class">glyphicon glyphicon-link</span>
</li>
<li>
<span class="glyphicon glyphicon-phone"></span>
<span class="glyphicon-class">glyphicon glyphicon-phone</span>
</li>
<li>
<span class="glyphicon glyphicon-pushpin"></span>
<span class="glyphicon-class">glyphicon glyphicon-pushpin</span>
</li>
<li>
<span class="glyphicon glyphicon-usd"></span>
<span class="glyphicon-class">glyphicon glyphicon-usd</span>
</li>
<li>
<span class="glyphicon glyphicon-gbp"></span>
<span class="glyphicon-class">glyphicon glyphicon-gbp</span>
</li>
<li>
<span class="glyphicon glyphicon-sort"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-alphabet"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet-alt</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-order"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-order</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-order-alt</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-attributes"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes</span>
</li>
<li>
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
<span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes-alt</span>
</li>
<li>
<span class="glyphicon glyphicon-unchecked"></span>
<span class="glyphicon-class">glyphicon glyphicon-unchecked</span>
</li>
<li>
<span class="glyphicon glyphicon-expand"></span>
<span class="glyphicon-class">glyphicon glyphicon-expand</span>
</li>
<li>
<span class="glyphicon glyphicon-collapse-down"></span>
<span class="glyphicon-class">glyphicon glyphicon-collapse-down</span>
</li>
<li>
<span class="glyphicon glyphicon-collapse-up"></span>
<span class="glyphicon-class">glyphicon glyphicon-collapse-up</span>
</li>
<li>
<span class="glyphicon glyphicon-log-in"></span>
<span class="glyphicon-class">glyphicon glyphicon-log-in</span>
</li>
<li>
<span class="glyphicon glyphicon-flash"></span>
<span class="glyphicon-class">glyphicon glyphicon-flash</span>
</li>
<li>
<span class="glyphicon glyphicon-log-out"></span>
<span class="glyphicon-class">glyphicon glyphicon-log-out</span>
</li>
<li>
<span class="glyphicon glyphicon-new-window"></span>
<span class="glyphicon-class">glyphicon glyphicon-new-window</span>
</li>
<li>
<span class="glyphicon glyphicon-record"></span>
<span class="glyphicon-class">glyphicon glyphicon-record</span>
</li>
<li>
<span class="glyphicon glyphicon-save"></span>
<span class="glyphicon-class">glyphicon glyphicon-save</span>
</li>
<li>
<span class="glyphicon glyphicon-open"></span>
<span class="glyphicon-class">glyphicon glyphicon-open</span>
</li>
<li>
<span class="glyphicon glyphicon-saved"></span>
<span class="glyphicon-class">glyphicon glyphicon-saved</span>
</li>
<li>
<span class="glyphicon glyphicon-import"></span>
<span class="glyphicon-class">glyphicon glyphicon-import</span>
</li>
<li>
<span class="glyphicon glyphicon-export"></span>
<span class="glyphicon-class">glyphicon glyphicon-export</span>
</li>
<li>
<span class="glyphicon glyphicon-send"></span>
<span class="glyphicon-class">glyphicon glyphicon-send</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-disk"></span>
<span class="glyphicon-class">glyphicon glyphicon-floppy-disk</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-saved"></span>
<span class="glyphicon-class">glyphicon glyphicon-floppy-saved</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-remove"></span>
<span class="glyphicon-class">glyphicon glyphicon-floppy-remove</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-save"></span>
<span class="glyphicon-class">glyphicon glyphicon-floppy-save</span>
</li>
<li>
<span class="glyphicon glyphicon-floppy-open"></span>
<span class="glyphicon-class">glyphicon glyphicon-floppy-open</span>
</li>
<li>
<span class="glyphicon glyphicon-credit-card"></span>
<span class="glyphicon-class">glyphicon glyphicon-credit-card</span>
</li>
<li>
<span class="glyphicon glyphicon-transfer"></span>
<span class="glyphicon-class">glyphicon glyphicon-transfer</span>
</li>
<li>
<span class="glyphicon glyphicon-cutlery"></span>
<span class="glyphicon-class">glyphicon glyphicon-cutlery</span>
</li>
<li>
<span class="glyphicon glyphicon-header"></span>
<span class="glyphicon-class">glyphicon glyphicon-header</span>
</li>
<li>
<span class="glyphicon glyphicon-compressed"></span>
<span class="glyphicon-class">glyphicon glyphicon-compressed</span>
</li>
<li>
<span class="glyphicon glyphicon-earphone"></span>
<span class="glyphicon-class">glyphicon glyphicon-earphone</span>
</li>
<li>
<span class="glyphicon glyphicon-phone-alt"></span>
<span class="glyphicon-class">glyphicon glyphicon-phone-alt</span>
</li>
<li>
<span class="glyphicon glyphicon-tower"></span>
<span class="glyphicon-class">glyphicon glyphicon-tower</span>
</li>
<li>
<span class="glyphicon glyphicon-stats"></span>
<span class="glyphicon-class">glyphicon glyphicon-stats</span>
</li>
<li>
<span class="glyphicon glyphicon-sd-video"></span>
<span class="glyphicon-class">glyphicon glyphicon-sd-video</span>
</li>
<li>
<span class="glyphicon glyphicon-hd-video"></span>
<span class="glyphicon-class">glyphicon glyphicon-hd-video</span>
</li>
<li>
<span class="glyphicon glyphicon-subtitles"></span>
<span class="glyphicon-class">glyphicon glyphicon-subtitles</span>
</li>
<li>
<span class="glyphicon glyphicon-sound-stereo"></span>
<span class="glyphicon-class">glyphicon glyphicon-sound-stereo</span>
</li>
<li>
<span class="glyphicon glyphicon-sound-dolby"></span>
<span class="glyphicon-class">glyphicon glyphicon-sound-dolby</span>
</li>
<li>
<span class="glyphicon glyphicon-sound-5-1"></span>
<span class="glyphicon-class">glyphicon glyphicon-sound-5-1</span>
</li>
<li>
<span class="glyphicon glyphicon-sound-6-1"></span>
<span class="glyphicon-class">glyphicon glyphicon-sound-6-1</span>
</li>
<li>
<span class="glyphicon glyphicon-sound-7-1"></span>
<span class="glyphicon-class">glyphicon glyphicon-sound-7-1</span>
</li>
<li>
<span class="glyphicon glyphicon-copyright-mark"></span>
<span class="glyphicon-class">glyphicon glyphicon-copyright-mark</span>
</li>
<li>
<span class="glyphicon glyphicon-registration-mark"></span>
<span class="glyphicon-class">glyphicon glyphicon-registration-mark</span>
</li>
<li>
<span class="glyphicon glyphicon-cloud-download"></span>
<span class="glyphicon-class">glyphicon glyphicon-cloud-download</span>
</li>
<li>
<span class="glyphicon glyphicon-cloud-upload"></span>
<span class="glyphicon-class">glyphicon glyphicon-cloud-upload</span>
</li>
<li>
<span class="glyphicon glyphicon-tree-conifer"></span>
<span class="glyphicon-class">glyphicon glyphicon-tree-conifer</span>
</li>
<li>
<span class="glyphicon glyphicon-tree-deciduous"></span>
<span class="glyphicon-class">glyphicon glyphicon-tree-deciduous</span>
</li>
</ul>
</div>
</div>
</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
</div>
</div>
</div>
<script src="dists/js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="dists/js/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="dists/js/home.js" type="text/javascript" charset="utf-8"></script>
<script src="dists/js/prettify.min.js" type="text/javascript" charset="utf-8"></script>
<script src="dists/js/module.js" type="text/javascript" charset="utf-8"></script>
<script src="dists/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>