新書推薦:
《
明代社会变迁时期生活质量研究
》
售價:HK$
316.2
《
律令国家与隋唐文明
》
售價:HK$
76.7
《
现代吴语的研究(中华现代学术名著3)
》
售價:HK$
65.0
《
天下的当代性:世界秩序的实践与想象(新版)
》
售價:HK$
77.3
《
德国天才4:断裂与承续
》
售價:HK$
109.8
《
妈妈的情绪,决定孩子的未来
》
售價:HK$
42.6
《
推拿纲目
》
售價:HK$
403.2
《
精致考古--山东大学实验室考古项目论文集(一)
》
售價:HK$
244.2
編輯推薦:
(1) 资深Web技术专家经验结晶,根据Bootstrap最新版本撰写,内容系统、分析深入、实战性强,前端工程师必备
(2) 授人以鱼,全面讲解各功能组件的使用方法,以及对现有插件和扩展的二次开发;授人以渔,深入分析其架构思想和源码实现,以及如何开发自定义的完整插件和扩展
內容簡介:
Bootstrap是目前全球最流行、最火爆的Web前端开发框架之一。它的强大之处在于它将常见的CSS布局小组件和JavaScript插件进行了完整并完善的封装,能让没有经验的前端工程师和后端开发工程师都迅速掌握和使用,大大提高开发效率。此外,它还能在某种程度上规范前端团队编写CSS和JavaScript的规范。
Bootstrap更新比较快,目前国内仅有的两本书也都过时了,本书是根据Bootstrap的最新版本来撰写的。它同时面向两类读者:没有Bootstrap经验的初级前端开发工程师,书中对Bootstrap功能组件的详细讲解以及大量案例的展示能让他们迅速晋级到中高端水平;有一定Bootstrap经验的专业前端开发工程师,书中对Bootstrap架构思想的阐述、实现原理的分析、扩展和插件的二次开发能让他们自如解决开发中遇到的各种疑难问题。
目錄 :
前言
第1章 入门准备
1.1 框架简介
1.2 新手入门
1.3 文件结构
1.4 HTML标准模板
1.5 CSS基本语法
1.5.1 优先级
1.5.2 选择器
1.5.3 伪类
1.5.4 display属性
1.5.5 媒体查询
1.6 JavaScript基本语法
1.6.1 II和运算符
1.6.2 立即调用的函数表达式
1.6.3 原型
1.7 jQuery基本用法
1.7.1 事件绑定
1.7.2 事件命名空间
1.7.3 $.data
1.8 HTML5辅助设计
第2章 整体架构
2.1 整体架构
2.2 栅格系统
2.2.1 实现原理
2.2.2 基本用法
2.2.3 响应式栅格
2.2.4 对重复代码的处理
2.3 CSS组件架构的设计思想
2.3.1 基础样式
2.3.2 颜色样式
2.3.3 尺寸样式
2.3.4 状态样式
2.3.5 特殊元素样式
2.3.6 并列元素样式
2.3.7 嵌套子元素样式
2.3.8 动画样式
2.3.9 小结
2.4 JavaScript插件架构
2.4.1 HTML布局规则
2.4.2 JavaScript实现步骤
2.4.3 通用技术
2.4.4 不足
2.5 禁用响应式布局
第3章 CSS布局
3.1 概述
3.2 基础排版
3.2.1 标题
3.2.2 页面主题
3.2.3 强调文本
3.2.4 缩略语
……
第4章 CSS组件
第5章 JavaScript插件
第6章 实战:扩展现有组件
第7章 实战:Win8磁贴组件开发
第8章 实战:组合应用开发
第9章 第三方扩展
附录A 浏览器兼容性支持
附录B 第三方插件开发建议
附录C 从2.x迁移到3.x
附录D Glyphicons图标全集
內容試閱 :
1.5.5 媒体查询
媒体查询是进行响应式设计的核心要素,其功能非常强大。这里我们只列出Bootstrap用到的功能
Bootstrap主要用到min-width、max-width,以及and语法,用于在不同的分辨率下设置不同的CSS样式。示例如下:
@media max-width: 767px {
*在小于768像素的屏幕里,这里的样式才生效*
}
@media min-width: 768px and max-width: 991px {
*在768和991像素之间的屏幕里,这里的样式才生效*
}
@media min-width: 992px and max-width: 1199px {
*在992和1199像素之间的屏幕里,这里的样式才生效*
}
@media min-width: 1200px {
*在大于1200像素的屏幕里,这里的样式才生效*
}
1.6 JavaScript基本语法
本节和上节的CSS语法类似,主要介绍JavaScript的基本用法。理解这些用法以后,就可以按照Bootstrap的开发规范去开发自己的各种插件了。
1.6.1 ||和&&运算符
Java Script中的||和&&两个运算符,与其他语言相比略有不同,其符合如下规则:
||表示,如果第一个元素可以转换为true,则返回第一个元素的值,否则查询第二个元素的值。如果多个||一起用,则按顺序优先级判断。
&&则相反,如果第一个元素可以转换为false,才返回第一个元素的值,否则返回第二个元素的值,多个&&一起用时,也是按顺序优先级判断。
说得严谨一些就是:
a && b&& c&&d:返回第一个可转换为false的元素值。
a||b||c||d:返回第一个可转换为true的元素值。
上述运算符的转换规则如下:
对象为true
非零数字为true
非空字符串为true
其他为false
1.6.2 立即调用的函数表达式
在JS里,function在定义的时候就可以通过在后面加一个小括号的形式立即进行调用。比如:
function { * code * } ; 推荐使用这个
function { * code * }; 这个也是可以用的
function { * code * } 1; 传入参数1
function { * code * }2; 传入参数2
Bootstrap的所有的JS插件都使用了这个模式。比如在alert.js文件里有以下代码:
+function $ {
"use strict";
}jQuery;
这个文件的意思是声明一个function,然后立即执行,并且在执行的时候传入jQuery对象作为参数。这么做的好处是,此时function内部的$已经是局部变量了,不会再受外部作用域的影响了。
function前面的+号和分号的功能是一样的,主要是防止定义了不符合规定的代码。比如上面的这段代码若没加+号,则代码连接在一起执行就会出错。这样就消除了出错的可能性。不习惯的话,改成这样也行:
;function $ {
"use strict";
}jQuery;
关于立即执行的函数表达式,请访问笔者的博客“深入理解JavaScript系列”里的第4篇
1.6.3 原型
在Bootstrap的JS插件里,所有的插件都是利用了类似下面的代码:
Alert.prototype.close = function e {
*...*
}
上面的代码就是在Alert函数上定义一个名为close的原型方法。至于什么叫原型,原型有什么好处,这里我们不会深入讲解,只是举一个例子,简单理解一下就好。
var Calculator = function {};
Calculator.prototype.add = function a, b {
return a + b;
}
var cal = new Calculator;
var sum = cal.add1, 2;
由于这些内容不是本书的重点,所以这里只需要知道Calculator的实例能调用原型上的add方法就可以了(就像Java和C#里定义的普通方法一样)。
关于原型和原型链的详细内容,请访问笔者的博客“深入理解JavaScript系列”里的第5篇