本文介绍了一个基于Metronic框架的仪表板模板配置方法，详细展示了头部、主体及底部的HTML结构，包括字体样式、Bootstrap引入、主题样式等关键元素。
<!DOCTYPE html>
<html lang="zh_CN" class="">
<!-- BEGIN HEAD -->
<title>Metronic | Admin Dashboard Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href='http://fonts.useso.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet' type='text/css'>
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>-->
<link href="_start/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="_start/style.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body quick-markup_injected="true">
<!-- 定义顶部工具栏 -->
<div class="navbar navbar-inverse navbar-fixed-top" style1="display:none" role="navigation">
<div class="page-logo">//居左显示，并且显示图标有长宽显示
<a class="navbar-brand" target="_blank" href="http://www.easygoo.cn"><img src="_start/img/logo.png"></a>
</div>
<div class="btn-purchase">//居右显示
</div>
</div>
</div>
<div class="navbar-header">
<div class="page-logo">
<a class="navbar-brand" target="_blank" href="http://www.easygoo.cn"><img src="_start/img/logo.png"></a>
</div>
<div class="btn-purchase">
<a href="http://www.easygoo.cn/v8" target="_blank" class="btn btn-primary btn-default" role="button">V8帮助文档</a>
</div>
</div>
</div>
</div>
<!-- BEGIN JAVASCRIPTS -->
<!-- BEGIN CORE PLUGINS -->
<script src="plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script>
jQuery(document).ready(function() {
});
</script>
<!-- END JAVASCRIPTS -->
<div id="window-resizer-tooltip" style="display: none;"><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1920</span> x <span class="tooltipHeight" id="winHeight">1080</span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">1920</span> x <span class="tooltipHeight" id="vpHeight">479</span></div>
</body>
<!-- END BODY -->
<html lang="zh_CN" class="">
<!-- BEGIN HEAD -->
<!-- head部分基本为固定格式 -->
<head>
<meta charset="utf-8"/><title>Metronic | Admin Dashboard Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href='http://fonts.useso.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet' type='text/css'>
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>-->
<link href="_start/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="_start/style.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body quick-markup_injected="true">
<!-- 定义顶部工具栏 -->
<div class="navbar navbar-inverse navbar-fixed-top" style1="display:none" role="navigation">
<!--container定义为适应屏幕分辨率，@media (min-width: 1200px){.container {width: 1170px;}}
@media (min-width: 992px){.container {width: 960px;}} -->
<div class="container">
<div class="navbar-header"><div class="page-logo">//居左显示，并且显示图标有长宽显示
<a class="navbar-brand" target="_blank" href="http://www.easygoo.cn"><img src="_start/img/logo.png"></a>
</div>
<div class="btn-purchase">//居右显示
<a href="http://www.easygoo.cn/v8" target="_blank" class="btn btn-primary btn-default"
//以按钮形式显示
role="button">V8帮助文档</a>
</div></div>
</div>
</div>
//显示在底部
<div class="navbar navbar-inverse navbar-fixed-bottom" style1="display:none" role="navigation">
<div class="container"><div class="navbar-header">
<div class="page-logo">
<a class="navbar-brand" target="_blank" href="http://www.easygoo.cn"><img src="_start/img/logo.png"></a>
</div>
<div class="btn-purchase">
<a href="http://www.easygoo.cn/v8" target="_blank" class="btn btn-primary btn-default" role="button">V8帮助文档</a>
</div>
</div>
</div>
</div>
<!-- BEGIN JAVASCRIPTS -->
<!-- BEGIN CORE PLUGINS -->
<script src="plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script>
jQuery(document).ready(function() {
});
</script>
<!-- END JAVASCRIPTS -->
<div id="window-resizer-tooltip" style="display: none;"><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1920</span> x <span class="tooltipHeight" id="winHeight">1080</span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">1920</span> x <span class="tooltipHeight" id="vpHeight">479</span></div>
</body>
<!-- END BODY -->
</html>
效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
