简讯：Bootstrap 3 版本计划 - 文章 - 伯乐在线
& 简讯：Bootstrap 3 版本计划
& 来源： &&&&
12月8日 Bootstrap 2.2.2 发布后，Bootstrap 团队的主要精力几乎完全将转向该项目的一下主要更新：Bootstrap 3。他们透露了新版的一些细节。
总体来说，和上一次主要更新相比，Bootstrap 3 还是在改进之前版本，丢弃一些旧代码，改善 CSS 响应速度，集中社区成果。具体来说，第三版将解决以下问题：
和 mdo/bootstrap-blog（目前是一个私有 repo ）迁移至
。（译注： 是他们在Github新注册的账号，目前还是个空号）
●网站 URL 更换为：
●所有 LESS 代码（包括响应样式）都将编译整合到一个单独的 CSS 文件中。
●完全不再支持 IE7 浏览器和 FF 3.x 系列。
●使用@font-face版的Glyphicons图标，替代当前的PNG图标
●改换成 MIT 许可，替代当前的 Apache 许可。
●Drop the *-wip branch style of development. 放弃 *-wip 分支样式的开发
●Use tags for all versioned downloads, use smaller feature branches for dev work, and merge right into master (after 3.0 launches). 所有版本下载均使用标签，开发工作采用更为细小的特性分支，（在3.0版发布后）合并到主分支。
为有助沟通和追踪变化，就 3.0 版变化，Bootstrap 团队他们做了一份。关注 Bootstrap 的朋友，可以通过那个wiki关注他们动向、提交问题或贡献自己的力量。他们会尽量保持wiki更新。
① Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。（摘自）
② Bootstrap 中文文档已经由@TV来客开发者 完成，请参见。
编译：伯乐在线
译文链接：
【如需转载，请在正文中标注并保留原文链接、译文链接和译者等信息，谢谢合作！】
关于作者：
可能感兴趣的话题
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线&&&&基于bootstrap兼容ie7+后台模板
&基于bootstrap兼容ie7+后台模板
基于bootstrap兼容ie7+后台模板
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
开发技术下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
基于bootstrap兼容ie7+后台模板
所需积分：0
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
基于bootstrap兼容ie7+后台模板
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员Bootstrap实战
作为Web前端开发框架，Bootstrap的流行很容易理解。它为大多数标准的UI设计场景提供了用户友好、跨浏览器的解决方案。它现成可用且经受了社区考验的HTML标记、CSS样式及JavaScript行为的组合，极大提高了Web前端界面的开发效率，创造了令人愉悦效果。有了这些基本的元素，开发人员就有了构建自己定制方案的坚实基础。
不过，流行、高效、有效也不一定都是好事。由于工具便捷而导致人们养成坏习惯的例子屡见不鲜。然而，Bootstrap却没有这个问题，至少不一定存在这个问题。从它面世就一直关注它的人都知道，它的早期版本和更新有时候会更侧重实际效率，而非最佳实践。事实上，一些最佳实践不管是语义标记还是移动优先的设计，抑或资源性能优化，都需要额外的时间和精力才能实现。
1.1　数量和质量
运用得当的情况下，我认为Bootstrap无论从质量还是效率角度说，都是Web开发社区的一大福利。随着越来越多的开发者使用这个框架，越来越多的人也加入了这个社区，从而逐步接受了前沿的最佳实践。Bootstrap从一开始就鼓励可靠、成熟的及面向未来的CSS方案，比如Nicholas Galagher的Normalize.css和用CSS3方案解决图片过多的问题。此外，它也支持HTML5语义标记。
1.1.1　与时俱进
Bootstrap v2.0发布之后，响应式设计随之成为主流，其界面元素也做到了跨设备响应（包括桌面、平板和手机）。
现在，Bootstrap v3.0也发布了，其功能愈加完善，包括：
移动优先的响应式网格；
基于Web字体的图标，适用于移动及高密度屏幕；
不再支持IE7，标记和样式更加简洁高效。
1.1.2　LESS的威力
简洁的CSS（LESS）值得重点说一下。从单纯给标记添加类深入到自定义Bootstrap的LESS文件，大幅提高了我们的工作效率和控制力。在Bootstrap默认的样式表基础之上，开发人员可以发挥自己的创造力，定制出自己的核心内容。
换句话说，Bootstrap确实非常强大。我会在本书中展示其令人兴奋的特性、效率和最佳实践，告诉大家如何利用它做出漂亮、用户友好的界面。
1.2　下载Bootstrap
下载Bootstrap的途径很多，但通过这些途径下载的文件并不完全一样。为了后面考虑，我们必须保证下载到LESS文件，因为这些文件可以为我们提供定制和创意的基础。在这里，我们直接溯本求源，打开。
打开网站，一眼就能看到大大的“Download Bootstrap”按钮。翻译本书时，最新的版本为v3.2.0。点击这个按钮，进入下载页面：
可以看到中间那个“Download source”按钮，点击下载即可。此外，也可以访问GitHub上的项目链接（），点击“Download ZIP”按钮。为方便创建示例，本书采用Bootstrap v3.0.2作为示范，这个版本可以在GitHub上找到并下载：。
下载后的文件
下载了Bootstrap的源文件之后，应该能看到类似下图所示的文件结构：
没错，文件不少，但我们并不需要那么多。无论如何，这里包含了Bootstrap所能提供的一切。
需要说明的是，下载到的文件中的实际内容可能会随着时间推移而有所变化，但主要内容通常不会变。比如，在less文件夹中，可以找到所有重要的LESS文件，它们是本书所有项目的基础。另外，js文件夹中包含的是Bootstrap的插件，可供我们选择使用。
假如你只需要Bootstrap默认提供的预编译的CSS或JavaScript文件（bootstrap.css或bootstrap.min.js），也可以在dist文件夹中找到它们。在这个版本的源文件里，还有一个examples文件夹，其中包含示例HTML模板。我们第一个项目的模板文件夹就会基于其中一个示例来创建。
1.3　准备项目模板文件夹
接下来，我们为第一个项目创建一个文件夹以及一些基本的文件。为此，我们还要用到HTML5样板文件HTML5 Boilerplate（H5BP），然后把Bootstrap的有用文件复制过去。
1.3.1　下载H5BP
在浏览器中打开。这是一个短链接，服务器解析后会重定向到H5BP的主文档页面。可以在这个页面直接下载H5BP，也可以单击SOURCE CODE链接，在GitHub上下载。
解压下载到的ZIP文件，并把文件夹重命名为Project Template 1。
在这个文件夹中，可以看到类似下图所示的目录结构：
　如果你的文件系统没有显示隐藏的文件，可能看不到.htaccess文件。在我的电脑上，我是通过自己的FTP客户端打开这个本地文件夹，从而看到.htaccess文件的。
1.3.2　删除不必要的样板文件
删除下列只与H5BP相关的文件夹和文件：
因为稍后我们要使用LESS创建自己的CSS文件，所以先删除css文件夹。
CHANGELOG.md。
CONTRIBUTING.md。
doc文件夹及其中内容。
1.3.3　理解样板中的.htaccess文件
如果你还从未看过H5BP中的.htaccess文件，建议先看看H5BP的文档（）。当然，这个文件本身也有详细注释，可以用编辑器打开从头到尾看一遍。这个文件中的内容不一定全都有用，这取决于你的主机设置和站点需求。不过这个文件的一个主要用途是保证站点性能最优。希望大家能够认真对待它，多听听高手的建议，然后根据需要配置它。就我而言，因为我的主机提供商会帮我处理这些事，所以就不需要这个.htaccess文件了。
1.3.4　更新必要的样板文件
样板中的下列文件提供了项目的标准信息，根据需要你可以更新它们、直接使用它们，也可以放那儿不管，完全取决于你。
humans.txt：这个文件记载贡献者，H5BP、Bootstrap的，还有其他贡献者。
LICENSE.md：在H5BP许可前面，加上你基于该许可构建的网站的许可信息，在H5BP许可之后，加上Bootstrap以及其他站点中用到的重要的库的许可信息。
README.md：更新这个文件，加上自己项目的说明信息。
1.3.5　更新站点桌面和触摸设备图标
不要忘了用自己项目的图标替换Boilerplate默认的图标文件，包括以下图标。
apple-touch-icon-precomposed.png：为确保所有移动设备（包括高像素密度屏幕设备）都有最佳效果，这个图标应该是144px见方的（样板文件中的是152px见方的）。
favicon.ico：32px见方的图标文件。
　之前版本的样板文件曾经包含过多达6种尺寸的触摸设备图标。最近，这个做法有所改变。因为大图标可用于所有相关设备，而由此造成的性能损失非常非常小。为了减少开发人员制作图标的工作量，现在就只留下一个触摸设备图标了。如果你对相关的讨论感兴趣，可以参考这个链接：。
1.4　加入Bootstrap文件
现在，我们可以考虑把Bootstrap的文件弄到Project Template 1文件夹里来了。我们会从Bootstrap提供的一大堆文件里选出需要的部分。为了加快进度，强烈建议大家分别在两个窗口中打开Bootstrap 3文件夹和项目的模板文件夹，以便于比较和拖放。
1.4.1　字体
从Bootstrap的主文件夹中，把fonts文件夹复制粘贴到Project Template 1文件夹中。这个文件夹里包含着Bootstrap附带的重要的Glyphicon字体。（如果你之前没用过图标字体，相信你会喜欢的。）
保险起见，建议大家再在这个文件夹里放一个跨域友好的.htaccess文件。为什么？因为随着越来越多的CDN（Content Delivery Network，内容分发网络）为你的网站缓存静态资源，你会发现如果没有这个文件，某些浏览器会拒绝识别你的Web字体。（注意，H5BP的.htaccess文件中包含了解决这个问题的代码。而我们需要做的，就是保证即使站点根目录下没有放H5BP的.htaccess文件，也不会出现字体问题。）
在代码编辑中创建一个新文件，添加以下代码：
&FilesMatch "\.(ttf|otf|eot|woff)$"& &IfModule mod_headers.c& Header set Access-Control-Allow-Origin "*" &/IfModule& &/FilesMatch&
　下载示例代码
Packt所有图书的示例代码都可以登录下载。如果没有注册过，需要注册一个账号，下载地址会发到你的注册邮箱里。
把这个新文件直接保存到fonts文件夹中，并将其命名为.htaccess。（注意，如果是在本地计算机中，你的操作系统可能不会显示这个文件。假如你不知道怎么让操作系统显示隐藏的文件，可以借助FTP客户端，设置客户端的首选项能查看隐藏的文件，然后使用它的浏览器窗口来查看这个本地文件夹。）
保存好之后，这个.htaccess就在你的fonts文件夹中了，它能够确保无论你的站点使用什么CDN服务，所有浏览器都可以使用你的Web字体。
1.4.2　JavaScript
好，接下来要加入Bootstrap的JavaScript文件。H5BP的文件夹中已经包含了一个放置JavaScript文件的文件夹（名为js），在这个文件夹里，可以看到4个文件——有2个位于名为vendor的子文件夹内，如下面的截图所示：
Bootstrap的插件都基于jQuery，而H5BP已经为我们准备好了。除了jQuery，我们还看到了Modernizr脚本。简单介绍一下，Modernizr包含的是HTML5“垫片”（shiv）脚本，可以让IE8支持HTML5的分区（section）元素。因为我们这个项目打算支持IE8，所以也用得着它。除此之外，Modernizr还可以让我们更方便地检测特定浏览器的能力，比如CSS 3D变换（要了解更多信息，请参考其文档，地址为：）。下一章，我们会用到Modernizr的特性检测功能。
接下来我们实际要做的，就是把Bootstrap的插件脚本都弄进来。首先，我们把它们以单个文件的形式复制过来。在Project Template 1文件夹的子文件夹js中，再创建一个名为bootstrap的文件夹，然后把Bootstrap的js文件夹中的脚本文件都复制过来。下面截图显示了Bootstrap随带的插件，每个插件一个文件：
把这些插件文件集中保存到新建的js/bootstrap文件夹，便于优化网站性能，即可以按需选用插件、排除其他文件并缩减文件大小。
在开发期间，保持所有Bootstrap的插件都可用也是一个办法。这样，如果你想添加个折叠、提示或者传送带效果，都可以信手拈来。我们在此选择自己的做法。
H5BP采用的方法是把所有插件代码都复制到一个plugins.js模板文件中。这是结束开发之后的最佳做法，因为这样可以减少HTTP请求，加快站点加载速度。（换句话说，加载一个80 KB的文件，比加载4个20 KB的文件速度更快。）
我们在这个项目的开发过程中，也将采用相同的方法。我们要做的只是把必要的插件代码复制到plugins.js0文件中。所以下面我们就要找到Bootstrap中包含插件代码的大文件。
　或许有读者喜欢在开发期间分别在标记中链接用到的单个插件，最终再把它们合并成一个。如果你愿意，大可这样做，忽略我们下面的内容即可。
打开Bootstrap文件夹中包含分发文件的dist文件夹。在这个文件夹中的js文件夹里，包含着bootstrap.js和bootstrap.min.js，它们就是包含Bootstrap所有插件代码的大文件。考虑到这一章的练习不用编辑插件代码，所以我们可以直接使用压缩后的版本。
找到图中选中的文件后，完成下列步骤：
1. 在编辑器中打开bootstrap.min.js；
2. 全选代码，包括开关的注释，然后复制；
3. 打开新项目文件夹中的plugins.js；
4. 把Bootstrap的插件代码粘贴到// Place any jQuery/helper plugins in here注释下面。结果看起来如下所示（这里当然省略了很多后续代码）。
// Place any jQuery/helper plugins in here. /**
* bootstrap.js v3.0.0 by @fat and @mdo
* Copyright 2013 Twitter Inc.
* http://www.apache.org/licenses/LICENSE-2.0
*/ if(!jQuery)throw new Error("Bootstrap requires jQuery");+function(a){"use strict"; ...
5. 保存并退出。
这样就把Bootstrap的插件都准备好了！
　保留Bootstrap插件及其他插件开头的注释，就保留了插件的来源信息，这些信息也是许可的基本内容。此外，我们因此也更容易搜索到相关插件。比如，在发布之前优化代码时，就需要把现在的压缩版本替换成只包含用到的插件的压缩版本。保留注释到时候就会派上用场。
1.4.3　暂时不考虑CSS文件
在后面的项目中，我们会使用LESS创建自定义的Bootstrap CSS文件。下一章开始就会这么做，现在先不用考虑CSS。
1.4.4　复制LESS文件
下面我们把Bootstrap中重要的LESS文件复制过来：把bootstrap/less文件夹复制到Project Template 1文件夹中。
1.5　大盘点
现在，Project Template 1文件夹应该如下图所示：
而fonts文件夹，包括新创建的.htaccess文件在内，应该如下图所示：
　我一直在用自己的FTP客户端来查看文件，并将其设置为显示隐藏的文件。如果你没有像我这样，有可能看不到隐藏的.htaccess文件。
接下来，img文件夹应该是空的，H5BP原带的就是如此。
下面的js文件夹中应该包含以下子文件夹和文件：
由于采用了模块化的开发方式，Bootstrap的less文件夹中包含很多文件。下面几节在讲到编译它们的时候，我们会详细介绍。
首先，我们来构造出HTML文件。
1.6　构造HTML模板
在新项目文件夹中，用编辑器打开index.html。这个示例标记文件来自H5BP，体现了一些最佳实践和建议方案。我们就以这个文件为基础，把它整合到Bootstrap的工作流中。下面先了解一下这个文件。
浏览一下整个文件，你会发现几个有意思的地方。这些地方在H5BP的文档中都有详细说明，访问这个链接很容易找到。不过我们接下来也会简单介绍一些，我们按照次序来。
HTML5文档类型声明：
&!DOCTYPE html&
针对IE的条件注释，开发者通过嵌套的选择符可以加入对旧版本浏览器的修复代码：
&!--[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]--&
html标签也包含一个no-js类。如果浏览器的JavaScript可用，Modernizr脚本（本章前面介绍过）会把这个类删除，并将其替换成js类。如果这个类没有被删除，则表明JavaScript不可用，我们就需要使用嵌套的选择符为这种情况写一些CSS规则。
接下来是几个meta标签。
用于指定字符集的：
&meta charset="utf-8"&
告诉IE使用最新版的渲染引擎，或者如果安装了的话，使用谷歌的Chrome Frame：
&meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&
预留给描述站点用的：
&meta name="description" content=""&
针对移动浏览器的视口标签：
&meta name="viewport" content="width=device-width"&
在该放站点图标和触摸屏图标的地方，是一行注释，告诉我们可以直接使用站点根目录下的图标文件，放在站点根目录下可以自动被用户浏览器及设备发现。
接下来是两个样式表的链接，一个指向normalize.css，另一个指向main.css：
&link rel="stylesheet" href="css/normalize.css"& &link rel="stylesheet" href="css/main.css"&
再下面就是加载Modernizr脚本的script标签。这个脚本会为IE8提供HTML5“垫片脚本”，以便它能识别HTML5的分区元素：
&script src="js/vendor/modernizr-2.6.2.min.js"&&/script&
接下来是IE条件注释，包含推荐用户把旧版IE升级到新版本的消息：
&!--[if lt IE 7]&
&p class="chromeframe"&You are using an
&strong&outdated&/strong& browser. ...
&![endif]--&
紧接着是一段文本。
随后是托管在谷歌服务器上的jQuery链接，以及一个本地jQuery的后备链接：
&script src="///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&
下面就是plugins.js和main.js的链接，分别用于保存JavaScript插件代码和我们编写的代码：
&script src="js/plugins.js"&&/script& &script src="js/main.js"&&/script&
谷歌的Analytics脚本：
&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&
如果你想更详细地了解有关上面这些内容的信息，还是去看看H5BP的文档吧，干脆直接把它的HTML文档链接给你：。这个文档中的解释非常详细。
对本章的任务而言，我们需要对这个模板中的元素进行如下操作：
1. 设定我们站点的标题，针对旧版本浏览器用户更新现有的IE条件注释；
2. 基于LESS文件编译Bootstrap的CSS，添加基本的页面内容；
3. 整合Bootstrap的JavaScript插件，确保响应式的导航条（navbar）正常响应。
做完这几件事之后，我们就可以真正开始设计自己的网站了。
1.7　设定站点标题
先把index.html文件中&title&的内容加上。你可以随便给自己的作品起名字，比如Bootstrappin’ Portfolio。为准确起见，这里使用HTML实体&#39来表示单引号，结果如下所示：
&title&Bootstrappin' Portfolio&/title&
1.7.1　调整过时的浏览器消息
模板中的消息针对老浏览器用户。大概在第20行左右，消息内容如下：
You are using an outdated browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.
这段消息里面包含一个指向的链接，该网站是一个推荐浏览器升级的站点，也包括升级到让IE能拥有现代浏览器能力的插件——Google Chrome Frame。（不过，随着谷歌从2014年1月起停止维护，Google Chrome Frame的链接也许已经不存在了。）
在本书写作的时候，这条消息包含在一个只针对IE7之前浏览器（即IE6、IE5，等等）的条件注释中。这样一来，除非看源代码，否则不太可能有人看到这条消息。
世界一直在前进。很多组织都在升级浏览器，而很多设计者也不再支持IE7。不过，一般来说，大家的目标还是要确保IE7用户能够看到站点内容，只是不保证他们的体验。
这样做是比较实际的。因为要完全支持IE7，必须增加很多额外的工作量，包括CSS和JavaScript编码工作。代码增加，带宽占用也增加，成本也更高。
所以，Bootstrap 3也不再支持IE7。但在开发结束后，我们还是应该测试一下，保证IE7用户能够访问站点。当然，肯定不能保证完美的体验了。
为此，我们应该让IE7用户也看到这条消息。这就需要在原有条件注释中添加一个表示等于的e（equal），如下所示：
&!--[if lte IE 7]&
也就是把原来的lt替换成lte。
还有几点要注意。
对于IE7及更早的IE版本，可以考虑提供基本的样式表，保证用户能够使用你的网站。
如果你的用户里有很大一部分都使用IE7，而且这些人也不可能升级到新版本，可以考虑支持IE7的Bootstrap 2.2.3。
要是你想知道这些消息显示在浏览器里是什么样子，或者想给它们添加一点样式，可以暂时把开始（&!--[if lte IE 7]&）和结束（&![endif]--&）的条件注释删掉或注释掉。
1.7.2　设置主结构元素
下面开始准备页面内容。目前，还只有一个段落。我们可以稍微添加一点东西，比如下列内容：
包含Logo和导航的页头区；
包含页面内容的内容区；
包含版权和社交媒体链接的页脚区。
添加这些内容，我们都会基于最新的HTML最佳实践来做，而且会考虑ARIA（Accessible Rich Internet Applications，可访问富因特网应用）的role属性（即banner、navigation、main和contentinfo这几个角色）。可能你也知道，HTML5后来又增加了&main role= "main"&&/main&元素，目的是专门为页面或分区中的主内容提供一个专用的元素。要了解更多相关信息，请参考这个链接：。
找到模板文件中下面这个注释和段落：
&!-- Add your site or application content here --& &p&Hello world! This is HTML5 Boilerplate.&/p&
将它们替换成下面这样：
&header role="banner"& &nav role="navigation"& &/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&
这就是我们页面的基本结构和内容了。接下来更进一步。
1.8　导航条
还记得吧，咱们并没有借用Bootstrap预编译的CSS文件，而且也没有自己写LESS并编译自己的CSS；稍后我们会。在此之前，我们得先把Bootstrap特有的元素设置好，那就是导航条。
作为起点，我们可以就使用Bootstrap基本的导航条（后面再添加更多细节）。为此，我从Bootstrap文档中拿来它的导航条代码，然后做了如下调整：
添加了navbar-static-top类，因为我们希望导航条能够定位到窗口顶部，但能够随页面滚动而滚动；
把项目名称链接到index.html；
把原来的父div标签改成了语义化的HTML5&nav标签。
经过这一番调整后，得到如下header元素：
&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&
保存结果，在浏览器中打开并刷新index.html。如下图所示，并没有太多特别的：
内容有了。现在，我们特别需要自己的样式表。先来编译并链接Bootstrap默认的样式表。
1.9　编译和链接默认的Bootstrap CSS
我们可以直接把Bootstrap默认的bootstrap.css文件拿来用，但不如借此机会学习一下编译LESS文件。这样可以为我们将来的设计打下基础。
1.9.1　编译Bootstrap CSS
可能大家有熟悉LESS，也有不熟悉LESS的。没关系，不管你是否熟悉，我都会教你怎么做。不过，我还是建议你看看LESS的文档：，再找几个LESS的教程看完。稍后你就会知道，LESS非常强大，也很好玩，使用它能够大大提高效率。
现在，我们只编译，而不写LESS文件。
找到less/bootstrap.less，在编辑器中打开它。你会发现这个文件导入了less文件夹中所有的其他文件。编译后，这个文件会生成完整的bootstrap.css样式表。而这就是我们第一步要做的。
如果你以前没有编译过LESS文件，需要下载和安装它的编译器。
Windows用户，下载安装这个编译器：
WinLess（免费桌面应用），地址为1。
Mac用户，可以选择下载：
Crunch应用（免费），地址为。
CodeKit（收费），地址为。
1为方便起见，读者也可以在这个链接下载：。——译者注
下载了选择的LESS编译器之后，安装，打开。然后就可以按照下面的步骤来做了。
1. 在fonts、img、js和less文件夹平级的主文件夹里创建一个css文件夹。
2. 使用下列方法中的一种把主文件夹（css、fonts、img、js和less文件夹的父文件夹）添加到编译器：
把文件夹拖到编译器窗口中；
在编译器窗口中找到Add folder按钮，点击后选择主文件夹。
3. 然后在编译器窗口中可以看到加载的LESS文件，找到less/bootstrap.less文件。
4. 右键单击less/bootstrap.less文件，选择Select output file，找到刚刚创建的css文件夹，此时输出文件名应该自动会变成bootstrap.css，单击“保存”。
5. 选择输出路径和文件名，单击Compile。
6. css文件夹中会出现编译生成的bootstrap.css文件。
　如果编译出了问题，可以查看编译器的日志，以及输出路径是否正确。此外，如果编译时出错，也可能是编译器的更新没有跟上LESS开发的步伐。最近，我在使用另外一个免费编译器时就碰到了这样的问题。如果你发现编译器不能编译默认的Bootstrap LESS文件，很可能需要下载编译器的最新版本，或者编译器本身需要更新了。
7. 编译成功后，唯一要注意的是这个文件名是否与index.html中链接的文件名相同。
8. 在index.html中，删除指向css/normalize.css的样式表链接，因为这个样式表已经包含在Bootstrap中了（normalize.less在bootstrap.less中是第一个导入的）。
9. 接下来链接的样式表指向css/main.css，因为后面我们会自定义Bootstrap以生成自己的样式表，所以这个链接先不用动，将来我们再用它来链接自定义的样式表。
10. 在这里，我们先来个偷梁换柱，复制一份bootstrap.css，重命名为main.css（将来再用自定义的样式表重写这个文件），结果如下图所示：
11. 刷新浏览器，应该看到Bootstrap 3默认的导航样式，如下图所示，从排版和布局上有所增强，这说明CSS已经生效，祝贺你！
这样我们就配置好了使用Bootstrap的默认样式了。接下来，我们就继续把导航条变成响应式的。在此期间，我们还会顺便测试Bootstrap的JavaScript插件能够正常工作。
1.9.2　完成响应式导航条
为了在Bootstrap响应式导航条基础上完成我们的导航条，还得再增加两个新元素，以及相应的类和data属性。相关的用法可以参考Bootstrap的Components文档，在Navbar选项卡下：。
先按照下列步骤添加额外的标记。
1. 搜索到&div class="navbar-header"&，在这个元素中，添加一个navbar-toggle按钮，用于展开和收起响应式导航条。下面就是这个按钮的全部标记（我把它放到navbar-header里面）：
&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&
下面简单解释一下以上代码：
按钮中的navbar-toggle类用于应用CSS样式；
后面的数据属性data-toggle和data-target是Bootstrap的JavaScript插件要用的，分别表示预期行为和预期目标（即collapse和类名为navbar-collapse的元素，这个元素后面会添加）；
类名为icon-bar的span元素是CSS用来创建按钮中的三道杠按钮用的。
2. 接下来把导航项包装在一个收起的div中，即用带有适当Bootstrap类的div把&ul class="nav navbar-nav"&包装起来：
&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 class="container"&中。为确保你的代码写得没错，可参考本章完整的示例代码。
　这里的标签名、类名和数据属性在将来的Bootstrap版本中可能会变。如果你发现自己的代码不行，一定要看看相应Bootstrap版本的文档。保险起见，可以使用本书提供的示例代码来试验。
好了，保存文件，刷新浏览器。在任何一个现代浏览器（IE9或Firefox、Chrome、Safari等的最新版本）中，拖动窗口缩小到小于980像素。
如果一切顺利，应该看到收起来的导航条，如下面的屏幕截图所示，但可以看到站点名或Logo以及切换按钮。
这是个好兆头！再单击切换按钮，应该看到滑动打开的链接，如下图所示：
成功啦，干得不错！
1.9.3　排除故障
如果一切顺利，那说明你已经成功地把LESS编译成了CSS，而且也成功地包含了Bootstrap的JavaScript插件。
如果不顺利，可以再检查一遍以下事项。
你的标记结构嵌套关系是否正确？有没有未闭合、不完整或错配的标签 、类，等等？
是否成功地把LESS编译成了CSS？编译得到的CSS是否放到了正确的文件夹里，命名是否正确？
位于index.html中的CSS链接是否正确？
是否包含了Bootstrap的JavaScript插件？
另外，下面这些事项也可能有用。
1. 把前面的步骤从头到尾再过一遍，同时注意上述各项；
2. 验证HTML保证格式正确；
3. 比较本书示例代码和你自己的代码；
4. 参考Bootstrap文档，看是否有标签结构和属性的变化；
5. 把你的代码放到或上，到上寻找高手帮助。
把那么多文件揉合到一起，让它们协作运行，出点问题很正常。而学会找到问题和解决问题同样是我们的生存之道！
好吧，假设到现在为止所有问题都解决了，接下来就让我们再探讨一个不那么显而易见的问题。我们想让自己的作品支持IE8。为此，需要考虑一下老版本的浏览器。
1.9.4　支持IE8
要支持IE8，需要一段JavaScript代码让浏览器能够响应媒体查询。这段代码就是Scott Jehl的respond.js“腻子脚本”。
Bootstrap自身的文档推荐这样做以兼容IE8。相关的信息可以参考这里：。
为了针对IE8应用这段脚本，需要针对IE8的条件注释：
&!--[if lt IE 9]&
&![endif]--&
另外 ，根据Andy Clarke的建议，为了不让并不需要这个脚本的Windows移动设备加载该脚本，还应该排除IE移动版浏览器，具体参见他的在线代码库320andup，地址是：。
Clarke建议的条件注释如下：
&!--[if (lt IE 9) & (!IEMobile)]&
&![endif]--&
有了条件注释，下面就是在站点模板文件中添加腻子脚本了，步骤如下。
1. 打开（也可以在Github上搜索respond.js找到下载地址）。如果你有时间，可以看看这个页面中的文档，了解一些这个脚本的工作原理。
2. 找到文件，下载ZIP：
3. 解压缩，找到名为respond.min.js的压缩版。
4. 把它复制到项目文件夹中的js/vendor目录下，与jQuery和Modernizr放到一块。
5. 然后，把下面几行加载respond.js文件的代码添加到index.html中，包括针对IE的条件注释，就在加载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]--&
6. 好了，这样IE8就可以支持媒体查询响应视口大小变化了。
　如果你想测试添加腻子脚本的结果，但又没有IE8浏览器，可以使用一个在线服务，叫Browsershots，地址是：，这是免费的。还有一个收费的，叫BrowserStack，地址是：（试用免费）。
这样，我们站点的模板就做完了。继续之前，我们先来小结一下。
1.10　小结
如果大家一直跟着前面的教程在做，那到现在已经为继续实现更高级的设计打好了基础。我们来清点一下吧，我们已经有了：
一个完善的HTML5标记结构，内置了很多最佳实践；
一个标准的Bootstrap样式表文件，已链接；
能够正常工作的JavaScript插件；
一个响应式的导航条；
（可能更重要的）随时可以派上用场的LESS编译器。
　这时候，或许把所有文件都备份一下比较好，因为后面的项目都可以把它作为基础。
下一章我们就来弄点好玩的，进一步挖掘Bootstrap的潜力，创建一个漂亮的个人作品展示站点。
写得非常不错