第3章工具栏与格式化内容 本章学习目标  理解并掌握jQuery Mobile页面中各类工具栏的使用;  掌握jQuery Mobile中内容格式化实现的方法。 3.1头部栏 头部栏是移动应用中工具栏的组成部分,由页面标题和最多两个按钮组成,用来说明该页面的主题内容,头部栏也是page容器中的第一个元素,放置的位置十分重要,另外,头部栏中的两个按钮除可以使用“后退”按钮外,还可以添加表单元素中的按钮,并可以通过设置相关属性控制头部按钮中的相对位置,接下来逐一进行详细介绍。 3.1.1基本结构 头部栏由标题文字和左右两边的按钮构成,标题文字通常使用标记,取值范围为(1~6),常用

标记,无论取值是多少,在同一个移动应用项目中,都要保持一致。标题文字的左右两边可以分别放置一或两个按钮,用于标题中的导航操作。下面通过一个简单实例展示移动应用中头部栏的基本结构。 实例31头部栏的基本结构 1. 功能说明 新建一个HTML页面,添加一个page容器,在容器中添加一个datarole属性为header的
元素作为头部栏,在头部栏中添加一个

元素作为标题,标题内容设为“头部栏标题”。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面31.html,加入如代码清单31所示的代码。 代码清单31头部栏的基本结构 jQuery Mobile头部栏基本结构

头部栏标题

默认头部栏的特征

2018 rttop.cn studio

图31展示头部栏的基本结构 3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图31所示。 4. 源码分析 由于移动设备的浏览器分辨率不尽相同,如果尺寸过小,而头部栏的标题内容又很长时,jQuery Mobile会自动调整需要显示的标题内容,隐藏的内容通过“…”显示在头部栏中。 另外,头部栏中默认的主题样式为a,如果要修改默认主题样式,只需要在头部栏标签中添加一个datatheme属性,设置对应的主题样式值即可,更多jQuery Mobile中的主题内容,第5章中将会有详细的介绍。 3.1.2设置后退按钮的文字 在2.1.2节中介绍过通过给header容器元素添加dataaddbackbtn属性可以在头部栏的左侧增加一个默认名为back的后退按钮,除添加按钮外,还可以通过修改header容器元素的databackbtntext属性值,设置后退按钮中显示的文字。 实例32设置后退按钮的文字 1. 功能说明 在新建的HTML页面中,添加三个page容器,id号分别为e1、e2、e3,分别用于显示“首页”“下一页”“尾页”内容,当切换到“下一页”时,头部栏的“回退”按钮文字为默认值back,切换到“尾页”时,头部栏的“回退”按钮文字为“首页”字样。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面32.html,加入如代码清单32所示的代码。 代码清单32设置后退按钮的文字 jQuery Mobile设置后退按钮的文字

主题

2018 rttop.cn studio

主题

2018 rttop.cn studio

主题

2018 rttop.cn studio

3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图32所示。 图32设置后退按钮的不同文字内容 4. 源码分析 在本实例中,如果需要设置后退按钮显示的文字内容,先将header容器元素的dataaddbackbtn属性设置为true,表示切换到该容器时,头部栏要显示一个默认文字为back的后退按钮; 然后,在header容器元素中再添加另一个databackbtntext属性,该属性值就是要显示在后退按钮上的文字内容。 3.1.3添加按钮 在头部栏中,除通过设置属性添加“后退”按钮外,还可以手动编写代码,添加按钮标记,该标记通常设置为元素,其他按钮类型的标记也可以放置在头部栏中,由于头部栏空间的原因,所添加按钮都是内联类型的,即按钮宽度只允许放置图标与文字这两个部分。 实例33添加按钮 1. 功能说明 在新建的HTML页面中,分别添加两个id号为e1、e2的page容器,并在两个容器的头部栏中都添加两个按钮,左侧为“上一张”,右侧为“下一张”,当单击第一个容器的“下一张”按钮时,切换到第二个容器,单击第二个容器的“上一张”按钮时,又返回到第一个容器。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面33.html,加入如代码清单33所示的代码。 代码清单33添加按钮 jQuery Mobile 添加按钮

