nizongfeng
/
ZZIMG

<!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">&lt;div class=&quot;form-group&quot;&gt;
    &lt;input type=&quot;test&quot; class=&quot;form-control&quot; id=&quot;&quot; placeholder=&quot;线路&quot;&gt;
&lt;/div&gt;</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">&lt;div class=&quot;form-inline&quot;&gt;
    &lt;span id=&quot;&quot;&gt;用户名：&lt;/span&gt;
    &lt;div class=&quot;form-group&quot;&gt;
	    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;&quot; placeholder=&quot;用户名&quot;&gt;
	&lt;/div&gt;
    &lt;span id=&quot;&quot;&gt;密码：&lt;/span&gt;
    &lt;div class=&quot;form-group&quot;&gt;
	    &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;&quot; placeholder=&quot;密码&quot;&gt;
	&lt;/div&gt;
    &lt;span id=&quot;&quot;&gt;价格：&lt;/span&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;input class=&quot;form-control&quot; type=&quot;email&quot; placeholder=&quot;价格&quot;&gt;
            &lt;div class=&quot;input-group-addon&quot;&gt;元&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</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">&lt;textarea class=&quot;form-control&quot; rows=&quot;4&quot;&gt;&lt;/textarea&gt;</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">&lt;div class=&quot;checkbox&quot;&gt;
    &lt;label&gt;
        &lt;input type=&quot;checkbox&quot; value=&quot;&quot;&gt;
        这是一个可以选的多选框
    &lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;checkbox disabled&quot;&gt;
    &lt;label&gt;
        &lt;input type=&quot;checkbox&quot; value=&quot;&quot; disabled&gt;
        这是一个不可选的多选框
    &lt;/label&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;div class=&quot;radio&quot;&gt;
    &lt;label&gt;
        &lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; value=&quot;option1&quot; checked&gt;
        这是一个默认选中且可以选的单选框
    &lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio&quot;&gt;
    &lt;label&gt;
        &lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; value=&quot;option2&quot;&gt;
        这是一个可以选的单选框
    &lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;radio disabled&quot;&gt;
    &lt;label&gt;
        &lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; id=&quot;optionsRadios3&quot; value=&quot;option3&quot; disabled&gt;
        这是一个不可选的单选框
    &lt;/label&gt;
&lt;/div&gt;</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">&lt;label class=&quot;checkbox-inline&quot;&gt;
 	&lt;input type=&quot;checkbox&quot; id=&quot;&quot; value=&quot;1&quot;&gt; 1
&lt;/label&gt;
&lt;label class=&quot;checkbox-inline&quot;&gt;
  	&lt;input type=&quot;checkbox&quot; id=&quot;&quot; value=&quot;2&quot;&gt; 2
&lt;/label&gt;
&lt;label class=&quot;checkbox-inline&quot;&gt;
  	&lt;input type=&quot;checkbox&quot; id=&quot;&quot; value=&quot;3&quot;&gt; 3
&lt;/label&gt;
&lt;label class=&quot;radio-inline&quot;&gt;
  	&lt;input type=&quot;radio&quot; name=&quot;inlineRadioOptions&quot; id=&quot;&quot; value=&quot;1&quot;&gt; 1
&lt;/label&gt;
&lt;label class=&quot;radio-inline&quot;&gt;
 	&lt;input type=&quot;radio&quot; name=&quot;inlineRadioOptions&quot; id=&quot;&quot; value=&quot;2&quot;&gt; 2
&lt;/label&gt;
&lt;label class=&quot;radio-inline&quot;&gt;
  	&lt;input type=&quot;radio&quot; name=&quot;inlineRadioOptions&quot; id=&quot;&quot; value=&quot;3&quot;&gt; 3
&lt;/label&gt;</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">&lt;select class=&quot;form-control&quot;&gt;
    &lt;option&gt;1&lt;/option&gt;
    &lt;option&gt;2&lt;/option&gt;	
    &lt;option&gt;3&lt;/option&gt;
    &lt;option&gt;4&lt;/option&gt;
    &lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;
