深入理解Bootstrap


Web开发技术丛书 深入理解Bootstrap 徐涛 著 ISBN:978-7-111-46479-2 本书纸版由机械工业出版社于2014年出版,电子版由华章分社 (北京华章图文信息有限公司)全球范围内制作与发行。 版权所有,侵权必究 客服热线:+ 86-10-68995265 客服信箱:service@bbbvip.com 官方网址:www.hzmedia.com.cn 新浪微博 @研发书局 腾讯微博 @yanfabook 目 录 前言 第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 ||和&&运算符 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 缩略语 3.2.5 地址元素 3.2.6 引用 3.2.7 列表 3.3 代码 3.3.1 内联代码 3.3.2 用户输入代码 3.3.3 多行代码块 3.4 表格 3.4.1 基础样式 3.4.2 带背景条纹的表格 3.4.3 带边框的表格 3.4.4 鼠标悬停高亮的表格 3.4.5 紧凑型表格 3.4.6 行级元素样式 3.4.7 响应式表格 3.5 表单 3.5.1 基础表单 3.5.2 内联表单 3.5.3 横向表单 3.5.4 表单控件 3.5.5 控件状态 3.5.6 控件大小 3.5.7 其他 3.6 按钮 3.6.1 按钮样式 3.6.2 按钮大小 3.6.3 多标签支持 3.6.4 活动状态 3.6.5 禁用状态 3.7 图像 3.8 辅助样式 3.8.1 文本样式及背景样式 3.8.2 辅助图标 3.8.3 内容浮动 3.8.4 隐藏与显示 3.9 响应式样式 第4章 CSS组件 4.1 小图标 4.1.1 基本用法 4.1.2 实现方式 4.1.3 应用场景 4.1.4 其他 4.2 下拉菜单 4.2.1 基本用法 4.2.2 多级嵌套 4.3 按钮组 4.3.1 基本用法 4.3.2 按钮工具栏 4.3.3 按钮尺寸设置 4.3.4 嵌套分组 4.3.5 垂直分组 4.3.6 自适应分组 4.4 按钮下拉菜单 4.4.1 组合式下拉菜单 4.4.2 分离式下拉菜单 4.4.3 按钮大小 4.4.4 向上弹起的下拉菜单 4.5 输入框组 4.5.1 基本用法 4.5.2 尺寸大小设置 4.5.3 复选框与单选框作为addon 4.5.4 按钮作为addon 4.5.5 下拉菜单按钮作为addon 4.5.6 分段按钮作为addon 4.6 导航 4.6.1 选项卡导航 4.6.2 胶囊式选项卡导航 4.6.3 堆叠式导航 4.6.4 自适应导航 4.6.5 禁用链接 4.6.6 二级导航实现 4.7 导航条 4.7.1 基础导航条 4.7.2 导航条中的表单 4.7.3 导航条中的按钮、文本、链接 4.7.4 导航条中的项进行左右浮动 4.7.5 顶部固定或底部固定 4.7.6 响应式导航条 4.7.7 反色导航条 4.8 面包屑导航 4.9 分页导航 4.9.1 页码分页 4.9.2 翻页 4.10 标签 4.11 徽章 4.12 大屏幕展播 4.13 页面标题 4.14 缩略图 4.15 警告框 4.15.1 默认警告框 4.15.2 可关闭的警告框 4.15.3 多彩样式警告框 4.15.4 警告框中的链接 4.16 进度条 4.16.1 基本样式 4.16.2 多彩样式 4.16.3 条纹样式 4.16.4 动画样式 4.16.5 堆叠样式 4.17 媒体对象 4.17.1 默认样式 4.17.2 媒体列表 4.18 列表组 4.18.1 基础列表组 4.18.2 应用徽章标记或导航箭头 4.18.3 可链接的列表组 4.18.4 多彩列表项 4.18.5 自定义列表组 4.19 面板 4.19.1 基础面板 4.19.2 带有头和尾的面板 4.19.3 多彩面板 4.19.4 面板与表格进行嵌套 4.19.5 面板和列表组进行嵌套 4.20 洼地 4.21 主题 4.21.1 btn按钮样式主题 4.21.2 缩略图样式主题 4.21.3 下拉菜单样式主题 4.21.4 导航条样式主题 4.21.5 警告框样式主题 4.21.6 进度条样式主题 4.21.7 列表组样式主题 4.21.8 面板样式主题 4.21.9 well样式主题 第5章 JavaScript插件 5.1 动画过渡效果 5.1.1 使用方法 5.1.2 源码分析 5.2 模态弹窗 5.2.1 弹窗布局与样式 5.2.2 声明式用法 5.2.3 JavaScript用法 5.2.4 源码分析 5.3 下拉菜单 5.3.1 声明式用法 5.3.2 JavaScript用法 5.3.3 源码分析 5.4 滚动侦测 5.4.1 声明式用法 5.4.2 JavaScript用法 5.4.3 源码分析 5.5 选项卡 5.5.1 声明式用法 5.5.2 JavaScript用法 5.5.3 源码分析 5.6 提示框 5.6.1 声明式用法 5.6.2 JavaScript用法 5.6.3 源码分析 5.7 弹出框 5.7.1 声明式用法 5.7.2 JavaScript用法 5.7.3 源码分析 5.8 警告框插件 5.8.1 声明式用法 5.8.2 JavaScript用法 5.8.3 源码分析 5.9 按钮 5.9.1 声明式用法 5.9.2 JavaScript用法 5.9.3 源码分析 5.10 折叠 5.10.1 声明式用法 5.10.2 JavaScript用法 5.10.3 源码分析 5.11 旋转轮播 5.11.1 声明式用法 5.11.2 CSS源码分析 5.11.3 JavaScript用法 5.11.4 源码分析 5.12 自动定位浮标 5.12.1 声明式用法 5.12.2 JavaScript用法 5.12.3 源码分析 第6章 实战:扩展现有组件 6.1 扩展分页组件 6.1.1 形状扩展 6.1.2 颜色扩展 6.2 扩展Modal弹窗 6.2.1 扩展点探讨 6.2.2 Info弹窗扩展 6.2.3 Form弹窗扩展 第7章 实战:Win8磁贴组件开发 7.1 基本样式 7.1.1 方块定义 7.1.2 边框定义 7.2 颜色样式 7.3 尺寸样式 7.4 状态设置 7.5 特殊元素样式 7.5.1 tile-content样式定义 7.5.2 tile-content子元素的样式定义 7.5.3 Brand样式定义 7.6 并列元素与嵌套样式 7.7 动画插件 7.8 更全的Win8风格样式 第8章 实战:组合应用开发 8.1 任务描述 8.2 实战过程 8.3 笔者的建议 8.4 实战成果 8.5 所用技术总结 第9章 第三方扩展 9.1 Font Awesome 9.1.1 介绍 9.1.2 常规用法 9.1.3 List列表上的图标 9.1.4 导航上的图标 9.1.5 固定角度旋转 9.1.6 360度旋转 9.1.7 多图叠加 9.2 BSIE扩展 9.3 Buttons 9.4 DateTime Picker 9.5 Cikonss 9.6 Flat UI 9.7 更多插件 附录A 浏览器兼容性支持 附录B 第三方插件开发建议 附录C 从2.x迁移到3.x 附录D Glyphicons图标全集 前言 为什么要写这本书 Bootstrap是一个非常受欢迎的前端开发框架,笔者在其1.0 版本刚刚发布时就开始使用了。该框架极大地提高了我们团队的 开发效率,同时也规范了团队成员在使用CSS和JavaScript方面 的编写规范。 Bootstrap的强大之处在于它对常见的CSS布局小组件和 JavaScript插件都进行了完整且完善的封装,使得开发人员(不 仅是前端开发人员)信手拈来,轻松使用。它解决了广大后端开 发人员的难题,学完以后,即使是那些只会.NET和Java的高手, 也可以在没有前端开发人员的情况下独立开发一个比较精美的 Web系统。当然,专业的前端还是很重要的,因为只有专业的前 端才可解决更为专业的前端问题,比如封装库和框架等。 编写本书的初衷是培训公司内部所有的Web开发人员,以便 所有的人都能够快速制作出精美的Web页面。在经历了两个比较 大型的项目后(基于最新版Bootstrap 3),笔者对各种现实环 境中曾经遇到过的问题和解决方法进行了整理,并融入了这本原 本是公司内部培训教材的图书中。笔者希望以这种方式,把自己 掌握的知识和在实战中总结的经验分享给大家,以便提高大家的 学习效率。 本书的主要内容和特色 本书是基于最新的Bootstrap 3进行编写的,以实例讲解和 源码分析为主要的讲解方式,所以在本书里列举了大量的示例以 及与之相对应的源码,以便读者能够彻底了解每个小组件(以及 各种用法)背后的原理。 在对CSS组件和JavaScript插件进行分析之后,本书提供了 3章的实战内容,首先是对现有组件和插件进行了二次扩展,然后 是根据Bootstrap架构思想开发了自己的完整插件,最后是一个 组合应用的实例。 另外,本书还添加了很多Bootstrap的潜在用法,以及每个 组件在日常使用时的注意事项。 关于本书的内容,这里再多说几句。首先,组件(或插件) 是用来使用的,而架构思想是用来理解和创建组件(或插件)、 解决疑难杂症的,所以读完本书以后,你可能得到两种结果。 结果1 组件和插件都会使用了,但是没有很好的架构思 想。那就做一个制作网页的熟手吧。不是因为Bootstrap很难, 而是因为你对相关知识(CSS3、jQuery、JavaScript代码)的 掌握还不牢靠。如果你想完全理解它的思想,这就需要把第1章用 于理解源码分析的必备知识完全吸收以后(从别的书上再多学一 点会更好),再回过头来阅读第2章,然后随便找个组件(或插 件)研究一下,相信就没有问题了。 结果2 架构思想都完全理解了。那么你下一步的工作,除 了指导你的小伙伴们使用Bootstrap以外,还要帮他们解决疑难 杂症。若有机会,可尽量尝试创建具有自己风格的组件或插件。 目标读者 本书没有对目标读者做任何限制,初中高级读者均适合阅 读。因为书中的内容由浅入深,涉及了各个层面的读者,相信各 个层面的读者都能从本书中获益。 ❑如果你是初级开发人员,本书丰富的示例会让你很快上手 Bootstrap框架,并由此晋级到中高端的水平。 ❑如果你是对CSS、JavaScript比较熟悉的中级开发人员, 本书的源码分析部分将为你提供详细的分析步骤,包括设计思 想、实现方式、弊端等,为你晋级高级水平提供详细的指导。 ❑如果你已经是专业的前端开发人员,相信本书的源码分 析、组件(插件)扩展、全新插件开发,以及实战部分会为你提 供一些更开阔的思路。 想要学习如何编写出优雅而又结构化良好的代码吗?相信这 本书就是为你准备的。 如何阅读本书 读者在阅读本书的过程中,需要注意以下几个事项: ❑如果你不太熟悉CSS和JavaScript(或jQuery),却想 学习如何使用Bootstrap,建议你忽略1.5节~1.7节,这些小节 是源码分析的基础。 ❑如果你在阅读第2章Bootstrap架构思想时有点迷茫,请不 要烦躁,可以在阅读完第3章~第5章以后,回过头来再次阅读第 2章,相信那时你对于框架思想的理解就会有不同的效果了。 ❑希望读者不要急于学习后面的实战章节,在完全熟悉现有 Bootstrap组件的使用方法并理解了架构思想后,再进行实战部 分的学习,效果比刚开始就学习实战会好得多。 本书约定 本书使用下列约定: ❑Bootstrap文件:一般默认是指普通的CSS文件或JS文 件,而非压缩后的*.min.css或*.min.js文件,因为本书有大量的 章节要进行源码分析。 ❑Bootstrap CSS:一般情况下表示Bootstrap的CSS文件 (bootstrap.css),特殊情况下指CSS框架集合。 ❑Bootstrap JS:一般情况下表示Bootstrap的JS文件 (bootstrap.js),特殊情况下是指与单个插件对应的JS文件 (比如,实现Dropdown插件的dropdown.js文件)。 ❑代码运行浏览器:用火狐浏览器20.0.1版本运行示例代 码,特殊情况会使用IE,届时会做说明。 代码示例 本书的源码分析采用如下形式(第一行注释里的行号是该段 代码在Bootstrap.css文件里的行号): // 源码307行 img { vertical-align: middle; /*垂直居中*/ } 资源和勘误 第6~8章为实战部分,笔者将实战过程中的源代码进行了打 包整理,读者可到笔者的博客上下载,下载地址是: http://files.cnblogs.com/TomXu/BootstrapInDepth.rar。当 然,也可到华章网站上下载:http://www.hzbook.com。 读者在阅读的过程中,发现任何错误和表述不准确的地方, 欢迎在笔者的博客上留言,以便再版时进行修订,在此多谢了。 另外,在阅读的过程中,有任何不够明白或者觉得难以理解 的内容,可以随时留言给我,我们可以线上讨论。 Bootstrap是一个非常简单的框架,相信经过几周的学习, 大家就会完全掌握它。如果你在学习的过程中有任何问题,都可 以发邮件给笔者(或者直接在博客上留言),笔者会尽最大努力 帮你们解决问题。 电子邮件:tomxu@outlook.com 博客地址:http://www.cnblogs.com/tomxu 致谢 首先要感谢机械工业出版社的杨福川先生,没有他的支持和 鼓励,就不会有本书。在写本书的过程中,杨先生为我提供了很 多重要的想法和灵感。同时还要感谢本书的编辑,正是因为他们 的辛苦工作才使得本书能迅速推出。 最后,要感谢我的妻子韩梅,她非常支持我的写书工作,每 天无怨无悔地照顾儿子,为我腾出了很多写作时间。 第1章 入门准备 本章简单介绍了Bootstrap的框架,以及各种入门的基本操 作。另外还介绍了CSS、jQuery、JavaScript的一些基本用法, 作为在后续的章节里对源码进行分析的基础。 1.1 框架简介 Bootstrap是目前最流行的前端开发框架,由Twitter的两 位前员工Mark Otto和Jacob Thornton在2010年8月份创建。它 是一套基于Less的前端开发库(最新版也包含了Sass源码),提 供了很多常见并常用的各种CSS和JavaScript合集,以便开发人 员随时上手。目前最新版本是3.1.0。 Bootstrap内置了非常多的漂亮样式,即便是非专业的前端 开发人员也能轻易使用。它秉承了一切从简的风格,使得开发人 员能够毫无顾虑,放心使用,而无须担心这个div的高度、那个 span的宽度等细枝末节的问题。即使没有设计师的团队,也能够 使用这套框架迅速构建一个网站原型,甚至是构建一个生产环境 的网站。 截止到目前,Bootstrap在Github上已经有5142个 Watch、64207个Star、23019个fork,在经受了千万用户的考 验之后,如今的Bootstrap已经非常强大了,其如此受欢迎的原 因是:首先,Bootstrap系出名门(Twitter),代码开源,久经 考验,可减少测试的工作量(站在巨人的肩膀上,我们不需要再 重复“造轮子”);其次,Bootstrap的代码有着非常良好的代 码规范(本书会用相当一部分章节来分析其源码),从中可以学 到很多知识。所以使用Bootstrap作为前端框架创建项目,其日 后代码的维护自然也会变得非常容易。 Bootstrap提供了如下重要的特性: ❑一套完整的基础CSS插件。 ❑丰富的预定义样式表。 ❑一组基于jQuery的JS插件集。 ❑一个非常灵活的响应式(Responsive)栅格系统,并且崇 尚移动先行(Mobile First)的思想。 Bootstrap默认提供了大量的插件和合集,代码非常简洁, 并且易于修改,你完全可以在其基础之上修改成任何自己想要的 样子。同时这也是Bootstrap真正强大的地方,这些非常不错的 插件,包括对话框、下拉导航等,使得Bootstrap不但功能完 善,而且十分精致,正在成为众多jQuery项目默认的设计标准。 这使得工作效率得到了极大的提升。 从V3.1.0开始,Bootstrap的License授权改成了MIT协议。 MIT是目前最为宽松的协议,大家可以放心地在各种商业环境中 使用它。 另外,由于Bootstrap的火暴,很多贡献者围绕Bootstrap 也开发了大量优秀的插件,其中最有名的就是Font Awesome。 它是一套icon字体,提供了丰富的icon供你选择,最新的3.0版包 含了多达369个icon图标(第9章中讲解Font Awesome)。 由于框架的发展,该框架的开发团队也逐步扩大,其中Core Team已经从2人扩展到4人了。另外,随着Sass的不断强 大,Sass Team也成立了。表1-1和表1-2所示是相关成员的基本 信息。 注意 Mark Otto目前加盟了GitHub,而Jacob Thornton则加入 了由Twitter的联合创始人Biz Stone和Evan Williams创立的 Obvious孵化器公司。 Less是一种CSS预处理技术,它是一种动态样式语言,属于 CSS预处理语言中的一种,它使用类似CSS的语法,为CSS赋予 了动态语言的特性,如变量、继承、运算、函数等,更方便CSS 的编写和维护。它可以在多种语言环境中使用,包括浏览器端、 桌面客户端、服务端。由于本书不是专门讲解Less的书,所以在 此不做过多的介绍,详情请访问Less中国官网 (http://www.lesscss.net)。 1.2 新手入门 在下载Bootstrap框架文件之前,首先确保要安装一个好用 并适合自己的代码编辑器。如果你已经是某个方面的开发人员, 应该已经安装了相应的IDE开发工具了,比如.NET开发人员常用 的Visual Studio、Java开发人员常用的Eclipse等。这些IDE开 发工具都能够对HTML、CSS、JavaScript代码进行很好的编 辑。 除此之外,如果非要推荐一些编辑器的话,我推荐大家使用 EditPlus或者Sublime Text,这两个编辑器都有非常不错的高亮 着色和智能提示功能。 Bootstrap框架的文件和源码可以在其官方网站 (www.getbootstrap.com)下载。打开网站的首页,单击 Download Bootstrap按钮,跳转到下载页面,可以看到3个下载 链接,如图1-1所示。 图1-1 Bootstrap下载页面 ❑Download Bootstrap。从该链接下载的内容是编译后可 以直接使用的文件。默认情况下,下载后的文件分两种:一种是 未经压缩的文件bootstrap.css,一种是经过压缩处理的文件 bootstrap.min.css。一般网站正式运行的时候使用压缩过的min 文件,以节约网站传输流量;而我们进行开发调试的时候往往使 用原始的、未经压缩的文件,以便进行debug跟踪,就像jQuery 的使用方式一样。 ❑Download source。从该链接下载的是用于编译CSS的 Less源码,以及各个插件的JS源码文件。默认情况下,本书将基 于未压缩的bootstrap.css和bootstrap.js文件进行源码讲解,不 会涉及与Less相关的内容,比如nav功能模板就单独建立一个 navs.less文件,或者具有弹窗功能插件的modal.js文件。 ❑Download Sass。从该链接下载的是用于编译CSS的Sass 源码,以及各个插件的JS源码文件。默认情况下,本书也不会涉 及与Sass相关的内容。 本书所有涉及源码的讲解和分析均基于Bootstrap V3.1.0版 本的CSS和JS文件。 在CSS源码分析方面,会涉及CSS代码、Less源码、Sass源 码,但不会针对Less源码和Sass源码进行过多的解释,读者大概 能看懂就行了,主要还是阅读生成后的CSS源码。所以建议大家 阅读完本书提及的bootstrap.css文件后,再进行Less源码和 Sass源码的延伸阅读。 但是,有一点要记住:经常使用IDE的源码搜索功能,因为 源码分析的时候不会处处提及行号。 在JavaScript插件方面,将以单一插件的功能源码为准进行 讲解,读者可以下载第二个(或第三个)链接的源码进行阅读, 或者可以直接在GitHub网站上在线阅读这些源码,目录分别是js 和less:https://github.com/twbs/bootstrap 1.3 文件结构 解压下载的压缩包(编译版),可以看到如下结构的文件夹 和文件。这些文件按照类别放到了不同的文件夹内,并且提供了 压缩与未压缩两种版本。 dist/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff 由上述文件结构可以看出,Bootstrap3.x版和2.x系列版本 有一个很大的区别,就是2.x系列版本用于展示icon小图标的.png 图片不见了,取而代之的是fonts目录的4种类型的字体文件。我 们称这种方式为@font-face版本的icon实现,该字体来自 glyphicons.com网站,并得到免费授权。 所谓@font-face,其实是通过CSS里的@font-face语法, 将安全的Web字体(Web Font)即时下载到客户端,从而进行 引用显示。通过这种技术显示图标的好处是,图标可以被任意缩 放、改变颜色,你需要做的只是像修改文字样式那样修改图标样 式即可(关于@font-face的详细解释和用法,请阅读4.1节)。 其他文件结构和之前的2.x系列版本一 样,bootstrap.min.css和bootstrap.min.js是压缩后的文件,用 于生产环境使用,而普通的bootstrap.css和bootstrap.js是用于 开发环境进行调试、分析的。可以将该目录结构拖拽到任何Web 项目直接使用。 你也可以根据自己的程序结构,对上述的css、js文件夹名称 进行随意重命名,但是不能对fonts文件夹进行重命名,因为CSS 文件里的源码使用了相对路径(../fonts/),如果重命名了,那就 读取不到这些字体文件了。 建议大家在阅读本书的过程中,使用未经压缩的文件,以便 进行分析、阅读、学习。 注意 ❑Bootstrap所有的JavaScript插件都依赖于jQuery库,要 确保在使用这些功能的时候引用相应的jQuery文件。 ❑字体文件是使用Mac下的应用软件 ImageOptim(http://imageoptim.com)对.png图片进行压缩 得到的。 1.4 HTML标准模板 如下代码是使用Bootstrap框架的最基本HTML代码,可以 在此基础上进行自己的扩展,只需要确保文件引用顺序一致即 可。HTML标准模板如下: Bootstrap基础模板