2018 rttop.cn studio

2018 rttop.cn studio

3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图33所示。 图33在头部栏中添加按钮元素 4. 源码分析 在本实例中,头部栏通过添加inline属性进行定位,使用这种定位的模式,可以确保头部栏在更多的移动浏览器中显示,而无须再编写其他的JavaScript或CSS代码。 头部栏中的按钮链接元素是头部栏的首个元素,默认位置是在标题的左侧,默认按钮个数只有一个,当在标题左侧添加两个链接按钮时,左侧链接按钮会自动按排列顺序保留第一个,第二个按钮会自动放置在标题的右侧,因此,在头部栏中放置链接按钮时,由于内容长度的限制,尽量在标题栏的左右两侧分别放置一个链接按钮。 3.1.4定位按钮位置 在头部栏中,当只放置一个链接按钮时,不论放置在标题的左侧,还是右侧,其最终显示还是在标题的左侧,如果想定位单个头部栏链接按钮的位置,需要添加新的类别属性,分别为uibtnleft和uibtnright,前者表示使按钮居标题左侧,也是默认值,后者表示居右侧。 实例34定位按钮位置 1. 功能说明 在实例33的基础上,对头部栏中“上一页”“下一页”的两个按钮位置进行定位。当在第一个page容器中时,仅显示“下一页”的按钮; 而切换到第二个page容器中时,也只有“上一页”这个按钮存在。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面34.html,加入如代码清单34所示的代码。 代码清单34定位按钮位置 jQuery Mobile定位按钮位置

图片

下一张

2018 rttop.cn studio

上一张

图片

2018 rttop.cn studio