&lt;div class=&quot;form-inline&quot;&gt;
    &lt;select class=&quot;form-control&quot;&gt;
        &lt;option value=&quot;&quot;&gt;预订时间&lt;/option&gt;
        &lt;option value=&quot;&quot;&gt;出发时间&lt;/option&gt;
    &lt;/select&gt;
    &lt;select class=&quot;form-control&quot;&gt;
        &lt;option value=&quot;0&quot;&gt;请选择&lt;/option&gt;		
        &lt;option value=&quot;255&quot;&gt;直通巴士&lt;/option&gt;							
        &lt;option value=&quot;256&quot;&gt;穿梭巴士&lt;/option&gt;
        &lt;option value=&quot;284&quot;&gt;城际商务车&lt;/option&gt;
        &lt;option value=&quot;368&quot;&gt;打包产品&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;</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">&lt;input class=&quot;form-control&quot; id=&quot;disabledInput&quot; type=&quot;text&quot; placeholder=&quot;被禁用的输入框&quot; disabled=&quot;disabled&quot;&gt;</code>
						  	</pre>
						</div>
					</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->							
					<!--二级标题-->
					<!--标准输入框-->
					<div style="margin-bottom: 30px;">
						<h2 id="form-input-nonefieldset">禁用表单组（fieldset）</h2>
						<p>描述:为 <code>&lt;fieldset&gt;</code> 设置 disabled 属性,可以禁用 <code>&lt;fieldset&gt;</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">&lt;fieldset disabled=&quot;disabled&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      	&lt;input type=&quot;text&quot; id=&quot;disabledTextInput&quot; class=&quot;form-control&quot; placeholder=&quot;Disabled input&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      	&lt;select id=&quot;disabledSelect&quot; class=&quot;form-control&quot;&gt;
            &lt;option&gt;Disabled select&lt;/option&gt;
     	&lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;checkbox&quot;&gt;
      	&lt;label&gt;
            &lt;input type=&quot;checkbox&quot;&gt; Can&#x27;t check this
        &lt;/label&gt;
    &lt;/div&gt;
    &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;提交&lt;/button&gt;
&lt;/fieldset&gt;</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">&lt;div class=&quot;form-group&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-import&quot;&gt;重要&lt;/button&gt;	
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;次要&lt;/button&gt;	
    &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;普通&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;主要&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;成功&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;信息&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt;警告&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;危险&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-link&quot;&gt;链接&lt;/button&gt;
&lt;/div&gt;</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">&lt;p&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;大按钮&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-lg&quot;&gt;大按钮&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;普通按钮&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;普通按钮&lt;/button&gt;
&lt;p&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-sm&quot;&gt;小按钮&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-sm&quot;&gt;小按钮&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-xs&quot;&gt;非常小按钮&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-xs&quot;&gt;非常小按钮&lt;/button&gt;
&lt;/p&gt;</code>
						  	</pre>
						</div>
					</div>
<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
					
					<!--二级标题-->
					<!--标准输入框-->
					<div style="margin-bottom: 30px;">
						<h2 id="btn-none">按钮禁用状态（button）</h2>
						<p>描述:为 <code>&lt;button&gt;</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">&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; disabled=&quot;disabled&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; disabled=&quot;disabled&quot;&gt;Button&lt;/button&gt;</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">&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
    &lt;span class=&quot;glyphicon glyphicon-star&quot;&gt;&lt;/span&gt; 提交
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;
    &lt;span class=&quot;glyphicon glyphicon-star&quot;&gt;&lt;/span&gt; 提交
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
    &lt;span class=&quot;glyphicon glyphicon-plus&quot;&gt;&lt;/span&gt; 添加线路
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;
    &lt;span class=&quot;glyphicon glyphicon-plus&quot;&gt;&lt;/span&gt; 添加线路
&lt;/button&gt;</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">&lt;span class=&quot;label label-default&quot;&gt;普通&lt;/span&gt;
&lt;span class=&quot;label label-primary&quot;&gt;主要&lt;/span&gt;
&lt;span class=&quot;label label-success&quot;&gt;成功&lt;/span&gt;
&lt;span class=&quot;label label-info&quot;&gt;信息&lt;/span&gt;
&lt;span class=&quot;label label-warning&quot;&gt;警告&lt;/span&gt;
&lt;span class=&quot;label label-danger&quot;&gt;危险&lt;/span&gt;</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">&lt;div class=&quot;table-responsive&quot;&gt;
    &lt;table class=&quot;table table-striped table-hover&quot;&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;订单编号&lt;/th&gt;
                &lt;th&gt;预订时间&lt;/th&gt;
                &lt;th&gt;订单渠道&lt;/th&gt;
                &lt;th&gt;预订产品&lt;/th&gt;
                &lt;th&gt;出发时间&lt;/th&gt;
                &lt;th&gt;联系人&lt;/th&gt;
                &lt;th&gt;状态&lt;/th&gt;
                &lt;th&gt;支付方式&lt;/th&gt;
                &lt;th&gt;操作&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;订单编号&lt;/td&gt;
                &lt;td&gt;下单时间&lt;/td&gt;
                &lt;td&gt;渠道订单号&lt;/td&gt;
                &lt;td&gt;贵宾成人票&lt;/td&gt;
                &lt;td&gt;出发时间&lt;/td&gt;
                &lt;td&gt;name&lt;/td&gt;
                &lt;td&gt;状态&lt;/td&gt;
                &lt;td&gt;pay_type&lt;/td&gt;
                &lt;td&gt;cancelOrder&lt;/td&gt;
             &lt;/tr&gt;
         &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;</code>
						  	</pre>
						</div>
					</div>

