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

《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)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,457评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 慢慢走 慢点儿走吧 流星赶月 余路就只剩擦肩回眸 慢慢看 慢点儿看吧 走马观花 满楼红袖你还嫌不够 慢慢听 慢点儿...
    她的短发阅读 216评论 0 0
  • 《影响力》主要通过一些经典的心理学实验,从六个方面,即互惠、承诺和一致、社会认同、权威、喜好、稀缺来具体说明...
    Sim2阅读 217评论 0 0
  • “我一直认为最好的材料是你深知的材料。” “大考的早晨,那惨淡的心情大概只有军队作战前的黎明可以比拟,像《斯巴达克...
    大大大栗子阅读 832评论 1 0