深入理解Bootstrap

第1章　入门准备 / 1

1.1　框架简介 / 1

1.2　新手入门 / 2

1.3　文件结构 / 4

1.4　HTML标准模板 / 5

1.5　CSS基本语法 / 6

1.5.1　优先级 / 6

1.5.2　选择器 / 6

1.5.3　伪类 / 7

1.5.4　display属性 / 8

1.5.5　媒体查询 / 8

1.6　JavaScript基本语法 / 9

1.6.1　||和&&运算符 / 9

1.6.2　立即调用的函数表达式 / 9

1.6.3　原型 / 10

1.7　jQuery基本用法 / 10

1.7.1　事件绑定 / 11

1.7.2　事件命名空间 / 11

1.7.3　$.data() / 12

1.8　HTML5辅助设计 / 12

第2章　整体架构 / 14

2.1　整体架构 / 14

2.2　栅格系统 / 16

2.2.1　实现原理 / 16

2.2.2　基本用法 / 18

2.2.3　响应式栅格 / 22

2.2.4　对重复代码的处理 / 26

2.3　CSS组件架构的设计思想 / 26

2.3.1　基础样式 / 27

2.3.2　颜色样式 / 27

2.3.3　尺寸样式 / 29

2.3.4　状态样式 / 29

2.3.5　特殊元素样式 / 30

2.3.6　并列元素样式 / 32

2.3.7　嵌套子元素样式 / 32

2.3.8　动画样式 / 33

2.3.9　小结 / 34

2.4　JavaScript插件架构 / 34

2.4.1　HTML布局规则 / 34

2.4.2　JavaScript实现步骤 / 36

2.4.3　通用技术 / 39

2.4.4　不足 / 41

2.5　禁用响应式布局 / 41

第3章　CSS布局 / 43

3.1　概述 / 43

3.2　基础排版 / 45

3.2.1　标题 / 45

3.2.2　页面主题 / 46

3.2.3　强调文本 / 47

3.2.4　缩略语 / 48

3.2.5　地址元素 / 48

3.2.6　引用 / 49

3.2.7　列表 / 50

3.3　代码 / 54

3.3.1　内联代码 / 54

3.3.2　用户输入代码 / 54

3.3.3　多行代码块 / 55

3.4　表格 / 55

3.4.1　基础样式 / 55

3.4.2　带背景条纹的表格 / 56

3.4.3　带边框的表格 / 57

3.4.4　鼠标悬停高亮的表格 / 58

3.4.5　紧凑型表格 / 58

3.4.6　行级元素样式 / 59

3.4.7　响应式表格 / 60

3.5　表单 / 62

3.5.1　基础表单 / 63

3.5.2　内联表单 / 64

3.5.3　横向表单 / 66

3.5.4　表单控件 / 67

3.5.5　控件状态 / 69

3.5.6　控件大小 / 74

3.5.7　其他 / 76

3.6　按钮 / 76

3.6.1　按钮样式 / 76

3.6.2　按钮大小 / 78

3.6.3　多标签支持 / 80

3.6.4　活动状态 / 80

3.6.5　禁用状态 / 81

3.7　图像 / 82

3.8　辅助样式 / 83

3.8.1　文本样式及背景样式 / 83

3.8.2　辅助图标 / 84

3.8.3　内容浮动 / 85

3.8.4　隐藏与显示 / 86

3.9　响应式样式 / 86

第4章　CSS组件 / 88

4.1　小图标 / 88

4.1.1　基本用法 / 88

4.1.2　实现方式 / 89

4.1.3　应用场景 / 92

4.1.4　其他 / 93

4.2　下拉菜单 / 94

4.2.1　基本用法 / 94

4.2.2　多级嵌套 / 97

4.3　按钮组 / 98

4.3.1　基本用法 / 99

4.3.2　按钮工具栏 / 100

4.3.3　按钮尺寸设置 / 101

4.3.4　嵌套分组 / 102

4.3.5　垂直分组 / 103

4.3.6　自适应分组 / 106

4.4　按钮下拉菜单 / 107

4.4.1　组合式下拉菜单 / 107

4.4.2　分离式下拉菜单 / 108

4.4.3　按钮大小 / 109

4.4.4　向上弹起的下拉菜单 / 109

4.5　输入框组 / 110

4.5.1　基本用法 / 110

4.5.2　尺寸大小设置 / 113

4.5.3　复选框与单选框作为addon / 115

4.5.4　按钮作为addon / 115

4.5.5　下拉菜单按钮作为addon / 117

4.5.6　分段按钮作为addon / 117

4.6　导航 / 118

4.6.1　选项卡导航 / 119

4.6.2　胶囊式选项卡导航 / 120

4.6.3　堆叠式导航 / 121

4.6.4　自适应导航 / 123

4.6.5　禁用链接 / 124

4.6.6　二级导航实现 / 124

4.7　导航条 / 126

4.7.1　基础导航条 / 126

4.7.2　导航条中的表单 / 130

4.7.3　导航条中的按钮、文本、链接 / 132

4.7.4　导航条中的项进行左右浮动 / 134

4.7.5　顶部固定或底部固定 / 134

4.7.6　响应式导航条 / 136

4.7.7　反色导航条 / 140

4.8　面包屑导航 / 141

4.9　分页导航 / 143

4.9.1　页码分页 / 143

4.9.2　翻页 / 145

4.10　标签 / 147

4.11　徽章 / 149

4.12　大屏幕展播 / 151

4.13　页面标题 / 152