3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图34所示。 图34在头部栏中定位按钮元素 4. 源码分析 本实例中,通过在头部栏中对需要定位的链接按钮添加uibtnleft和uibtnright两个类别属性,可以定位头部栏中标题两侧的按钮位置,该类别属性在只有一个按钮并且又想放置在标题右侧时非常有用。另外,为了使放置在头部栏标题左侧的链接按钮能够正常显示,通常情况下,需要将该链接按钮的dataaddbackbtn属性值设置为false,以确保在page容器切换时,不会出现“回退”按钮,影响到标题左侧按钮的显示效果。 3.2导航栏 jQuery Mobile为导航栏提供了专门的组件,使用时只需要将
标签的datarole属性值设置为navbar,便产生了一个导航栏容器,在该容器内通过
    元素设置导航栏的各子类导航按钮,每一行最多可以放置5个按钮,超出的个数自动显示在下一行; 另外,导航栏中的按钮,可以引用系统的图标,也能自定义导航栏中的按钮图标。 3.2.1基本结构 jQuery Mobile中的导航栏作为一个被
    元素包裹的容器,常常放置在页面的头部或底部,在容器内,如果需要设置某个子类导航按钮为选中状态,只需在按钮的元素中添加一个名称为uibtnactive的类别属性即可。 实例35导航栏的基本结构 1. 功能说明 在新建的HTML页面中,为页脚部分添加一个导航栏,在导航栏中创建三个子类导航按钮,分别在按钮上显示“北京”“上海”“广州”字样,并将第一个按钮设置为被选中的状态。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面35.html,加入如代码清单35所示的代码。 代码清单35导航栏的基本结构 jQuery Mobile尾部导航栏

    头部栏标题

    添加尾部导航栏

    图35在底部栏中添加导航条 3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图35所示。 4. 源码分析 在本实例中,将一个简单的导航栏容器通过嵌套的方式放置在底部容器中,形成底部导航栏的页面效果,在导航栏的内部容器中,每个子类导航按钮的宽度都是一致的,因此,当每增加一个子类按钮时,会将原先按钮的宽度按照1/2的比例进行均分,即如果原来有两个按钮,它们的宽度各为浏览器宽度的1/2,再新增加一个按钮时,原先的两个按钮宽度又变成了1/3,以此类推。当导航栏窗口中子类按钮的数量超过5个时,将自动形成2列多行的展示形式。 3.2.2头部导航栏 除了将导航栏放置在底部外,还可以将它放置在头部,形成头部导航栏,在该导航栏中,也可以保留头部栏中的标题与按钮,只需将导航栏容器以嵌套的方式放置在头部即可,接下来通过一个简单的实例来介绍头部导航栏是如何创建的。 实例36头部导航栏 1. 功能说明 在新建的HTML页面中,添加两个id号为e1和e2的page容器,并分别在容器中为页头部分添加一个导航栏,当单击第一个导航栏中“音乐”按钮时,页面将切换至第二个page容器中,并将导航条中“音乐”按钮的状态设置为被选中样式。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面36.html,加入如代码清单36所示的代码。 代码清单36头部导航栏 jQuery Mobile头部导航栏

    图书频道

    这是图书页面

    2018 rttop.cn studio

    音乐频道

    这是音乐页面

    2018 rttop.cn studio

    3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图36所示。 图36在头部栏中添加导航条 4. 源码分析 在本实例中,通过page容器间嵌套的方式,实现了在头部栏中添加导航条的功能,而在实际开发过程中,常常在头部栏中只嵌套导航条,而不显示标题内容和左右两侧的按钮,特别是在导航条中选项按钮添加了图标时,只显示页面头部栏中的导航条,效果十分不错。 3.2.3导航栏的图标 在导航栏中,各子类导航链接按钮是通过元素来实现的,如果想要给导航栏中的子类链接按钮添加图标,只需要在对应的元素中增加一个dataicon属性,并在jQuery Mobile自带的系统图标集合中选择一个图标名,作为该属性的值,如info表示显示图标,图标的默认位置在按钮链接文字的上面,更多的图标名称对应的图标形状如表31所示。 表31图标名称对应的图标形状 图 标 名 称 图 标 形 状 图 标 名 称 图 标 形 状 arrowl refresh arrowr forward arrowu search arrowd back delete grid plus star minus alert check info gear home 表31中的各图标名称不仅用于导航栏中的子类链接按钮,也适合各类按钮型元素在增加图标时使用。 实例37添加导航栏链接按钮图标 1. 功能说明 在实例36的基础上,分别给导航栏的链接按钮通过dataicon属性添加图标。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面37.html,加入如代码清单37所示的代码。 代码清单37添加导航栏链接按钮图标 jQuery Mobile导航栏的图标

    这是图书页面

    2018 rttop.cn studio

    这是音乐页面

    2018 rttop.cn studio

    图37带图标的导航栏链接 按钮的按钮 3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图37所示。 4. 源码分析 在本实例中,通过给链接按钮元素添加dataicon属性,并选择一个图标名,可以是按钮的图标,除此之外,还可以手动控制图标在链接按钮中的位置和自定义按钮图标,在接下来的章节中,将逐一结合完整的实例进行介绍。 3.2.4设置导航栏图标位置 导航栏中的图标默认是放置在按钮内容文字的上面,如果需要调整该默认值,只需在该导航栏容器元素中添加另外一个属性dataiconpos,该属性用于控制整个导航栏容器中图标的位置,默认值为top,即表示图标在按钮文字的上面,还可以选择left、right、bottom分别表示图标在文字的左边、右边和下面。 实例38设置导航栏链接按钮图标的位置 1. 功能说明 在新建的HTML页面中,向头部栏添加三个导航条,并分别将导航条中按钮的图标位置设置为left、right、bottom。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面38.html,加入如代码清单38所示的代码。 代码清单38设置导航栏链接按钮图标的位置 jQuery Mobile设置导航栏图标位置

    展示导航栏中图标的不同位置

    2018 rttop.cn studio

    3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图38所示。 图38设置导航栏链接按钮图标的位置 4. 源码分析 在本实例中,通过在导航栏容器中增加dataiconpos属性,可以改变导航栏按钮图标的位置,但是该属性针对的是整个导航栏容器,而不是导航栏内某个导航链接按钮图标的位置。因此,dataiconpos是一个全局性的属性,针对的是整个导航栏内全部的链接按钮。 3.2.5自定义图标 除了在导航栏中通过dataiconpos属性设置链接按钮的图标外,还允许开发者自定义图标,实现的方法是另外创建一个CSS样式文件,并在文件中添加链接按钮的图标地址与显示位置,下面通过一个简单的实例来介绍如何给导航栏链接按钮自定义图标。 实例39自定义导航栏链接按钮的图标 1. 功能说明 在实例37的基础上,将导航栏中链接按钮的图标替换成自定义的三个图标。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面39.html,加入如代码清单391所示的代码。 代码清单391自定义导航栏链接按钮的图标 jQuery Mobile自定义图标
     

    这是图书页面

      

    2018 rttop.cn studio

     

    这是音乐页面

    2018 rttop.cn studio

    另外,创建一个用于实例39引用的样式文件css3.css,加入如代码清单392所示的代码。 代码清单392css3.css源文件 .ui-icon-books:after { background:url(icons/01.png) 50% 50% no-repeat; background-size: 18px 26px; } .ui-icon-music:after { background:url(icons/02.png) 50% 50% no-repeat; background-size: 15px 24px; } .ui-icon-movie:after { background:url(icons/03.png) 50% 50% no-repeat; background-size: 19px 25px; } 3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图39所示。 图39自定义导航栏链接按钮的图标 4. 源码分析 在本实例中,如果想要自定义导航栏的链接按钮图标,需要经过以下两个步骤。 第1步: 新建一个CSS文件,在该文件中设置某个链接按钮的自定义图标地址与显示的位置,部分代码如下。 …… 省略部分代码 .books .ui-icon { background: url(icons/01.png) 50% 50% no-repeat; background-size: 18px 26px; } …… 省略部分代码 在上述代码中,新建一个books的类别名,在该类别下编写uiicon类别的内容,uiicon类别有2行代码,第一行通过background设置自定义图标的地址和显示时的方式,第二行通过backgroundsize设置自定义图标显示时的长度与宽度。 第2步: 在导航栏中,引用新建的books类别,并将dataicon属性值设置为custom,表示该项子类导航链接按钮的图标是自定义形式的。完整的代码如下:
  • 图书
  • 3.3尾部栏 尾部栏与头部栏除了所使用的datarole属性值不同之外,其他的结构几乎相同,只是相对头部栏来说,尾部栏的代码需要更加简洁些。此外,在尾部栏中可以添加按钮组,表单中的各个元素,并可添加定位元素。 3.3.1添加按钮 通常情况下,在向尾部栏添加按钮时,为了尽量减少各按钮的间距,常常需要在按钮的外围添加一个datarole属性值为controlgroup的容器,形成一个按钮组显示在尾部栏中,同时,再在该容器中添加一个datatype属性,并将该属性的值设置为horizontal,表示容器中的按钮按水平方向顺序排列。 实例310在尾部栏中添加按钮 1. 功能说明 新建一个HTML 页面,在页面尾部栏中添加一个按钮组,在该按钮组中再添加2个带图标的按钮,并分别将按钮中的文本内容设置为“关于公司”和“联系我们”。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面310.html,加入如代码清单310所示的代码。 代码清单310在尾部栏中添加按钮 jQuery Mobile添加尾部栏按钮

    头部栏标题

    添加尾部栏按钮

    3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图310所示。 图310在尾部栏中添加按钮 4. 源码分析 在实例中,由于底部栏中的按钮外围被一个datarole属性值为controlgroup的容器所包裹,因此,按钮间没有任何padding空间,如果想要给底部栏中的按钮添加padding空间,可以不使用容器包裹,而只要给底部栏容器添加一个名为uibar的类别属性,代码如下。 …… 省略部分代码 …… 省略部分代码 3.3.2添加表单元素 在底部栏中,除可以添加按钮组外,还可以向容器内增加表单中的元素,如
