读书笔记 | 《Bootstrap用户手册·设计响应式网站》

读书笔记 | 《Bootstrap用户手册·设计响应式网站》_第1张图片
《Bootstrap用户手册·设计响应式网站》

简介

书籍《Bootstrap用户手册·设计响应式网站》

阅读方法:王者速读法

阅读目的:学习Web前端知识。

第一阶段,预览

要明确目的的解决问题

第一,想获得什么信息。专业知识,关于前端编程框架以及响应式界面设计编程知识。

第二,能获得什么信息。有关网站开发框架Bootstrap的相关知识,包括Bootstrap预定义的CSS样式、内置的布局组件,以及支持的JavaScript插件等。

第三,明确重点内容。Bootstrap知识及应用,在Bootstrap知识之外,最重要的是要锻炼实际使用Bootstrap开发网站实例。

具体阅读

1.封面。「图灵程序设计丛书」;美国作者Jake Spurloke著,李松峰译。

2.版权页。2013年9月出版;内容简介对全书内容做了概括。

3.序和前言。序为Dave Winer写的,主要是对Bootstrap的介绍,最后对作者及写作的书推荐;在前言部分,作者介绍了读者对象、书的宗旨、写书缘由、书的内容等方面信息。

4.目录。共5章,目录已经把内容分为三大部分。第一部分Bootstrap概述, 第1章;第二部分Bootstrap知识点,第2章到第4章,分为Bootstrap预定义的CSS样式、内置的布局组件和支持的JavaScript插件;第三部分Bootstrap扩展,第5章,介绍实际使用Bootstrap。

总结

Bootstrap是一个用于构建响应式网站的前端框架,需要比较熟悉HTML+CSS+JavaScript知识,并且看书不是学习Bootstrap的唯一途径。

学习到前端框架,需要对网站布局有较好的理解和掌握,有一定的经验,学习响应式网站框架,更是如此。学习的过程中,动手实践是最重要的,哪怕阅读其他作者的代码,然后运行弄懂也是不错的。

第二阶段,快速翻阅全书

对图表的印象

翻阅所有的书页,标题、图表、照片等最显眼的内容,图片基本是效果的显示,表格是知识点的罗列,匆匆翻页,也没有细读,因为此时读图是需要跟代码对应的,循途译代码,或者根据代码想象图片,才是编程要做到的。

对章节内容的印象

全书不到120页,从厚度讲,相对来说还是本比较单薄的书籍,5分钟翻页并不大难,在基础知识具备的前提下,要分别出哪些是可以浏览的,哪些是要详细阅读的,也并不难。不过翻页的时候要有什么具体的阅读还是做不到的,基本跟浏览目录差不多,只有在分别知识结构的基础上,偶尔能就章节大标题之外浏览小标题,做浏览目录之外更详细的阅读,对书本知识能够有一个更好的把握。

总结

书本虽然不厚,内容也不算少,尤其是到框架学习,本身就有一个系列的知识体系。只是熟悉章节内容尽可能略读或略过不读,既然是框架学习,所以地方也不是获取新知识,而是要把具备的相关知识通过框架梳理出一个体系来,循旧补新,其核心还是要抓住框架本身的知识绝不是基础知识的罗列,而更应该是一个有机组合体,并且有一些扩展的知识和思想。

第三阶段,跳读

第1章 Bootstrap提供的网站框架

Bootstrap是Mark Otto和Jacob Thornton共同开发的一个开源框架,是一个用于构建响应式网站的前端框架,Bootstrap文件包含三个文件夹:css、js和img,这个就是Bootstrap的文件结构。

学习Bootstrap的框架,必须对基本的HTML模板和传统的网页布局比较熟悉。

Bootstrap布局主要是一个网格系统布局来支持响应式布局,需要学习Bootstrap网格系统布局的原理。

网格布局有两种:默认(固定)网格布局和流式网格布局,两者都支持响应式布局。

学习Bootstrap布局还有一个特别重要的知识点就是容器布局。响应式布局也有一些必需的标签和文件是肯定要掌握的。

重点:Bootstrap布局知识。

第2章 Bootstrap预定义的CSS样式

CSS样式本来就是用来修饰网页元素显示效果的,Bootstrap预定义的CSS样式增强对网页元素的效果,用户通过类和自定义样式很容易增强HTML元素。

主要的HTML元素如标题、列表、表格、表单等,Bootstrap都有相应的预定义的CSS样式用来增强显示效果。

要点:各种HTML元素的CSS样式。

第3章 Bootstrap内置的布局组件

Bootstrap布局的方便之处就在于,Bootstrap有许多的内置布局组件调用即可方便地实现网页各部分的布局。

Bootstrap内置的灵活的套装组件主要有下拉菜单、按钮组、按钮下拉菜单、各种导航元素、导航条、警示框、进度条等。

重点:各种组件的应用才是更重要的。

第4章 Bootstrap支持的JavaScript插件

Bootstrap附带的jQuery插件可以用于扩展网站的功能、丰富用户体验。Bootstrap使用JavaScript插件很容易实现各种美观的特效效果。

Bootstrap通过JavaScript插件可以实现更多功能和体验的下拉菜单、按钮等组件效果。

老实说,Bootstrap支持的JavaScript插件的应用是学会Bootstrap组件后的进阶,需要掌握更多的知识学习起来才能通畅。

最重要的,依然是要在动手实践中去学习,才能真正掌握JavaScript插件在Bootstrap中应用的原理及效果。

第5章 实际使用Bootstrap

Bootstrap是GitHub的一个开源项目,可以下载全部源代码,还可以定制Bootstrap,使用LESS等。

总之,Bootstrap几乎可以适用于任何网站,内置响应式框架、丰富的JavaScript插件、健壮的界面组件,这些为快速创建功能强大的网站提供了便利。

总结

书本关于Bootstrap的知识从概述到具体核心内容,内容丰富全面,不过还是不够详细,许多地方需要还是主要靠自己去理解和拓展深入。

编程语言的学习离不开动手,对Bootstrap框架原理的理解主要还是要通过一边动手一边学习来掌握,还且网络上也有不少Bootstrap学习资料。

应用王者阅读法阅读编程语言类书籍并不是多好地掌握系统而精细的知识,只是要对只是有一个概览的把握和理解就已经是很不错的事情。首先,找到一张地图,剩下的时间就可以按图探索世界,这也是王者阅读法的要义之一吧。

动手实践是检验学习知识掌握程度很好的方法,也是学习的好方法。

关于王者阅读法阅读Web前端专业书籍的实践,还可以阅读以下文章:

1.阅读笔记 | 《HTML网页设计参考手册》

2.阅读笔记 | 《CSS标准网页布局开发指南》

3.阅读笔记 | 《JavaScript从入门到精通》

4.读书笔记 | 《jQuery程序设计基础教程》


@阿佑,一个IT与教育从业者,阅读和知识体系构建的践行者!

更多的关于阅读、写作的分享,可以关注公众号「进士及第」(ID:Jinshijidi)。

你可能感兴趣的:(读书笔记 | 《Bootstrap用户手册·设计响应式网站》)