报表和面板,Web前端之家

让我们继续为基于Foundation的项目添加更多的功能,如将学习Joyride插件,该插件帮助引导用户来使用你的站点;还会学习价格表格、标准表格和交换功能:一种新奇响应式图片工具。我们通过一些模版示例,你还可以下载源码来学习如何实现这些特性的。

最近一段时间实在是太忙了,公司事情多,自己的事情也多,都没时间更新博客了。项目基本完成,腾出点时间更新下博客了。

Bootstrap菜鸟入门教程

我们将从最简单的特性开始讲解。

今天谈的内容还是Foundation,先前发布过二篇文章了。下面就说下第三章-Foundation之导航栏详解。一个前端框架是否优秀,其中看该框架如何处理导航栏。我们先来看几种形式用javascript工具实现效果的导航栏。我还会介绍另一种有益于你更好地成为Foundation开发者、很有用的工具。废话少说,进入正题:

Bootstrap简介

面板

我们先介绍下一款插件:section插件:

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于
HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

在任意元素中添加一个类“panel”,就会形成一个简单颜色块。这种“块”显示的盒模型是“border-box”,因此添加padding的话,不会添加元素的宽高,只会向内扩展。这样就很方便来控制元素的大小了。

Foundation提供其中一个最好的javascript插件就是Section:类似于tabs有选择性地,在同一时间内显示一块页面内容。Section主要以几种形式的导航栏出现,如手风琴式导航,tabs,
垂直和水平导航。效果如下图:

一、栅格系统

Wehaveasimpleselectionofhostingpackagesforyoutochoosefrom,thesewillworkfantasticallyforanycompany.WithultrafastmySQLdatabaseconnections,contentmanagementsystemsreallyfly.Addtothis24/7customersupportand99.9%uptimeandyou’vegotagreathostingpackage.

Section1

栅格系统的工作原理:

为了更好地说明,我添加两列,宽度都为“large-6”,一列是图片,一列是面板,这样就可以很好地对齐了。

Contentofsection1.

“行”必须包含在 .container 或 .container-fluid
中,以便为其赋予合适的排列。

价格表格

Section2

通过“行”在水平方向创建一组“列”。

有时候,创建一个网站的一个比较重要的理由就是卖东西,因此,价格表格经常出现在网站上,另外,Foundation也覆盖了这个功能,但和传统表格不一样的是,这些表格实际上就是一个无序列表,搭配指定的类形成的。

Contentofsection2.

你的内容应当放置于“列”内,并且,只有“列”的直接子元素。

Startup

这段代码可能比前面章节都要复杂些,我来解释一下:

类似 .row 和 .col-xs-4
这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin
也可以用来创建语义化的布局。

$9.95

不管你打算创建哪种形式的Section,都要以

通过为“列”设置 padding 属性,从而创建列与列之间的间隔。通过为 .row
元素设置负值 margin 从而抵消掉为 .container 元素设置的
padding,也就间接为“行”抵消掉了padding。

Anawesomepackagetogetanycompanyontotheirfeet.Withinstantsetupandmagicmoneymakingplugins.

开头,这个data-section属性声明我们正在使用哪种Section,class:auto指明使用Foundation默认的风格:手风琴。如果想使用上其他风格的话,可以把auto改为tabs,accordion,vertical-nav或者是horizontal-nav。最后给data-section赋上相同class值,来确认你用对特定形式的section。

负值的
margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

1Database

接下来需要添加

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个
.col-xs-4 来创建。

5GBStorage

块,里面添加一个title和该title链到内容的链接:

如果一“行”大于 12,多余的“列”所在的元素将被作为一个整体另起一行排列。

20Users

Section1

栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ,
并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ,
并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-*
不存在, 也影响大屏幕设备。

BuyNow

Contentofsection1.

媒体查询:

