核心:栅格系统,全局CSS样式,组件,JS插件
参考官网模板,gulp.js,Ghost 的自定义简单模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>标题</title>
<meta name="description" content="描述">
<meta name="keywords" content="关键字">
<meta name="author" content="lwucoder">
<!-- icon图标 -->
<link rel="icon" href="favicon.ico">
<!-- Bootstrap核心CSS -->
<link rel="stylesheet" href="bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="highlight.js/8.5/styles/monokai_sublime.min.css">
<!-- 此页面的自定义样式-->
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 shim 和 Respond.js 让IE8支持HTML5元素和媒体查询 -->
<!--[if lt IE 9]>
<script src="html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="home-template">
<!-- start header -->
<header class="main-header" style="background-image: url(.jpg)"">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- start logo -->
<a class="branding" href="#" title="name"><img src=".png" alt="name"></a>
<!-- end logo -->
<h2 class="text-hide">隐藏文本</h2>
<img src=".jpg" alt="隐藏图片" class="hide">
</div>
</div>
</div>
</header>
<!-- end header -->
<!-- start navigation -->
<nav class="main-navigation">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header">
<span class="nav-toggle-button collapsed" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</span>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="menu">
<li class="nav-current" role="presentation"><a href="/">首页</a></li>
<li role="presentation"><a href="#">论坛</a></li>
<li role="presentation"><a href="#">快捷手册</a></li>
<li role="presentation"><a href="#">中文文档</a></li>
<li role="presentation"><a href="#">下载</a></li>
<li role="presentation"><a href="#">关于</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!-- end navigation -->
<!--start main -->
<section>
<div class="container">
<div class="row">
<main class="col-md-8 main-content">
</main>
<aside class="col-md-4 sidebar">
</aside>
</div>
<div>
</section>
<!--end main -->
<!--start footer -->
<footer class="footer">
<div class="container">
<p>© XXXXXXXXX</p>
<p><a href="#" target="_blank">粤ICP备00000000号</a> | 粤公网安备0000000000</p>
</div>
</footer>
<!--end footer -->
<!--IE10视口Surface或桌面Windows 8的bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="highlight.js/8.4/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<!--先引入jquery-->
<script src="jquery/1.11.3/jquery.min.js"></script>
<!--再引入Bootstrap的核心js -->
<script src="bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>