文章目录
一、下载
文件目录：
- dist
- docs
- fonts
- grunt
- js
- less
- nuget
二、准备项目模板文件夹
1.下载
https://codeload.github.com/OliverDaDa/html5-boilerplate/zip/master
HTML5 Boilerplate: The web’s most popular front-end template
2.文件目录
文件目录：+ dist
+ css
+ doc
+ img
+ js
- index.html
+ src
+ test
3.删除不必要的样本文件
- css文件夹
- doc文件夹
- CHANGELOG.md文件
- CONTRIBUTING.md文件
4.理解样本中的.htaccess文件
- 保证站点性能最优
5.更新必要的样本文件
- humans.txt：记载贡献者
- LICENSE.txt：许可信息
- README.md文件：项目说明
6.更新图标文件
- favicon.ico：32px*32px
- apple-touch-icon-precomposed.png：144px*144px
三、加入Bootstrap文件
1.字体
- 复制Bootstrap主文件夹中的fonts文件夹到工程文件夹Project1中
- 在fonts文件夹中创建.htaccess文件，内容如下：
<IfModule mod_headers.c>
<FilesMatch "\.(eot|otf|ttf|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
- .htaccess文件用于确保无论站点使用什么CDN服务，所有浏览器都可以使用fonts里的Web字体
2.JavaScript
- 工程文件夹中新建js/bootstrap文件夹
- 将Bootstrap文件夹中的js文件夹中的js文件复制到上一步新建的文件夹中
-
affix.js
-
alert.js
-
button.js
-
carousel.js
-
collapse.js
-
dropdown.js
-
modal.js
-
popover.js
-
scrollspy.js
-
tab.js
-
tooltip.js
-
transition.js
- vendor文件夹
- jquery-3.4.1.min.js
- modernizr-3.8.0.min.js（Modernizr 中文网）
-
plugins.js
-
main.js
3.暂不考虑css文件
- 稍后用less创建自定义文件
4.复制less文件
- less文件夹整个复制到新项目文件夹下
5.盘点
目前新项目文件夹的目录结构应该是如下：- img文件夹
- 空
- fonts文件夹
- .htaccess
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
- glyphicons-halflings-regular.woff2
- js文件夹
- less文件夹
-
404.html
-
favicon.ico
-
index.html
-
robots.txt
-
humans.txt
-
LICENSE.txt
-
README.md文件
四、构造HTML模板
1.原有代码
- 站点描述
<meta name="description" content="">
- 针对移动浏览器视口标签
<meta name="viewport" content="width=device-width, initial-scale=1">
- css
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
- 主题颜色
<meta name="theme-color" content="#fafafa">
- 在IE运行最新的渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 兼容IE
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
- jQuery脚本
<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
- 谷歌Analytics脚本
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
2.新增代码
- 添加标题
<title>Bootstrap' Portfolio</title>
- 添加内容
<header role="banner">
<nav role="navigation" class="navbar navbar-static-top navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Project name</a>
</div>
<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>
</nav>
</header>
<main role="main">
<h1>Main Heading</h1>
<p>Content specific to this page goes here.</p>
</main>
<footer role="contentinfo">
<p><small>Copyright © Company Name</small></p>
</footer>
3.编译less文件
- 工程目录下新建css文件夹
- 将整个工程目录添加到编译窗口中
- 在右侧找到bootstrap.less，右击选择输出文件到css文件夹，保存
- 勾选需要编译的文件，点击完成
- 在index.html中删除normalize.css的链接（bootstrap.css已含）
- 将bootstrap.css复制一份命名为main.css
- 在浏览器查看index.html效果
4.完成响应式导航条
- 补充代码：
<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><!--/.nav-collapse-->
</div>
</nav>
- 代码说明
- 类navbar-toggle用于应用css样式
- icon-bar：三道杠按钮
- data-toggle：bootstrap的js插件用到的，表预期行为
- data-target：bootstrap的js插件用到的，表预期目标
- 拖动浏览器窗口小于980px，即可检验效果。
5.支持IE8
- respond.js 腻子脚本 下载
scottjehl/Respond
respond.js | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
- 找到
respond.min.js - 复制到
js/vendor目录，并添加到index.html的Modernizr后，内容如下：
<!-- Modernizr -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!-- Respond.js for IE 8 or less only -->
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
五、小结
-
最终效果查看:
index.html -
index.html源码如下
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/main.css">
<!-- Modernizr -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!-- Respond.js for IE 8 or less only -->
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--[if lte IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<header role="banner">
<nav role="navigation" class="navbar 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><!--/.nav-collapse -->
</div><!--/.container -->
</nav>
</header>
<main role="main">
<h1>Main Heading</h1>
<p>Content specific to this page goes here.</p>
</main>
<footer role="contentinfo">
<p><small>Copyright © Company Name</small></p>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.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>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
原创文章 60
获赞 216
访问量 3万+