http://browsehappy.com/[/url]">
upgrade your browser</a> to improve your experience.</p>
<![endif]-->
其中包含的链接http://browsehappy.com/ ，该网站是一个推荐浏览器升级的站点。
5.2 设置主结构元素
下面开始准备页面内容，目前还只有一个段落。我们可以稍微添加一些内容：
□包含Logo的导航的页头区；
□包含页面内容的内容区；
□包含版权和社交媒体链接的页脚区。
添加这些内容，都会基于最新的HTML最佳实践来做，而且会考虑ARIA（Accessible Rich Internet Applications，可访问富因特网应用）的role属性（即banner、navigation、main和contentinfo 这几个角色）。HTML5后来又增加了 <main cole="main></main> 元素，目的是专门为页面或分区中的主内容提供一个专用的元素。要了解更多信息，可以参照链接：https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/
找到下面的代码：
<!-- 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 © Luka Ye</small></p>
</footer>
这就是我们页面的基本结构和内容。
[b]6.导航条[/b]
我们先把Bootstrap特有的元素设置好，那就是导航条。
作为起点，我们可以暂时就使用 Bootstrap基本的导航条。为此，从Bootstrap文档中拿来它的导航条代码，然后做出如下调整：
□添加了 navbar-static-top 类，因为我们希望导航条能够定位到窗口顶部，但能够随页面滚动而滚动。
□把项目名称连接到 index.html；
□把原来的父div标签改成了语义化的HTML5 nav 标签。
调整后，其header元素如下：
<header role="banner">
<nav role="navigation" class="navbar nav-static-top navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">初识 Bootstrap</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>
保存结果，其导航条的显示效果如下：
[img]http://files.jb51.net/file_images/article/201610/20161014112419143.png[/img]
内容有了。现在，我们特别需要自己的样式表。先来变异并链接Bootstrap默认的样式表。
[b]7.编译和链接默认的Bootstrap CSS[/b]
7.1 编译Bootstrap CSS
找到less/bootstrap.less 并打开它，这个文件导入了less文件夹中所有其他文件。编译后，这个文件会生成完整的bootstrap.css样式表。而这就是我们第一步要做的。
PS:LESS的文档地址为http://lesscss.org/
如果一切没有编译过LESS文件，需要下载和安装它的编译器。
□ Window 用户，下载和安装这个编译器：
■ WinLess（免费桌面应用），地址为 http://winless.org 。
□ Mac 用户可以选择下载：
■ Crunch 应用（免费），地址为 http://crunchapp.net/
■ CodeKit（收费），地址为 http://incident57.com/codekit/
下载了选择的LESS编译器之后，安装，打开。然后就可以按照下面的步骤来做了。
(1) 在根目录创建css文件夹。
[img]http://files.jb51.net/file_images/article/201610/20161014112419144.png[/img]
(2) 使用下列的一种把主文件（css、fonts、img、js和 less文件夹的父文件夹）添加到编译器：
■ 把文件夹拖到编译器窗口中；
■ 在编译器窗口中找到 Add folder 按钮，点击选择主文件夹。
(3) 然后再编译器窗口中可以看到加载的LESS文件，找到less/bootstrap.lesss文件
(4) 右键单击less/bootstrap.less 文件，选择 Select output file，找到刚创建的css文件夹，此时输出文件名应该自动会变成bootstrap.css，单击“保存”。
(5) 选择输出路径和文件名，点击Compile。
[img]http://files.jb51.net/file_images/article/201610/20161014112419145.png[/img]
(6) css文件夹中会出现编译生成的 bootstrap.css文件。
(7) 编译成功后，唯一要注意的是这个文件名是否与index.html中链接的文件名相同。
(8) 在 index.html 中，删除指向 css/normalize.css 的样式表链接，因为这个样式表已经包含在 Bootstrap中了。
(9) 复制一份bootstrap.css，重命名为main.css。
[img]http://files.jb51.net/file_images/article/201610/20161014112419146.png[/img]
(10) 浏览器打开index.html文件，可以看到起默认的导航样式如下，从排版和布局上有所增强，这说明CSS已经生效。
[img]http://files.jb51.net/file_images/article/201610/20161014112419147.png[/img]
7.2 完成响应式导航条
为了在 Bootstrap 响应式导航条基础上完成我们的导航条，还得再增加两个新元素，以及相应的类和data属性。相关的用法可以参考 Bootstrap的Components 文档，在Navbar选项卡下：http://getbootstrap.com/components/#navbar
先按照下列步骤添加额外的标记。
(1) 搜索到 <div>，在一个元素中添加一个navbar-toggle按钮，用于展开和收起响应式导航条。下面就是这个按钮的全部标记：
<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">初识 Bootstrap</a>
</div>
简单解释下以上代码：
■ 按钮中的navbar-toggle 类用于应用CSS样式；
■ 后面的数据属性 data-toggle 和 data-target 是Bootstrap 的JavaScript 插件要用的，分部表示预期行为和预期目标（即 collapse 和类名为 navbar-collapse 的元素，这个元素后面会添加）
■ 类名为 icon-bar 的span 元素是CSS用来创建按钮中的三道杠按钮用的。
(2) 接下来把导航项包装在一个收起的div中，即用带有适当 Bootstrap类的div把<ul>包装起来：
<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>中。
好了，在任何一个现代浏览器（IE9 或Firefox、Chrome、Safari等的最新版本）中，拖动窗口缩小到小于980像素。其显示效果如下：
[img]http://files.jb51.net/file_images/article/201610/20161014112419148.gif[/img]
7.3 排除故障
如果一切顺利，那么说明你已经成功地把LESS编译成CSS，而且也成功地包含了Bootstrap的JavaScript插件。如果不顺利，那就要仔细检查下咯。
7.4 支持IE8
要支持IE8，需要一段JavaScript代码让浏览器能响应媒体查询。这段代码就是Scott Jehl的 respond.js “腻子脚本”。
Bootstrap自身的文档推荐这样做以兼容IE8。相关信息可以参考这里：[url=http://getbootstrap.com/getting-started/#browsers]http://getbootstrap.com/getting-started/#browsers[/url]
为了针对IE8 应用这段脚本，需要针对IE8的条件注释：
<!--[if lt IE 9]>
...
<![endif]-->
另外，根据Andy Clarke的建议，为了不让并不需要这个脚本的Windows 移动设备加载该脚本，还应该排除IE移动版浏览器，具体参见他的在线代码块 320andup，地址是：https://github.com/malarkey/320andup/ 。
Clarke建议的条件注释如下：
<!--[if (lt IE 9) & (!IEMobile)]>
...
<![endif]-->
有了条件注释，下面就是在站点模板文件中添加腻子脚本了，步骤如下：
(1) 打开https://github.com/scottjehl/Respond ，下载源代码。
[img]http://files.jb51.net/file_images/article/201610/20161014112419149.png[/img]
(2) 解压缩，找到名为respond.min.js 的压缩版。
(3) 把它复制到项目文件夹中的 js/vendor 目录下，与jQuery 和 Modernizr放到一块。
[img]http://files.jb51.net/file_images/article/201610/20161014112419150.png[/img]
(4) 然后，把下面几行加载 respond.js 文件代码添加到 index.html 中，包括针对IE的条件注释，就加载 Modernizr的代码下面：
[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