Hello, world!

由上述模板代码可以看出,3.x和2.x版本相比,有一个很大 的区别,就是多了以下一行代码: 这就是我们前面提到的,Bootstrap从3.0版本开始全面支持 移动平台了,并将贯彻移动先行(Mobile First)的宗旨。上述 代码的意思是,默认情况下,UI布局的宽度和移动设备的宽度一 致,缩放大小为原始大小。对于移动代码的处理,还有另外一种 形式,代码如下: 上述代码表示:强制让文档的宽度与设备的宽度保持1∶1, 文档最大的宽度比例是1,且不允许用户单击屏幕放大浏览。尤其 要注意的是,content里多个属性的设置一定要用分号和空格来 隔开,如果不规范将不会起作用。 官方网站还提供了各种布局的基本模板供大家使用,大家可 以到如下地址进行访问查看: http://getbootstrap.com/getting-started/ 通过对这些模板的模仿和练习,你将会发现Bootstrap的强 大。 1.5 CSS基本语法 本节主要介绍Bootstrap里用到的CSS语法,以便在源码分 析时更容易理解和学习,如果仅是为了使用Bootstrap框架(而 非进行完整的源码分析,以便开发各种CSS和JS插件)的话,则 可以忽略本节。但本节的语法都是比较基础的,巩固一下有好 处。 Bootstrap的CSS组件的核心就是选择器的定义以及在各自 优先级上的处理。由于大部分的选择器都很常见,所以就不做单 独说明了,只列举一下Bootstrap用到的知识点。 1.5.1 优先级 如何确定CSS的优先级?这里我们要先引入一个机制,分别 用4个数字(a,b,c,d)表示优先级组合,比如1,1,1,1和 0,1,0,1。它们的意思分别是: ❑第一个数字(a)表示style属性,优先级最高。由于一般 都是class样式,所以该值一般都是0。 ❑第二个数字(b)是该CSS选择器上的id数量的总和,一般 都是1个。 ❑第三个数字(c)是用在该CSS选择器上的其他属性CSS选 择器以及伪类的总和。这里包括class(.btn)和属性CSS选择器 (比如li[id=red])。 ❑第四个数字(d)计算元素(就像table、p、div等)和伪 元素(就像first-child等)。 ❑通用CSS选择器(*)是0优先级。 ❑如果两个CSS选择器有同样的优先级,在样式表中后面的 那个起作用。 下面有几个例子和对应的优先级,如表1-3所示。 同理,计算下面两个选择器的优先级: #leftbar li#first { color: red; } #leftbar li:first-child{ color: blue; } 结果肯定是第1个比第2个优先级高,因为第1个的优先级是 0,2,0,1,而第2个是0,1,0,2。 1.5.2 选择器 每一条CSS样式的定义都由两部分组成,形式如下:选择器 {样式}。在{}之前的部分就是“选择器”。“选择器”指明了应用 这些“样式”的网页元素。 1.属性选择器 Bootstrap的CSS组件里使用了很多属性选择器,比如 [data-toggle^=button]、[data-toggle=toggle]等。属性选择 器有多种用法,表1-4列出了这些用法的区别。 2.子选择器 CSS里的子元素用符号“>”表示。如下示例是表示拥有 table样式的表格,其thead元素内的tr元素如果有th的话,则应 用该样式。 .table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #dddddd; } 3.兄弟选择器 兄弟元素分为两种,一种是临近兄弟,一种是普通兄弟。临 近兄弟的选择符用“+”表示。比如导航条里要设置两个li之间的 外边距,则需要如下定义: .nav-pills > li + li { margin-left: 2px; /* 加大左外边距 */ } 如果只想查找某一个指定元素后面的兄弟节点(而不限制于 临近节点),可以使用普通兄弟节点的符号“~”。比如: .article h1 ~ p { font-size: 13px; } 1.5.3 伪类 CSS3提供了非常多的可用伪类,但是Bootstrap只用了常用 的几个,这里我们只简单列一下常用的伪类和其对应的意思,具 体如表1-5所示。 举个例子,按钮组里,除第一个按钮、最后一个按钮和带有 dropdown-toggle样式的元素外,其他btn样式的按钮都不能设 置圆角。我们应该这么定义: .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown- toggle) { border-radius: 0; } 注意 多个伪类可以一起使用。 1.5.4 display属性 这个属性用于定义建立布局时元素生成的框的类型。对于 HTML等文档类型,如果使用display时不谨慎会很危险,因为可 能违反HTML中已经定义的显示层次结构。表1-6是display支持 的常见属性值和意义。 1.5.5 媒体查询 媒体查询是进行响应式设计的核心要素,其功能非常强大。 这里我们只列出Bootstrap用到的功能,具体可以访问 http://www.w3.org/TR/css3-mediaqueries/进行查看。 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篇,地址如下: http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html。 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.add(1, 2); 由于这些内容不是本书的重点,所以这里只需要知道 Calculator的实例能调用原型上的add方法就可以了(就像Java 和C#里定义的普通方法一样)。 关于原型和原型链的详细内容,请访问笔者的博客“深入理 解JavaScript系列”里的第5篇,地址如下: http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html。 1.7 jQuery基本用法 本小节主要是介绍与jQuery相关的用法,读者在深入了解这 些特性以后,就可以按照Bootstrap的开发规范去开发自己的各 种插件了,而不需要精通jQuery的全部用法。 在学习jQuery相关的用法之前,首先要确保所有的CSS选择 器都能在jQuery里使用,比如$('[data-toggle^=button]')。如 果遇到任何不明白的选择器,请查询CSS相关的语法。 1.7.1 事件绑定 jQuery的on和off分别用于绑定和禁用事件。例如: $('td').on("click", function (event) { // 绑定abc元素上的click事件,单击 时弹出提示 alert(1); }); $('td).off('click'); // 禁用abc元素上的click事件 但是对于Bootstrap框架,它对jQuery的on和off的使用稍 有不同。它使用了另外一种语法,例如: $(document).on('click.bs.carousel.data-api','td',function (e){}; $(document).off('.carousel.data-api'); 上述的on在使用时,中间多了一个参数,而且选择器变成了 document。它的好处是只在document上绑定一个单击事件,利 用冒泡的机制,在单击的时候检查是否是td元素,如果是才处 理。而前面我们把td作为选择器的时候,一个页面有多少td元素 就会绑定多少个click事件,这样性能会大大降低。这种3个参数 的模式称为享元模式。 关于享元模式的详细信息,请访问笔者的博客“深入理解 JavaScript系列”里的第37篇,地址如下: http://www.cnblogs.com/TomXu/archive/2012/04/09/2379774.html 1.7.2 事件命名空间 另外,还需要注意的是,这里的事件后面都跟了一些字符 串,我们简单称它们为带有命名空间的事件。比如,你声明如下 这样的代码: $('#abc').on("click.tomxu", function (event) { alert(1); }); 一般别人触发click事件,都是这样做的: $('#abc').trigger('click'); 执行上述代码,在click时,所有绑定的click事件回调都会被 执行。但是如果触发的时候,你不想影响其他click触发代码,这 时候就可以只触发自己定义的click事件,以求不会对别人绑定的 click回调产生影响,这时可以这样做。 $("#abc").trigger('click.tom.xu'); 1.7.3 $.data() 很多JS插件里都使用了$(selector).data()方法,它的意思 是收集指定元素上的所有以data-开头的自定义属性,并合并成 为一个对象字面量。 对于以data-开头的自定义属性,相信大家都知道它是 HTML5新支持的语法。比如:
如果要获取data-role里aaa这个值,则需要调用如下代码: $("'#abc").data("role"); 如果是不带参数的$("'#abc").data();,则表示一次性将所 有以data-开头的参数都收集起来,其结果和用如下方式声明一 个value变量是一样的。 var value = { role: 'aaa', toggle: 'toggle', xxx: 'tom' }; Bootstrap中的很多JS插件都是利用了这个特性,在HTML 元素上定义了一些必要的参数,比如要不要使用动画、是否开启 键盘事件等。大家在分析JS插件的option选项参数时即可看到各 个参数的详细解释。 1.8 HTML5辅助设计 在Bootstrap组件里,很多示例里都出现了不是以data-开 头的自定义属性,我们称之为辅助属性。这些属性是HTML5新提 出的概念,用于支持残障人士、老年人、文化水平不高或暂时患 病的人使用屏幕阅读器进行页面访问。这种逐渐增强和易访问的 丰富Internet应用程序简称CSS。示例如下: 上述示例中的aria-hidden="true"表示对屏幕阅读器隐藏该 div元素,我们称该aria-hidden为CSS状态属性。 上述示例中的aria-labelledby="myModalLabel"告诉屏幕 阅读器,这是一个modal,一般用在区域元素上,它的值一般和 标题或是标签元素的ID对应。 假定屏幕阅读器遇到包含role=navigation的页面且其上还 有一个div元素,屏幕阅读器就会知道该div元素用于导航,用户 将能直接使用导航功能而非通过所有链接选择标签。role支持的 属性值如表1-7所示。 更多关于CSS的详细内容,可以阅读下面两篇文章: ❑http://msdn.microsoft.com/zh- cn/magazine/jj863135.aspx ❑http://www.zhangxinxu.com/wordpress/?p=2277 第2章 整体架构 对于本章,建议读者至少阅读两遍,第一遍是大概了解一下 Bootstrap的设计思想,然后在阅读了后续章节,全面了解了 Bootstrap的所有用法以后,回过头来再阅读一遍,这样就会对 Bootstrap有更加深入的理解。如果想开发基于Bootstrap的插 件的话,阅读第二遍是绝对有必要的。 当然,如果你一点都不了解Bootstrap,并且想先学习如何 使用它,那么可忽略本章,从第3章开始继续阅读。 2.1 整体架构 大多数Bootstrap的使用者都认为Bootstrap只提供了CSS 组件和JavaScript插件,其实CSS组件和JavaScript插件只是 Bootstrap框架的表现形式而已,它们都是构建在基础平台之上 的。在详细分析其架构之前,先来看看它的整体架构图,如图2- 1所示。 图2-1总共分为6大部分,除了CSS组件和JavaScript插件 以外,另外4部分都是基础支撑平台,下面对它们分别进行介绍。 1.CSS12栅格系统 要理解12栅格系统,首先要知道什么叫栅格系统。栅格系统 没有官方的定义,但根据互联网上的各种描述,笔者认为可以这 样定义:以规则的网格阵列来指导和规范网页中的版面布局以及 信息分布。网页栅格系统是从平面栅格系统中发展而来的。对于 网页设计来说,栅格系统的使用,不仅可以让网页信息的呈现更 加美观、易读,更具可用性,而且对于前端开发来说,也让网页 开发更加灵活与规范。 Bootstrap的12栅格系统也就是把网页的总宽度平分为12 份,开发人员可以自由按份组合,以便开发出简洁方便的程序。 另外Bootstrap也提供了更加灵活的栅格系统,即栅格系统所使 用的总宽度可以不固定,你可以针对一个div元素使用12等分的栅 格,因为Bootstrap是按照百分比进行12等分的(保留了15位小 数点精度)。 12栅格系统是整个Bootstrap的核心功能,也是响应式设计 核心理念的一个实现形式。 图2-1 Bootstrap整体架构图 2.基础布局组件 在12栅格系统的基础之上,Bootstrap提供了多种基础布局 组件,比如排版、代码、表格、按钮、表单等,这些基础组件可 以随意应用在任何页面的任何元素上,包括其顶部的CSS组件内 部也可以任意使用这些基础组件。只能通过在成型的CSS组件上 应用丰富多彩的自定义基础组件,才能制作出漂亮、精美、酷炫 的网页来。 这些基础布局组件会在第3章进行详细讲解。在此只需要知 道它们是最基础的、用于构建丰富多彩网页的基本组件即可。 3.jQuery Bootstrap所有的JavaScript插件都依赖于jQuery1.10+, 如果要使用这些插件,那就必须引用jQuery库。如果你只用CSS 组件,那就可以不引用它了。 4.响应式设计 页面的设计与开发应当根据用户行为以及设备环境(系统平 台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实 践方式由多方面决定,包括弹性网格和布局、图片、CSS媒体查 询(media query)的使用等。无论用户正在使用笔记本还是 iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关 脚本功能等,以适应不同设备。换句话说,页面应该有能力自动 响应用户的设备环境。响应式网页设计就是一个网站能够兼容多 个终端,而不是为每个终端做一个特定的版本。这样就可以不必 为不断到来的新设备做专门的版本设计和开发了。 响应式设计是一个理念,而非功能,这里为什么把它放在整 个架构图的左边?是因为Bootstrap的所有内容,都是以响应式 设计为设计理念来实现的。 5.CSS组件 最新的3.x版本里提供了20种CSS组件,而在原来的2.x版本 里,Bootstrap只提供了14种CSS组件,分别是:下拉菜单 (Dropdown)、按钮组(Button group)、按钮下拉菜单 (Button dropdown)、导航(Nav)、导航条(Navbar)、 面包屑导航(Breadcrumb)、分页导航(Pagination)、标签 与徽章(Label&Badge)、排版(Typography)、缩略图 (Thumbnail)、警告框(Alert)、进度条(Progress bar)、媒体对象(Media object)、其他(Well)。 对比一下,我们能够发现:Icon图标、大屏幕展播 (Jumbotron)、页面标题(Page header)和洼地(Well)从 基本布局里独立出来,成为了独立的组件;而标签(Label)、 徽章(Badge)原来是一个组件,现在也成为了两个单独的组件 了(并进行了增强);最后,还新增了3个组件,分别是:输入框 组(Input group)、列表组(List group)、面板(Panel)。 另外,CSS和JavaScript插件中间有5个箭头,表示这5个相关的 组件(插件)是有直接关系的。 6.JavaScript插件 新版的JavaScript插件总共12种,与2.x版本的13种相比少 了一种输入提示(typeahead)插件。删除它的原因是该插件已 经单独成为了Twitter的一个独立项目 (https://github.com/twitter/typeahead.js)。另 外,Bootstrap项目由原来的https://github.com/twitter转移到 了https://github.com/twbs,其原因我们就不多说了。所以如果 大家想继续使用typeahead插件,就去自行下载并安装使用吧。 2.2 栅格系统 本节就带领大家详细了解一下栅格系统。 2.2.1 实现原理 栅格系统的实现原理非常简单,仅仅是通过定义容器大小, 平分12份,再调整内外边距,最后再结合媒体查询,就制作出了 强大的响应式的栅格系统。Bootstrap默认的栅格系统平分为12 份,在使用的时候大家也可以根据情况通过重新编译LESS源码来 修改12这个数值。 栅格系统的主要工作原理如下: ❑一行数据(row)必须包含在.container中,以便为其赋 予合适的对齐方式和内边距(padding)。 ❑使用行(row)在水平方向创建一组列(column)。 ❑具体内容应当放置于列(column)内,而且只有列 (column)可以作为行(row)的直接子元素。 ❑内置一大堆样式,可以使用像.row和.col-xs-4(占4列宽 度)这样的样式来快速创建栅格布局。Bootstrap源码中定义的 mixin也可以用来创建语义化的布局。 ❑通过设置padding从而创建列(column)之间的间隔。然 后通过为第一列和最后一列设置负值的margin从而抵消掉 padding的影响。 ❑栅格系统中的列是通过指定1到12的值来表示其跨越的范 围的。例如,要让屏幕分为3个等宽的部分,可以使用3个.col- xs-4来创建。 为了方便大家理解,笔者画了一张示意图,如图2-2所示。 我们来一步一步解释一下。 图2-2 CSS12栅格系统 1)最外层的边框。由于在设计栅格系统的时候,从头到尾 都伴随着响应式设计的思想,所以作者在开发的时候,区分了4种 类型的浏览器(超小屏、小屏、中屏、大屏),其像素的分界点 分别是768px、992px以及1220px。 2)第二层的边框。该边框也就是我们所说的.container样式 容器,针对4种不同宽度的浏览器,.container样式的宽度也不一 样,就像示意图里所说的,其值分别是:自动、750px、 970px、1170px。其中自动表示,如果你选择了全部12格填充, 那就是100%充满这个超小屏幕。 3)1号横条。该横条内部总共有12个列表,根据源码的885 ~886行可以看出,每个列都有15px的左内边距(padding- left)和右内边距(padding-right)。这样就又导致一个问题, 第一个列的padding-left和最后一列的padding-right占据了总 共30px的宽度,从而导致页面不美观(当然,如果要留白,也没 问题)。 4)2号横条,也就是row容器的定义,在row的CSS的定义 里,将margin-left和margin-right都定义为-15px(源码810 行),组合row和列以后,就会形成3号横条的效果。这也就是我 们期望的左右宽度用满的效果。 5)对于4号横条,主要是想表达12个列可以自由组合,可以 用完12个,也可以只用一部分,只要符合“col-md-数字”的规 则就可以(md是中型屏幕的样式,后面会讲到其他3种形式)。 最后,再来看一下.container样式的源码。 // 源码734行 .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; /*小型屏幕时,container样式的宽度*/ } } @media (min-width: 992px) { .container { width: 970px; /*中型屏幕时,container样式的宽度,缩小min- width范围*/} } @media (min-width: 1200px) { .container { width: 1170px; /*大型屏幕时,container样式的宽度,再次缩小min- width范围*/} } 为什么这么设置?就是因为row样式定义了-15px的外边 距,所以为了消除2号横条的溢出,需要用row的容器元素(也就 是container样式元素)的padding值进行修补。 换句话,如果想让row充满全屏100%显示,那就不能用 container样式了,因为container样式针对4个不同的屏幕大小 固定了尺寸。这样,就得自己定义一个100%的样式,但是要注意 的就是:别忘记修复-15px的外边距(即设置15px的左右 padding值)。 除了上述原理,在实现细节上还有一些技巧,这部分的CSS 分析,我们将结合基本用法进行讲解。 2.2.2 基本用法 说到栅格系统的用法,其实就是列的组合。在基本用法里有 4种特性,再结合下一小节就要讲到的响应式用法,就能组合出功 能强大的、各式各样的布局元素。先来看看这4种基本用法。由于 不同屏幕的尺寸使用了不同的样式,这里我们以中型屏幕(md) 为例进行介绍,其他类似的,可以参考下一小节。 1.列组合 刚才我们已经提到了列组合的用法,就是通过更改数字来合 并列,类似于表格里的colspan。使用起来非常简单,示例代码如 下:
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
运行上述示例代码后会看到如图2-3所示的效果。 图2-3 CSS12栅格系统 列组合的实现方式非常简单,只涉及两个CSS特性:左浮动 和宽度百分比。由于很简单,就不多讲述了,大家直接看代码注 释即可。 // 源码1085行 .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6, .col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { float: left; /*确保12个列都是左浮动*/ } /*定义每个组合的宽度百分比*/ .col-md-12 { width: 100%;} .col-md-11 { width: 91.66666666666666%;} .col-md-10 { width: 83.33333333333334%;} .col-md-9 { width: 75%;} .col-md-8 { width: 66.66666666666666%;} .col-md-7 { width: 58.333333333333336%;} .col-md-6 { width: 50%;} .col-md-5 { width: 41.66666666666667%;} .col-md-4 { width: 33.33333333333333%;} .col-md-3 { width: 25%;} .col-md-2 { width: 16.666666666666664%;} .col-md-1 { width: 8.333333333333332%;} 2.列偏移 有的时候,我们不想让两个相邻的列挨在一起,这时候利用 栅格系统的列偏移(offset)功能来实现,而不必再定义margin 值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧。 例如,.col-md-offset-4将.col-md-4向右移动了4个列的宽 度,效果如图2-4所示。 图2-4 列偏移运行效果 实现上述效果,只需要在下一个列上应用offset样式即可 (因为该样式设置的是margin-left)。代码如下:
.col-md-4
.col-md-4 .col-md-offset- 4
.col-md-3 .col-md-offset- 3
.col-md-3 .col-md-offset- 3
.col-md-6 .col-md-offset- 3
源码也非常简单,只利用了1/12的margin-left而已,有多 少个offset,就有多少个margin-left。 // 源码1203行 .col-md-offset-12 { margin-left: 100%;} .col-md-offset-11 { margin-left: 91.66666666666666%;} .col-md-offset-10 { margin-left: 83.33333333333334%;} .col-md-offset-9 { margin-left: 75%;} .col-md-offset-8 { margin-left: 66.66666666666666%;} .col-md-offset-7 { margin-left: 58.333333333333336%;} .col-md-offset-6 { margin-left: 50%;} .col-md-offset-5 { margin-left: 41.66666666666667%;} .col-md-offset-4 { margin-left: 33.33333333333333%;} .col-md-offset-3 { margin-left: 25%;} .col-md-offset-2 { margin-left: 16.666666666666664%;} .col-md-offset-1 { margin-left: 8.333333333333332%;} .col-md-offset-0 { margin-left: 0;} 3.列嵌套 同样,栅格系统也支持列嵌套,即在一个列里再声明一个或 者多个行(row)。但是注意,内部所嵌套的row的宽度为100% 时,就是当前外部列的宽度。示例代码如下:
Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6
运行效果如图2-5所示。 图2-5 列嵌套运行效果 可以看到,在第一个列(col-md-9)里面,嵌套了一个新 行(row),然后在新行里,又放置了两个等宽列的col-md-6, 这时候大家就会发现,两个col-md-6加起来是12,但是总宽度 和外面的col-md-9列的宽度一样。也就是说row里的列宽度是按 照百分比分配的,这也印证了上面的源码。所以在任何一个嵌套 列里,不管宽度是多少,都可以再进行12等分,并可以进一步组 合。 4.列排序 列排序其实就是改变列的方向,也就是改变左右浮动,并且 设置浮动的距离。在栅格系统里,可以通过.col-md-push-* 和.col-md-pull-*来实现这一目的。先来看看效果示意图,如图 2-6所示。 图2-6 列排序运行效果 默认情况下,col-md-9在左边,col-md-3在右边,如果要 互换位置,需要将col-md-9列向右移动3个列的距离,也就是推 3个列的offset,样式用col-md-push-3;而col-md-3则需要向 左移动,也就是拉9个列的offset,样式用col-md-pull-9。读者 可能会问,为什么不能用左右浮动呢?这是因为所有的列默认情 况下都是左浮动,如果要使用左右浮动,那就不知道得修改多少 列的左右浮动样式了。所以,作者在统一左浮动的基础上,通过 设置left和right的值来实现定位显示。代码如下所示: // 源码1125行 .col-md-pull-12 { right: 100%;} .col-md-pull-11 { right: 91.66666666666666%;} .col-md-pull-10 { right: 83.33333333333334%;} .col-md-pull-9 { right: 75%;} .col-md-pull-8 { right: 66.66666666666666%;} .col-md-pull-7 { right: 58.333333333333336%;} .col-md-pull-6 { right: 50%;} .col-md-pull-5 { right: 41.66666666666667%;} .col-md-pull-4 { right: 33.33333333333333%;} .col-md-pull-3 { right: 25%;} .col-md-pull-2 { right: 16.666666666666664%;} .col-md-pull-1 { right: 8.333333333333332%;} .col-md-pull-0 { right: 0;} .col-md-push-12 { left: 100%;} // 其他同理,上pull的设置类似,唯一不同的就是right和left的区别 .col-md-push-0 { left: 0;} 只是利用左浮动、left、right 3个基础样式,就能实现这种 效果,不能不说这真的很巧妙啊(笔者感叹:这3种样式,10年 前就会了,为啥自己想不到这种效果呢!)。 2.2.3 响应式栅格 刚才说到了,Bootstrap为不同的屏幕尺寸(4种类型)提供 了不同的栅格样式,前面例子我们使用的一直是中型屏幕 (md),其他3种样式分别是超小(xs)、小型(sm)、大型 (lg),所以组合起来样式就多了,可以是.col-xs-1,也可以 是.col-sm-offset-2,还可以是.col-lg-push-1或者.col-lg- pull-1。下面总结了一个表格用于记录不同类型浏览器的各种参 数,如表2-1所示。 这些分界点是如何定义的?答案就是:它们是媒体查询定义 的。前面源码已经提到了,下面再列一下: // 超小型是默认实现 // 小型 @media (min-width: 768px) { .container { width: 750px; } } // 中型 @media (min-width: 992px) { .container { width: 970px; } } // 大型 @media (min-width: 1200px) { .container { width: 1170px; } } 1.跨设备组合定义 通过前面的示例和源码可以发现,一种样式(比如col-md- 9)在其定义的尺寸范围以外是不起作用的,比如,在小型或者大 型屏幕下,所有带有md的样式都不会生效,而且没有默认值。这 就是说,我们可以在一个元素上应用不同类型的样式,以适配不 同尺寸的屏幕。比如下面的示例:
.col-sm-12 .col-md-8
.col-sm-6 .col-md-4
.col-sm-6 .col-md-4
.col-sm-6 .col-md-4
.col-sm-6 .col-md-4
.col-sm-6
.col-sm-6
在上述示例中,每个div元素都应用了两种样式,分别是sm 类型和md类型,用于适配小型屏幕和中型屏幕。在中型屏幕中的 效果如图2-7所示。 图2-7 中型屏幕的运行效果 而换到小型屏幕的浏览器上时,效果就完全不一样了,如图 2-8所示。 图2-8 小型屏幕的运行效果 为什么不一样?这就是因为第一行row里的第1个div使用了 col-sm-12,一下子就占用了12个列,所以第2个div就自动换行 了。第2行也是,两个div就占满了12个列,所以最后一个col- sm-6就换行了。 读者,可能会问,第2行用的col-sm-6,为什么在中型屏幕 上也是各占50%啊?这是因为针对sm类型的媒体查询只用了 @media(min-width: 768px),而不是@media(min-width: 768px)and(max-width: 992px)。所以,如果没有定义md样式 的话,sm样式默认情况下依然有效。总结一句,如果只用min- width,则表示向大兼容。 既然向大兼容,那向小肯定就不兼容了?没错,在小于 768px的超小屏幕上浏览上述示例时,由于所有的样式都无效 了,所以所有的div默认都垂直换行堆叠在一起了,效果如图2-9 所示。 图2-9 跨设备组合在超小型屏幕下的运行效果 既然两种类型的样式可以组合在一起,那4种也就没什么问 题了。所以可以在一个div上分别应用xs、sm、md、lg类型的样 式,以便在所有的设备上都能进行正常浏览。 2.清除浮动问题 理想是美好的,但现实是残酷的。我们来举一个美好的例 子。在小型屏幕上,希望实现如图2-10所示的效果。 图2-10 在小型屏幕下的预想效果 但是在超小型屏幕下,则希望每行只显示两个div元素,即如 图2-11所示的效果。 图2-11 在超小型屏幕下的预想效果 理想很美好的,按照上述响应式栅格的建议,可能觉得应该 如下设计:
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
把真实内容填到div里进入,看看实际效果,如图2-12所 示。 图2-12 在小型屏幕下的实际效果 你肯定会说:“这是怎么回事啊!”怎么回事?所有的col- 样式都是左浮动,很明显,这是因为没有清除浮动导致的。第3个 div开始换行的时候,div1的内容高度过高,所以div3就在右边紧 接着显示了。 要解决这个问题,需要用Bootstrap提供的clearfix样式。 更新后的代码如下所示:
div1: .col-xs-6 .col-sm-3
div2: .col-xs-6 .col-sm-3
div3: .col-xs-6 .col-sm-3
div4: .col-xs-6 .col-sm-3
利用clearfix样式清除浮动,但是前提条件是在超小型屏幕 上能显示才行(因为其是用visible-xs样式控制的)。 3.列偏移和列排序 由于响应式设计是利用了媒体查询的特性,而所有以col-*开 头的样式都是在媒体查询里定义的,所以像列偏移(offset)、 列排序(pull和push)相关的样式也都可以用,以组合出不同的 精美样式。以下的例子大家自行调试一下。
.col-sm-5 .col-md-6
.col-sm-6 .col-md-5 .col-lg- 6
怎么样?看到这么多特性,感觉到强大了吧?是的,我也觉 得很强大,但是,请看下一节。 2.2.4 对重复代码的处理 本小节内容只代表我的个人观点,是在自身理解水平的基础 上形成的,如有误导,请见谅。纵观整个栅格系统的源码,从 854行到1635行绝大部分代码都是重复性的。比如给4种不同的类 型设置width的时候,给pull和push设置left和right的时候,以 及给offset设置的margin-left时候,设置的值都一样。只是样式 名称不一样。除此之外不一样的地方就只有container样式的宽度 设置了。那为什么不能这样设置呢? 所有重复性的内容都放一起(在媒体查询之外),那么和媒 体查询有关的就只有这一项内容了,也就是如下代码中所列的 width宽度。 .col-xs-12 .col-sm-12 .col-md-12 .col-lg-12 { width: 100%; } 总结:这得节约多少行代码啊!当然,如果Bootstrap作者 这么做是为了以后扩展成不同的值,那我就只能说:好,灵活性 不错。 2.3 CSS组件架构的设计思想 对于CSS组件架构来说确定有点吓人了,但是我想给大家说 明的就是CSS组件的一个设计思想,即Bootstrap的一个那么强 大的组件是如何实现的(比如,btn按钮)。 我个人的理解,不管是设计思想,还是架构,都可总结为一 个词:AO模式。A表示Append,即“附加”的意思;O表示 Overwrite,即“重写”的意思。所有的CSS组件都是沿用这种 思想来设计的。这也是CSS的特性,不同名的样式可以叠加在一 起使用;同名的样式,后面的会覆盖前面的,从而达到组合应用 的效果。 整个CSS组件,我总结出8大类型的样式,然后根据每个组 件的特性,来组装这些类型的特性,从而达到丰富多彩的配置效 果。这8种类型的样式分别如图2-13所示。 图2-13 CSS组件的8种基本类型 下面我们根据示例来具体分析这8种类型的样式是如何应用 的。在分析过程中,如果需要查看细节,请自行参阅第3章和第4 章中与此对应的插件的相关内容。 2.3.1 基础样式 任何一个CSS组件在刚开始都要先定义基本样式,就像一个 新的HTML页面制作之前都要先定义统一的字号、背景色一样。 在基本样式里,一般是定义该样式下的字体(font-)、外内边距 (padding,margin)、显示方式(display)、边框 (border)以及其他相关的内容。 比如在警告框组件(alert)里,其基本样式就只定义了内外 边距、边框、圆角设置。源码如下: // 源码4434行 .alert { /* 基本的警告框设置 */ padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } 而按钮组件(btn)的基本样式,除此之外还定义了文本、 display、focus、hover的基本样式,详细内容请查看 Bootstrap.css的第1988行。 2.3.2 颜色样式 如果在Bootstrap官方网站看过btn按钮或者alert警告框的 样例,你会发现,Bootstrap默认为很多组件都提供了5种颜色的 样式,这5种颜色分别是:primary(重点蓝)、success(成功 绿)、info(信息蓝)、warning(警告橙)、danger(危险 红)。定义规则是:组件名称-颜色类型,如btn-primary、 alert-info。 在定义不同颜色样式的时候,主要是定义文本颜色、边框颜 色、背景颜色等,具体定义什么颜色和该组件的特性有关。比如 面板panel就只需要定义边框的颜色就可以了,而按钮不仅需要定 义边框颜色,还需要定义背景色以及文本颜色。btn、panel、 alert三个组件在定义颜色样式时的代码如下所示: /* btn */ .btn-primary { color: #ffffff; background-color: #428bca; border-color: #357ebd; } /* panel */ .panel-success { border-color: #d6e9c6; } .panel-success > .panel-heading { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; } /* alert */ .alert-success { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; } .alert-success hr { border-top-color: #c9e2b3; } 可以发现,不同的组件,定义的内容稍有不同,具体定义什 么主要由组件特性来决定。另外还要定义其内部子样式的颜色以 便形成统一风格,比如.panel-success内部的.panel-heading顶 部元素也要定义一个相同风格的颜色。 而对于一些可单击元素,比如btn按钮,还要特殊处理按钮 在hover、focus、active状态时的颜色,以便让这些状态在同一 个风格下表现一致。其源码如下所示: // 源码2081行 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { color: #fff; background-color: #3276b1; border-color: #285e8e; } 使用方式就像Bootstrap宣传的那样,将两个样式叠加在一 起使用即可。示例如下所示:
...
...
2.3.3 尺寸样式 Bootstrap也为大部分组件都提供了尺寸的快捷设置。一般 组件都有4种尺寸:超小(xs)、小型(sm)、普通、大型 (lg)。使用示例如下所示:
...
...
调整尺寸主要是调整所对应元素的padding和圆角设置,有 时候也会相应调整行间距和字体大小。btn按钮和well组件在尺寸 方面的设置源码如下所示(截取的一部分): /* 源码2134行*/ .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } /* 源码5060行*/ .well-lg { padding: 24px; /*加大内边距*/ border-radius: 6px; /*加大圆角设置*/ } .well-sm { padding: 9px; /*减少内边距*/ border-radius: 3px; /*减少圆角设置*/ } 值得注意的是,同一个组件的不同类型的样式可以组合在一 起使用,比如颜色样式btn-success和尺寸样式btn-lg一起使用 完全没有问题,不会引起冲突。看下面的示例: 2.3.4 状态样式 有一些可单击元素,经常需要根据状态来显示其效果,比如 高亮可用的时候用active样式,禁用的时候用disabled样式或 disabled属性。Bootstrap的一部分组件针对这种元素也都进行 了处理,例如btn按钮的样式定义如下所示: // 源码2018行 .btn:active, .btn.active { background-image: none; outline: 0; /* 消除outline*/ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); /*定义阴 影*/ box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; /* 去除阴 影*/ box-shadow: none; opacity: .65; /* 透明处 理*/ } 这种类型的样式一般是处理元素的阴影、鼠标形状、透明 度、虚框等方面的内容。但是大家使用该机制做自定义组件开发 时一定要注意,active和disabled样式和颜色样式有关联(因为 牵涉到颜色),所以如果要定义这两种样式,就要为所有的颜色 样式分别定义active和disabled对应的颜色。比如,将btn- success样式和active、disabled样式一起使用的时候,所定义的 样式如下所示: // 源码2122行 .btn-success:hover,.btn-success:focus, .btn-success:active,.btn-success.active, .open .dropdown-toggle.btn-success { color: #fff; background-color: #47a447; border-color: #398439; } .btn-success:active,.btn-success.active, .open .dropdown-toggle.btn-success { background-image: none; } .btn-success.disabled,.btn-success[disabled], /*此处省略部分选择器*/ .btn-success.disabled.active,.btn-success[disabled].active, fieldset[disabled] .btn-success.active { background-color: #5cb85c; border-color: #4cae4c; } 通过上述代码可以发现,不仅要注意当前元素的active、 disabled样式,还要注意嵌套元素的相关样式。上述样式,可以 直接和颜色样式一起使用,也可以和默认样式一起使用。 2.3.5 特殊元素样式 所谓特殊元素,即特定类型的组件一般只使用某一种或者几 种固定的元素,比如alert警告框内一般只用警告标题、内容和关 闭链接元素,再如导航(nav)里的经常用的li元素。在定义这些 组件的时候,也要为这些常用的元素定义其相关的默认样式。这 两个组件对常用特殊元素的样式定义如下所示: // 源码 4444 行 .alert .alert-link { font-weight: bold; /* alert内的链接样式 */} .alert > p,.alert > ul { margin-bottom: 0; /* alert内的p元素和ul元素的底部外边距 设置 */} .alert > p + p { margin-top: 5px; /*两个段落之间,增加一个顶部外 边距*/} .alert-dismissable { padding-right: 35px; /* 增大右内边距,以便关闭按钮 */} .alert-dismissable .close { /* 警告框内,如果设置关闭按钮, 特殊处理 */ position: relative; top: -2px; right: -21px; /* 关闭按钮,右对齐 */ color: inherit; } // 源码 3462 行 .nav > li { position: relative; /*所有的菜单项都是相对定位*/ display: block; /* 块级显示*/ } .nav > li > a { position: relative; /* a链接相对定位*/ display: block; /* 块级显示*/ padding: 10px 15px; /* 外边距保留稍微大一些*/ } .nav > li > a:hover,.nav > li > a:focus { /* 移动或焦点时链接的显示效果 */ text-decoration: none; background-color: #eeeeee; /* 链接移动或焦点时,背景色变 为灰色*/ } .nav > li.disabled > a { color: #999999; /* li上禁用时的链接颜色*/} .nav > li.disabled > a:hover, .nav > li.disabled > a:focus { /* li上禁用时,移动到链接上时的各种处理*/ color: #999999; /* 颜色变灰*/ text-decoration: none; cursor: not-allowed; background-color: transparent; } 特殊元素所定义的样式不固定,这取决于是什么样的特殊元 素,有的是定义内外边距,有的是自定颜色和背景色,具体元素 具体对待。大家在分析源码的时候,一定要结合元素的特性进行 分析,比如a链接元素,不仅可以设置内外边距,还可以设置文本 颜色,甚至可以设置这些样式在hover、focus状态时的情况。 如果在这些组件内部使用的不是这些常用的特殊元素,而且 其他相关的元素,那么就需要自己为这些特殊的情况定义相关的 样式了,不然很有可能不符合默认组件的风格。定义的时候,还 要考虑默认情况下是什么样式、和颜色样式搭配时又是什么样 式,以及设置大小尺寸时要设置多少边距等。总之,要为各种情 况设置相应的内容,以保持风格的统一。 2.3.6 并列元素样式 在很多情况下,一个组件内部需要放置多个子元素,比如导 航组件(nav)里可以放置多个li元素,按钮组里可以放置多个 button元素。如果有这种情况,就需要处理这样并列元素的间距 问题了。一般来说,只需要考虑两方面即可:其一水平并列时候 的左右内边距(padding-left、padding-right)和外边距 (margin-left、margin-right);其二:垂直并列时的上下内 边距(padding-top、padding-bottom)和外边距(margin- top、margin-bottom)。 举个例子,alert组件里,有时候要提示两段内容,这时候就 需要用到两个p元素,所以需要处理这种情况的样式。源码如下所 示: // 源码4447行 .alert > p { margin-bottom: 0; /* alert内的p元素和ul元素的底部外边距设置 */ } .alert > p + p { margin-top: 5px; /*两个段落之间,增加一个顶部外边距*/ } 而在模态弹窗组件(modal)的底部,经常需要显示多个按 钮(比如:“保存”、“取消”等),这时候就需要处理水平并 列的情况了。源码如下所示。 // 源码5178行 .modal-footer .btn + .btn { /* 底部区域内的按钮样式设置,如果有多个按钮,设置左部外边距 */ margin-bottom: 0; margin-left: 5px; } 2.3.7 嵌套子元素样式 有的时候,我们也需要将两个相同或不同的组件嵌套在一起 使用,这时经常会出现一些特殊情况,比如,多个按钮组在一起 使用,或者按钮和下拉菜单一起使用,效果如图2-14所示。 图2-14 嵌套元素运行效果 这个时候就需要考虑嵌套元素的使用情况了。比如多个分组 按钮一起使用的时候,就需要考虑浮动方向和间距,其样式设置 如下所示: // 源码3147行 .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group { margin-left: -1px;/* 消除2个按钮(或一个按钮和另外一个按钮组)之间的1像素细节引起的 冲突 */ } .btn-group > .btn-group { float: left; } 而如果在分组按钮组件里使用下拉菜单,则需要考虑下拉菜 单的圆角问题,因为默认情况下分组按钮里的元素,只有第一个 和最后一个子元素才有圆角,其他都没有,所以需要特殊考虑下 拉菜单的情况。部分源码如下所示: // 源码3175行 .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { border-bottom-left-radius: 0; /* 最后一个按钮或Dropdown(不是第一个按钮的情况下),左上和左下角不设置圆角 */ border-top-left-radius: 0; } 上述代码又多了一个维度,和颜色、尺寸、并列元素等组合 在一起,更加复杂了。但是不用担心,毕竟这种嵌套使用的情况 不是很多,即便有,在测试的时候也会发现的,到时候就能很快 修复了,毕竟只是最基本的样式修改而已。 2.3.8 动画样式 在Bootstrap里,动画样式应用得不是很多,只在进度条组 件里会使用到。但是为了能够方便读者以后开发自定义组件,我 们还是简述一下动画的定义,细节分析请阅读4.16节。 先来看一下动画是如何应用的:只需要在progress样式上应 用一个active样式,即可开启动画过渡效果。示例代码如下所 示:
45% Complete
上述代码的运行效果如图2-15所示。 图2-15 progress进度条动画运行效果 在这里使用了active样式和progress样式叠加在一起产生动 画过渡效果,我个人觉得active这个名称不太合适,因为状态样 式里已经用过了。建议大家在做开发的时候设置一个别的名称, 比如animation等。动画的定义也十分简单,只需要指定 animation的名称和运行时间即可。本例的名称是progress- bar-stripes,关于progress-bar-stripes的详细定义请阅读 4.16节。动画设置如下所示: // 源码4551行 .progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; /* 2秒过渡40像素, 无限循环 */ animation: progress-bar-stripes 2s linear infinite; /* 其他浏 览器 */ } 2.3.9 小结 前面我们介绍了8种类型的样式,可以发现一个问题:每一 种类型的样式设置都是最基础的,都非常简单,但是这8种情况组 合起来,就非常复杂了。比如,设置active状态的时候要兼顾颜 色样式和尺寸样式;设置尺寸样式的时候,又要考虑并列元素的 情况;根据不同的组件,还要考虑是垂直并列元素还是水平并列 元素等。但是只要我们秉承“由繁入简易、由简入繁难”的思想 就没问题,也就是说,先从高度层面上考虑这些问题,大概需要8 种特性中的几种,然后考虑每一种之间有没有关系,最后再去针 对每个细节进行样式的编写,这样就非常简单了。 另外,还有一个问题需要注意:由于这些样式是利用了CSS 重载覆盖的概念,所以一定要注意其定义的顺序,以免出现重载 顺序错误的问题。 下一章,我们将开始深入分析Bootstrap所有组件的使用, 并进行源码分析。在分析源码的时候,脑子里时刻要有8种类型的 概念,这样理解起来才能顺畅。 2.4 JavaScript插件架构 Bootstrap所有的插件在开发的时候都遵循了同样的规则, 同时开发人员在使用的时候也遵循类似的规则,这些规则奠定了 Bootstrap插件开发的基础,也为我们自定义插件提供了规范和 依据。这些规则可以归纳为以下3种: ❑HTML布局规则:基于元素自定义属性的布局规则,比如 使用类似于data-target的自定义属性等。 ❑JavaScript实现步骤:所有的插件都遵循jQuery插件开发 的标准步骤,所有的事件都保持了统一标准。 ❑插件调用方法:所有插件的使用方式都非常类似,可以是 HTML声明式,也可以是调用式(JavaScript代码),并且支持 多种回调和可选参数。 2.4.1 HTML布局规则 默认情况下,所有的插件都可以通过设置特定的HTML代码 和相应的属性(或自定义属性)来实现。也就是说,在网页加载 的时候,JavaScript代码会自动检测这些标记,并自动绑定相应 的事件,而无需再添加额外的JavaScript代码。示例如下:
警告! 你输入的项目不合法!
上述代码是警告框组件的HTML布局,只要在button元素上 添加data-dismiss="alert"属性,那么在单击该button的时候就 会关闭该警告框。 同理,如下代码是下拉菜单的HTML布局,只要保证所单击 的button按钮添加了data-toggle="dropdown"属性,在单击按 钮的时候,默认隐藏的下拉菜单就会显示出来。 再看一下更复杂的场景。如下代码是选项卡的HTML代码, 并且在第三个选项卡(Dropdown)里加入了下拉菜单组件,也 就是说单击第三个选项卡(Dropdown)的时候,下拉菜单会弹 出来让用户再次选择一个菜单。但无论选择哪个li元素,插件都会 根据配置的内容(如,data-toggle="tab" href="#home"),显 示href所对应的id标签元素(即,单击首页,就会显示 id="home"的div)。

