Bootstrap实战

图灵教育 发布于 2015/05/21 14:51
阅读 5K+
收藏 11

作为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文件,因为这些文件可以为我们提供定制和创意的基础。在这里,我们直接溯本求源,打开GetBootstrap.com

{%}

打开网站,一眼就能看到大大的“Download Bootstrap”按钮。翻译本书时,最新的版本为v3.2.0。点击这个按钮,进入下载页面:

{%}

可以看到中间那个“Download source”按钮,点击下载即可。此外,也可以访问GitHub上的项目链接(https://github.com/twbs/bootstrap),点击“Download ZIP”按钮。为方便创建示例,本书采用Bootstrap v3.0.2作为示范,这个版本可以在GitHub上找到并下载:https://github.com/twbs/bootstrap/releases

下载后的文件

下载了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.com。这是一个短链接,服务器解析后会重定向到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的文档(http://h5bp.com)。当然,这个文件本身也有详细注释,可以用编辑器打开从头到尾看一遍。这个文件中的内容不一定全都有用,这取决于你的主机设置和站点需求。不过这个文件的一个主要用途是保证站点性能最优。希望大家能够认真对待它,多听听高手的建议,然后根据需要配置它。就我而言,因为我的主机提供商会帮我处理这些事,所以就不需要这个.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种尺寸的触摸设备图标。最近,这个做法有所改变。因为大图标可用于所有相关设备,而由此造成的性能损失非常非常小。为了减少开发人员制作图标的工作量,现在就只留下一个触摸设备图标了。如果你对相关的讨论感兴趣,可以参考这个链接:https://github.com/h5bp/html5-boilerplate/issues/1367#ref-pullrequest-18787780

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所有图书的示例代码都可以登录http://www.packtpub.com下载。如果没有注册过,需要注册一个账号,下载地址会发到你的注册邮箱里。

把这个新文件直接保存到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变换(要了解更多信息,请参考其文档,地址为:http://modernizr.com/docs/)。下一章,我们会用到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的文档中都有详细说明,访问这个链接http://h5bp.com很容易找到。不过我们接下来也会简单介绍一些,我们按照次序来。

  • 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.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>
  • 下面就是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文档链接给你:https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/html.md。这个文档中的解释非常详细。

对本章的任务而言,我们需要对这个模板中的元素进行如下操作:

1. 设定我们站点的标题,针对旧版本浏览器用户更新现有的IE条件注释;

2. 基于LESS文件编译Bootstrap的CSS,添加基本的页面内容;

3. 整合Bootstrap的JavaScript插件,确保响应式的导航条(navbar)正常响应。

做完这几件事之后,我们就可以真正开始设计自己的网站了。

1.7 设定站点标题

先把index.html文件中<title>的内容加上。你可以随便给自己的作品起名字,比如Bootstrappin’ Portfolio。为准确起见,这里使用HTML实体&#39来表示单引号,结果如下所示:

<title>Bootstrappin&#39; 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. 

这段消息里面包含一个指向http://browsehappy.com的链接,该网站是一个推荐浏览器升级的站点,也包括升级到让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>元素,目的是专门为页面或分区中的主内容提供一个专用的元素。要了解更多相关信息,请参考这个链接:http://www.sitepoint.com/html5-main-element/

找到模板文件中下面这个注释和段落:

<!-- 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 &copy; 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的文档:http://lesscss.org,再找几个LESS的教程看完。稍后你就会知道,LESS非常强大,也很好玩,使用它能够大大提高效率。

现在,我们只编译,而不写LESS文件。

找到less/bootstrap.less,在编辑器中打开它。你会发现这个文件导入了less文件夹中所有的其他文件。编译后,这个文件会生成完整的bootstrap.css样式表。而这就是我们第一步要做的。

如果你以前没有编译过LESS文件,需要下载和安装它的编译器。

1为方便起见,读者也可以在这个链接下载:http://pan.baidu.com/s/1c03tWQW。——译者注

下载了选择的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选项卡下:http://getbootstrap.com/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. 把你的代码放到http://jsfiddle.net/http://www.codepen.com/上,到http://stackoverflow.com/上寻找高手帮助。

把那么多文件揉合到一起,让它们协作运行,出点问题很正常。而学会找到问题和解决问题同样是我们的生存之道!

好吧,假设到现在为止所有问题都解决了,接下来就让我们再探讨一个不那么显而易见的问题。我们想让自己的作品支持IE8。为此,需要考虑一下老版本的浏览器。

1.9.4 支持IE8

要支持IE8,需要一段JavaScript代码让浏览器能够响应媒体查询。这段代码就是Scott Jehl的respond.js“腻子脚本”。

Bootstrap自身的文档推荐这样做以兼容IE8。相关的信息可以参考这里:http://getbootstrap.com/getting-started/#browsers

为了针对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(也可以在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,地址是:http://browsershots.org,这是免费的。还有一个收费的,叫BrowserStack,地址是:http://www.browserstack.com(试用免费)。

这样,我们站点的模板就做完了。继续之前,我们先来小结一下。

1.10 小结

如果大家一直跟着前面的教程在做,那到现在已经为继续实现更高级的设计打好了基础。我们来清点一下吧,我们已经有了:

  • 一个完善的HTML5标记结构,内置了很多最佳实践;

  • 一个标准的Bootstrap样式表文件,已链接;

  • 能够正常工作的JavaScript插件;

  • 一个响应式的导航条;

  • (可能更重要的)随时可以派上用场的LESS编译器。

 这时候,或许把所有文件都备份一下比较好,因为后面的项目都可以把它作为基础。

下一章我们就来弄点好玩的,进一步挖掘Bootstrap的潜力,创建一个漂亮的个人作品展示站点。

本文摘自《Bootstrap实战》

加载中
0
白煌
白煌
写得非常不错
返回顶部
顶部