十大前端开发框架,Foundation之入门篇

对于很多传统Web开发,每次从零开始开发一个工程项目都是必经之路;当每个工程项目都是不一样的时候,去创建一个可重用的代码库却是一件非常棘手
的事情。许多有经验开发者可能更愿意花时间去创建一些前端框架,然而这却又是一件巨大的任务,更不用谈维持最新的框架及最佳实践。眼看每个程序员的需求,明显地,开发者是非常需要那些开源的、稳定的、可扩展性的和有齐全的文档说明的代码。关系到工程的大小,一个
CSS网格系统可能已经满足,如果你有选择地添加或者删除函数方法去满足你的需求岂不是更好吗?在本章中,我们将学习一个叫Foundation可自定义的前端框架。

本文由 伯乐在线 –
厉瑶
翻译。未经许可,禁止转载!
英文出处:Site
Point。欢迎加入翻译组。

第1章 接近Bootstrap

如果想创建一个类似Foundation的框架,需要在细节上正确地处理。因此接下来几周时间,我将会全方面地介绍涵盖“入门”、“定制构建”等专
题,讲解这个特殊的框架的方方面面。更重要的是,我将举一些例子来说明Foundation前端框架怎样能够更好地满足、适应你将来开发的web开发。

在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Bootstrap已经审美疲劳了,那么请深吸一口气,接下来将带给你一些其他口味的框架。让我们先从Bootstrap最有力的竞争者Foundation说起。

原文标题:Up, Close, and Personal with Bootstrap


在这一章,我们将学习Bootstrap的基础,并理解它是如何提高网页开发的效率。我们将从短暂的回顾CSS框架的历史开始,然后介绍应答式网页设计(RWD即Responsive
Web
Design);最后,我们将查看一下如何建立一个新的Bootstrap项目,并用它创建我们的第一个基础的网页。

Foundation是什么?

 

什么是Bootstrap?


Bootstrap是一个前端框架,可以帮助开发者启动网页开发的过程;从后端转前端的(Java、PHP等的)开发者可能很难把握CSS和JavaScript;但是,使用Bootstrap,他们只要专注HTML,把棘手的CSS和JavaScript交给Bootstrap。

Bootstrap不仅对网页开发的新手有帮助。通过阅读本书,你也将见证Bootstrap如何成为专业程序员的福音。

Foundation由很多针对于响应式开发、非常有用的工具组成,以移动终端优先的一个前端开发框架。基于HTML,CSS和jQuery创
建,Foundation运用上现代前端技术与最佳实践,但也只能优雅降级到IE8。虽然这是HTML和CSS开发者最常用的框架,但是你还是有选择地使
用与Sass和Rails配合使用的Foundation来做一些更加深入、有趣的事情。

5. Foundation

Foundation 是一款强大的,功能丰富的并且支持响应式布局的前端开发框架,你可以通过Foundation快速创建原型,利用它所包含的大量布局框架,元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略,它拥有大量实用的语义化功能,并且使用Zepto类库来取代jQuery,这样可以带来更好的用户体验,并且提高运行的速度。

Foundation拥有一套12列的灵活可嵌套的网格系统,你可以用它快速创建适应多种浏览设备的布局。它有很多的功能。它定义了很多的样式,比如字体排版,按钮,表单,以及多种多样的导航控件。它也提供了很多的CSS组件,例如操作面板(panels),价格表(price
tables),进度条(progress
bars),表格(tables)以及可以适应不同设备的可伸缩视频(flex
video)。与此同时,Foundation还包括了很多的JavaScript插件,如下拉菜单(dropdowns),joyride(网站功能引导插件),magellan(网站固定导航插件),orbit(支持触摸的响应式图片轮播插件),reveal(弹出框插件),sections(强大的tab插件)以及tooltips(工具提示)等。

