极客观点
项目管理
HarmonyOS
页面html代码可以渲染出来：
<body>
<div id="page-loader" class="fade in"><div id="page-container" class="fade"><!-- begin #header -->
<div id="header" class="header navbar navbar-default navbar-fixed-top">
<!-- begin container-fluid -->
<div class="container-fluid">
<!-- begin mobile sidebar expand / collapse button -->
<div class="navbar-header">
<a href="index.html" class="navbar-brand"><span class="navbar-logo"></span> Color Admin</a>
<button type="button" class="navbar-toggle" data-click="sidebar-toggled">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- end mobile sidebar expand / collapse button -->
<!-- begin header navigation right -->
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form full-width">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter keyword">
<button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
</div>
</form>
</li>
<li class="dropdown">
<a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle f-s-14">
<i class="fa fa-bell-o"></i>
<span class="label">5</span>
</a>
<ul class="dropdown-menu media-list pull-right animated fadeInDown">
<li class="dropdown-header">Notifications (5)</li>
<li class="media">
<a href="javascript:;">
<div class="pull-left media-object bg-red"><i class="fa fa-bug"></i></div>
<div class="media-body">
<h6 class="media-heading">Server Error Reports</h6>
<div class="text-muted">3 minutes ago</div>
</div>
</a>
</li>
<li class="media">
<a href="javascript:;">
<div class="pull-left"><img src="dist/user-1.jpg?4316c6480a82d01921c06d22ce2da1c3" class="media-object" alt=""></div>
<div class="media-body">
<h6 class="media-heading">John Smith</h6>
<p>Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
<div class="text-muted">25 minutes ago</div>
</div>
</a>
</li>
<li class="media">
<a href="javascript:;">
<div class="pull-left"><img src="dist/user-2.jpg?7ab25b114865436944af55691a8a2877" class="media-object" alt=""></div>
<div class="media-body">
<h6 class="media-heading">Olivia</h6>
<p>Quisque pulvinar tellus sit amet sem scelerisque tincidunt.</p>
<div class="text-muted">35 minutes ago</div>
</div>
</a>
</li>
<li class="media">
<a href="javascript:;">
<div class="pull-left media-object bg-green"><i class="fa fa-plus"></i></div>
<div class="media-body">
<h6 class="media-heading"> New User Registered</h6>
<div class="text-muted">1 hour ago</div>
</div>
</a>
</li>
<li class="media">
<a href="javascript:;">
<div class="pull-left media-object bg-blue"><i class="fa fa-envelope"></i></div>
<div class="media-body">
<h6 class="media-heading"> New Email From John</h6>
<div class="text-muted">2 hour ago</div>
</div>
</a>
</li>
<li class="dropdown-footer text-center">
<a href="javascript:;">View more</a>
</li>
</ul>
</li>
<li class="dropdown navbar-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<img src="dist/user-11.jpg?1121ddf517575b4a1249721ede9db926" alt="">
<span class="hidden-xs">Adam Schwartz</span> <b class="caret"></b>
</a>
<ul class="dropdown-menu animated fadeInLeft">
<li class="arrow"></li>
<li><a href="javascript:;">Edit Profile</a></li>
<li><a href="javascript:;"><span class="badge badge-danger pull-right">2</span> Inbox</a></li>
<li><a href="javascript:;">Calendar</a></li>
<li><a href="javascript:;">Setting</a></li>
<li class="divider"></li>
<li><a href="javascript:;">Log Out</a></li>
</ul>
</li>
</ul>
<!-- end header navigation right -->
</div>
<!-- end container-fluid -->
</div>
<!-- end #header --><!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
<!-- begin sidebar scrollbar -->
<div data-scrollbar="true" data-height="100%">
<!-- begin sidebar user -->
<ul class="nav">
<li class="nav-profile">
<div class="image">
<a href="javascript:;"><img src="dist/user-11.jpg?1121ddf517575b4a1249721ede9db926" alt=""></a>
</div>
<div class="info">
Sean Ngu
<small>Front end developer</small>
</div>
</li>
</ul>
<!-- end sidebar user -->
<!-- begin sidebar nav -->
<ul class="nav">
<li class="nav-header">Navigation</li>
<li>
<a href="index.html"><i class="fa fa-laptop"></i> <span>Dashboard</span></a>
</li>
<li>
<a href="inbox.html">
<span class="badge pull-right">10</span>
<i class="fa fa-inbox"></i> <span>Inbox</span>
</a>
</li>
<li class="has-sub">
<a href="javascript:;">
<i class="fa fa-suitcase"></i>
<b class="caret pull-right"></b>
<span>UI Elements</span>
</a>
<ul class="sub-menu">
<li><a href="ui_general.html">General</a></li>
<li><a href="ui_typography.html">Typography</a></li>
<li><a href="ui_tabs_accordions.html">Tabs & Accordions</a></li>
<li><a href="ui_modal_notification.html">Modal & Notification</a></li>
<li><a href="ui_widget_boxes.html">Widget Boxes</a></li>
<li><a href="ui_media_object.html">Media Object</a></li>
<li><a href="ui_buttons.html">Buttons</a></li>
<li><a href="ui_icons.html">Icons</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<i class="fa fa-file-o"></i>
<b class="caret pull-right"></b>
<span>Form Stuff</span>
</a>
<ul class="sub-menu">
<li><a href="form_elements.html">Form Elements</a></li>
<li><a href="form_plugins.html">Form Plugins</a></li>
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="form_wizards.html">Wizards</a></li>
<li><a href="form_wysiwyg.html">WYSIWYG</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
<i class="fa fa-th"></i>
<span>Tables</span>
</a>
<ul class="sub-menu">
<li><a href="table_basic.html">Basic Tables</a></li>
<li><a href="table_manage.html">Managed Tables</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<i class="fa fa-envelope"></i>
<b class="caret pull-right"></b>
<span>
Email Template
<span class="label label-success m-l-5">NEW</span>
</span>
</a>
<ul class="sub-menu">
<li><a href="email_system.html">System Template <i class="fa fa-paper-plane text-success m-l-5"></i></a></li>
<li><a href="email_newsletter.html">Newsletter Template <i class="fa fa-paper-plane text-success m-l-5"></i></a></li>
</ul>
</li>
<li><a href="charts.html"><i class="fa fa-signal"></i> <span>Charts</span></a></li>
<li><a href="calendar.html"><i class="fa fa-calendar"></i> <span>Calendar</span></a></li>
<li class="has-sub">
<a href="javascript:;">
<i class="fa fa-map-marker"></i>
<b class="caret pull-right"></b>
<span>Map</span>
</a>
<ul class="sub-menu">
<li><a href="map_vector.html">Vector Map</a></li>
<li><a href="map_google.html">Google Map</a></li>
</ul>
</li>
<li><a href="gallery.html"><i class="fa fa-camera"></i> <span>Gallery</span></a></li>
<li class="has-sub active">
<a href="javascript:;">
<i class="fa fa-cogs"></i>
<b class="caret pull-right"></b>
<span>Page Options</span>
</a>
<ul class="sub-menu">
<li class="active"><a href="page_blank.html">Blank Page</a></li>
<li><a href="page_with_footer.html">Page with Footer</a></li>
<li><a href="page_without_sidebar.html">Page without Sidebar</a></li>
<li><a href="page_with_right_sidebar.html">Page with Right Sidebar</a></li>
<li><a href="page_with_minified_sidebar.html">Page with Minified Sidebar</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<i class="fa fa-gift"></i>
<b class="caret pull-right"></b>
<span>
Extra
<span class="label label-success m-l-5">NEW</span>
</span>
</a>
<ul class="sub-menu">
<li><a href="extra_timeline.html">Timeline <i class="fa fa-paper-plane text-success m-l-5"></i></a></li>
<li><a href="extra_coming_soon.html">Coming Soon Page <i class="fa fa-paper-plane text-success m-l-5"></i></a></li>
<li><a href="extra_search_results.html">Search Results</a></li>
<li><a href="extra_invoice.html">Invoice</a></li>
<li><a href="extra_404_error.html">404 Error Page</a></li>
<li><a href="extra_login.html">Login</a></li>
</ul>
</li>
<li class="has-sub">
<a href="javascript:;">
<i class="fa fa-align-left"></i>
<b class="caret pull-right"></b>
<span>Menu Level</span>
</a>
<ul class="sub-menu">
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
Menu 1.1
</a>
<ul class="sub-menu">
<li class="has-sub">
<a href="javascript:;">
<b class="caret pull-right"></b>
Menu 2.1
</a>
<ul class="sub-menu">
<li><a href="javascript:;">Menu 3.1</a></li>
<li><a href="javascript:;">Menu 3.2</a></li>
</ul>
</li>
<li><a href="javascript:;">Menu 2.2</a></li>
<li><a href="javascript:;">Menu 2.3</a></li>
</ul>
</li>
<li><a href="javascript:;">Menu 1.2</a></li>
<li><a href="javascript:;">Menu 1.3</a></li>
</ul>
</li>
<!-- begin sidebar minify button -->
<li><a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify"><i class="fa fa-angle-double-left"></i></a></li>
<!-- end sidebar minify button -->
</ul>
<!-- end sidebar nav -->
</div>
<!-- end sidebar scrollbar -->
</div>
<!-- end #sidebar --><!-- begin #content -->
<div id="content" class="content">
<!-- begin breadcrumb -->
<ol class="breadcrumb pull-right">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Page Options</a></li>
<li class="active">Blank Page</li>
</ol>
<!-- end breadcrumb -->
<!-- begin page-header -->
<h1 class="page-header">Blank Page <small>header small text goes here...</small></h1>
<!-- end page-header -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
</div>
<h4 class="panel-title">Panel Title here</h4>
</div>
<div class="panel-body">
Panel Content Here
</div>
</div>
</div>
<!-- end #content --></div></div>
<script src="dist/build.js"></script>
</body>