<!--、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、-->
					<!--二级标题-->
					<!--标准输入框-->
					<div style="margin-bottom: 30px;">
						<h2 id="btn-border">有分割线表格（table）</h2>
						<p>描述:此表格为有分割线，自适应法则同上，主要用于有合并单元格的情况用的。默认不带悬停效果，想加直接给 <code>&lt;table&gt;</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">&lt;div class=&quot;table-responsive&quot;&gt;
    &lt;table class=&quot;table table-bordered&quot;&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;线路&lt;/th&gt;
                &lt;th&gt;出发地&lt;/th&gt;
                &lt;th&gt;目的地&lt;/th&gt;
                &lt;th&gt;出发时间&lt;/th&gt;
                &lt;th&gt;车次&lt;/th&gt;
                &lt;th&gt;座位等级&lt;/th&gt;
                &lt;th&gt;序号&lt;/th&gt;
                &lt;th&gt;打印&lt;/th&gt;
                &lt;th&gt;改签&lt;/th&gt;
                &lt;th&gt;退票&lt;/th&gt;
                &lt;th&gt;金额&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td rowspan=&quot;2&quot;&gt;QDSH-Z001(千岛湖-上海市)&lt;/td&gt;
                &lt;td rowspan=&quot;2&quot;&gt;千岛湖(绿城千岛湖喜来登度假酒店)&lt;/td&gt;
                &lt;td rowspan=&quot;2&quot;&gt;上海市(黄浦旅游集散站)&lt;/td&gt;
                &lt;td&gt;14:10&lt;/td&gt;
                &lt;td&gt;1&lt;/td&gt;
                &lt;td&gt;普通座&lt;/td&gt;
                &lt;td&gt;N8&lt;/td&gt;
                &lt;td&gt;否&lt;/td&gt;
                &lt;td&gt;否&lt;/td&gt;
                &lt;td&gt;否&lt;/td&gt;
                &lt;td&gt;94.00&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;14:10&lt;/td&gt;
                &lt;td&gt;1&lt;/td&gt;
                &lt;td&gt;普通座&lt;/td&gt;
                &lt;td&gt;N9&lt;/td&gt;
                &lt;td&gt;否&lt;/td&gt;
                &lt;td&gt;否&lt;/td&gt;
                &lt;td&gt;否&lt;/td&gt;
                &lt;td&gt;94.00&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td colspan=&quot;9&quot;&gt;&lt;/td&gt;
                &lt;td&gt;总额&lt;/td&gt;
                &lt;td&gt;¥188&lt;/td&gt;
             &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;</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">&lt;!-- CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;dist/css/module.css&quot;/&gt;

&lt;!-- HTML --&gt;
&lt;div id=&quot;time_id&quot; class=&quot;timepicker_box&quot;&gt;
    &lt;span class=&quot;form-inline timepicker&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; readonly&gt;
        &lt;span class=&quot;glyphicon glyphicon-time&quot;&gt;&lt;/span&gt;
    &lt;/span&gt;
    &lt;div class=&quot;timepicker_select&quot;&gt;
        &lt;div class=&quot;select_hour_box&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;select_minute_box&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- JS --&gt;
&lt;script src=&quot;dist/js/module.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;</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">
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;.bs-example-modal-lg&quot;&gt;大模态框&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;.bs-example-modal-sm&quot;&gt;小模态框&lt;/button&gt;
&lt;!--大模态框--&gt;
&lt;div class=&quot;modal fade bs-example-modal-lg&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myLargeModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
    &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
            这里是内容
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- 小模态框 --&gt;
&lt;div class=&quot;modal fade bs-example-modal-sm&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;mySmallModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
    &lt;div class=&quot;modal-dialog modal-sm&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
            这里是内容
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</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">&lt;!--HTML--&gt;
&lt;div class=&quot;pageDiv&quot;&gt;&lt;/div&gt;

