终于解除到前端牛逼框架Bootstarp了, bootstrap是bootloader的来历啊...不过估计在前端, 意思是一个入口??
1. 下载bootstrap源文件.
https://github.com/twbs/bootstrap/archive/v3.3.7.zip
2. 下载一个HTML5的模板 HTML5 Boilerplate(H5BP, 地址在h5bp.com).
删掉css文件夹, doc文件夹.
3. 把bootstrap的文件拷贝到h5bp的模板项目中:
a. fonts文件夹
b. 在js文件夹中建一个bootstrap目录, 把bootstarp的js文件夹里的文件都拷贝过去.
c. 在编辑器里面打开bootstrap.min.js, 复制所有包括注释, 粘贴到plugins.js文件的结尾.
d. 复制所有的less文件包括less文件夹到模板项目中.
e. img文件夹是空的.
4. 打开模板项目的index.html, 修改成:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Bootstarpping' Portfolio</title>
<meta name="description" content="">
<!--针对移动浏览器的视口-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<!--<link rel="stylesheet" href="css/normalize.css">-->
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here
<p>Hello world! This is HTML5 Boilerplate.</p>
-->
<header role="banner">
<nav role="navigation" class="navbar navbar-static-top navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Project Name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="index.html">Home</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main role="main">
<h1>Main Heading</h1>
<p>Content speicific to this page goes here.</p>
</main>
<footer role="contentinfo">
<p><small>Copyright © Company Name</small></p>
</footer>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"></script>')
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function() {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
5. 编译一下less, 方法是下载winless, 然后compile, 新建css文件夹, 把bootstrap.less编译成bootstrap.css, 然后改名成main.css, 顺便把index.html文件里面的指向css/normalize.css的部分删掉.
6. 这个时候, 把浏览器缩小, 就可以看到出现了响应式的导航栏.