单击"首页"时显示 该区域

单击"个人资料"时显示该区域

通过上面的3个示例,大家是不是感觉很棒?一行 JavaScript代码都不用就能实现非常炫的效果,这就是 JavaScript插件统一布局规则的优势。 注意 上述代码data-toggle="tab" href="#home"所实现的功能, 使用data-toggle="tab" data-target="#home"也可以实 现,JavaScript默认先检测data-target属性,如果没有,再检 测href属性,如果还没有,则默认为父元素。另外,其他所有的 JavaScript插件也都遵循同样的检测规则。 2.4.2 JavaScript实现步骤 Bootstrap里提供的所有JavaScript插件都遵守了统一的实 现步骤,好处自然就不用多说了,除了维护方便以外,学习和自 定义其他插件也都很方便。要做到统一,需要有5个步骤,如图 2-16所示。 图2-16 Bootstrap的JS插件实现步骤示意图 下面以alert插件为例(alert.js),来讲述一下如何实现标 准的插件。 步骤1 定义一个立即调用的函数声明,如代码清单2-1所 示。在参数里传入jQuery对象,通过参数$引入变量,这样其所 有代码在使用jQuery的时候,直接使用$符即可。这样的做法, 有以下两个好处: ❑函数内部的$符变量代表了局部变量,而不是全局变量里 代表jQuery的$符变量,以达到防止变量污染的目的。 ❑内部的代码全部都是私有代码,外部代码无法访问,只有 通过第三步,在$.fn上设置了插件(比如$.fn.alert=)的形式, 通过$符变量才能将整个插件通过唯一的接口$.fn.alert暴露出 去,从而保护了其内部代码。 代码清单2-1 立即调用的函数 +function ($) { "use strict";// 1.使用严格模式ES5支持 // 2.alert插件类及原型方法的定义 // 3.在jQuery上定义alert插件,并重设插件构造器 // 重设插件构造器,可以通过该属性获取插件的真实类函数 // 4. 防冲突处理 // 5. 绑定触发事件 }(window.jQuery); 注意 在function关键字前面有一个加号运算符(+),其主要目 的是防止前面有未正常结束的代码(通常是遗漏了分号),导致 前后代码被编译器认为是一体的,从而导致代码运行出错。 步骤2 定义该插件的核心代码,也就是在触发特定行为 (通常是单击行为)后要进行处理的代码。示例如代码清单2-2 所示。 代码清单2-2 插件核心代码示例 // alert插件类及原型方法的定义 // 定义选择器,所有符合该自定义属性的元素都可以触发下面的事件 var dismiss = '[data-dismiss="alert"]' var Alert = function (el) { // 传入元素,如果元素内部有dismiss上设置的自定义属性,则click事件会触发原型上的 close方法 $(el).on('click', dismiss, this.close) } Alert.prototype.close = function (e) { // 关闭警告框的主要代码设置,每一行代码的细节注释,请参考5.8节 } 通过上述代码可以看出,主要是先定义了插件插件的类函数 Alert,然后再定义需要用到的一些原型函数,比如close函数方 法。Alert函数接收el参数,el表示DOM元素,一个DOM如果绑 定了data-dismiss="alert"自定义属性,则在单击的时候就会触 发close函数方法,从而达到关闭的目的。同样,Modal插件也是 先定义Modal类函数,然后再在Modal的原型上定义toggle和 show等方法,其内部根据相应的规则再细化处理。 步骤3 在jQuery上定义插件,以便通过jQuery.[插件名称] ()的方式,也能够使用该插件,也就是在触发特定行为(通常是 单击行为)后要进行处理的通用代码。最后在这里再调用插件类 或原型方法。主要源码如代码清单2-3所示。 代码清单2-3 jQuery插件定义 // 在jQuery上定义alert插件,并重设插件构造器 var old = $.fn.alert // 保留其他插件的$.fn.alert代码(如果定义),以便在noConflict之后,可以继续使用该旧代码 $.fn.alert = function (option) { return this.each(function () { // 根据选择器,遍历所有符合规则的元素,然后在元素上绑定插件的实例,以监控用户的事 件行为 }) } $.fn.alert.Constructor = Alert;// 并重设插件构造器,可以通过该属性获取插件的真实类 函数 jQuery插件的定义使用了标准的方法,在fn上进行扩展。在 附加扩展之前,首先“备份”之前插件(或别的框架提供的同名 插件)的旧代码,以方便在后面防冲突的时候使用。在附加扩展 之后,重新设置插件的构造器(即Constructor属性)为内部定 义的插件类函数自身,这样就可以通过Constructor属性查询到 插件的真实类函数,使用new操作符实例化$.fn.alert的时候也不 会出错。 注意 即便不声明第三步,HTML声明式的方式也是可以用的。所 以说,第三步是专门为某些喜欢用JavaScript代码触发事件的人 所准备的。但需要注意的是,如果不声明第三步,那第四步的防 冲突的功能也就没法用了。 步骤4 防冲突处理,目的是让Bootstrap插件和其他UI库 的同名插件共存。Bootstrap所有的插件都支持防冲突 (noConflict)功能。源码如代码清单2-4所示。 代码清单2-4 防冲突处理 // 防冲突处理 $.fn.alert.noConflict = function () { $.fn.alert = old // 恢复以前的旧代码 return this // 将$.fn.alert.noConflict()设置为Bootstrap的alert 插件 } 这样一旦有了一个同名的插件,比如A库里有个同名 $.fn.alert插件,则Bootstrap在执行之前就通过old先备份了, 然后执行$.fn.alert.noConflict()后就会还原该old对象插件;而 使用Bootstrap的alert插件的话,则通过var alert=$.fn.alert.noConflict()的形式,将Bootstrap的alert插 件转移到另外一个变量上,从而进行使用。 步骤5 在一切都就绪之后,绑定默认的触发事件。由于已 经为jQuery提供了默认的$.fn.alert扩展插件功能,已经可以通 过手工编写JavaScript代码来触发事件了。这里的第五步主要是 为声明式的HTML触发事件,即:在HTML文档里已经按照布局 规则声明了相关的自定义属性(比如data-dismiss="alert"), 然后通过这里的代码初始化默认的单击事件行为(或其他相关插 件需要用到的行为)。绑定触发事件的源码如下所示: // 绑定触发事件 // 为声明式的HTML绑定单击事件 // 在整个document对象上,检测是否有自定义属性data-dismiss="alert" // 如果有,则设置:单击的时候,关闭指定的警告框元素 $(document).on('click.bs.alert.data- api', dismiss, Alert.prototype.close) 上述代码在整个document文档上检测自定义属性data- dismiss="alert",如果有,则绑定click单击事件(在命名空间 bs.alert.data-api上),事件回调函数则是原型方法 Alert.prototype.close。这样,一旦单击了相应的元素,就会关 闭特定的警告框。 Bootstrap通过这5个通用步骤,定义了所有的插件。每个插 件在各个步骤里会有一些细节的不同,但思路都是一样的,那就 是:绑定事件,触发行为,并在jQuery上扩展fn,同时解决防冲 突的问题。大家在制作自定义插件的时候只要遵从这一思路,即 可编写出既易于维护又高质量的插件代码。 2.4.3 通用技术 根据上述JavaScript插件的实现步骤,来总结一下 JavaScript插件的通用技术,即Bootstrap的开发者在开发这些 插件时所制定的规则和遵循的标准,同时也为我们制作自定义插 件提供有力的参考。 首先,不同插件的JS代码都是单独放在一个JS文件中的,开 发人员在使用的时候可以一次性编译到Bootstrap.js,也可以单 独使用某一个或者多个JS插件文件。唯一需要注意的是:有些JS 插件依赖于其他JS插件,所以不要遗漏了依赖引用。 Bootstrap所有的JavaScript插件都可以通过配置使用,即 通过特定的HTML设置,而不需要任何JavaScript再次触发。但 如果需要启用手动触发事件的行为,可以禁用默认的行为,禁用 方法非常简单,只需要将body元素上的命名空间为data-api下的 全部事件禁用即可。代码如下所示: $(document).off('.data-api'); 如果想禁用特定插件的默认行为,只需要禁用该插件所在命 名空间下的事件即可。代码如下所示: $(document).off('.alert.data-api'); /* 禁用alert插件的所有默 认行为 */ 注意 off语法是jQuery提供的语法功能,用户在使用on进行绑定 事件的时候,可以加命名空间,比如$().on('click.alert.data- api'),这样在卸载事件的时候,如果只想卸载该元素的该特定事 件,可以使用off('click.alert.data-api')。如果不这样,仅仅使 用off('click'),这样该元素上的所有click事件都将被卸载(导致 该元素的其他click事件失效)。同理,如果执行off('.data-api') 代码,则所有在data-api命名空间下的事件都会被卸载禁用,不 管是该选择器内部的哪个元素、哪种事件。 1.可编程性 所有的插件不仅可以使用声明式定义(HTML),也可以通 过JavaScript代码全部实现。利用jQuery的链式操作,编出的代 码非常优美。示例如下所示: $(".btn.btn-danger").button("toggle").addClass("fat"); 所有的插件在使用JavaScript代码调用的时候,都提供多种 调用方式:无参数传递(即默认方式)、传递对象字面量进行初 始化参数设定、直接传入一个需要执行的方法名称字符串。示例 如下所示: $("#myModal").modal() // 默认值进行初始化 $("#myModal").modal({ keyboard: false }) // 初始化时keyboard选项值是 false $("#myModal").modal('show') // 初始化,然后立即调用show方 法 每个插件都有一个Constructor属性,用于表示原始的构造 函数,比如$.fn.alert.Constructor。另外也可以通过$('选择 符').data('bs.插件名称')的形式(如,$('[data- dismiss="alert"]').data('bs.alert'))获取该特定插件的实例。 2.防冲突 和jQuery一样,Bootstrap插件可以和其他同类插件共存, 为了防止$.fn.下的Bootstrap插件被覆盖,Bootstrap也提供了 防冲突功能(No conflict),用于定义别名。示例用法如下: var bootstrapButton = $.fn.button.noConflict() // 返回$.fn.button对象给bootstrapButton变量 $.fn.bootstrapBtn = bootstrapButton // 将button对象给bootstrapButton变量赋予一个新插件名称$().bootstrapBtn,这时$(). // bootstrapBtn就拥有了先前button的所有功能了 3.自定义事件 Bootstrap为很多插件都提供了自定义事件功能,比 如,modal弹窗里提供的show和shown事件,show事件在弹窗 初始化(即将弹出)的时候触发,而shown事件则是在弹窗初始 化完毕后(完全弹出)才触发。 在新版插件里,所有的事件都是命名空间化的,即单个事件 都要放在某个命名空间下,比如,show.bs.modal。 所有的插件都提供了preventDefault功能,用于阻止继续执 行后续的代码。例如,可以在modal弹窗的show事件里进行判 断,如果不符合条件就拒绝显示弹窗。示例代码如下所示: $('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() // 拒绝显示弹窗 }) 2.4.4 不足 虽然Bootstrap为我们提供了丰富多彩的插件,但是其插件 代码在编程规范上却存在很多不足。这里所谓的不足是指:虽然 编译器可以识别这些代码,但它不符合大多数JavaScript开发者 所使用的规范。Bootstrap中不规范的代码示例如下: var Modal = function (element, options) { this.options = options // 这里少了分号 this.$element = $(element).delegate('[data- dismiss="modal"]', 'click.dismiss. modal', $.proxy(this.hide, this)) // 这里少了分号 this.$backdrop = // 这里使用了链式赋值,其值是this.isShown的 null值 this.isShown = null // 这里少了分号 if (this.options.remote) this.$element.find('.modal- body').load(this.options. remote) // if语句应该用花括号括住 } 通过注释大家可以发现,其中省略了很多分号,并且使用了 简便方法。虽然现代的JavaScript解释器会对这样的代码进行正 常解释,但是其可读性变差。建议在编写自定义插件的时候参照 如下示例代码: var Modal = function (element, options) { this.options = options; this.$element = $(element).delegate('[data- dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)); // 复杂的语句最好有点注释 this.$backdrop = ""; this.isShown = null; if (this.options.remote) { this.$element.find('.modal-body').load(this.options.remote); } } 2.5 禁用响应式布局 Bootstrap是一个移动先行的框架,默认情况下,针对不同 的屏幕尺寸,会自动地调整页面,使其在不同尺寸的屏幕上都表 现得很好。但是,如果不想使用这种特性,也可以禁用它。下面 列出了禁用响应式布局的步骤: 1)删除名称为viewpot的meta元素,例如:。 2)为.container设置一个固定的宽度值,从而覆盖框架的默 认width设置,例如width: 970px!important;。并且要确保这 些设置全部放在默认的Bootstrap CSS后面。 3)如果使用了导航条组件,还需要移除所有的折叠行为和 展开行为。 4)对于栅格布局,额外增加.col-xs-*样式,或替换.col- md-*和.col-lg-*样式。不要太担心,超小屏幕设备的栅格系统 样式可以适应于所有分辨率的环境。 对于IE8来说,由于仍然需要媒体查询语法,所以还需要引 入Respond.js文件,这样就禁用了Bootstrap对小屏幕设备的响 应式支持。 第3章 CSS布局 本章的内容是Bootstrap三大核心内容的基础,即基础的 CSS布局语法。其包括基础排版(Typography)、代码 (Code)、表格(Tables)、表单(Forms)、按钮 (Buttons)、图片(Images)、辅助类(Helper Classes)和 响应式设计(Responsive utilities)。这些基础的布局语法都是 通过CSS最基础、最简单的组合来实现的,通过这些基础而又核 心的布局语法,不需要太多时间,即可快速上手,制作出比较精 美的页面。 3.1 概述 Bootstrap 3.x的目标是:简洁、直观、强悍的前端开发框 架,让Web开发更迅速、简单。在使用之前,我们需要先了解一 下Bootstrap的基础内容。 1.HTML5文档类型 由于Bootstrap使用了HTML5特定的HTML元素和CSS属 性,所以使用Bootstrap的时候,所有的HTML文件都需要在其 顶部引用HTML5的DOCTYPE属性,如下所示: ... 2.移动先行 Bootstrap2.x系列版本中,在框架里为移动特性添加了一些 可选支持。而在Bootstrap3.x版本中,作者重写了与移动特性相 关的内容,与可选特性相比,新版本将移动特性加入了核心框 架。实际上,新版Bootstrap是一个移动先行的框架集,移动先 行的影子在整个框架集都可以发现,如下所示: 在移动设备浏览器上,通过为viewport meta标签添加的 user-scalable=no可以禁用其缩放(zooming)功能。禁用缩放 功能后,用户只能滚动屏幕,这样能让你的网站看上去更像原生 应用。注意,我们并不推荐所有网站都使用这种方式,是否使用 这种方式要视情况而定。 3.响应式图片 为了能对图片的大小进行自适应缩放,Bootstrap在3.x版里 添加了一个.img-responsive样式,其实质是为图片设置了max- width: 100%;和height: auto;属性,以便可以让图片按比例 缩放,并且不超过其父元素的尺寸,所以说该样式对响应式布局 的支持更加友好了。使用的时候,只需要在相应图片元素上加一 个.img-responsive样式即可(而默认情况下,如果不加该样 式,则显示还是按照默认设置来进行的)。.img-responsive样 式实现代码如下所示: // 源码310行 .img-responsive { display: block; max-width: 100%; height: auto; } 4.排版与链接 Bootstrap为网页设置了一些基本的全局样式、排版和链接 风格,尤其是其具有如下特性: ❑在body元素上取消了margin设置,改为默认为 0,margin: 0。 ❑在body元素上设置了背景色为白色,background-color: #ffffff。 ❑在布局排版方面,字体、字体大小、行间距使用的标准值 分别如下: font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; // 20除14 所有的默认基本样式都可以在normalize.less和 scaffolding.less文件里找到。 5.Normalize.css 为了改进跨浏览器呈现,Bootstrap使用了第三方CSS库 Normalize。Normalize.css是一个专门用于将不同浏览器的默认 CSS特性设置为统一效果的CSS库,以便开发人员使用更标准的 方式去访问或设置页面元素。该项目只专注于样式,比如button 按钮在不同浏览器上效果都是一致的。详细内容可以查看源码里 的Normalize.less文件。 项目地址如下:http: //necolas.github.io/normalize.css/。 6.居中容器 一个页面(或元素)要居中显示,可以在外部容器上简单应 用.container样式即可。由于栅格系统依赖于外部容器的大小设 置,所以默认情况下container样式有一个max-width属性用于 限制栅格系统的最大宽度。示例代码如下所示:
...
container样式的源码如下: // 源码734行 .container { padding-right: 15px; padding-left: 15px; margin-right: auto; /*左右居中的设置*/ margin-left: auto; } 注意 container的max-width大小和设备的最大分辨率有关,平 板电脑一般为728像素,普通桌面浏览器一般为940像素,大型浏 览器为1170像素。也可以通过重载覆盖的方式修改max-width。 3.2 基础排版 源码文件:type.less CSS文件:bootstrap.css 349行开始 本节主要是讲述HTML页面基础排版(Typography)方面 所需要的各种技能,比如head标题(h1至h6)、地址、列表、 文本块等。在平时的工作中,大家可能已经在使用了,但是 Bootstrap在此基础上做了不少优化工作,使其更方便使用。这 里只是简单叙述一下各项语法的示例和优化方式。 3.2.1 标题 Bootstrap为传统的标题元素h1~h6重新定义了标准的样 式,使得在所有浏览器下显示效果都一样,具体定义规则如表3- 1所示。 标题元素的用法和平时的用法一致,示例如下所示:

Bootstrap权威指南

Bootstrap权威指南

Bootstrap权威指南

Bootstrap权威指南

Bootstrap权威指南
Bootstrap权威指南
Bootstrap还同步定义了6个class样式(.h1~.h6),以便 在非标题元素下使用相同的样式,唯一的不同是class样式没有定 义margin-top和margin-bottom。如下所示: Bootstrap权威指南
Bootstrap权威指南
Bootstrap权威指南
Bootstrap权威指南
Bootstrap权威指南
Bootstrap权威指南
使用h元素和h样式进行显示时,两者的区别如图3-1所示。 图3-1 h元素和h样式的运行效果比较 大部分情况下,在标题元素里可能会应用元素,以 便显示稍微小一点的字体。Bootstrap为此也特别定义了样式, 如图3-2所示。具体内容如下: 图3-2 small元素分别在h1~h6元素内的效果 ❑所有标题元素里的内容的字体颜色都是灰色 (#999999),行间距都为1。 ❑内的文本字体在h1、h2、h3内是当前元素所对应 字体大小的65%;而在h4、h5、h6下则是75%(详细见448行和 464行定义的small样式)。 3.2.2 页面主题 默认情况下,Bootstrap为全局设置的字体大小font-size为 14像素,间距line-height为字体大小的1.428倍(即20像素)。 该设置应用于元素和所有的段落上。 // 源码275行 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333; background-color: #fff; } 另外,

元素内的段落会有一个额外的margin-bottom, 大小是行间距的一半(默认为10px),详细见CSS文件 bootstrap.css中的497行。 // 源码464行 p { margin: 0 0 10px; } 如果想让一个段落突出显示,可以使用.lead样式,其作用主 要是增大字体大小、粗细、行间距和margin-bottom。用法如 下:

...

lead样式的代码实现如下所示: // 源码467行 .lead { margin-bottom: 20px; font-size: 16px; font-weight: 200; line-height: 1.4; } @media (min-width: 768px) { /*大中型浏览器字体稍大*/ .lead { font-size: 21px; } } Bootstrap的排版设置默认值存储在variables.less文件里的 两个LESS变量里:@font-size-base和@line-height-base。 第一个用于设置字体大小,第二个用于设置行间距。系统默认使 用这两个值产生整个页面相应的margin、padding和line- height。通过修改这两个值后,再重新编译,从而制定自己的 Bootstrap版本。 3.2.3 强调文本 Bootstrap将默认的文本强调元素进行了轻量级实现,这些 元素分别为:small、strong、em、cite。 // 源码56行 b,strong { font-weight: bold; /* 粗体 */} // 源码478行 small,.small { font-size: 85%; /* 标准字体的85% */} cite { font-style: normal; /* 正常字体*/} 同样的原理,Bootstrap也为对齐方式定义了简单而又明了 的4个样式以便使用。使用方式如下:

JavaScript编程精解

JavaScript设计模式

JavaScript启示录

Backbone应用开发实战

3.2.4 缩略语 Bootstrap在abbr元素上实现了缩略词的功能,即鼠标移动 到缩略词上时,就显示声明在title里的属性值。效果为:缩略词 下面有虚横线,鼠标移动到缩略词上时有手形图标。其源码如下 所示: // 源码621行 abbr[title], abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #999999; } .initialism { font-size: 90%; text-transform: uppercase; } 从源码可以看出,有两种方式可以使用,一种是直接使用 abbr,另外一种是应用.initialism样式以使字体稍微缩小一点。 JavaScript设计模 式 HTML 3.2.5 地址元素 Bootstrap为地址元素address定义了一个简单通用的样 式,其主要是行间距和底部的margin。源码如下: // 源码682行 address { margin-bottom: 20px; font-style: normal; line-height: 1.428571429; } address的用法也比较简单,每一行用
结尾即可。
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
汤姆大叔
tomxu@outlook.com
3.2.6 引用 在
元素里进行引用,可以引用任意HTML内 容,但一般推荐使用

。Bootstrap也为此定义了一个通用的 样式,用法如下所示:

不愤不启,不悱不发。举一隅,不以三隅反,则吾不复也。

运行上述代码后会看到图3-3所示的效果。 图3-3 blockquote元素运行效果 如果想加上一些文字的出处作为注释,则可以配合使用small 和cite元素,效果会更好,如图3-4所示。

不愤不启,不悱不发。举一隅,不以三隅反,则吾不复也。

出自 论语
图3-4 配合small和cite的运行效果 另外,Bootstrap还提供了一个.pull-right样式用于右对 齐,以适应不同的排版方式。

不愤不启,不悱不发。举一隅,不以三隅反,则吾不复也。

出自 论语
上述代码运行后的效果如图3-5所示。 图3-5 右对齐运行效果 引用元素的主要样式代码如下: // 源码630行 blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; } /* 此处省略部分代码 */ .blockquote-reverse, blockquote.pull-right { padding-right: 15px; padding-left: 0; text-align: right; border-right: 5px solid #eee; /* 右边显示的竖线 */ border-left: 0; } 3.2.7 列表 Bootstrap提供了6种形式的列表,分别是:普通列表、有序 列表、去点列表、内联列表、描述列表和水平描述列表。 1.普通列表 普通列表的使用方式和人们平时用的一样,Bootstrap只是 在此基础上做了一些细微的优化。示例如下:
  • ...
运行效果如图3-6所示。 图3-6 普通列表在Bootstrap样式和默认样式下的运行效果 由图3-6所示的运行效果可以看出,Bootstrap在margin和 行间距做了一些微调。源码如下: // 源码566行 ul,ol { margin-top: 0; margin-bottom: 10px; } ul ul,ol ul,ul ol,ol ol { margin-bottom: 0; } 2.有序列表 根据上述源码,可以看出使用了ol元素的有序列表,也是做 了一些微调,看起来比原来的默认显示柔和了一些。示例用法如 下:
  1. ...
运行效果如图3-7所示。 图3-7 有序列表在Bootstrap样式和默认样式下的运行效果 3.去点列表 Bootstrap提供了一个去除默认列表样式的风格,即去除普 通列表项前面的圆点。用法如下:
  • ...
    • ...
      • ...
      • ...
运行效果如图3-8所示。 图3-8 去点列表的运行效果 去点列表的list-unstyled样式源码如下: // 源码577行 .list-unstyled { padding-left: 0; list-style: none; } 由运行效果图和源码可以看出,去除圆点只是去除了当前元 素节点下的li旁边的圆点,如果li元素里有另外一个嵌套的ul或者 ol,将不会起任何作用。也就是说如果要让嵌套的列表项也去除 圆点(或其他标示符),则还需要单独应用.list-unstyled样式。 4.内联列表 Bootstrap定义了一个list-inline样式用于实现内联列表, 也就是将列表项水平显示,实现效果如图3-9所示。 图3-9 水平列表的运行效果 list-inline样式的源码如下: // 源码581行 .list-inline { padding-left: 0; list-style: none; } .list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; } .list-inline > li:first-child { padding-left: 0;} 5.定义列表 Bootstrap对默认的dl定义列表也做了一些轻微的调整,主 要是调整行间距和字体加粗。用法和对比效果如下:
...
...
运用上述用法后的效果如图3-10所示。 图3-10 定义列表在Bootstrap样式和默认样式下的运行效果 定义列表样式的处理源码如下: // 源码593行 dl { margin-top: 0; margin-bottom: 20px;} dt,dd { line-height: 1.428571429;} dt { font-weight: bold;} dd { margin-left: 0;} 6.水平定义列表 Bootstrap提供了一个dl-horizontal样式,通过在dl元素上 应用该class,实现了列表水平显示的效果。用法如下:
...
...
运用上述用法后的效果如图3-11所示。 图3-11 运行效果 水平定义列表的主要实现方式是将dt进行left浮动,同时设 置宽度为160像素,再将dd的margin-left设置为180像素,达到 水平的效果。值得注意的是,如果dt标题超出长度将被自动隐 藏。详细见效果图的第四项标题和源码里的text-overflow设 置。 // 源码607行 @media (min-width: 768px) { /*这种样式只能在平板电脑或更大的浏览器上才能用 */ .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; /* 超过160像素就自动隐藏 */ white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; } } 3.3 代码 源码文件:code.less CSS文件:bootstrap.css 103行开始 本小节的内容比较简单,主要是介绍代码显示的问题。 Bootstrap对代码显示提供了以下3种方式: ❑使用元素显示单行内联代码 ❑使用元素显示用户输入代码 ❑使用
元素新生多行代码块  代码样式的用法示例如下:  3.3.1 内联代码  单行的内联代码需要使用code元素包含。用法如下:  内联代码效果主要是设置code元素的背景颜色和其内部的文  字颜色而已。源码如下:  // 源码693行  code {    padding: 2px 4px;    font-size: 90%;    color: #c7254e;                       /* 文字颜色为深红*/    white-space: nowrap;    background-color: #f9f2f4;            /* 背景颜色为浅红*/    border-radius: 4px;                   /* 设置圆角*/  }  3.3.2 用户输入代码  元素包含的内容是表示该内容需要用户键盘输入,所  以一般是设置成input的效果,用法和code类似,其实现源码如  下:  // 源码701行  kbd {    padding: 2px 4px;    font-size: 90%;    color: #fff;                                           /* 文字颜色为白色  */    background-color: #333;                                /* 背景颜色为深黑  色*/    border-radius: 3px;                                    /* 设置圆角*/    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);         /* 设置阴影*/  }  3.3.3 多行代码块  pre元素一般用于显示大块的代码段,并保证原有格式不  变。另外可以在pre元素上应用.pre-scrollable样式,则可以控  制该区域最大高度为340像素,并可以在y方向滚动。  // 源码709行  pre {    display: block;    /* 省略部分代码*/    word-break: break-all;    word-wrap: break-word;    background-color: #f5f5f5;                                 /* 背景颜色为  浅灰色*/    border: 1px solid #ccc;                                    /* 边框为深灰  色*/    border-radius: 4px;  }  .pre-scrollable {    max-height: 340px;                                         /* 固定高度  */    overflow-y: scroll;                                        /* 竖向可滚动  */  }  3.4 表格  源码文件:table.less  CSS文件:bootstrap.css 1401行开始  在表格组件里,Bootstrap提供了1种基础.table样式、4种  附加样式(.table-striped、.table-bordered、.table-  hover、.table-condensed)以及一个支持响应式布局  的.table-responsive容器样式。从第2章的设计思想我们可以知  道,每种附加特效都是在.table样式的基础上联合应用才生效  的。  3.4.1 基础样式  只需要在table元素上应用.table样式即可制作出比较漂亮的  表格。示例如下:       ...  
运行效果如图3-12所示。 图3-12 基础表格运行效果 .table样式的主要作用有3个:增加单元格的内边距、在 thead的底部设置一条2像素的粗线,以及在每行记录的顶部都有 1条1个像素的细线。主要源码如下: // 源码1401行 table { max-width: 100%; background-color: transparent;} th { text-align: left;} .table { width: 100%; margin-bottom: 20px;} .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 8px; /*设置单元格的内边距*/ line-height: 1.428571429; vertical-align: top; border-top: 1px solid #ddd; /* 每行记录的顶部都有1条1个像素宽的横 线 */ } .table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #ddd; /* thead有1条2个像素宽的横线 */ } /*省略部分样式*/ .table > tbody + tbody { border-top: 2px solid #ddd; /* 如果表格里有2个tbody,两者之间也会有1条2个像 素宽的横线 */ } 3.4.2 带背景条纹的表格 背景条纹表格,就是在现有.table样式的基础上再应用一 个.table-striped样式,其添加了隔行加背景色的设置。使用方 式如下: ...
运行效果如图3-13所示。 图3-13 条纹背景表格的运行效果 隔行换色的实现方式是利用了CSS 3里的: nth-child选择器 来实现的,所以不支持IE 8及以下版本。源码如下: // 源码1464行 .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; /* 如果需要更换颜色,需要重载覆盖才行(详情阅读第2章的2.3节 组件架构) */ } 3.4.3 带边框的表格 在该特效下,Bootstrap为表格所有的单元格提供了1条1像 素宽的边框。使用方式如下: ...
运行效果如图3-14所示。 图3-14 带边框的表格运行效果 v2.x版本的边框表格带有圆角,其实现方式非常复杂。而最 新的3.x版本直接抛弃了圆角,这样其实现方式就简洁了许多,主 要就是设置了整体表格和单元格的边框。实现源码如下: // 源码1449行 .table-bordered { border: 1px solid #dddddd; /* 整体表格边框 */ } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border: 1px solid #dddddd; /* 单元格边框 */ } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom-width: 2px; /* 表头底部边框 */ } 3.4.4 鼠标悬停高亮的表格 在表格中的记录上,当鼠标移动上去时对应的部分能够换个 颜色的话,那就会显得很有动感,并且有高亮显示的功能。 Bootstrap当然也不会错过这个亮点,其提供了一个.table- hover样式。在Bootstrap下的使用方式如下: ...
悬停高亮的实现方式是在tr的hover事件中,设置tr元素内 所有的td和th的背景色为新背景色。同样,如果需要更换颜色, 需要对它进行重载覆盖设置。如下所示: // 源码1468行 .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #f5f5f5; } 3.4.5 紧凑型表格 所谓紧凑型表格,即表格的显示比普通表格稍微紧凑一些, 实现原理是减少单元格的内边距。使用方式如下: ...
运行效果如图3-15所示。 图3-15 紧凑型表格的运行效果 默认情况下表格的padding是8像素,紧凑型表格的padding 值是5像素。源码如下: // 源码1441行 .table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td { padding: 5px; } 以上4种特效的样式可以混合在一起使用,从而制作出复杂 而精美的表格。 3.4.6 行级元素样式 Bootstrap为表格的tr元素提供了5种额外的样式,用于控制 tr的背景颜色。样式如表3-2所示。 其使用方式非常简单,在tr元素(或者td元素)上应用相应 的class样式即可。示例如下: 1 JavaScript编程精解 机械工业出版社 汤姆大叔(译) 运行上述示例后的效果如图3-16所示。 图3-16 行级元素运行效果 除了active样式以外,其他4个样式在和.table-hover样式 一起用的时候,Bootstrap也相应地设置了鼠标悬停高亮的颜 色,所以如果需要添加额外颜色的tr行级样式,也需要注意这个 设置。示例源码如下: // 源码1563行 .table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, /* 此处省略了一些选择符*/ .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td { background-color: #f2dede; /* danger样式的tr背景色*/ } .table-hover > tbody > tr > td.danger:hover, /* 此处省略了一些选择符*/ .table-hover > tbody > tr.danger:hover > td { background-color: #ebcccc; /* table-hover和danger一起使用时,鼠标悬停时的tr 背景色*/ } 3.4.7 响应式表格 随着响应式设计的大量需求,Bootstrap为表格也提供了一 个响应式设计的容器(.table-responsive样式),将.table- responsive样式包装在.table样式外部即可创建响应式表格,其 会在小屏幕设备上(小于768像素)水平滚动。而当屏幕大于768 像素宽度时,水平滚动条消失。示例如下:
...
运行效果如图3-17所示。 响应式表格的实现原理是利用了CSS的媒体查询特性,在小 于768像素的设备上应用@media(max-width: 767px)里的样 式。该样式主要有3个方面的设置: ❑对.table-responsive容器边框以及滚动条进行了设置。 ❑把原有.table样式的底部外边距margin-bottom从20像素 改为了0像素,其目的是消除滚动条带来的上下高度差,并 在.table-responsive样式上又设置了一个margin-bottom: 15px,以避免和容器外部的下一个元素重叠。 图3-17 响应式表格的运行效果 ❑将所有单元格的文本设置成不自动换行,以保留原有样 式。 实现响应式的详细源码如下: // 源码1583行 @media (max-width: 767px) { .table-responsive { width: 100%; margin-bottom: 15px; /* 设置底部外边距,避免重叠 */ overflow-x: scroll; /* 超出范围,水平可滚动 */ overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; /* 设置1像素宽的边框 */ } .table-responsive > .table { margin-bottom: 0; } .table-responsive > .table > thead > tr > th, /* 省略部分样式 */ .table-responsive > .table > tfoot > tr > td { white-space: nowrap; /* 确保单元格中的文本不会换行,直到遇到
标 签为止*/ } .table-responsive > .table-bordered { border: 0; } 通过上述代码,可以看到.table-responsive给自己加了一 个1px的外边框。如果在.table上再使用.table-bordered样式的 话,就会和表格的外边框重合了,变粗了,可能会想象成如图3- 18所示的效果。 图3-18 响应式样式和table-bordered样式叠加的运行效果 聪明的Bootstrap开发团队怎么会犯这样低级的错误呢?所 以他们在该响应式样式的内部,针对.table-bordered样式又进 行了去边框设置。源码如下: // 源码1604行 .table-responsive > .table-bordered { border: 0; /*将整个表格的外边框设置为0像素*/ } .table-responsive > .table-bordered > tbody > tr > th:first-child, /*此处省略一些选择符*/ .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child { border-left: 0; /*将所有tr的第一个单元格(即最左边的一列)的左边框都置为0像素*/ } .table-responsive > .table-bordered > tbody > tr > th:last-child, /*此处省略一些选择符*/ .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child { border-right: 0; /*将所有tr的最后一个单元格(即最右边的一列)的右边框都设置为0像 素*/ } .table-responsive > .table-bordered > tbody > tr:last-child > th, /*此处省略一些选择符*/ .table-responsive > .table-bordered > tfoot > tr:last-child > td { border-bottom: 0; /*将最后一行tr里的单元格的底部边框设置为0像素*/ } 运行效果如图3-19所示。 图3-19 去边框处理后的运行效果 3.5 表单 源码文件:form.less CSS文件:bootstrap.css 1630行开始 表单(Form)是HTML网页交互中最重要的部分,同时也 是Bootstrap框架中的核心内容,表单提供了丰富的样式(基 础、内联、横向)。结合各种各样的表单控件,利用各种表单控 件不同的状态、大小、分组,可以组合出绚丽多彩的表单。下面 详细介绍表单的各种功能。 3.5.1 基础表单 Bootstrap对基础表单未做太多的定制化效果设计,默认都 使用全局设置,只是对表单内的fieldset、legend、label标签进 行了设定,将这些元素的margin、padding、border等进行了细 化设置。详细请参考源码1854行以后的代码。 如果在select、input、textarea元素上应用了.form- control样式,显示的宽度会变成100%,并且placeholder的颜 色都设置成了#999999。主要源码如下: // 源码1689行 .form-control { display: block; width: 100%; /* 设置宽度是100% */ /* 省略部分设置 */ border: 1px solid #ccc; /* 边框设置 */ border-radius: 4px; /* 圆角设置*/ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in- out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in- out .15s; } .form-control:focus { border-color: #66afe9; /* 作用域得到焦点时的边框颜色 */ outline: 0; -webkit-box- shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box- shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } .form-control:-moz-placeholder { color: #999; /* placeholder的文本颜 色:moz浏览器*/} .form-control::-moz-placeholder { color: #999; /* placeholder的文本颜色:moz浏览器 */ opacity: 1;} .form-control:-ms-input-placeholder { color: #999; /* placeholder的文本颜 色:IE浏览器*/} .form-control::-webkit-input-placeholder { color: #999; /* placeholder的文本颜 色:webkit浏览器*/} 使用方式如下:
用户登录
运行效果如图3-20所示。 图3-20 普通表单运行效果 注意 在上例中,提示语label和input元素放在一个样式为.form- group的div里了。.form-group样式提供了一个margin- bottom:15px的底部外边距,所以可以很清晰地看到每一组控 件。 3.5.2 内联表单 有的时候,我们可能需要一个所有控件都在一行中的表单, 比如图3-21所示的登录。要实现这种内联样式效果,只需要在普 通的form元素上应用一个.form-inline样式,即可将表单内的元 素设置为内联样式。 图3-21 内联表单运行效果 水平线上的唯一因素就是要控制元素的显示方式为display: inline-block,所以只需要为相应的子元素设置display属性即 可。但需要注意的是,该.form-inline样式只能在大于768像素的 浏览器上才能应用。源码如下: // 源码1927行 @media (min-width: 768px) { /* 大于768像素的浏览器才生效*/ .form-inline .form-group { display: inline-block; /* 内联样式显示*/ margin-bottom: 0; vertical-align: middle; } .form-inline .form-control { display: inline-block; /* 内联样式显示,但由于form-control样式设置了100%的宽度,所以没什么 用*/ width: auto; vertical-align: middle; } .form-inline .radio, .form-inline .checkbox { display: inline-block; padding-left: 0; margin-top: 0; /* 确保上下居中*/ margin-bottom: 0; vertical-align: middle; } .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: none; /* 不使用浮动定位*/ margin-left: 0; } .form-inline .has-feedback .form-control-feedback { top: 0; } } 要注意,由于默认的样式为.form-control,且其input、 select和textarea的宽度都是100%,所以在使用内联表单的时候 是无效的,需要对这些控件元素单独设置宽度width,或者外面 再加上一层带有.form-group样式的div元素。示例如下:
但这种情况下,如果再设置一个label的话,input又换行 了。所以如果非要label的话,那就只能在input所在div元素的上 边再加一个div元素用于包含label标签。比如:
注意 如果没有为每个输入控件设置label,屏幕阅读器将无法正确 识别。对于这种内联表单,可以通过为label设置.sr-only样式将 其隐藏。比如:
3.5.3 横向表单 横向表单与内联表单的使用方式不太一样,其不能在form元 素上简单应用一个.form-horizontal样式,这是因为.form- horizontal样式本身没有做什么特殊的设置,只简单设置了一下 相关的padding和margin值。源码如下: // 源码1959行 .form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline { /* 简单设置了一下padding和margin */ padding-top: 7px; margin-top: 0; margin-bottom: 0; } .form-horizontal .radio,.form-horizontal .checkbox { min-height: 27px; /* 设置最小高度 */} .form-horizontal .form-group { /* 简单设置了一下margin */ margin-right: -15px; margin-left: -15px; } .form-horizontal .form-control-static { padding-top: 7px; } @media (min-width: 768px) { .form-horizontal .control-label { text-align: right; /* 大屏幕下,label可以居右显 示 */ } } 运行效果如图3-22所示。 图3-22 横向表单运行效果 所以,要实现横向表单,不仅要应用上述样式,还要使用 Bootstrap预置的栅格类,以便将label和控件水平并排布局。由 于.form-horizontal样式改变了.form-group的行为,将其表现 得像栅格系统中的行(row)一样,因此就无需再使用.row样式 了。示例如下:
3.5.4 表单控件 在默认的Bootstrap源码里,对input、select、testarea都 有良好的支持,尤其是对现有HTML5语法下的input都进行了支 持(如type为text、password、datetime、datetime-local、 date、month、time、week、number、email、url、 search、tel和color的元素)。 1.input元素 在使用input元素的时候,必须声明type类型,否则可能会 引起其他问题,因为Bootstrap在定义这些样式的时候都指定了 type类型,比如,input[type="text"]。 2.select元素 下拉列表select元素的使用方式和原始的一致,多行选择设 置mulitiple属性为multiple即可。Bootstrap会为这些默认的元 素提供统一风格的显示。示例如下: 3.textarea元素 同样,在textarea元素里定义了rows数字即可定义大文本框 的高度,定义cols可以定义大文本框的宽度。但是如果在该框架 上应用了.form-control样式,则cols属性不起作用,因 为.form-control样式的表单控件都设置了100%的宽度(或 auto)。所以大家在使用时,一旦设置了该样式,就不需要再设 置cols属性了。如: 4.checkbox和radio checkbox和radio是input元素里两个非常特殊的type,通 常在使用的过程中和label文字搭配,但通常会出现左右边距对不 齐的问题。为此,Bootstrap进行了标准设置,开发人员在使用 的过程中遵循如下方式即可:
即使用的时候,每个input外部都要用label包住,并且在最 外层用容器元素包住,并应用相应的.checkbox和.radio样式。 主要源码如下: // 源码1741行 .radio, .checkbox { /* 让单选框和复选框都能左右和上下居中 */ display: block; min-height: 20px; padding-left: 20px; margin-top: 10px; margin-bottom: 10px; } .radio label, .checkbox label { /* 内部有label的话,内联显示 */ display: inline; font-weight: normal; cursor: pointer; } 有些checkbox或者radio元素中文本很少,可能需要横向显 示,为此Bootstrap也提供了相应的内联样式.checkbox-inline 和.radio-inline,效果如图3-23所示。 图3-23 checkbox和radio元素运行效果 使用方式如下: 实现源码如下: // 源码1766行 .radio-inline, .checkbox-inline { /* 在其他元素上设置*-inline样式的话,也可以让多个控件水平在一行 中显示 */ display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: normal; vertical-align: middle; /* 垂直居中 */ cursor: pointer; } .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-top: 0; margin-left: 10px; /* 每个选项间距10px */ } 3.5.5 控件状态 每个控件(尤其是input)在使用的过程中,可能都会有很 多种状态,比如输入内容的时候有焦点提示,输错的时候有出错 提示等。Bootstrap提供了3种状态的样式可供使用,分别是:焦 点状态、禁用状态、验证提示状态。 1.焦点状态 焦点状态的实现方式是在选择器: focus上删除默认的 outline样式,重新应用一个新的box-shadow样式,从而实现焦 点状态下,input出现柔和的阴影边框(注意,该效果必须使 用.form-control样式才行)。运行效果如图3-24所示。 图3-24 焦点状态时的运行效果 该效果实现源码如下: // 源码1706行 .form-control:focus { border-color: #66afe9; /* 作用域得到焦点时的边框颜色*/ outline: 0; -webkit-box- shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box- shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } 从图3-24中可以看出,radio和checkbox的焦点效果和普通 input的不太一样。Bootstrap对file、radio、checkbox的焦点 效果做了一些特殊处理,以便更圆形化。源码如下: // 源码1675行 input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } 2.禁用状态 禁用状态的实现方式主要是完善默认disabled状态的显示状 态,使用方式和普通的disabled一样,只需要在禁用元素上使用 disabled属性即可。使用方法如下: 其源码主要是设置了不准输入的鼠标样式和背景颜色(灰 色)。注意,只有带.form-control样式的控件才会更改背景 色。请看下面的源码: // 源码1725行 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { /* 若form-control控件或fieldset元素被禁用,显示不允许输入手形图标*/ cursor: not-allowed; background-color: #eee; opacity: 1; } 而如果不使用上述样式,直接在普通的元素上使用disabled 属性,则只会显示一个不能输入的手形图标。源码如下: // 源码1780行 input[type="radio"][disabled], input[type="checkbox"][disabled], .radio[disabled], .radio-inline[disabled], .checkbox[disabled], .checkbox-inline[disabled], fieldset[disabled] input[type="radio"], fieldset[disabled] input[type="checkbox"], fieldset[disabled] .radio, fieldset[disabled] .radio-inline, fieldset[disabled] .checkbox, fieldset[disabled] .checkbox-inline { cursor: not-allowed; } 从上述源码可以看出,fieldset如果使用了disabled属性, 则fieldset内部的input、select、textarea或应用了.form- control样式的其他控件也将为禁用状态。让我们来验证一下,示 例如下:
运行效果如图3-25所示。我们发现大部分都被禁用了,但是 legend内的input却没有被禁用,依然可以输入文本,这是因为 这是HTML5的一个限制,即fieldset内的第一个legend元素不受 disabled的影响。Bootstrap为了遵守这一规则(其实实现起来 也很复杂,要用JavaScript代码进行实现)就继续保持原状了, 大家使用过程中要特别注意。 图3-25 禁用状态时的运行效果 注意 由于IE不支持fieldset下的disabled属性(比如,IE10不支 持input和button),所以IE下的开发者需要用JavaScript代码 再进行特殊处理。 fieldset上应用disabled时,fieldset内部的a标签在所有浏 览器下的单击行为都不能被禁用(比如:),需要使用JavaScript代码再进行特殊处理。 3.验证提示状态 在填写表单的时候,经常要提示用户其输入内容是否合法, 长度是否够用,再次输入的密码是否和第一次输入的密码一致, 或者输入的用户名存在还是不存在等问题,不同的提示可能需要 不同的提示状态(如,颜色、边框、提示语等)。Bootstrap提 供了.has-warning、.has-error、.has-success三种样式用于分 别表示警告(黄色)、错误(红色)、成功(绿色)语境的内 容。代码如下:
从示例代码可以看到,使用了form-group、control- label、form-control标签进行分组(关于控件分组,会在后续 章节进行解释),在form-group平级的div元素上应用has-*** 样式,然后在input元素上应用form-control样式,实现效果如 图3-26所示。 图3-26 验证提示的运行效果 has-error和has-success的实现方式相同,只是对文字、 边框和阴影设置的颜色不同。has-warning的实现源码如下: // 源码1866行 .has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox, .has-warning .radio-inline, .has-warning .checkbox-inline { /* has-warning容器内部的控件文本颜色统一设置*/ color: #8a6d3b; /* 不使用control-label,使用其他的(如help-block)也可以 */ } .has-warning .form-control { /* 为has-warning容器内部的form-control控件设置边框和阴影效果*/ border-color: #8a6d3b; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .has-warning .form-control:focus { /* has-warning容器内部的控件在得到焦点时的效果颜色更深*/ border-color: #66512c; -webkit-box- shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b; box- shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b; } .has-warning .input-group-addon {/* addon的背景色和字体颜色也要同步设置*/ color: #8a6d3b; background-color: #fcf8e3; border-color: #8a6d3b; } 注意 上述.input-group-addon样式的效果会在4.5节进行讲述。 有的时候,我们在验证状态时提供所对应状态的小图标,以 便能够直观地显示,实现效果如图3-27所示。 图3-27 小图标提示的运行效果 从运行效果可以看到,小图标肯定是固定在输入框的右边 的。要实现这种效果,通常要解决两个问题:首先设置输入框父 元素的定位方式为相对定位,然后设置这种小图标的定位方式为 绝对定位(并设置right值)。 Bootstrap针对该功能提供了特殊的feedback样式,用于实 现该效果。其用法如下:
该效果运用了两个样式:父容器上的has-feedback样式用 于设置定位方式;小图标元素上的form-control-feedback样式 用于设置图标的显示大小等。两个样式的源码正好符合我们前面 所说的要求,具体源码如下: // 源码1824行 .has-feedback { position: relative; /* 相对定位,用于设置input元素的父容器 的定位方式*/} .has-feedback .form-control { padding-right: 42.5px; /* 右内边距的设置,以便可以显 示小图标*/ } .has-feedback .form-control-feedback { /* 设置小图标的显示方式*/ position: absolute;/* 绝对定位*/ top: 25px; right: 0; /* 右对齐*/ display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; } .has-success .form-control-feedback { color: #3c763d; /* 验证通过时图标的 显示颜色 */} .has-warning .form-control-feedback { color: #8a6d3b; /* 验证警告时图标的 显示颜色 */} .has-error .form-control-feedback { color: #a94442; /* 验证错误时图标的显示 颜色 */} 上述源码的最后3行分别设置了不同验证状态下的小图标的 颜色。 3.5.6 控件大小 Bootstrap提供了两个样式用于设置稍大或者稍小的input输 入框,分别是:.input-lg和.input-sm。使用方式如下: 运行上述样式后的效果如图3-28所示。 图3-28 3种大小输入框的运行效果 控件大小的实现思路是给input输入框设定不同大小的 padding、font-size、border-radius值。从如下源码也可以看 出,.input-lg和.input-sm样式不仅适用于input,也适用于 select和textarea元素。 /* 源码1794 行*/ .input-sm { /* 设置小的输入框input*/ height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } select.input-sm { /* 设置小的选择框select*/ height: 30px; line-height: 30px; } textarea.input-sm, select[multiple].input-sm { /* 设置小的文本框textarea*/ height: auto; } .input-lg { /* 设置大的输入框input*/ height: 46px; padding: 10px 16px; font-size: 18px; line- height: 1.33; border-radius: 6px; } select.input-lg { height: 46px; line-height: 46px; /* 设置大的选择框 select*/} textarea.input-lg,select[multiple].input-lg { height: auto; /* 设置大 的文本框 textarea*/} 注意 根据上述源码,也可以按照类似规则,为上述3种元素定义 其他大小的样式,比如,.input-mini。 再仔细看一下上述代码,发现上述代码在设置大小的时候只 设置了高度,并没有设置宽度。所以,在实际设计过程中,对于 不同尺寸的元素还要进行相应宽度的调整。好在这些元素默认都 是100%显示,而且还有栅格系统提供的支持。所以对于控制宽 度,可以按照如下方式设置:
3.5.7 其他 Bootstrap还提供了一个help-block样式,用于在表单中显 示块级的帮助提示。使用方式示例如下: 自己独占一行或多行的块级帮助文本。 help-block样式的源码如下所示: // 源码1921行 .help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; } 其实在v2.x版本里还提供了一个help-inline样式,用于将输 入控件与帮助文本显示在一行。但不知道为什么,在v3.x系列中 去掉了。如果想恢复这个功能,将如下代码添加到自己的CSS文 件即可(使用方式和help-block一样)。 .help-inline { display: inline-block; padding-left: 5px; color: #737373; } 3.6 按钮 源码文件:buttons.less CSS文件:bootstrap.css 1988行开始 按钮是任何系统都不能缺少的组件,不同的系统需要的按钮 多种多样,按钮的设置涉及按钮的大小、颜色、状态等。本节将 对这些问题一一讲解。 3.6.1 按钮样式 按钮是网页交互过程中不可缺少的一部分,Bootstrap默认 提供了7种样式的按钮风格,其效果如图3-29所示。 图3-29 按钮样式运行效果 使用方式如下: 和第2章里的CSS设计思想讲述的一样,按钮风格首先定义 了基础的.btn样式以及相关的hover、focus、active等行为特 效,然后再为特殊的风格(如,btn-default)定义特殊的颜色 (如,各种变化状态下的颜色)。.btn基础样式部分代码如下: // 源码1988行 .btn { display: inline-block; /* inline模式*/ padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; /* 手形图标 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; /* 边框 */ border-radius: 4px; /* 圆角*/ } 另外,基础样式也会对按钮默认的focus、active、hover、 disabled行为定义相关的变化。详见源码2008~2034行。 特殊风格相关代码(以btn-default为例)如下: // 源码2035行 .btn-default { /* 定义default风格相关的颜色 */ color: #333; background-color: #fff; border-color: #ccc; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { /* hover、focus、active变化时的颜 色 */ color: #333; background-color: #ebebeb; border-color: #adadad; } .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { /* active状态下,背景图设置为none */ background-image: none; } .btn-default.disabled, .btn-default[disabled], /* 此处省略部分选择符 */ .btn-default[disabled].active, fieldset[disabled] .btn-default.active { /* 禁用状态下,各种变化时的颜色 */ background-color: #fff; border-color: #ccc; } .btn-default .badge { /* 按钮内部有徽章的话,设置徽章的显示颜色和背景色 */ color: #fff; background-color: #333; } 同理,其他6种按钮样式也是按照上述规则进行定义的,只 是颜色变化不同而已。所以如果需要定义自己的风格,遵循上述 规则即可。 注意 关于在按钮上应用不同主题的介绍,请参考第5章5.9节的内 容。 3.6.2 按钮大小 像input一样,Bootstrap也提供了控制button按钮大小的 CSS样式。在2.x系列时提供了3种样式:.btn-large、.btn- small、btn-mini。当前最新版本将这些样式改名为.btn-lg、 .btn-sm、.btn-xs。这些样式可以和btn颜色样式组合使用。示 例如下:

运行上述示例后的效果如图3-30所示。 图3-30 不同尺寸和不同颜色按钮的运行效果 这些不同尺寸按钮的主要差别是padding、font-size、 line-height和border-radius,具体源码里的数值如下: /* 源码 2314 行 */ .btn-lg { /* 大按钮*/ padding: 10px 16px; font-size: 18px; line- height: 1.33; border-radius: 6px; } .btn-sm { /* 小按钮*/ padding: 5px 10px; font-size: 12px; line- height: 1.5; border-radius: 3px; } .btn-xs {/* 超小按钮*/ padding: 1px 5px; font-size: 12px; line- height: 1.5; border-radius: 3px; } 讲述到这里,我们发现一个问题,所有按钮的宽度都是根据 文本的长短(再加上padding值)来决定的,而如果我们需要一 个充满父容器的100%宽度的按钮,则无法实现。好在Bootstrap 又单独为我们提供了一个block级的样式——.btn-block按钮, 它不以文本多少自动伸缩,它没有padding和margin值,而是充 满父容器。具体源码实现如下: // 源码2332行 .btn-block { /* 取消padding*/ display: block; width: 100%; padding-right: 0; padding-left: 0; } .btn-block + .btn-block { margin-top: 5px; /* 多个按钮之间取消上下间隔*/ } input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; /* 各种input按钮的宽度也要充满父容器*/ } .btn-block样式和普通按钮的区别如图3-31所示。可以看出 块级元素充满父容器,而不随字符宽度变化而变化。 图3-31 .btn-block按钮的运行效果 3.6.3 多标签支持 btn相关元素的强大之处在于,它不仅能够支持普通的 button元素,也能够支持a元素和input元素,这些元素应用btn 样式也能够产生同样的显示效果。用法如下:
链接 但是,强烈建议不管在任何情况下,都使用button元素,以 免出现跨浏览器兼容性问题。比如,Firefox浏览器下就有一个 bug,导致无法为标签按钮设置line-height,其结果就 是这种按钮和普通的按钮高度不一致。效果如图3-32所示。 图3-32 input元素在Firefox浏览器无法设置line-height 3.6.4 活动状态 当按钮处于活动状态时,其表现出的行为像被按压了一样 (底色更深,边框颜色更深,内置阴影)。对于 link 活动状态的实现方式是,首先在默认的.btn样式上定义: active伪类和.active样式,以提供阴影。源码如下: // 源码2018行 .btn:active, .btn.active { background-image: none; outline: 0;/* 消除outline*/ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /*定义阴影*/ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } 然后在各自风格的样式上,为活动状态定义不同的文字颜 色、背景颜色。边框颜色。源码如下: // 源码2040行 .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { /* hover、focus、active变化时的颜 色 */ color: #333; background-color: #ebebeb; border-color: #adadad; } .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { /* active状态下,背景图设置为none */ background-image: none; } 3.6.5 禁用状态 与活动状态一样,Bootstrap也提供了禁用状态按钮的设 置,主要实现将按钮的背景色做65%的透明处理。有两种方式可 以禁用按钮,一种是使用原始的disabled属性,一种是利 用.disabled样式。两者的区别是.disabled样式不禁止按钮的默 认行为(需要利用JavaScript代码来阻止)。 使用方式如下: 方式一: 方式二: 注意 IE 9和以下版本下使用disabled属性会导致文本变成灰色, 并产生阴影。 另外,.disabled样式作用在拥有.btn样式的链接a元素上 时,也会产生同样的禁用状态效果,唯一的不足也是阻止不了链 接的默认行为(需要JavaScript代码阻止其行为)。用法如下: 大按钮 小按钮 相关源码如下: // 源码2025行 .btn.disabled, .btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; /* 去除阴影*/ box-shadow: none; opacity: .65; /* 透明处理*/ } 同时,各自风格对禁用状态也进行了颜色的特殊处理。举例 如下: // 源码2054行 .btn-default.disabled, .btn-default[disabled], /* 此处省略部分选择符 */ fieldset[disabled] .btn-default.active { /* 禁用状态下,各种 变化时的颜色 */ background-color: #fff; /* 禁用状态下,背景 色 */ border-color: #ccc; /* 禁用状态下,边框颜色 */ } 3.7 图像 源码文件:scaffolding.less CSS文件:bootstrap.css 270行开始 在图片显示方面,Bootstrap框架提供了3种风格效果,使用 方式也非常简单,只需要分别在img标签上应用.img-rounded、 .img-circle、.img-thumbnail样式即可,如图3-33所示。 图3-33 图像在不同样式下的运行效果 3种效果的源码定义比较简单,通过如下源码,可以看出其 区别。 /* 源码 307 行*/ /*默认设置和响应式设置*/ img { vertical-align: middle; /*垂直居中*/ } .img-responsive { /*响应式设计*/ display: block; max-width: 100%; /*填充父元素*/ height: auto; /*高度自适应*/ } .img-rounded { /*圆角样式*/ border-radius: 6px; /*圆角设置*/ } .img-thumbnail { /*缩略图模式*/ display: inline-block; /*inline模式*/ max-width: 100%; height: auto; padding: 4px; /*内边距*/ line-height: 1.428571429; background-color: #fff; /*白色背景和内边距配合显得有层次感*/ border: 1px solid #ddd; /*边框*/ border-radius: 4px; /*圆角*/ -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .img-circle { /*圆形样式*/ border-radius: 50%; } 由源码可以看出一个问题需要我们使用过程中进行注意,那 就是,上述样式没有控制图片的显示大小,所以需要额外应用样 式或者限制父元素大小来控制图片显示大小。 注意 IE8及以下版本不支持.img-rounded和.img-circle样式特 效。 还有一个单独的缩略图(thumbnail)组件效果,其实现稍 微有点复杂,在后面讲述。 3.8 辅助样式 Bootstrap在布局方面还提供了一些细小的辅助样式,用于 文字颜色及背景色设置、显示关闭图标、向左浮动、向右浮动、 清除浮动、隐藏、显示等功能。 3.8.1 文本样式及背景样式 本节简单介绍一下文本样式及文本的背景样式。 1.文本样式 在文本显示方面,Bootstrap提供了6种统一的样式颜色,分 别是:柔和灰(text-muted)、主要蓝(text-primary)、成 功绿(text-success)、信息蓝(text-info)、警告黄(text- warning)、危险红(text-danger)。相关代码在 Bootstrap.css的497~560行定义,效果如图3-34所示。 图3-34 文本颜色样式运行效果 文本样式的使用方式如下所示:

JavaScript编程精解

JavaScript设计模式

JavaScript启示录

Backbone应用开发实战

深入理解Bootstrap3

编写可测试的JavaScript

分析下面的样例源码可以看出,将鼠标移动到文本上,还会 显示该色系的另外一种颜色。 // 源码500行 .text-primary { color: #428bca;} .text-primary:hover { color: #3071a9;} 2.文本背景样式 与此同时,Bootstrap还提供了5种背景颜色和上面的5种文 本颜色样式对应(muted样式除外),分别是:主要蓝(bg- primary)、成功绿(bg-success)、信息蓝(bg-info)、警 告黄(bg-warning)、危险红(bg-danger),其运行效果如 图3-35所示。 图3-35 文本背景样式运行效果 3.8.2 辅助图标 本小节主要讲述常用的关闭和向下箭头两种辅助图标。 1.关闭图标 关闭图标的初始代码在单独的close.less文件中定义,其有 以下两种使用方式: 关闭图标的源码较为简单,这里就不详述了,请参见CSS文 件的5068~5092行。 2.向下箭头 在下拉菜单中经常看到表示向下效果的小箭头,Bootstrap 专门为此提供了一个caret样式,其使用方式非常简单,直接在相 应的span(或其他元素)上应用该样式即可。 向下箭头的实现原理是在行内块级元素上,通过定义 border-top、border-left、border-right来实现。具体源码如 下: // 源码2985行 .caret { /*向下箭头*/ display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } 3.8.3 内容浮动 在平时制作页面的过程中,对于内容浮动,一般会有3种需 求(左浮动、右浮动、居中对齐),另外还有一种清除浮动需 求。 对于左右浮动,分别定义了pull-left和pull-right样式。其 源码如下: /* 源码 5650 行*/ .pull-right { float: right !important; /*向右浮动*/ } .pull-left { float: left !important; /*向左浮动*/} 而对于居中对齐,使用center-block样式即可,其定义原理 是让左右外边距均为auto即可。源码定义如下: /* 源码 5645 行*/ .center-block { display: block; /*将页面元素设置为 块级元素*/ margin-right: auto; /*左右居中显示*/ margin-left: auto; } 一般某一个元素在浮动以后,在紧接着的元素使用之前可以 清除浮动,以避免布局错乱。清除浮动一般是设置元素的before 伪类display为table(且content为空),并设置after伪类的 clear为both。Bootstrap提供了一个clearfix样式用于清除浮 动,其定义如下: /* 源码 5598 行*/ .clearfix:before, .clearfix:after { display: table; content: " ";} .clearfix:after { clear: both;} 查看CSS文件的5598行以后的代码可发现,清除浮动的代码 有关有50行左右,主要是对其他一些组件所使用的样式也定义了 清除浮动代码(而不用再次应用clearfix),比如为nav样式和 modal-footer样式清除浮动,就可以避免后续元素的布局错乱。 3.8.4 隐藏与显示 对于元素或者文本内容,通常我们要注意两种形式的隐藏和 显示,一种是display的隐藏和显示,另一种是visibility的隐藏和 显示。对于显示元素,Bootstrap框架仅定义了show样式,而对 于隐藏则定义了hidden和invisible样式,其中hidden表示元素 既不显示,也不占用文档流(会影响布局的调整),invisible则 表示虽然不显示,但其占用文档流占位。这3种样式的源码定义如 下: /* 源码 5659 行*/ .show { display: block !important; /*显示内容*/} .invisible { visibility: hidden; /*隐藏可视性*/} .hidden { display: none !important; /*隐藏内容*/ visibility: hidden !important; /*隐藏可视性*/ } 另外,如果一个元素对所有设备都要隐藏,而只对盲人可用 的话,可以使用特殊的sr-only样式。 注意 虽然目前还有一个hide样式是可用的,但是未来版本将会删 除它,请大家尽量不要再用该样式。 还有一种特殊情况,若想让一个元素的文本内容不显示,而 只显示背景效果(也就是类似透明的效果)的话,可以使用text- hide样式。其实现原理是隐藏文本,设置背景色透明。源码如 下: /* 源码 5665 行*/ .text-hide { font: 0/0 a; /* 等价于 font-size: 0px;line-height: 0;font-family: a;*/ color: transparent; text-shadow: none; background-color: transparent;/*将页面元素所包含的文本内容替换为透明色,以显示背 景图片*/ border: 0; } 3.9 响应式样式 源码文件:responsive-utilities.less CSS文件:bootstrap.css 5679行开始 响应式设计可以适应不同尺寸的设备,它会根据不同尺寸的 设备对特定的元素进行显示和隐藏设置,同时响应式设计也可以 区别打印模式和普通浏览模式。 根据第2章介绍的响应式设计的思想,Bootstrap提供了8个 样式,以适配不同尺寸的屏幕。如图3-36所示是每个样式在不同 尺寸下的显示和隐藏情况。 上述样式的主要原理就是利用媒体查询的特性,对特定尺寸 的屏幕进行隐藏或显示的设置。比如,.visible-开头的样式表示 仅在某尺寸时显示,其他都隐藏;而.hidden样式则表示仅在某尺 寸时隐藏,其他都显示。 图3-36 响应式设计在不同尺寸下的隐藏和显示情况 关于具体的代码实现,请查看CSS文件5688行以后的源码。 其主要就是利用了如下媒体查询语法,对上述8个样式进行分别设 置。 // 源码5688行 @media (max-width: 767px) { /*在小于768像素的设备上的显示情况*/ } @media (min-width: 768px) and (max-width: 991px) { /*在768像素和992像素之间的设备上的显示情况*/ } @media (min-width: 992px) and (max-width: 1199px) { /*在992像素和1200像素之间的设备上的显示情况*/ } @media (min-width: 1200px) { /*在大于1200像素的设备上的显示情况*/ } 另外,Bootstrap利用了@media print语法,提供了分别对 浏览器和打印机进行隐藏和显示的设置,样式分别为:.visible- print和.hidden-print。其作用如图3-37所示。 图3-37 对浏览器和打印机的隐藏和显示情况 具体实现源代码非常简单,读者可以自行阅读5804行后的源 码。 注意 测试响应式的CSS样式可以在普通浏览器下进行(通过拖放 浏览器改变浏览器可视大小,即可得到相应的效果)。 第4章 CSS组件 本章要介绍的内容是Bootstrap框架的三大核心之二:组 件。组件也是最核心的地方,因为绝大部分的网页都必须利用组 件才能构建出绚丽的页面。这些组件包括:Icon图标 (Glyphicon)、下拉菜单(Dropdown)、按钮组(Button group)、按钮下拉菜单(Button dropdown)、输入框组 (Input group)、导航(Nav)、导航条(Navbar)、面包屑 导航(Breadcrumb)、分页导航(Pagination)、标签 (Label)、徽章(Badge)、大屏幕展播(Jumbotron)、页 面标题(Pageheader)、缩略图(Thumbnail)、警告框 (Alert)、进度条(Progress bar)、媒体对象(Media object)、列表组(Listgroup)、面板(Panel)和洼地 (Well),总计20种。本章将对这些组件进行全面分析,包括使 用方法、注意事项、实现方式(源码分析)等。 4.1 小图标 源码文件:glyphicons.less CSS文件:bootstrap.css 2367行开始 小图标(icon)是一个优秀网站不可缺少的一组元素,小图 标的点缀可以使网站瞬间提升一个档次。新版Bootstrap提供了 200个小图标(相应地,提供了200个CSS样式),这200个样式 均可以在内联元素上应用,并显示出对应的图标。 4.1.1 基本用法 小图标的基本用法非常简单,在任何内联元素上应用所对应 的样式即可。示例如下: 所有的icon样式都以glyphicon-开头,这是因为这些小图标 都是http: //glyphicons.com/网站提供,使用的时候必须同时使 用两个样式,即.glyphicon和以.glyphicon-*开头的样式(稍后 会讲解其原因)。 注意 glyphicons.com是一家提供商业icon图片集的网站,上述 200个icon免费授权给了Bootstrap框架,所以大家可以随意免费 试用。 小图标可以用于多种用途,比如编辑器里的小图标等。示例 如下: 上述代码的运行效果如图4-1所示。 图4-1 icon运行效果 全部的Glyphicons小图标请查阅附录D。 4.1.2 实现方式 新版小图标的实现方式与之前的2.x系列版本完全不一样。老 版本的实现方式是利用了图片精灵的特性,即所有的小图片都放 在一张大图片上;每个小图片通过样式和坐标进行定位显示。 小图标的老版实现源码如下所示: [class^="icon-"],[class*=" icon-"] { display: inline-block; width: 14px; height: 14px; /* 每个图标的宽度和高度都设置为 14px */ margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url("images/glyphicons-halflings.png"); background-position: 14px 14px; background-repeat: no-repeat; } .icon-music { background-position: -24px 0; /* 定位开始坐标 */ } 老版的这种方式有以下两个缺点: (1)图片大小被固定了,如果放大就会失真。 (2)图片的颜色只有黑色和白色两种,没办法扩展。 新版本的实现方式进行了革命性的更新,使用了CSS3中的 @font-face特性。@font-face是CSS3中有关于字体设置的属 性,通过它可以将服务器上的字体设置为Web页面字体,并且能 完全兼容所有浏览器,使用这个属性则不必担心用户本地不具备 这样的字体。因为把字体都上传在服务器上了,可能很多人会担 心影响性能问题,但现代的浏览器都会进行样式缓存,有点影响 所以影响不是很大,毕竟鱼和熊掌不能兼得。 新版icon就是利用这个@font-face特性,并结合一定的字 体,来制作Web页面中的icon图标。原理就是,就是利用特殊的 文字在特殊的字体上显示特殊的效果,比如字符A在特殊字体上 显示成圆圈的形式,字符B显示为椭圆的形式等。这种形式不仅 可以让字体无损失放大,还可以简单地通过color: #ff0的形式设 置图标的颜色(因为它本身就是字体,字体当然可以设置颜 色)。我们先来看一下@font-face的语法。 @font-face { font-family: ; src: [][, []]*; [font-weight: ]; [font-style: