我们这一章开始进入常用组件的开发。上一章我们做的是“列阵”，布置好了整个项目的阵型。这一章我们就开始进入“操练”的环节，会在现有的阵型上，填充各种常用的组件。相对于前面的章节，这一章每一节里的内容都比较独立。此外，本章里基础知识的内容会变少，不再像前两章那样，会花费大量的篇幅来补基础，这一章更注重的是组件的设计思路和一些技巧的应用。下面我们就来看一下，这一章要实现哪些组件。

4.1-本章介绍
本章的第一节，也就是这一节，还是会对本章的内容做一个概览，让同学们对整章内容有一个整体的认识。

4.2-Search搜索组件的设计与开发
本章的第二节是要设计和实现一个搜索框，在这一节里我们会讲到开发搜索框会使用到的技巧，此外还有搜索框里各种元素的相互配合方式。

4.3-List列表组件的设计与开发
列表组件的设计与开发里，准备设计两种类型的列表，一种是普通的单行列表，另外一种是带图片的复杂列表。

4.4-Grid网格组件的设计与开发
网格组件这一节里，我们要设计一个网格组件，用来存放需要对齐的多排内容，比如最常用的九宫格结构。这一节的主要的内容包括多个块级元素自动折行处理和网格组件里边框的处理等。

4.5-Menu菜单样式的设计与开发
菜单这一节的内容比较简单，因为菜单没有太多的样式。这一节值得注意的是我们要实现一个菜单里常用的开关按钮，会应用到伪类选择器相关的知识。

4.6-Modal模态框样式的设计与开发
Modal模态框这一节要实现一个模态弹窗，这类弹窗的样式通常是会给底层内容加上一层蒙版，在蒙版上再添加其他功能模块，比如弹窗广告和弹窗登录都可以使用模态框来实现。这一节我们会用到固定定位和绝对定位的配合。

4.7-Loading加载提示组件的设计与开发
加载提示组件这一节里我们要实现两种 Loading，一种是在全局使用的弹窗式的 Loading 组件，另外一种是用在内容区里一些组件内置的加载状态。

4.8-Toast提示工具组件的设计与开发
提示工具组件这一节里我们要设计移动端里几种常用的提示工具，包括最普通的信息提示工具 Toast 和带确认功能的提示组件。

4.9-ActionSheet选择组件的设计与开发
可选菜单组件指的是从屏幕下方弹出的选择组件，这个组件可以和表单元素里实现过的单选和多选相结合，完成一些选择性质的操作。

4.10-Article文本样式的设计与开发
这一章最后一个要实现的就是文本的样式，这一节会设计一个文章的样式，包括双行文章标题自动截断和文本区域的展示技巧等。

4.11-本章总结
最后一节，会对这一章的内容再次做一个总结，包括每一节的设计思路和涉及到的知识点，并且依然会结合着每一节的内容整理出一些常见的问题。

结语

这一章的内容更偏重组件的设计，后面的每个小节里都会提前把各个组件的需求都提前说明，同学们可以先试着自己去设计每个组件的实现方式，然后再看后面的内容，看看你的想法和课程里使用的方法哪个更好。另外本章中也会涉及一些基础知识，比如 Flex 布局的高级用法、CSS3 中的过渡和动画效果等，同学们在学习这节的时候，除了亲自实现课程里给的效果外，也要试着完成课程里留下的思考题。话不多说，我们直接进入各种常用组件的开发吧。