深入理解Bootstrap

前言

第1章 入门准备 1

1.1 框架简介 1

1.2 新手入门 2

1.3 文件结构 4

1.4 HTM...

前言

第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