代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<title>UI界面_很简洁漂亮的Bootstrap响应式后台管理系统模板UniAdmin - JS代码网</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="css/jquery.gritter.css" />
<link rel="stylesheet" href="css/unicorn.main.css" />
<link rel="stylesheet" href="css/unicorn.grey.css" class="skin-color" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="header">
<h1><a href="./dashboard.html">Unidmin</a></h1>
</div>
<div id="search">
<input type="text" placeholder="请输入搜索内容..." /><button type="submit" class="tip-right" title="Search"><i class="icon-search icon-white"></i></button>
</div>
<div id="user-nav" class="navbar navbar-inverse">
<ul class="nav btn-group">
<li class="btn btn-inverse"><a title="" href="#"><i class="icon icon-user"></i> <span class="text">个人资料</span></a></li>
<li class="btn btn-inverse dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages" class="dropdown-toggle"><i class="icon icon-envelope"></i> <span class="text">消息</span> <span class="label label-important">5</span> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="sAdd" title="" href="#">新消息</a></li>
<li><a class="sInbox" title="" href="#">收件箱</a></li>
<li><a class="sOutbox" title="" href="#">发件箱</a></li>
<li><a class="sTrash" title="" href="#">发送</a></li>
</ul>
</li>
<li class="btn btn-inverse"><a title="" href="#"><i class="icon icon-cog"></i> <span class="text">设置</span></a></li>
<li class="btn btn-inverse"><a title="" href="login.html"><i class="icon icon-share-alt"></i> <span class="text">退出</span></a></li>
</ul>
</div>
<div id="sidebar">
<a href="#" class="visible-phone"><i class="icon icon-home"></i> 首页</a>
<ul>
<li ><a href="index.html"><i class="icon icon-home"></i> <span>首页</span></a></li>
<li class="submenu">
<a href="#"><i class="icon icon-th-list"></i> <span>表单组件</span> <span class="label">3</span></a>
<ul>
<li><a href="form-common.html">通用组件</a></li>
<li><a href="form-validation.html">表单验证</a></li>
<li><a href="form-wizard.html">表单提示</a></li>
</ul>
</li>
<li><a href="buttons.html"><i class="icon icon-tint"></i> <span>按钮 & 图标</span></a></li>
<li class="active"><a href="interface.html"><i class="icon icon-pencil"></i> <span>UI元素</span></a></li>
<li><a href="tables.html"><i class="icon icon-th"></i> <span>表格</span></a></li>
<li><a href="grid.html"><i class="icon icon-th-list"></i> <span>网格布局</span></a></li>
<li class="submenu">
<a href="#"><i class="icon icon-file"></i> <span>其他页面</span> <span class="label">4</span></a>
<ul>
<li><a href="invoice.html">清单</a></li>
<li><a href="chat.html">聊天</a></li>
<li><a href="calendar.html">日历</a></li>
<li><a href="gallery.html">相册</a></li>
</ul>
</li>
<li>
<a href="charts.html"><i class="icon icon-signal"></i> <span>图表统计</span></a>
</li>
<li>
<a href="widgets.html"><i class="icon icon-inbox"></i> <span>插件</span></a>
</li>
</ul>
</div>
<div id="style-switcher">
<i class="icon-arrow-left icon-white"></i>
<span>Style:</span>
<a href="#grey" style="background-color: #555555;border-color: #aaaaaa;"></a>
<a href="#blue" style="background-color: #2D2F57;"></a>
<a href="#red" style="background-color: #673232;"></a>
</div>
<div id="content">
<div id="content-header">
<h1>Interface elements</h1>
<div class="btn-group">
<a class="btn btn-large tip-bottom" title="Manage Files"><i class="icon-file"></i></a>
<a class="btn btn-large tip-bottom" title="Manage Users"><i class="icon-user"></i></a>
<a class="btn btn-large tip-bottom" title="Manage Comments"><i class="icon-comment"></i><span class="label label-important">5</span></a>
<a class="btn btn-large tip-bottom" title="Manage Orders"><i class="icon-shopping-cart"></i></a>
</div>
</div>
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a>
<a href="#" class="current">Interface elements</a>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 center" style="text-align: center;">
<ul class="stat-boxes">
<li>
<div class="left peity_bar_good"><span>2,4,9,7,12,10,12</span>+20%</div>
<div class="right">
<strong>36094</strong>
Visits
</div>
</li>
<li>
<div class="left peity_bar_neutral"><span>20,15,18,14,10,9,9,9</span>0%</div>
<div class="right">
<strong>1433</strong>
Users
</div>
</li>
<li>
<div class="left peity_bar_bad"><span>3,5,9,7,12,20,10</span>-50%</div>
<div class="right">
<strong>8650</strong>
Orders
</div>
</li>
<li>
<div class="left peity_line_good"><span>12,6,9,23,14,10,17</span>+70%</div>
<div class="right">
<strong>8650</strong>
Orders
</div>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span12 center" style="text-align: center;">
<ul class="quick-actions">
<li>
<a href="#">
<i class="icon-calendar"></i>
Manage Events
</a>
</li>
<li>
<a href="#">
<i class="icon-shopping-bag"></i>
Manage Orders
</a>
</li>
<li>
<a href="#">
<i class="icon-database"></i>
Manage DB
</a>
</li>
<li>
<a href="#">
<i class="icon-people"></i>
Manage Users
</a>
</li>
<li>
<a href="#">
<i class="icon-lock"></i>
Security
</a>
</li>
<li>
<a href="#">
<i class="icon-piechart"></i>
Statistics
</a>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span12 center" style="text-align: center;">
<ul class="quick-actions-horizontal">
<li>
<a href="#">
<i class="icon-calendar"></i>
<span>Manage Events</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-shopping-bag"></i>
<span>Manage Orders</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-database"></i>
<span>Manage DB</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-people"></i>
<span>Manage Users</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-lock"></i>
<span>Security</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-piechart"></i>
<span>Statistics</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="alert">
<button class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> Your monthly traffic is reaching limit.
</div>
<div class="alert alert-success">
<button class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> The page has been added.
</div>
<div class="alert alert-info">
<button class="close" data-dismiss="alert">×</button>
<strong>Info!</strong> You have 198 unread messages.
</div>
<div class="alert alert-error">
<button class="close" data-dismiss="alert">×</button>
<strong>Error!</strong> The daily cronjob has failed.
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<div class="widget-box">
<div class="widget-title">
<h5>Modal dialogs</h5>
</div>
<div class="widget-content">
<a href="#myModal" data-toggle="modal" class="btn btn-primary">Modal dialog</a>
<a href="#myAlert" data-toggle="modal" class="btn btn-danger">Alert</a>
<div id="myModal" class="modal hide">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
<div id="myAlert" class="modal hide">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Alert modal</h3>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn btn-primary" href="#">Confirm</a>
<a data-dismiss="modal" class="btn" href="#">Cancel</a>
</div>
</div>
</div>
</div>
<div class="widget-box">
<div class="widget-title">
<span class="icon">
<i class="icon-th-list"></i>
</span>
<h5>Progress bars</h5>
</div>
<div class="widget-content">
<h3>Basic progress bars</h3>
<div class="progress">
<div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-success">
<div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-warning">
<div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-danger">
<div style="width: 60%;" class="bar"></div>
</div>
<h3>Striped progress bars</h3>
<div class="alert">
Internet Explorer doesn't support striped progress bars!
</div>
<div class="progress progress-striped">
<div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-striped progress-success">
<div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-striped progress-warning">
<div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-striped progress-danger">
<div style="width: 60%;" class="bar"></div>
</div>
<h3>Animated progress bars</h3>
<div class="alert">
Internet Explorer doesn't support animated progress bars!
</div>
<div class="progress progress-striped active">
<div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-striped progress-success active">
<div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-striped progress-warning active">
<div style="width: 60%;" class="bar"></div>
</div>
<div class="progress progress-striped progress-danger active">
<div style="width: 60%;" class="bar"></div>
</div>
</div>
</div>
<div class="widget-box">
<div class="widget-title">
<span class="icon">
<i class="icon-comment"></i>
</span>
<h5>Tooltip directions</h5>
</div>
<div class="widget-content">
<p>Four directions of the tooltips, just add a class: 'tip-top', 'tip-bottom', 'tip-left' or 'tip-right' without quotes to the element you want to have tooltip.</p>
<p>
<button class="btn tip-top" data-original-title="Tooltip in top">Top</button>
<button class="btn tip-left" data-original-title="Tooltip in left">Left</button>
<button class="btn tip-right" data-original-title="Tooltip in right">Right</button>
<button class="btn tip-bottom" data-original-title="Tooltip in bottom">Bottom</button>
</p>
</div>
</div>
<div class="widget-box">
<div class="widget-title">
<span class="icon">
<i class="icon-exclamation-sign"></i>
</span>
<h5>Pagination</h5>
</div>
<div class="widget-content">
<h3>Default pagination</h3>
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li class="active">
<a href="#">1</a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
<h3>Alternate pagination</h3>
<code><div class="pagination alternate"></code>
<div class="pagination alternate">
<ul>
<li class="disabled"><a href="#">Prev</a></li>
<li class="active">
<a href="#">1</a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="widget-box">
<div class="widget-title">
<span class="icon">
<i class="icon-th-list"></i>
</span>
<h5>Notifications</h5>
</div>
<div class="widget-content">
<div class="alert alert-block">
<a class="close" data-dismiss="alert" href="#">×</a>
<h4 class="alert-heading">Warning!</h4>
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</div>
<div class="alert alert-success alert-block">
<a class="close" data-dismiss="alert" href="#">×</a>
<h4 class="alert-heading">Success!</h4>
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</div>
<div class="alert alert-info alert-block">
<a class="close" data-dismiss="alert" href="#">×</a>
<h4 class="alert-heading">Info!</h4>
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</div>
<div class="alert alert-error alert-block">
<a class="close" data-dismiss="alert" href="#">×</a>
<h4 class="alert-heading">Error!</h4>
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
</div>
</div>
</div>
<div class="widget-box">
<div class="widget-title">
<h5>Labels and badges</h5>
</div>
<div class="widget-content">
<h3>Available labels</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">Default</span>
</td>
<td>
<code><span class="label"></code>
</td>
</tr>
<tr>
<td>
<span class="label label-success">Success</span>
</td>
<td>
<code><span class="label label-success"></code>
</td>
</tr>
<tr>
<td>
<span class="label label-warning">Warning</span>
</td>
<td>
<code><span class="label label-warning"></code>
</td>
</tr>
<tr>
<td>
<span class="label label-important">Important</span>
</td>
<td>
<code><span class="label label-important"></code>
</td>
</tr>
<tr>
<td>
<span class="label label-info">Info</span>
</td>
<td>
<code><span class="label label-info"></code>
</td>
</tr>
<tr>
<td>
<span class="label label-inverse">Inverse</span>
</td>
<td>
<code><span class="label label-inverse"></code>
</td>
</tr>
</tbody>
</table>
<h3>Available badges</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Example</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Default
</td>
<td>
<span class="badge">1</span>
</td>
<td>
<code><span class="badge"></code>
</td>
</tr>
<tr>
<td>
Success
</td>
<td>
<span class="badge badge-success">2</span>
</td>
<td>
<code><span class="badge badge-success"></code>
</td>
</tr>
<tr>
<td>
Warning
</td>
<td>
<span class="badge badge-warning">4</span>
</td>
<td>
<code><span class="badge badge-warning"></code>
</td>
</tr>
<tr>
<td>
Important
</td>
<td>
<span class="badge badge-important">6</span>
</td>
<td>
<code><span class="badge badge-important"></code>
</td>
</tr>
<tr>
<td>
Info
</td>
<td>
<span class="badge badge-info">8</span>
</td>
<td>
<code><span class="badge badge-info"></code>
</td>
</tr>
<tr>
<td>
Inverse
</td>
<td>
<span class="badge badge-inverse">10</span>
</td>
<td>
<code><span class="badge badge-inverse"></code>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="widget-box">
<div class="widget-title">
<span class="icon">
<i class="icon-comment"></i>
</span>
<h5>Growl-like notifications</h5>
</div>
<div class="widget-content notify-ui">
<ul id="gritter-notify">
<li class="normal">Standard notification</li>
<li class="sticky">Sticky notification</li>
<li class="image" data-image="img/demo/envelope.png">Notification with image</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div id="footer" class="span12">
2012 © UniAdmin.</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.custom.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.gritter.min.js"></script>
<script src="js/jquery.peity.min.js"></script>
<script src="js/unicorn.js"></script>
<script src="js/unicorn.interface.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手