3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图311所示。 图311在尾部栏中添加表单元素 4. 源码分析 在本实例中,为尾部栏添加了一个元素,在PC端的浏览器中它是以下拉列表的形式展示,而在移动终端,则是以弹出框的形式展示全部的列表内容。 3.4内容格式化 在jQuery Mobile中,提供了许多非常有用的工具与组件,如多列的网格布局、折叠形的面板控制,通过这些组件,可以帮助开发者快速实现正文区域内容的格式化。 3.4.1创建简单对话网格布局框 通过jQuery Mobile提供的CSS样式——uigrid可以实现内容的网格布局,该样式有4种预设的配置布局,样式uigrida、uigridb、uigridc、uigridd,分别对应两列、三列、四列、五列的网格布局形式,可以最大范围满足页面多列的需求。 使用网格布局时,整个宽度为100%,无任何padding和margin及背景色,因此,不会影响到其他元素放入网格中的位置。 实例312在内容区域添加多种类型的网格布局 1. 功能说明 新建一个HTML 页面,在内容区域中添加4种预设的网格布局,以分块的形式在页面中显示。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面312.html,加入如代码清单312所示的代码。 代码清单312在内容区域添加多种类型的网格布局 jQuery Mobile网格布局

头部栏标题

A
B
A
B
C
A
B
C
D
A
B
C
D
E