Foundation框架还提供了很多有用的扩展。

  • 模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle
    stencils以及矢量PDF两种格式的下载,你可以用它们来方便快捷的绘制线框图和原型图。
  • HTML模板 ——
    HTML模板可以方便地用来快速创建页面布局。你所要做的仅仅是复制得到模板代码,然后丢到页面的标签之间就好了。
  • 图标字体(Icon Fonts) —— 包含自定义图标的一种网页字体。
  • SVG 社交网络图标(Social Icons)——
    一组不依赖分辨率的社交网络图标(可缩放矢量图标)。
  • 响应式表格——Foundation框架中响应式表格的实现机制是固定表格的左边第一列,然后表格的其他列可以通过滚动条拖拉进行访问。
  • 关闭帆布布局(Off-Canvas Layouts)——
    这些布局可以允许一些网页内容或者导航控件在移动端设备上默认隐藏,当浏览屏幕变大或者用户进行相应操作的时候这些内容再出现。当用户进行相关操作的时候,网页内容或者导航控件将会滑动出现。

如你所见,对于web开发者以及设计师来说,Foundation就像是一个巨大的宝藏。在下载框架的时候,你可以自定义下载框架的内容。

 

Bootstrap,它为什么而存在?

想象一下,你设计了一个网站,它拥有引人注目的导航条、时髦的按钮、漂亮的排版、文本和图像的占位符、大的图片滚动条。。。然而,你不是一个前端开发专家。。。但是你已经实现了这些功能,并且只要写一点HTML就能使用这个网站。这就是Bootstrap。所有必要的CSS类和JavaScript代码,都已经包含在Bootstrap包内。例如,在链接元素(<a></a>)
上使用btn类,它将看起来像一个按钮(图1.1),使用btn-primary可以把链接显示成暗蓝色按钮。

<a href="http://www.google.com" class="btn btn-primary">Visit Google</a>

图片 1

图 1.1

然而,Bootstrap不仅仅能装饰链接、图片和占位符;它最重要的功能是网格系统(grid
system)。创造一个移动端友好(mobile-friendly)的响应式网页,网格系统是必不可少的;我们将在这章的后面讨论响应式网页设计和网格系统。

开发Foundation的公司叫ZURB,已
经为开发者和设计者创建了一套高效率的工具集。每个模块作为整体框架的一部分,都有其作用,但同时也可以独立完整地运行。换句话说就是,你可以在工程中混
合和配合这些模块特点,或者作为一个单一功能添加到以前的工程当中。你还可以把她当作一个功能插件添加到另外一个框架当中。

6. GroundworkCSS

GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5,CSS以及JavaScript工具包,可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。

GroundworkCSS拥有一个灵活,可嵌套的流式网格系统,方便你创建任何布局。这个框架有很多让人印象深刻的功能,比如在平板以及移动端上的网格系统,当屏幕的宽度小于768或者480像素时,页面中原本并列排版的表格列(grid
column)会自动变为独立的行,而不是折叠在一起。另一个很酷的功能是jQuery的响应式文本(ResponsiveText)插件,这个插件可以动态调整页面文字的大小以适应浏览设备的屏幕大小。这个插件对于可伸缩的标题以及创建响应式表格的时候特别有用。

GroundworkCSS包含了大量的UI组件,如tabs、响应式数据表格导航、按钮、表单、响应式导航控件、tiles(一套替代radio按钮以及其他默认表单元素的优雅组件)、工具提示、对话框、Cycle2(一款强大的,响应式的内容滑块)以及其他很多的有用组件。它还提供了很多矢量社交网络图标以及图标字体。

你可以通过切换页面上方的导航按钮选择不同的浏览设备要来查看这款框架的效果。通过这种方式,你可以测试在不同的浏览设备上各种组件的响应式布局情况。

GroundworkCSS的文档写的非常好,并且包含着很多的示例,为了让你更快的上手,他还提供了多种响应式的模板。对于这款框架,唯一我可以想到的缺点就是不能自定义要下载的框架内容。

 

Bootstrap它对我有什么帮助?

正如我提到过的,Bootstrap对新手有帮助,但并不只针对新手。
专业人员也可以使用Bootstrap的代码进行二次开发;Bootstrap允许你使用Less和Sass来自定义它的样式。熟悉这些技术的开发人员可以完全修改Bootstrap的默认外观和感觉。有很多自定义BootStrap的方法,我们将在稍后的章节讨论。

总的来说,这是一个时下流行的框架适用于大部分开发者。Foundation提供一系列好的功能集合,并且完全是免费的,还有不断地发展壮大的社区,可以帮助你解决学习过程中遇到的问题。

7. Gumby

Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。

它的流式-固定布局(fluid-fixed
layout)可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局,包括多列混杂的嵌套模式。Gumby提供两套PSD的模板,方便你在12列和16列的网格系统上进行设计。

Gumby提供了一个功能丰富的UI工具包,包括按钮,表单,移动端导航,tabs,跳转链接(skip
links),拨动开关(toggles and
switches,可以方便快捷地切换元素的class,而不需要进行额外的js操作),抽屉功能(drawers),响应式图片以及retina图片等等。为了紧跟最近的设计潮流,Gumby的UI元素中还包括了Metro风格的扁平化设计,你也可以用Pretty风格的渐变设计,或者按照你的想法糅合两种设计风格。该框架还提供了一套出众的响应式,拥有独立分辨率的Entypo图标,你可以在自己的web项目中尽情使用。

Gumby有一个很好自定义下载选择器,你可以自行配置各个组件的颜色,并且按自己的需求方便地下载。

 

CSS框架的历史


这一切大约开始在2006-07年,YUI(雅虎用户界面库)和Blueprint这样的CSS框架开始流行;它们提供了一下基础功能,例如:CSS重置、字体、网格、动态效果、按钮等等;开发者们开始意识到,这些框架对于处理网页开发中的乏味的重复性任务是很有帮助的,并且缩短了开发周期。

这些基础CSS框架后来被完整的前端框架替代,它们把JavaScript混合其中的,比如Bootstrap。Bootstrap将常用的CSS和JavaScript组件组合在一起,满足了许多基本的开发需求,例如创建滑块、产生弹出效果和下拉菜单。Bootstrap封装了许多可以在网站项目中轻松使用的有用组件。它使用标准的HTML建立全部组件。使用Bootstrap,开发人员只需专注于编写适当的HTML,框架可以理解并渲染相应的标记。

为什么你要使用Foundation?

8. HTML KickStart

HTML
Kickstart 是一款可以用来方便创建任何布局的集合HTML5,CSS和jQuery的工具包。它提供了干净,符合标准以及跨浏览器兼容的代码。

这款框架提供了多种样式表,包括网格,排版,表单,按钮,表格,列表以及一些跨浏览器兼容的web组件比如JavaScript的幻灯片功能,tabs,面包屑导航,包含子菜单的菜单以及工具提示等等。

你可以使用99Lime
UIKIT提供的UI组件来搭建你的产品线框图。

 

CSS原型的需要

拥有一个好的CSS框架的主要原因是为了简化开发过程。在开发网站的过程中,每个网页设计师都有许多共同的任务,每个项目都重复诸如清除浏览器重新设置、在网页布局中创建网格系统、分配排版规则之类的任务可能会让人感到沮丧并耗费时间。一个好的CSS框架提供了一组强大的工具,可以简化这些任务。

好的CSS框架的一些主要亮点包括:
■更快的开发;
■组织和维护代码;
■让你把时间花在创新上,而不是重新发明轮子;

现在有很多开发者都普遍地利用框架,这些框架在创造者手中已经变得臃肿,因为试图覆盖在一个特定环境中的每一个事件。一旦像一个简洁、轻量工具开始工作,可以增长为成百上千的http请求和就好比一个解散的合唱团一样,这都取决于你的需求。

9. IVORY

IVORY 是一款轻量,简单但是强大的前端框架,可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。

当你需要一款轻量灵活,不需要额外的其他功能,并且适应不同浏览设备的框架时,IVORY是你最好的选择。

 

Bootstrap的起源

在2011年,在Twitter工作的的一对网页开发者,Mark Otto和Jacob
Thornton开发了Bootstrap;他们的主要关注点是在代码中引入一致性和可维护性。

以下是Mark ottos的博客文章中关于Bootstrap起源的一段话:
一个非常小的开发团队和我一起设计并构建了一个新的内部工具,并看到了一个可以做更多事情的机会。通过这个过程,我们看到自己构建了比另一个内部工具更重要的东西。几个月后,我们得到了一个早期版本的Bootstrap,作为一种记录和分享公司内部设计模式和资源的方式。

Bootstrap1.0.0是在2011年推出的,只有CSS和HTML组件。在Bootstrap1.3.0之前,它还没有包含JavaScript插件,这个版本也兼容IE7和IE8。

2012年又出现了一个主要更新,Bootstrap2.0.0。它完全重写了Bootstrap程序库,并成为了一个响应性的框架。它的组件兼容各种设备,包括移动设备、平板电脑和桌面设备,以及许多新的CSS和JavaScript插件。

在经历了15次重大更新之后,2013年的Bootstrap3是另一个重要的版本,成为了“移动为先,总是响应”的框架。在早期版本的Bootstrap3框架中,响应式的网站是一个可选项。在2013年发布的版本中,类的名称和项目的文件夹结构都发生了变化。但是请注意,Bootstrap3并不是向后兼容的。你不能通过替换核心的CSS和JavaScript文件,直接迁移到这个版本。

如果您想了解一下Bootstrap的完整发展历程,请查看GitHub上的历史版本。它还显示了对每个版本所做的更改。

今天,Bootstrap有一个庞大的全球开发者社区,他们经常在GitHub上为其代码库提供帮助(https://github.com/twbs/bootstrap/releases)。此外,它还在Stack
Overflow社区进行了积极的讨论,并提供了一些标签,比如Bootstrap(http://stackoverflow.com/questions/tagged/bootstrap)、
twitter-bootstrap(http://stackoverflow.com/questions/tagged/twitter-bootstrap)、
twitter-bootstrap-3(http://stackoverflow.com/questions/tagged/twitter-bootstrap-3)

Bootstrap已经成为当今最受欢迎的技术之一;它是全栈开发者的必备技能,图1.2显示的是在Indeed.com统计的Bootstrap就业趋势。

图片 2

图 1.2

在编写本书时,Bootstrap3.1.1是最新版本。因此,该书的内容和代码将与Bootstrap3.1.1和更高版本兼容。

Foundation包含一系列的方法与特性。在以百分比为基础的流体网格系统上创建的,使用以jQuery封装好的滑动条,一个lightbox
插件,还有HTML元素,而且这一切都是基于为移动终端为先的准测。你完全可以创建自定义、使用jQuery插件来增强input元素某些效果的
form,下拉菜单和多选按钮,这也意味着你很容易地添加自定义样式。同时,这框架让你选择性地通过使用移动终端网格布局、添加灵活性来设置自定义移动终
端布局,以致真正地使自己工程项目在移动终端和电脑上实现响应式。

10.Kube

最后,如果你的新项目需要一款实在的,不需要复杂的额外功能组件的,足够简单的框架,那么 Kube 将会是你正确的选择。Kube是一款最小化的,支持响应式的前端框架,它没有强加的样式设计,因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式,比如网格,表单,排版,表格,按钮,导航,链接以及图片等等。

Kube框架包括一个简洁的CSS文件用于方便地创建响应式布局,还包括了两个JS文件来完成tab以及页面的按钮操作。如果你希望得到Kube最大化的灵活性以及个性化定制,那么你可以下载开发者版本(developer
version),这个版本包括了LESS文件(包括各种变量,mixins以及模块)。

 

Bootstrap的竞争者

在前端框架领域,还有许多其他流行的框架与Bootstrap竞争,它们包括:
■Foundation framework (Zurb10开发)
■Semantic UI11
■Gumby framework12
■Pure (Yahoo开发)

Zurb团队在版本4中重新编写很多很多的核心函数方法来适应相当广泛地使用案例。代码保持精简和相应的地方有必须的注释。可以直接地添加、删除或者裁剪相应地函数来适应你的需求。

总结

我希望看过本文之后,当你为新项目选择框架时,能够对各种各样的框架有更好的认识。在文章中,我尝试着列出了我所知道的目前应用最广泛,功能最全面,结构最优的一些前端开发框架。不过如你所知,大千世界,瞬息万变,因此,如果你知道本文中没有列出的其他的优秀开发框架,欢迎你在评论中与我们分享,这样会使本文更加有帮助,谢谢。

赞 10 收藏
评论

谁在使用Bootstrap?

在采用这项技术之前,这是值得一看的。这可以帮助我们清楚地了解使用这种特定技术可以实现什么。下面是一些真实的网站项目的例子,这些项目是使用Bootstrap创建的:
https://www.opendesk.cc/
http://riotdesign.eu/en/
https://www.20jeans.com/
http://redantler.com/
www.uberflip.com

用户正在使用地版本3也是可以从一个迁移文档来更新安装,或者,如果他们愿意的话,还可以继续使用版本3而不用跳到版本4。

关于作者:厉瑶

图片 3

有理想有自我价值实现感的前端程序媛,坐标杭州,专注于前端开发,立志成为优秀前端工程师,个人博客(新浪微博:@玉面小飞鱼)

个人主页 ·
我的文章 ·
2

响应式网页设计概述


响应式网页设计(Responsive web
design)允许开发者创建一个可以在运行中改变布局的网站。开发人员可以创建一个单一的设计,让它可以工作在任何类型的设备上:移动设备、平板电脑、智能电视和个人电脑。

响应式网页通常是流畅的,他们根据屏幕的大小来调整自己,并且与移动设备的触控界面兼容。通过使用响应式网页设计,开发者可以创建强大的网页应用,取代iOS和Android等平台上的原生应用。

下载一个自定义的Foundation

根据屏幕大小调整布局

让我们来看看一个例子来更好地理解这个概念。假设我们有一个图1.3所示的页面布局。

图片 4

图 1.3

我们的布局有三个主要部分:标题、内容部分、和页脚。标题部分包含一个标志和一个矩形广告。内容部分包含四个较小的帖子,并排放置在一起。然后我们有两个更大的帖子放在小的帖子下面。最后,我们有一个页脚部分,其中有简单的版权文本。

很明显,我们无法轻易地在平板电脑和手机上看到这一页,因为它无法正确地适应屏幕。设计需要为这些用户定制。

让我们假设我们使用了Bootstrap来创建桌面布局。我们已经使用它的网格系统来创建响应式设计,这样布局就会自动调整以适应平板电脑和移动设备。

在平板设备上,布局将如图1.4所示。广告已经被隐藏在标题部分,并且标志已经居中了。布局非常完美。

图片 5

图 1.4

在智能手机视图中,如图1.5所示,我们可以看到标题部分继续遵循平板电脑的样式,但内容部分发生了重大变化。这些帖子会反射到底部,形成两行,每一行包含两个帖子。更大的帖子现在被放置在每一个帖子的顶部(第二大的帖子在屏幕的底部)。

图片 6

图 1.5

这是一个非常基本的关于响应式设计的行为的概述。显然,我们可以做的比前面提到的例子要多得多。在第2章学习网格系统时,我们将学习更多关于响应性web设计的知识。

Zurb官网上有一个网页是允许你预先选填自定义的功能、样式来满足自己的需求即可,然后再把此Foundation导出下载到本地上使用。例如,你只是需要一个CSS网格布局,好,那你只是需要去掉勾选everything
except
“grid”的按钮,然后填入你的其他工程,如标签和按钮,之后就可以得到你想要的了。再或者,你不管三七二十一,全选所有提供的功能、样式,然后只需要点击一下按钮就可以使用了。框架还允许自定义默认的CSS颜色甚至一些关键宽度值,如最大宽度。

准备Bootstrap


最后,我们来到了这一章最重要的话题:接触Bootstrap

首先,我们需要Bootstrap程序包,所以让我们在Bootstrap的官方网站http://getbootstrap.com上,下载最新的3.x.x版本。提取存档文件并复制下面的文件夹:

- /css
- /fonts
- /js

新建一个文件夹,命名成任何你希望的名字;我把自己的文件夹命名为:Bootstrap_demos。将上面的三个文件夹粘贴到这个项目文件夹中。

现在打开你最喜欢的HTML编辑器(我个人推荐的是Sublime
Text),在这个文件夹下,创建一个名为index.html的文本文件,然后输入以下代码片段:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Bootstrap Application</title>
</head>
<body>
</body>
</html>

这是为我们第一个Bootstrap应用的建立的简单的HTML结构。
我们的项目目录现在看起来如图1.6所示:

图片 7

图 1.6

现在让我们在HTML文件中包含Bootstrap。首先,我们需要包含Bootstrap的CSS文件,打开/css目录,你将看见bootstrap.css,它是Bootstrap的主CSS文件。

bootstrap.min.css是什么?
这里另外有一个bootstrap.min.css,它是压缩版的bootstrap.css。
被称为压缩版,是因为它没有空格和注释,减小了文件尺寸。
它将在你的项目完成时使用,为发布项目准备的。

让我们在index.html中链接我们的CSS文件。在<head>和<title>标签之间添加下面的代码:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

Bootstrap需要jQuery让它的JavaScript组件工作。前往jquery.com下载jquery文件。【注:作者写这书的时候是2014年,当时IE8浏览器仅支持1.x版本的jQuery.js;这本书的中文翻译时间是2017年11月,jquery已经发布3.x版本,且不再维护1.x和2.x版本,当前版本jquery-3.2.1,支持IE9以上版本】

下载完毕后,将jquery-3.2.1.js复制到本项目的/js目录下;接下来我们用下面的代码在index.html中关联jquery:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

建议将JQuery插在<body>标签内,而不是<head>标签内;这样JQuery将在HTML容器加载完毕后加载,减少页面加载时间。

现在,我们包含Bootstrap的JavaScript文件:

<script src="js/bootstrap.js"></script>

index.html看起来是这样的:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

为了让Bootstrap完全兼容各种设备,我们需要包含一些必要的meta标签:
首先,我们应该告诉浏览器我们的网站包含Unicode编码的字符集(一个ASCII字符集的超集),使用下面的meta标签:

<meta charset="utf-8">

有时候,IE浏览器运行在兼容模式下;使用下面的代码片段将迫使IE使用最新的渲染引擎来呈现我们的网站。这将防止IE浏览器呈现我们的网站时,因为老的渲染引擎不支持CSS的所有属性而崩溃:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

接下来,我们将使我们的站点占用浏览器窗口内所有可用的空间,
无论是平板电脑,还是移动设备,甚至是桌面屏幕。我们告诉浏览器将我们的应用程序扩展到可用的窗口空间大小:

<meta name="viewport" content="width=device-width, initial-scale=1">

代码中initial-scale=1的意思是按100%比例显示

现在,我们的index.html看起来是这样的:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

我们需要在上面的代码中处理最后一步。Bootstrap
3使用了许多HTML5的元件和CSS3属性,这些是不能在IE8浏览器中工作的。我们需要加一些只有在IE8浏览器中调用的代码,让它支持HTML5和CSS3;这些代码是html5shiv.js和respond.js:

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
1.4.2/respond.min.js"></script>
<![endif]-->

使用这些代码
你不需要下载html5shiv.js和respond.js,只要如上所示,直接链接到它们的CDN
(Content Delivery Network,即内容分发网络)。

现在,我们的index.html完成了,看起来是这样:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
➥initial-scale=1">
<title>My First Bootstrap Application</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
➥3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/
➥respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello World!</h1>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

我已经在<body>中插入了一个包含“Hello World!”的h1元素。
在浏览器中加载页面,你应该看见字体漂亮的“Hello World!”

如果您使用的是Google
Chrome,那么您可以轻松地检查所有的JavaScript和CSS文件是否正确加载。在页面上单击右键并查看元素。单击Console选项卡,如果没有显示错误,所有的JavaScript文件都已经加载了roperly。接下来,转到网络标签;如果没有404错误,所有CSS文件都是正确链接的,如图1.7所示:

图片 8

图 1.7

最后,我们已经完成了我们的引导项目。我们将在本书的其余部分使用类似的设置。

尽管这是非常方便的,但它依然是一种形式,而且我觉得还有可以改进的地方。理想地,我希望看到可能是一些可视化的HTML样板的过程。同时,版本4使用em作为长度单位并且em是font-size主单位它会看起来很直观,包括像素到em计算器,只是使得放缩更加容易而已。

点击

到目前为止,我们了解到Foundation所提供的关键特点与各方面便利之处,并且学习了如果下载自定义的Foundation,你现在已经有了一个下载好的Foundation,那么开始尝试更多学习与使用它,如果你在此过程中遇到困难,别担心,你可以在文档这里找到大部分的答案,再不行就可以在此文章下面评论提出问题。

在下一篇我们将开始讲解“WEB前端框架-Foundation之网格系统”,主要讲导航栏、选项卡、按钮和一些关键UI元素。我们还会讲当你使用Foundation作为你的工程框架时,增强你自己开发的有用工具。敬请期待吧!

发表评论

电子邮件地址不会被公开。 必填项已用*标注