&lt;!--JS--&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(&quot;.pageDiv&quot;).createPage({
    pageCount: 10, //总页数
    current: 1, //当前页
    turndown: &#x27;true&#x27;, //是否显示跳转框，显示为true，不现实为false,一定记得加上引号...
    backFn: function (p) {
        //这里是翻页后的请求
    }
});
&lt;/script&gt;</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">&lt;!--CSS--&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;dist/css/bootstrap-datetimepicker.css&quot;/&gt;

&lt;!--HTML--&gt;
&lt;div class=&quot;input-group date form_date&quot;&gt;
    &lt;input class=&quot;form-control&quot; size=&quot;16&quot; type=&quot;text&quot; value=&quot;2017-02-23&quot; readonly&gt;
    &lt;span class=&quot;input-group-addon&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;
    
&lt;!--JS--&gt;
&lt;script src=&quot;dist/js/bootstrap-datetimepicker.min.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    $(&quot;.form_date&quot;).datetimepicker({
	    format: &#x27;yyyy-mm-dd&#x27;,
	    autoclose:true,
	    minView:2,
	    pickerPosition:&quot;bottom-left&quot;
	});
&lt;/script&gt;</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">&lt;!--HTML--&gt;
&lt;select class=&quot;select_screen&quot;&gt;
    &lt;option value=&quot;出发地1&quot;&gt;出发地1&lt;/option&gt;
    &lt;option value=&quot;出发地2&quot;&gt;出发地2&lt;/option&gt;
    &lt;option value=&quot;出发地3&quot;&gt;出发地3&lt;/option&gt;
    &lt;option value=&quot;出发地4&quot;&gt;出发地4&lt;/option&gt;
    &lt;option value=&quot;出发地5&quot;&gt;出发地5&lt;/option&gt;
&lt;/select&gt;
&lt;!--JS--&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    $(&#x27;.select_screen&#x27;).comboSelect();
&lt;/script&gt;</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">&lt;button onclick=&quot;easyAlert(&#x27;这是成功提示信息！&#x27;,&#x27;success&#x27;)&quot; class=&quot;btn btn-default&quot;&gt;成功提示&lt;/button&gt;
&lt;button onclick=&quot;easyAlert(&#x27;这是警告提示信息！&#x27;,&#x27;warning&#x27;)&quot; class=&quot;btn btn-default&quot;&gt;警告提示&lt;/button&gt;
&lt;button onclick=&quot;easyAlert(&#x27;这是错误提示信息！&#x27;,&#x27;error&#x27;)&quot; class=&quot;btn btn-default&quot;&gt;错误提示&lt;/button&gt;</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">&lt;!--CSS--&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://img.zhizhuchuxing.cn/zzframe/dists/css/xcConfirm.css&quot; /&gt;
&lt;!--HTML--&gt;
&lt;button onclick=&quot;ZZAlertInfo(&#x27;这是提示信息！&#x27;)&quot; class=&quot;btn btn-default&quot;&gt;提示&lt;/button&gt;
&lt;!--JS--&gt;
&lt;script src=&quot;http://img.zhizhuchuxing.cn/zzframe/dists/js/xcConfirm.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;</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">&lt;!--CSS--&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://img.zhizhuchuxing.cn/zzframe/dists/css/xcConfirm.css&quot; /&gt;
&lt;!--HTML--&gt;
&lt;button onclick=&quot;ZZConfirm(&#x27;这是警告信息！&#x27;)&quot; class=&quot;btn btn-default&quot;&gt;警告&lt;/button&gt;
&lt;!--JS--&gt;
&lt;script src=&quot;http://img.zhizhuchuxing.cn/zzframe/dists/js/xcConfirm.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;</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">&lt;!--CSS--&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://img.zhizhuchuxing.cn/zzframe/dists/css/xcConfirm.css&quot; /&gt;
&lt;!--HTML--&gt;
&lt;button onclick=&quot;ZZInput(&#x27;这里是文字信息！&#x27;)&quot; class=&quot;btn btn-default&quot;&gt;输入弹框&lt;/button&gt;
&lt;!--JS--&gt;
&lt;script src=&quot;http://img.zhizhuchuxing.cn/zzframe/dists/js/xcConfirm.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;</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">&lt;!--HTML--&gt;
&lt;div class=&quot;panel panel-default&quot;&gt;
    &lt;div class=&quot;panel-heading&quot;&gt;这是面板的头部&lt;/div&gt;
    &lt;div class=&quot;panel-body&quot;&gt;
        这里放内容
    &lt;/div&gt;
&lt;/div&gt;</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>