2018 rttop.cn studio

图312在内容区域添加多种 类型的网格布局 3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图312所示。 4. 源码分析 在本实例的代码中,如果要增加一个多列的网格区域,首先通过
元素构建一个容器,如果是两列,则给该容器添加的class属性值为uigrida,三列则为uigridb,以此类推。 然后,在已构建的容器中添加子容器,如果是两列,则给两个子容器分别添加uiblocka、uiblockb的样式属性; 如果是三列,则给三个子容器分别添加uiblocka、uiblockb、uiblockc的样式属性; 其他多列以此类推。 最后,在子容器中,放置需要显示的内容,在本实例中,每个子容器都分别放置了一个
元素,代码如下。
A
在上述代码中,
元素通过class属性添加了三个样式,第一个和第二个都是jQuery Mobile自带的样式,其中,uibar用于控制各子容器的间距,uibarb用于设置各子容器的主题样式,第三个样式h60为自定义样式,用于设置子容器的高度为60px。 说明: 如果容器选择的样式为两列,即class值为uigrida,而在它的子容器中添加了三个子项,即class值为uiblockc,那么,该列自动被放置在下一行。 3.4.2可折叠的区块 在jQuery Mobile 中,除使用样式uigrid显示多列的网格效果之外,还可以对指定的区块进行折叠,要实现对区块的折叠,需要进行以下三步的操作。 (1) 创建一个
容器,并将该容器的datarole属性设为collapsible,表示该容器是一个可折叠的区块。 (2) 在容器中,添加一个

标题文字标记,该标记以按钮的形式展示,并在按钮的左侧有一个“+”号,表示该标题可以点开。 (3) 在标题的下面放置需要折叠显示的内容,通常使用

段落元素,当用户单击标题中的“+”号时,显示

元素中的内容,标题左侧中“+”号变成“-”号,再次单击时,隐藏

元素中的内容,标题左侧中“-”号变成“+”号。 下面通过一个简单的实例来介绍在jQuery Mobile中可折叠区块的实现方式。 实例313可折叠的区块 1. 功能说明 新建一个HTML 页面,在内容区域中添加一个可折叠的区块,当用户单击区块中的标题时,如果是“+”号,则显示标题下的内容,再次单击时,如果是“-”号,则隐藏标题下的内容。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面313.html,加入如代码清单313所示的代码。 代码清单313实现可折叠的区块 jQuery Mobile可折叠的区块

头部栏标题

单击查看更多

一位优秀的Web端工程师,不仅要有过硬的技术,而且要有执着、沉稳的品质。

