代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Typography - Ace Admin</title>
<meta name="description" content="This is page-header (.page-header > h1)" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- page specific plugin styles -->
<link rel="stylesheet" href="assets/css/prettify.min.css" />
<!-- text fonts -->
<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="no-skin">
<div id="navbar" class="navbar navbar-default ace-save-state">
<div class="navbar-container ace-save-state" id="navbar-container">
<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header pull-left">
<a href="index.html" class="navbar-brand">
<small>
<i class="fa fa-leaf"></i>
Ace Admin
</small>
</a>
</div>
<div class="navbar-buttons navbar-header pull-right" role="navigation">
<ul class="nav ace-nav">
<li class="grey dropdown-modal">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="ace-icon fa fa-tasks"></i>
<span class="badge badge-grey">4</span>
</a>
<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
<li class="dropdown-header">
<i class="ace-icon fa fa-check"></i>
4 Tasks to complete
</li>
<li class="dropdown-content">
<ul class="dropdown-menu dropdown-navbar">
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">Software Update</span>
<span class="pull-right">65%</span>
</div>
<div class="progress progress-mini">
<div style="width:65%" class="progress-bar"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">Hardware Upgrade</span>
<span class="pull-right">35%</span>
</div>
<div class="progress progress-mini">
<div style="width:35%" class="progress-bar progress-bar-danger"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">Unit Testing</span>
<span class="pull-right">15%</span>
</div>
<div class="progress progress-mini">
<div style="width:15%" class="progress-bar progress-bar-warning"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">Bug Fixes</span>
<span class="pull-right">90%</span>
</div>
<div class="progress progress-mini progress-striped active">
<div style="width:90%" class="progress-bar progress-bar-success"></div>
</div>
</a>
</li>
</ul>
</li>
<li class="dropdown-footer">
<a href="#">
See tasks with details
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</li>
</ul>
</li>
<li class="purple dropdown-modal">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="ace-icon fa fa-bell icon-animated-bell"></i>
<span class="badge badge-important">8</span>
</a>
<ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
<li class="dropdown-header">
<i class="ace-icon fa fa-exclamation-triangle"></i>
8 Notifications
</li>
<li class="dropdown-content">
<ul class="dropdown-menu dropdown-navbar navbar-pink">
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">
<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
New Comments
</span>
<span class="pull-right badge badge-info">+12</span>
</div>
</a>
</li>
<li>
<a href="#">
<i class="btn btn-xs btn-primary fa fa-user"></i>
Bob just signed up as an editor ...
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">
<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
New Orders
</span>
<span class="pull-right badge badge-success">+8</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="clearfix">
<span class="pull-left">
<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
Followers
</span>
<span class="pull-right badge badge-info">+11</span>
</div>
</a>
</li>
</ul>
</li>
<li class="dropdown-footer">
<a href="#">
See all notifications
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</li>
</ul>
</li>
<li class="green dropdown-modal">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
<span class="badge badge-success">5</span>
</a>
<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
<li class="dropdown-header">
<i class="ace-icon fa fa-envelope-o"></i>
5 Messages
</li>
<li class="dropdown-content">
<ul class="dropdown-menu dropdown-navbar">
<li>
<a href="#" class="clearfix">
<img src="assets/images/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Alex:</span>
Ciao sociis natoque penatibus et auctor ...
</span>
<span class="msg-time">
<i class="ace-icon fa fa-clock-o"></i>
<span>a moment ago</span>
</span>
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<img src="assets/images/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Susan:</span>
Vestibulum id ligula porta felis euismod ...
</span>
<span class="msg-time">
<i class="ace-icon fa fa-clock-o"></i>
<span>20 minutes ago</span>
</span>
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<img src="assets/images/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Bob:</span>
Nullam quis risus eget urna mollis ornare ...
</span>
<span class="msg-time">
<i class="ace-icon fa fa-clock-o"></i>
<span>3:15 pm</span>
</span>
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<img src="assets/images/avatars/avatar2.png" class="msg-photo" alt="Kate's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Kate:</span>
Ciao sociis natoque eget urna mollis ornare ...
</span>
<span class="msg-time">
<i class="ace-icon fa fa-clock-o"></i>
<span>1:33 pm</span>
</span>
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<img src="assets/images/avatars/avatar5.png" class="msg-photo" alt="Fred's Avatar" />
<span class="msg-body">
<span class="msg-title">
<span class="blue">Fred:</span>
Vestibulum id penatibus et auctor ...
</span>
<span class="msg-time">
<i class="ace-icon fa fa-clock-o"></i>
<span>10:09 am</span>
</span>
</span>
</a>
</li>
</ul>
</li>
<li class="dropdown-footer">
<a href="inbox.html">
See all messages
<i class="ace-icon fa fa-arrow-right"></i>
</a>
</li>
</ul>
</li>
<li class="light-blue dropdown-modal">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
<img class="nav-user-photo" src="assets/images/avatars/user.jpg" alt="Jason's Photo" />
<span class="user-info">
<small>Welcome,</small>
Jason
</span>
<i class="ace-icon fa fa-caret-down"></i>
</a>
<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
<li>
<a href="#">
<i class="ace-icon fa fa-cog"></i>
Settings
</a>
</li>
<li>
<a href="profile.html">
<i class="ace-icon fa fa-user"></i>
Profile
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<i class="ace-icon fa fa-power-off"></i>
Logout
</a>
</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.navbar-container -->
</div>
<div class="main-container ace-save-state" id="main-container">
<script type="text/javascript">
try{ace.settings.loadState('main-container')}catch(e){}
</script>
<div id="sidebar" class="sidebar responsive ace-save-state">
<script type="text/javascript">
try{ace.settings.loadState('sidebar')}catch(e){}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>
</div>
</div><!-- /.sidebar-shortcuts -->
<ul class="nav nav-list">
<li class="">
<a href="index.html">
<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text"> Dashboard </span>
</a>
<b class="arrow"></b>
</li>
<li class="active open">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-desktop"></i>
<span class="menu-text">
UI & Elements
</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i>
Layouts
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="top-menu.html">
<i class="menu-icon fa fa-caret-right"></i>
Top Menu
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="two-menu-1.html">
<i class="menu-icon fa fa-caret-right"></i>
Two Menus 1
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="two-menu-2.html">
<i class="menu-icon fa fa-caret-right"></i>
Two Menus 2
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="mobile-menu-1.html">
<i class="menu-icon fa fa-caret-right"></i>
Default Mobile Menu
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="mobile-menu-2.html">
<i class="menu-icon fa fa-caret-right"></i>
Mobile Menu 2
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="mobile-menu-3.html">
<i class="menu-icon fa fa-caret-right"></i>
Mobile Menu 3
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="active">
<a href="typography.html">
<i class="menu-icon fa fa-caret-right"></i>
Typography
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="elements.html">
<i class="menu-icon fa fa-caret-right"></i>
Elements
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="buttons.html">
<i class="menu-icon fa fa-caret-right"></i>
Buttons & Icons
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="content-slider.html">
<i class="menu-icon fa fa-caret-right"></i>
Content Sliders
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="treeview.html">
<i class="menu-icon fa fa-caret-right"></i>
Treeview
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="jquery-ui.html">
<i class="menu-icon fa fa-caret-right"></i>
jQuery UI
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="nestable-list.html">
<i class="menu-icon fa fa-caret-right"></i>
Nestable Lists
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-caret-right"></i>
Three Level Menu
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="#">
<i class="menu-icon fa fa-leaf green"></i>
Item #1
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-pencil orange"></i>
4th level
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="#">
<i class="menu-icon fa fa-plus purple"></i>
Add Product
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#">
<i class="menu-icon fa fa-eye pink"></i>
View Products
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-list"></i>
<span class="menu-text"> Tables </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="tables.html">
<i class="menu-icon fa fa-caret-right"></i>
Simple & Dynamic
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="jqgrid.html">
<i class="menu-icon fa fa-caret-right"></i>
jqGrid plugin
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-pencil-square-o"></i>
<span class="menu-text"> Forms </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="form-elements.html">
<i class="menu-icon fa fa-caret-right"></i>
Form Elements
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="form-elements-2.html">
<i class="menu-icon fa fa-caret-right"></i>
Form Elements 2
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="form-wizard.html">
<i class="menu-icon fa fa-caret-right"></i>
Wizard & Validation
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="wysiwyg.html">
<i class="menu-icon fa fa-caret-right"></i>
Wysiwyg & Markdown
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="dropzone.html">
<i class="menu-icon fa fa-caret-right"></i>
Dropzone File Upload
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="widgets.html">
<i class="menu-icon fa fa-list-alt"></i>
<span class="menu-text"> Widgets </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="calendar.html">
<i class="menu-icon fa fa-calendar"></i>
<span class="menu-text">
Calendar
<span class="badge badge-transparent tooltip-error" title="2 Important Events">
<i class="ace-icon fa fa-exclamation-triangle red bigger-130"></i>
</span>
</span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="gallery.html">
<i class="menu-icon fa fa-picture-o"></i>
<span class="menu-text"> Gallery </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-tag"></i>
<span class="menu-text"> More Pages </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="profile.html">
<i class="menu-icon fa fa-caret-right"></i>
User Profile
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="inbox.html">
<i class="menu-icon fa fa-caret-right"></i>
Inbox
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="pricing.html">
<i class="menu-icon fa fa-caret-right"></i>
Pricing Tables
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="invoice.html">
<i class="menu-icon fa fa-caret-right"></i>
Invoice
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="timeline.html">
<i class="menu-icon fa fa-caret-right"></i>
Timeline
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="search.html">
<i class="menu-icon fa fa-caret-right"></i>
Search Results
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="email.html">
<i class="menu-icon fa fa-caret-right"></i>
Email Templates
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="login.html">
<i class="menu-icon fa fa-caret-right"></i>
Login & Register
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-file-o"></i>
<span class="menu-text">
Other Pages
<span class="badge badge-primary">5</span>
</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="faq.html">
<i class="menu-icon fa fa-caret-right"></i>
FAQ
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="error-404.html">
<i class="menu-icon fa fa-caret-right"></i>
Error 404
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="error-500.html">
<i class="menu-icon fa fa-caret-right"></i>
Error 500
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="grid.html">
<i class="menu-icon fa fa-caret-right"></i>
Grid
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="blank.html">
<i class="menu-icon fa fa-caret-right"></i>
Blank Page
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul><!-- /.nav-list -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
</div>
<div class="main-content">
<div class="main-content-inner">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">Home</a>
</li>
<li>
<a href="#">UI & Elements</a>
</li>
<li class="active">Typography</li>
</ul><!-- /.breadcrumb -->
<div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon">
<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
<i class="ace-icon fa fa-search nav-search-icon"></i>
</span>
</form>
</div><!-- /.nav-search -->
</div>
<div class="page-content">
<div class="ace-settings-container" id="ace-settings-container">
<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
<i class="ace-icon fa fa-cog bigger-130"></i>
</div>
<div class="ace-settings-box clearfix" id="ace-settings-box">
<div class="pull-left width-50">
<div class="ace-settings-item">
<div class="pull-left">
<select id="skin-colorpicker" class="hide">
<option data-skin="no-skin" value="#438EB9">#438EB9</option>
<option data-skin="skin-1" value="#222A2D">#222A2D</option>
<option data-skin="skin-2" value="#C6487E">#C6487E</option>
<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
</select>
</div>
<span> Choose Skin</span>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar" autocomplete="off" />
<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar" autocomplete="off" />
<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs" autocomplete="off" />
<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off" />
<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container" autocomplete="off" />
<label class="lbl" for="ace-settings-add-container">
Inside
<b>.container</b>
</label>
</div>
</div><!-- /.pull-left -->
<div class="pull-left width-50">
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
</div>
<div class="ace-settings-item">
<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />
<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
</div>
</div><!-- /.pull-left -->
</div><!-- /.ace-settings-box -->
</div><!-- /.ace-settings-container -->
<div class="page-header">
<h1>
Typography
<small>
<i class="ace-icon fa fa-angle-double-right"></i>
This is page-header (.page-header > h1)
</small>
</h1>
</div><!-- /.page-header -->
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div class="row">
<div class="col-sm-6">
<h4>Headings & Paragraphs</h4>
<hr />
<h1>h1. Heading 1</h1>
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
<h2>h2. Heading 2</h2>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<h3>h3. Heading 3</h3>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
</p>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div><!-- /.col -->
<div class="col-sm-6">
<div class="widget-box">
<div class="widget-header widget-header-flat">
<h4 class="widget-title">Lists</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div class="row">
<div class="col-sm-6">
<ul>
<li>Unordered List Item</li>
<li>
<small>List Item in small tag</small>
</li>
<li>
<b>List Item in bold tag</b>
</li>
<li>
<i>List Item in italics tag</i>
</li>
<li>
<ul class="list-unstyled">
<li>
<i class="ace-icon fa fa-caret-right blue"></i>
Nested List Item
</li>
<li>
<i class="ace-icon fa fa-caret-right blue"></i>
Nested List Item
</li>
<li>
<i class="ace-icon fa fa-caret-right blue"></i>
Nested List Item
</li>
</ul>
</li>
<li>Unordered List Item which is a longer item and may break into more lines.</li>
<li>
<strong>List Item in strong tag</strong>
</li>
<li>
<em>List Item in emphasis tag</em>
</li>
</ul>
</div>
<div class="col-sm-6">
<ol>
<li>Ordered List Item</li>
<li class="text-primary">.text-primary Ordered List Item</li>
<li class="text-danger">.text-danger Ordered List Item</li>
<li class="text-success">
<b>.text-success</b>
Ordered List Item
</li>
<li class="text-warning">.text-warning Ordered List Item</li>
<li class="text-muted">.text-muted Ordered List Item</li>
</ol>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<ul class="list-unstyled spaced">
<li>
<i class="ace-icon fa fa-bell-o bigger-110 purple"></i>
List with custom icons and more space
</li>
<li>
<i class="ace-icon fa fa-check bigger-110 green"></i>
Unordered List Item # 2
</li>
<li>
<i class="ace-icon fa fa-times bigger-110 red"></i>
Unordered List Item # 3
</li>
</ul>
<ul class="list-unstyled spaced2">
<li>
<i class="ace-icon fa fa-circle green"></i>
Even more space
</li>
<li class="text-warning bigger-110 orange">
<i class="ace-icon fa fa-exclamation-triangle"></i>
Unordered List Item # 5
</li>
<li class="muted">
<i class="ace-icon fa fa-angle-right bigger-110"></i>
Unordered List Item # 6
</li>
<li>
<ul class="list-inline">
<li>
<i class="ace-icon fa fa-share green bigger-110"></i>
Inline List Item # 1
</li>
<li>List Item # 2</li>
<li>List Item # 3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.col -->
</div>
<hr />
<div class="row">
<div class="col-sm-4">
<div class="widget-box">
<div class="widget-header widget-header-flat">
<h4 class="widget-title smaller">
<i class="ace-icon fa fa-quote-left smaller-80"></i>
BlockQuote & Address
</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div class="row">
<div class="col-xs-12">
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>
Someone famous
<cite title="Source Title">Source Title</cite>
</small>
</blockquote>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<blockquote>
<p class="lighter line-height-125">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
<small>
Someone famous
<cite title="Source Title">Source Title</cite>
</small>
</blockquote>
</div>
</div>
<hr />
<address>
<strong>Twitter, Inc.</strong>
<br />
795 Folsom Ave, Suite 600
<br />
San Francisco, CA 94107
<br />
<abbr title="Phone">P:</abbr>
(123) 456-7890
</address>
<address>
<strong>Full Name</strong>
<br />
<a href="mailto:#">first.last@example.com</a>
</address>
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-xs-12">
<div class="widget-box">
<div class="widget-header widget-header-flat">
<h4 class="widget-title smaller">Definition List</h4>
<div class="widget-toolbar">
<label>
<small class="green">
<b>Horizontal</b>
</small>
<input id="id-check-horizontal" type="checkbox" class="ace ace-switch ace-switch-6" />
<span class="lbl middle"></span>
</label>
</div>
</div>
<div class="widget-body">
<div class="widget-main">
<code class="pull-right" id="dt-list-code"><dl></code>
<dl id="dt-list-1">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<div class="space-6"></div>
<div class="row">
<div class="col-xs-12">
<div class="widget-box">
<div class="widget-header widget-header-flat">
<h4 class="smaller">
<i class="ace-icon fa fa-code"></i>
Code view
</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<pre class="prettyprint linenums"><p class="muted">Fusce dapibus, tellus ac cursus commodo.</p>
<p class="text-warning">Etiam porta sem malesuada.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam.</p>
<p class="text-success">Duis mollis.</p></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div>
</div><!-- /.main-content -->
<div class="footer">
<div class="footer-inner">
<div class="footer-content">
<span class="bigger-120">
<span class="blue bolder">Ace</span>
Application © 2013-2014
</span>
<span class="action-buttons">
<a href="#">
<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
</a>
</span>
</div>
</div>
</div>
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="assets/js/prettify.min.js"></script>
<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
jQuery(function($) {
window.prettyPrint && prettyPrint();
$('#id-check-horizontal').removeAttr('checked').on('click', function(){
$('#dt-list-1').toggleClass('dl-horizontal').prev().html(this.checked ? '<dl class="dl-horizontal">' : '<dl>');
});
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。