核心:柵格系統,全局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>