2018 rttop.cn studio

3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图313所示。 图313在正文中显示可折叠的区块 4. 源码分析 在本实例中,通过将容器的datarole属性设置为collapsible,可以使该容器形成一种折叠式的页面效果,容器内的标题字体可以在h1~h6选择,根据需求进行设置; 另外,在该容器中可以通过设置datacollapsed属性值,调整容器折叠的状态,该属性默认值为true,表示标题下的内容是隐藏的,为收缩状态,如果将该属性值设置为false,那么,标题下的内容是显示的,为下拉状态。 3.4.3可嵌套的折叠区块 除了在正文中将
容器实现折叠效果显示内容之外,jQuery Mobile还允许对折叠的区块进行嵌套显示,即在一个折叠区域块的内容中,再添加一个折叠区块,以此类推,但建议这种嵌套最多不超过3层,否则,用户体验或是页面性能都将会比较差。 实例314可嵌套的折叠区块 1. 功能说明 新建一个HTML 页面,在内容区域中添加三个datarole属性值为collapsible的折叠区块,分别以嵌套的方式进行组合,当单击“第一层”标题时,显示“第二层”折叠区,单击“第二层”标题时,显示“第三层”折叠区。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面314.html,加入如代码清单314所示的代码。 代码清单314实现可嵌套的折叠区块 jQuery Mobile可嵌套的折叠区块

头部栏标题

第一层

这是第一层中的内容

第二层

这是第二层中的内容

第三层

这是第三层中的内容

2018 rttop.cn studio

3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图314所示。 图314在正文中显示可嵌套的折叠区块 4. 源码分析 在本实例中,展示了3层折叠区块相互嵌套时的效果,在jQuery Mobile中,折叠容器中的内容区域可以放置任何想要折叠的HTML 标记,当然,也允许再添加一个折叠块,从而形成这种嵌套式的折叠区块。虽然是嵌套的折叠区块,但各自的datacollapsed属性是独立的,即每层只控制各自的内容是收缩还是下拉。 3.4.4折叠组标记 折叠区块除了可以嵌套外,还可以形成折叠组,实现的方法是在一个datarole属性为collapsibleset的
容器中,添加多个折叠区块,而这些区块就是折叠组区块,因为它们同属于一个容器,在视觉上形成“手风琴拉开形状”的效果,并且,在同一时间,折叠组中只有一个折叠区块是被打开的,当打开别的折叠区块时,其他“组成员”则自动关闭。 实例315折叠组标记 1. 功能说明 新建一个HTML 页面,添加一个datarole属性为collapsibleset的折叠组容器,在该容器中增加3个折叠区块,标题分别对应“图书”“音乐”“影视”,初次显示时,“音乐”折叠区块为打开状态。 2. 实现代码 在WebStorm开发工具中,新创建一个HTML页面315.html,加入如代码清单315所示的代码。 代码清单315折叠组标记 jQuery Mobile折叠组标记

头部栏标题

2018 rttop.cn studio

3. 页面效果 该页面在Opera Mobile Emulator 12.1下执行的效果如图315所示。 图315在正文中显示折叠组的效果 4. 源码分析 在本实例中,折叠组中所有的折叠区块默认状态都是收缩的,如果需要在默认状态下使某个折叠区块为下拉状态,只要将该折叠区块的datacollapsed属性值设置为false。如在本实例中,就将标题为“音乐”的折叠区块的datacollapsed属性值设置为false,但同时需要注意,由于同处在一个折叠组内,这种下拉状态在同一时间,只允许有一个。 3.5本章小结 本章重点介绍了两个方面的内容: 一是工具栏中的成员,包括头部栏、导航栏、尾部栏的使用方法与技巧; 二是正文区域的内容格式化,通过介绍网格布局、折叠效果展示内容的方式,使读者在掌握jQuery Mobile基本页面布局的基础之上,更进一步理解工具栏与内容组件在处理页面内容时带来的效果,同时,为下一章常用组件的学习打下基础。