4.14　缩略图 / 153

4.15　警告框 / 155

4.15.1　默认警告框 / 155

4.15.2　可关闭的警告框 / 156

4.15.3　多彩样式警告框 / 157

4.15.4　警告框中的链接 / 158

4.16　进度条 / 159

4.16.1　基本样式 / 159

4.16.2　多彩样式 / 160

4.16.3　条纹样式 / 161

4.16.4　动画样式 / 162

4.16.5　堆叠样式 / 162

4.17　媒体对象 / 163

4.17.1　默认样式 / 163

4.17.2　媒体列表 / 164

4.18　列表组 / 165

4.18.1　基础列表组 / 165

4.18.2　应用徽章标记或导航箭头 / 166

4.18.3　可链接的列表组 / 167

4.18.4　多彩列表项 / 168

4.18.5　自定义列表组 / 169

4.19　面板 / 171

4.19.1　基础面板 / 171

4.19.2　带有头和尾的面板 / 172

4.19.3　多彩面板 / 173

4.19.4　面板与表格进行嵌套 / 174

4.19.5　面板和列表组进行嵌套 / 177

4.20　洼地 / 179

4.21　主题 / 180

4.21.1　btn按钮样式主题 / 181

4.21.2　缩略图样式主题 / 182

4.21.3　下拉菜单样式主题 / 182

4.21.4　导航条样式主题 / 182

4.21.5　警告框样式主题 / 183

4.21.6　进度条样式主题 / 184

4.21.7　列表组样式主题 / 184

4.21.8　面板样式主题 / 184

4.21.9　well样式主题 / 185

第5章　JavaScript插件 / 186

5.1　动画过渡效果 / 186

5.1.1　使用方法 / 186

5.1.2　源码分析 / 187

5.2　模态弹窗 / 188

5.2.1　弹窗布局与样式 / 189

5.2.2　声明式用法 / 194

5.2.3　JavaScript用法 / 195

5.2.4　源码分析 / 197

5.3　下拉菜单 / 203

5.3.1　声明式用法 / 204

5.3.2　JavaScript用法 / 207

5.3.3　源码分析 / 208

5.4　滚动侦测 / 212

5.4.1　声明式用法 / 213

5.4.2　JavaScript用法 / 214

5.4.3　源码分析 / 215

5.5　选项卡 / 219

5.5.1　声明式用法 / 220

5.5.2　JavaScript用法 / 221

5.5.3　源码分析 / 222

5.6　提示框 / 225

5.6.1　声明式用法 / 226

5.6.2　JavaScript用法 / 228

5.6.3　源码分析 / 229

5.7　弹出框 / 240

5.7.1　声明式用法 / 241

5.7.2　JavaScript用法 / 242

5.7.3　源码分析 / 244

5.8　警告框插件 / 246

5.8.1　声明式用法 / 247

5.8.2　JavaScript用法 / 248

5.8.3　源码分析 / 249

5.9　按钮 / 251

5.9.1　声明式用法 / 251

5.9.2　JavaScript用法 / 253

5.9.3　源码分析 / 253

5.10　折叠 / 256

5.10.1　声明式用法 / 257

5.10.2　JavaScript用法 / 258

5.10.3　源码分析 / 259

5.11　旋转轮播 / 264

5.11.1　声明式用法 / 264

5.11.2　CSS源码分析 / 266

5.11.3　JavaScript用法 / 270

5.11.4　源码分析 / 272

5.12　自动定位浮标 / 280

5.12.1　声明式用法 / 282

5.12.2　JavaScript用法 / 284

5.12.3　源码分析 / 284

第6章　实战：扩展现有组件 / 289

6.1　扩展分页组件 / 289

6.1.1　形状扩展 / 289

6.1.2　颜色扩展 / 290

6.2　扩展Modal弹窗 / 292

6.2.1　扩展点探讨 / 292

6.2.2　Info弹窗扩展 / 293

6.2.3　Form弹窗扩展 / 301

第7章　实战：Win8磁贴组件开发 / 311

7.1　基本样式 / 311

7.1.1　方块定义 / 311

7.1.2　边框定义 / 312

7.2　颜色样式 / 313

7.3　尺寸样式 / 314

7.4　状态设置 / 316

7.5　特殊元素样式 / 317

7.5.1　tile-content样式定义 / 318

7.5.2　tile-content子元素的样式定义 / 318

7.5.3　Brand样式定义 / 320

7.6　并列元素与嵌套样式 / 321

7.7　动画插件 / 323

7.8　更全的Win8风格样式 / 329

第8章　实战：组合应用开发 / 330

8.1　任务描述 / 330

8.2　实战过程 / 332

8.3　笔者的建议 / 342

8.4　实战成果 / 343

8.5　所用技术总结 / 344

第9章　第三方扩展 / 345

9.1　Font Awesome / 345

9.1.1　介绍 / 345

9.1.2　常规用法 / 346

9.1.3　List列表上的图标 / 347

9.1.4　导航上的图标 / 347

9.1.5　固定角度旋转 / 348

9.1.6　360度旋转 / 349

9.1.7　多图叠加 / 350

9.2　BSIE扩展 / 352

9.3　Buttons / 353

9.4　DateTime Picker / 356

9.5　Cikonss / 358

9.6　Flat UI / 359

9.7　更多插件 / 360

附录A　浏览器兼容性支持 / 361

附录B　第三方插件开发建议 / 365

附录C　从2.x迁移到3.x / 366

附录D　Glyphicons图标全集 / 369