从代码示例中可以看到,ul元素有一个类“pricing-table”,然后在li元素中倒使用很多类,包括
“title”,“price”,“description”,“bullet-item”和“cta-button”。而你只要做的是,定制你的内容。
你应该还会添加多个价格表格来起对比的作用。

从上面代码可以看出每个Section都是有

媒体查询是非常别致的”有条件的 CSS
规则”。它只适用于一些基于某些规定条件的
CSS。如果满足那些条件,则应用相应的样式。

标准表格

容器包含着。还有一个

Bootstrap
中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在
LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值。

价格表格作用很大吧,接下来你可以需要一个真的的表格来展示数据,在Foundation中使用表格也是很简单的,首先创建一个table,包含其他元素,而你只要做的只是为每一列设置宽度即可。

标签,添加class为title,
链接链到相对应的内容。接着下面包含的是Section要显示内容块,需要添加class为content,
重复多个

/* 超小屏幕 *//* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) *//* 小屏幕 */@media (min-width: @screen-sm-min) { https://www.jb51.net/article/... }/* 中等屏幕 */@media (min-width: @screen-md-min) { https://www.jb51.net/article/... }/* 大屏幕 */@media (min-width: @screen-lg-min) { https://www.jb51.net/article/... }

Startup

内容就可以创建多个Section了。

有时候也会在媒体查询代码中包含 max-width,从而将 CSS
的影响限制在更小范围的屏幕大小之内。

Enterprise

备注:添加class名vertical-nav或者horizontal-nav时,在大屏幕上正常显示垂直或者水平的导航栏,但遇到小屏幕时就会自动转换成accordin风格导航。

@media (max-width: @screen-xs-max) { https://www.jb51.net/article/... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { https://www.jb51.net/article/... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { https://www.jb51.net/article/... }@media (min-width: @screen-lg-min) { https://www.jb51.net/article/... }

GlobalCorporation

深层链接

媒体查询有两个部分,先是一个设备规范,然后是一个大小规则。在上面的案例中,设置了下列的规则:

1Database

假设你想默认链接到第二个section,但是当你打开页面时,它还是默认显示第一个section的内容。不用纠结!Foundation本身就提供了解决方案,方案就是需要添加一个新的属性值:data-options=”deep_linking:true”在外面的section容器。当用户浏览一个有锚点的url时,例如

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { https://www.jb51.net/article/... }

5Database

Section1

对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于
@screen-sm-max,则会进行一些处理。

10Database

Contentofsection1.

栅格参数

NoBackups

Section2

下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

50GBBackups

Contentofsection2.

下表总结了 Bootstrap 网格系统如何跨多个设备工作

100GBBackups

从上面的代码,应该注意到在

响应式的列重置

交换插件

这个内容div里面添加了一个新属性为data-slug,是用来告诉Foundation加载页面时,先显示哪个Section。侧导航

以下实例包含了4个网格,但是我们在小设备浏览时无法确定网格显示的位置。

虽然在Foundation中所有图片默认都是流式布局的,而有时候你却改变一下:图片能够响应式。

Foundation的侧导航通常被包含在内容div里面。它的html架构也是非常简单的,而且可以使用divider分区分。看如下代码所需要的标签:

为了解决这个问题,可以使用 .clearfix
class和响应式工具来解决,如下面实例所示:

现在有一个问题就是在图片中有文本。最近Zurb增加了一个插件叫“交换”;实现原理也是很简单的,当屏幕大小为指定时,就使用不同的图片来替换你选择的图片。实现过程就是通过添加特定属性,为“data-interchange”。这是用来选择图片源改变的选择。

Link1

   Lorem ipsum dolor sit amet, consectetur adipisicing elit.   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim   

如上看出,我添加很多选择性的属性值,里面有很多参数,这样你就选择性地设置定制的点来交换不同的图片。

Link2

偏移列

这并不是一个高性能的插件,因为交换是需要一到两秒的时间,Zurb有希望在将来会解决这个问题。这个插件的主要好处之一就是它减少在移动设备上的加载时间,因为会下载更小优化过的相同图片,使得更好地加载网页其他部分。

Link3

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如,.col-xs-*
类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。

Joyride插件

Link4

为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-*
类。这些类会把一个列的左外边距增加 * 列,其中 * 范围是从 1 到 11。

在前面的每一节教程中,都会涉及学习一个插件,但这次,我们将学习两个。

代码显示的是一段标准的无序列表,包含一系列内嵌链接的子项。无论你想要什么,添加关键class:side-nav到ul,然后在li里添加class:active表明当前显示的子项链接。如果你想区分子项,就可以添加一段

在下面的实例中,我们有

在某情况下,引导用户来熟悉你的网站对用户来说一种很好帮助。例如,Google在推出新的特性时候,就会这样做。通过一步一步地指引你的用户,并
且解释每一部分都是怎么使用的。Joyride插件实现过程就是添加一个列表,来表示每一步指引。这列表可
以是有序列表或者无序列表,但是都必须添加类“joyride-list”和属性“data-joyride”。

代码来显示分界线。子导航

..

Let’sgetstarted,herewehaveanintro.

Foundation的子导航通常用来过滤、挑选特定的内容。但是子导航并不是像前面那样使用无序列表,而是使用描述列表。这样的好处就是有选择地使用描述标签来定义特定术语包含链接。这里就不能使用divider了,但依然还是用使用class:active,见代码如下:

,我们将使用 .col-md-offset-3 class 来居中这个 div。

FirstStop

Hereweusethenewinterchangefunctiontochangeimagesbasedonscreensize.

Filter:

 Hello, world!   Lorem ipsum dolor sit amet, consectetur adipisicing elit.   

SecondStop

Weareusingpricingtablesheretodisplayalistofservicesfromahostingcompany.

All

嵌套列

ThirdStop

Thisisjustalinkbutitopensamodalwithastandardtableinside,excitingeh?

Photos

为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的
.col-md-* 列内添加一组 .col-md-*
列。被嵌套的行应包含一组列,这组列个数不能超过12。

EndOfTheLine

Ourtourendshere,pleaseremembertotakeallyourbelongingswithyouonyourwaytotheexit.

每一个li项目都必须添加“data-id”,如果fist
stop是一个h2标签,那么你的data-id就是“data-id=”title””了。然后h2元素就要添加一个id为“title”。

接下来你将要添加一个“next”的按钮告诉用户如何操作进入下一步。这里就需要添加一个新的属性“data-text”到每一个li上去,在上面的代码中可以看出,使用了值“Go”来开始,使用值“Next”来进入下一步。

还有其他一些选择可以直接添加到li项目的,比如data-options=”tipLocation:top;
tipAnimation:fade”
,你可能猜出作用就是显示内容的位置和淡入进来。还有很多参数可以使用在JavaScript初始化中,你还可以使用cookies插件,如果用户登录时
保存一个选择就是只是显示一次。

有用的工具

有点不足的是,Foundation没有包含一个证明插件或者特性,如果实现这些那就非常方便了,Quovolver可以弥补通过设置一个简单的设置和灵活的标记。在你的页脚中添加脚本,去掉一些标记。

总结

接下来我们将学习Magellan,
用来创建一个粘性的导航栏。还学习可视化类,支持右到左,键盘响应,缩略图,flex视频和zepto的细节。我都将一一解释这些特性,并且学习如何更好地在自己的项目中实现出来。

Videos

在下面的实例中,布局有两个列,第二列被分为两行四个盒子。

Music

 Hello, world!   第一列  Lorem ipsum dolor sit amet, consectetur adipisicing elit.    第二列 - 分为四个盒子    Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.     

分页功能

Bootstrap
网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。

分页功能也是导航中的一种;事实上,分页应该被包含在

您可以很轻易地改变带有 .col-md-push-*.col-md-pull-*
类的内置网格列的顺序,其中 * 范围是从 111

元素当中,Foundation使用哪些标记来实现分页,见如下代码:

在下面的实例中,我们有两列布局,左列很窄,作为侧边栏。我们将使用
.col-md-push-*.col-md-pull-* 类来互换这两列的顺序。

«

 Hello, world!    我在左边   我在右边   
    我在左边   我在右边  

1

二、Bootstrap 排版

2

HTML 中的所有标题标签,

3

均可使用。另外,还提供了 .h1 到 .h6
类,为的是给内联属性的文本赋予标题的样式。

我是标题1 h1我是标题2 h2我是标题3 h3我是标题4 h4我是标题5 h5我是标题6 h6

在标题内还可以包含 标签或赋予 .small 类的元素,可以用来标记副标题。

如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加
,或者添加 .small
class,这样子您就能得到一个字号更小的颜色更浅的文本,如下面实例所示:

我是标题1 h1. 我是副标题1 h1我是标题2 h2. 我是副标题2 h2我是标题3 h3. 我是副标题3 h3我是标题4 h4. 我是副标题4 h4我是标题5 h5. 我是副标题5 h5我是标题6 h6. 我是副标题6 h6

页面主体:Bootstrap 将全局 font-size 设置为 14px,line-height 设置为
1.428。这些属性直接赋予

元素和所有段落元素。另外,

元素还被设置了等于 1/2 行高。

引导主体副本这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。

列表:

Bootstrap 支持有序列表、无序列表和定义列表。

有序列表:有序列表是指以数字或其他有序字符开头的列表。

无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果您不想显示这些着重号,您可以使用
class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline
把所有的列表项放在同一行中。

定义列表:在这种类型的列表中,每个列表项可以包含

元素。

代表 定义术语,就像字典,这是被定义的属于。接着,

的描述。您可以使用 class dl-horizontal 把

Description 1
Item 1

Description 2
Item 2

4

水平的定义列表

Description 1
Item 1

Description 2
Item 2

下表提供了 Bootstrap 更多排版类的实例:

三、Bootstrap 代码

Bootstrap 允许您以两种方式显示代码:

第一种是 标签。如果您想要内联显示代码,那么您应该使用 标签。

For example,  should be wrapped as inline.

第二种是

 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用  标签。Sample text herehttps://www.jb51.net/article/...

还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px
,并在垂直方向展示滚动条。

四、Bootstrap 表格

Bootstrap 支持的一些表格元素:

用于表格的行或者单元格

基本实例

为任意

标签添加 .table 类可以为其赋予基本的样式 —
少量的内补和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。

基本的表格布局
名称 城市
Tanmay Bangalore
Sachin Mumbai

条纹表格

通过添加 .table-striped class,您将在

内的行上看到条纹,如下面的实例所示:

条纹表格布局
名称 城市 邮编
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027

带边框的表格

通过添加 .table-bordered
class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:

边框表格布局
名称 城市 邮编
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027

悬停表格

通过添加 .table-hover
class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:

悬停表格布局
名称 城市 邮编
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027

精简表格

通过添加 .table-condensed
class,行内边距被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

精简表格布局
名称 城市 邮编
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

上下文表格布局
产品 付款日期 状态
产品1 23/11/2013 待发货
产品2 10/11/2013 发货中
产品3 20/10/2013 待确认
产品4 20/10/2013 已退货

响应式表格

通过把任意的 .table 包在 .table-responsive class
内,您可以让表格水平滚动以适应小型设备。当在大于 768px
宽的大型设备上查看时,您将看不到任何的差别。

  响应式表格布局   产品

付款日期

状态

产品1

23/11/2013

待发货

产品2

10/11/2013

发货中

产品3

20/10/2013

待确认

产品4

20/10/2013

已退货

五、Bootstrap 表单

基本的表单结构是 Bootstrap
自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

向父

内联表单

水平表单

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

向父

六、Bootstrap 按钮

可作为按钮使用的标签或元素

为 、 或 元素添加按钮类即可使用 Bootstrap 提供的样式。

以下样式可用于, , 或 元素上:

默认按钮原始按钮成功按钮信息按钮警告按钮危险按钮链接按钮

按钮大小

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

下表列出了获得各种大小按钮的 class:

 大的原始按钮 大的按钮 默认大小的原始按钮 默认大小的按钮 小的原始按钮 小的按钮 特别小的原始按钮 特别小的按钮 块级的原始按钮 块级的按钮

按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class,下面将进行详细讲解。

激活状态

按钮在激活时将呈现为被按压的外观。

下表列出了让按钮元素和锚元素呈激活状态的 class:

禁用状态

当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class:

按钮标签

您可以在 、 或 元素上使用按钮 class。但是建议您在 元素上使用按钮
class,避免跨浏览器的不一致性问题。

下面的实例演示了这点:

链接按钮

七、Bootstrap 图片

在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive
类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、
height: auto; 和 display: block;
属性,从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block
类,不要用 .text-center

通过为 元素添加以下相应的类,可以让图片呈现不同的形状。

八、Bootstrap 辅助类

文本

以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗:

背景

以下不同的类展示了不同的背景颜色。
如果文本是个链接鼠标移动到文本上会变暗:

其他

一些实例:

关闭图标

使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。

关闭图标实例  × 

三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。

为任意元素设置 display: block 属性并通过 margin
属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。

https://www.jb51.net/article/...

// Class.center-block { display: block; margin-left: auto; margin-right: auto;}// Usage as a mixin.element { .center-block();}

显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏。这些类通过 !important
来避免 CSS 样式优先级问题,就像 quick floats
一样的做法。注意,这些类只对块级元素起作用,另外,还可以作为 mixin
使用。

.hide 类仍然可用,但是它不能对屏幕阅读器起作用,并且从 v3.0.1
版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。

另外,.invisible 类可以被用来仅仅影响元素的可见性,也就是说,元素的
display 属性不被改变,并且这个元素仍然能够影响文档流的排布。

https://www.jb51.net/article/...https://www.jb51.net/article/...

// Classes.show { display: block !important;}.hidden { display: none !important;}.invisible { visibility: hidden;}// Usage as mixins.element { .show();}.another-element { .hidden();}

九、Bootstrap 响应式实用工具

Bootstrap
提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。

需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

打印类

下表列出了打印类。使用这些切换打印内容。

   特别小型 ✔ 在特别小型设备上可见   小型 ✔ 在小型设备上可见    中型 ✔ 在中型设备上可见   大型 ✔ 在大型设备上可见  

以上这篇基于Bootstrap框架菜鸟入门教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

12

13

»

分页中左右两侧通常都用箭头表示,那就需要用到class:arrow,左侧内容上使用左箭头:«或者‹,甚至←右侧使用右箭头:»
,或者 ›,甚至→,更多字符编码到unicode-table.com来查找。

分页导航允许我们使用class:unavailable 和
current,分别表示不可用状态和当前使用状态。

上面段代码添加到如WordPress的内容管理系统中去是相当简单的。

提示:你可以给ul添加一个class:pagination-centered来居中分页导航,就好像Foundation所有元素那样,分页功能是响应式并且很容易去改变样式的。

有用的工具

使用响应式前端框架,如Foundation,是一种快速的途径使得你的工程很好地显示在所有的设备上,但是测试页面依然是一件繁琐的任务。为了减轻测试工作,我开发了一个工具叫
Respondr,只要输入url,就可以把内容显示在智能手机、平板电脑和普通电脑上,可以很快地发现页面上的不足。

总结

这章节就说到这里,现在您是否对Foundation有了一定的了解了呢。后面在第四章学习顶栏插件、面包屑导航和另外一些有用工具。如您有任何问题可以给我留言,猛搓这里:在线留言

发表评论

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