-
Notifications
You must be signed in to change notification settings - Fork 5
/
bootstrap.txt
1888 lines (1645 loc) · 49.2 KB
/
bootstrap.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
Download the example code files
Conventions used
Get in touch
Reviews
Revving Up Bootstrap
Introducing our demo project
What Bootstrap 4 has to offer
Layout
Content styling
Components
Mobile support
Utility classes
Supported browsers
Sass instead of Less
From pixel to root em
Vendor prefix mixing
Icons
Themes
Customization
Setting up our project
Summary
Making a Style Statement
The grid system
Containers
Container
Container-fluid
Rows
Columns
Nesting
Auto-layout of columns
Alignment
Flex Order
Offsetting
Image elements
Responsive images
Image modifiers
Responsive utilities
Summary
Building the Layout
Creating sections
Adding Bootstrap components
Jumbotron
Tabs
Carousel
Cards
Navbar
Modals
Styling
Summary
On Navigation, Footers, Alerts, and Content
Fixating the navbar
More on navbar styling
Improving navigation using Scrollspy
Customizing scroll speed
Breadcrumbs
Icons
Using and customizing alerts
Creating a footer
Creating and customizing forms
Form validation
Progress indicators
Adding content using media objects
Figures
Quotes
Abbreviations
Summary
Speeding Up Development Using Third-Party Plugins
Browser detection
Enhanced pagination using bootpag
Displaying images using Bootstrap Lightbox
Improving our price list with DataTables
Typeahead
Tooltips
Popovers
Summary
Customizing Your Plugins
Anatomy of a plugin
JavaScript
Setup
Class definition
Data API implementation
jQuery
Sass
Customizing plugins
Customizing Bootstrap's jQuery alert plugin
The markup
Extending alert's style sheets
Extending alert's functionality with JavaScript
Customizing Bootstrap's jQuery carousel plugin
The markup
Extending carousel's functionality with JavaScript
Extending carousel's style sheets
Writing a custom Bootstrap jQuery plugin
The idea – the A11yHCM plugin
The a11yhcm.js file
The markup
Adding some style
Summary
Advanced Third-Party Plugins
Building a testimonial component with Salvattore
Introducing Salvattore
Adding Animate.css to MyPhoto
Bouncing alerts
Animating a Salvattore grid
Hover
Adding Hover to MyPhoto
Making the navbar grow
Awesome Hover icons
Salvattore Hover
Summary
Utilities
Flexbox
Display properties and alignment
Display helpers
Alignment helpers
Borders
Context colors
Margins and padding
Floating
Fixing
Toggling visibility
Text alignment and transformation
Highlighting text
Reducing text size
Lists
Unstyled lists
Inline lists
Width and height
Code
Sub and sup
Formatting user input
Formatting user output
Clearfix
Summary
List Groups and Accordions
List groups
Interacting with list items
Applying badges
Applying context classes
Collapsing content
Accordions
Summary
Optimizing Your Website
CSS optimization
Inline styles
Long identifier and class names
Shorthand rules
Grouping selectors
Rendering times
Minifying CSS and JavaScript
Introducing Grunt
Minification and concatenation using Grunt
Running tasks automatically
Stripping our website of unused CSS
Processing HTML
Deploying assets
Stripping CSS comments
JavaScript file concatenation
Summary
Integrating with AngularJS and React
Introducing AngularJS
Setting up AngularJS
Improving the testimonials component
Making testimonials dynamic
Making a Promise with $q
Creating an AngularJS directive
Writing the testimonials template
Testing the testimonial directive
Importing the Salvatorre library
Introducing React
Setting up React
Making a Gallery component in React
Using carousel in React
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
任务1 认识Flex弹性盒布局 2
1．1．1 为什么要使用弹性布局 2
1．1．2 实现弹性布局的方法 4
1．1．3 上机训练 15
任务2 实现响应式布局 16
1．2．1 响应式网页设计 16
1．2．2 媒体查询 17
1．2．3 上机训练 23
1．2．4 响应式布局的应用 24
1．2．5 响应式布局的优缺点 26
本章作业 26
第 2章 初识Bootstrap 27
任务1 认识Bootstrap 28
2．1．1 Bootstrap概述 28
2．1．2 Bootstrap使用方法 29
2．1．3 Bootstrap整体结构 32
任务2 使用Bootstrap栅格系统进行页面布局 33
2．2．1 栅格系统简介 33
2．2．2 实现原理 33
2．2．3 栅格系统的使用 34
2．2．4 响应式栅格 38
2．2．5 上机训练 42
任务3 使用Bootstrap CSS全局样式 42
2．3．1 Bootstrap排版 43
2．3．2 Bootstrap表单 46
2．3．3 Bootstrap按钮 49
2．3．4 Bootstrap图片 50
2．3．5 上机训练 50
本章作业 51
第3章 Bootstrap CSS组件 55
任务1 使用图标组件 56
3．1．1 使用方法 57
3．1．2 应用场景 58
3．1．3 实现方式 59
任务2 使用下拉菜单组件 59
3．2．1 基本下拉菜单 59
3．2．2 分离式下拉菜单 61
3．2．3 上机训练 62
任务3 使用输入框组件 63
3．3．1 基本的输入框组件 63
3．3．2 输入框组件的大小 64
3．3．3 按钮插件 64
任务4 使用导航和导航栏组件 65
3．4．1 导航 65
3．4．2 导航栏 68
3．4．3 上机训练 74
任务5 使用缩略图 75
任务6 使用媒体对象 77
任务7 使用列表组 78
任务8 使用分页导航 80
3．8．1 分页（Pagination） 80
3．8．2 翻页（Pager） 81
3．8．3 上机训练 81
本章作业 82
第4章 Bootstrap JavaScript插件 85
任务1 认识JavaScript插件 86
4．1．1 JavaScript插件的引入方式 86
4．1．2 data属性概述 87
任务2 实现动画过渡效果 87
任务3 使用Modal插件实现模态框效果 89
4．3．1 基础布局与样式 89
4．3．2 尺寸设置 91
4．3．3 常用属性 92
4．3．4 动态设置模态框属性 92
4．3．5 上机训练 93
任务4 使用Tab插件实现选项卡效果 94
4．4．1 基础布局与样式 94
4．4．2 动态操作选项卡插件的属性及方法 96
4．4．3 上机训练 96
任务5 使用Carousel插件实现轮播图 97
4．5．1 基础布局与样式 97
4．5．2 自定义属性 100
4．5．3 动态调用 100
4．5．4 上机训练 101
任务6 使用ScrollSpy插件实现滚动监听 102
4．6．1 基础布局与使用 102
4．6．2 动态调用 104
4．6．3 上机训练 105
任务7 Bootstrap总结 106
本章作业 107
第5章 移动端页面布局 111
任务1 移动Web概述 112
5．1．1 什么是移动Web 112
5．1．2 移动Web的现状 113
5．1．3 PC与移动Web开发的区别 113
任务2 移动端开发、测试浏览器 114
5．2．1 移动端浏览器的类型 114
5．2．2 测试浏览器 115
任务3 移动端视口及视口标签 119
5．3．1 移动端的三种视口 119
5．3．2 视口标签 123
任务4 设备像素比 125
任务5 实现移动端布局 126
5．5．1 使用em布局网页内容 126
5．5．2 使用rem布局网页内容 129
5．5．3 上机训练 133
本章作业 134
第6章 移动端事件与Zepto框架 137
任务1 使用移动端事件 138
6．1．1 click事件 138
6．1．2 touch（触摸）事件 139
6．1．3 上机训练 142
任务2 使用Zepto框架 143
6．2．1 初识Zepto 143
6．2．2 Zepto和jQuery的区别 144
6．2．3 Zepto框架常用选择器 145
6．2．4 Zepto框架常用方法和属性 148
6．2．5 上机训练 153
本章作业 154
第7章 移动端开发技巧 157
任务1 开发技巧 158
任务2 常见问题 159
任务3 移动端优化 160
7．3．1 加载优化 161
7．3．2 图片优化 162
7．3．3 脚本优化 163
本章作业 164
第8章 项目实战——制作“爱旅行”网站 165
任务1 开发流程制订及角色分工 167
任务2 项目分析 168
8．2．1 需求概述 169
8．2．2 问题分析 171
任务3 项目实现 173
8．3．1 公用部分 174
8．3．2 网站首页——轮播图 176
8．3．3 网站首页——图文混排 177
8．3．4 旅游首页 179
8．3．5 列表页 181
8．3．6 详情页 182
8．3．7 选择日期和人数页 184
8．3．8 选择资源页 185
8．3．9 订单填写页 185
8．3．10 目的地页 186
8．3．11 登录页 186
8．3．12 注册页 187
8．3．13 浏览历史页 187
8．3．14 我的页面 188
8．3．15 订单页 188
第1章 Bootstrap从何而来 1
1.1 初识Bootstrap 1
1.2 什么是响应式设计 2
1.3 响应式设计四大原则 3
1.3.1 移动优先还是PC优先 3
1.3.2 内容流 4
1.3.3 位图还是矢量图 4
1.3.4 相对单位还是固定单位 5
1.4 Bootstrap设计目标 5
1.4.1 优先针对移动设备 5
1.4.2 浏览器支持 6
1.4.3 响应式设计 6
1.5 本章小结 6
第2章 Bootstrap开发环境 7
2.1 Bootstrap开发环境概述 7
2.1.1 下载Bootstrap开发包 7
2.1.2 Bootstrap开发包目录结构 9
2.1.3 在网站中使用Bootstrap框架 10
2.2 调用Bootstrap样式 11
2.3 调用Bootstrap组件 14
2.4 调用Bootstrap JS特效 16
2.5 实战：一个Bootstrap实现的响应式页面 17
2.6 本章小结 19
第3章 Bootstrap脚手架 20
3.1 Bootstrap全局样式 20
3.1.1 什么是全局样式 20
3.1.2 基于HTML5文档类型 20
3.1.3 屏幕、排版与链接 21
3.1.4 用Normalize重置样式 22
3.2 栅格系统 22
3.2.1 默认栅格系统 22
3.2.2 流式栅格系统 26
3.3 页面布局 29
3.3.1 固定布局 29
3.3.2 流式布局 30
3.4 响应式设计 30
3.4.1 启用响应式特性 30
3.4.2 响应式Bootstrap特点 31
3.4.3 Bootstrap支持的设备 31
3.4.4 响应式布局辅助类 32
3.4.5 如何应用响应式布局 32
3.5 本章小结 32
第4章 Bootstrap样式设计 33
4.1 Bootstrap排版 33
4.1.1 标题 33
4.1.2 页面主体 36
4.1.3 强调 37
4.1.4 缩略语 39
4.1.5 地址 40
4.1.6 引用 40
4.1.7 列表 42
4.1.8 描述 45
4.1.9 代码 47
4.2 Bootstrap表格 49
4.2.1 默认样式表格 49
4.2.2 斑马纹样式表格 51
4.2.3 圆角边框样式表格 52
4.2.4 鼠标悬停样式表格 53
4.2.5 带行属性样式表格 55
4.3 Bootstrap按钮 56
4.3.1 默认样式按钮 56
4.3.2 按钮大小样式 58
4.3.3 特殊样式按钮 59
4.4 Bootstrap图片 61
4.5 本章小结 61
第5章 Bootstrap组件设计 62
5.1 Bootstrap下拉菜单 62
5.1.1 标签 62
5.1.2 对齐方式 63
5.1.3 禁用 64
5.1.4 子下拉菜单 65
5.2 Bootstrap按钮组 69
5.2.1 基本按钮组 69
5.2.2 工具栏按钮组 69
5.2.3 垂直按钮组 71
5.3 Bootstrap按钮式下拉菜单 71
5.4 Bootstrap导航 75
5.4.1 默认标签导航 75
5.4.2 pills标签导航 76
5.4.3 堆叠式标签导航 76
5.4.4 下拉菜单式标签导航 77
5.4.5 导航列表 78
5.4.6 标签页式导航 80
5.5 Bootstrap导航条 81
5.5.1 默认样式导航条 81
5.5.2 导航条表单 82
5.5.3 响应式导航条 84
5.6 Bootstrap分页 86
5.6.1 标准分页方式 86
5.6.2 翻页分页方式 87
5.7 Bootstrap标签与徽章 88
5.8 Bootstrap进度条 89
5.8.1 基本样式进度条 89
5.8.2 斜条纹样式进度条 90
5.8.3 堆叠样式进度条 91
5.9 Glyphicons字体图标 92
5.10 本章小结 93
第6章 Bootstrap插件设计 94
6.1 Bootstrap插件概述 94
6.1.1 单个或全部引入 94
6.1.2 data属性 95
6.1.3 事件 95
6.2 Bootstrap模态对话框 95
6.2.1 模态对话框说明 96
6.2.2 静态模态对话框 96
6.2.3 动态模态对话框 97
6.3 Bootstrap下拉菜单（高级版） 100
6.4 Bootstrap滚动监听 103
6.5 Bootstrap可切换式标签页 106
6.6 Bootstrap提示框 109
6.6.1 工具提示框 109
6.6.2 弹出框 112
6.6.3 警告框 116
6.7 Bootstrap按钮 117
6.7.1 状态按钮 118
6.7.2 复选按钮 119
6.7.3 单选按钮 120
6.8 Bootstrap折叠 122
6.9 Bootstrap幻灯 125
6.10 本章小结 126
第7章 Bootstrap响应式多媒体 127
7.1 Bootstrap图标的响应式 127
7.2 Bootstrap图像的响应式 129
7.2.1 可适配的图像 129
7.2.2 图像网格 131
7.3 Bootstrap视频的响应式 137
7.4 本章小结 137
第8章 Bootstrap扁平化风格页面 138
8.1 扁平化设计概述 138
8.1.1 介绍 138
8.1.2 设计理念 139
8.1.3 页面架构 139
8.2 页眉设计 141
8.2.1 导航条 141
8.2.2 导航条图标 141
8.2.3 导航条功能菜单 143
8.2.4 页眉标题 147
8.3 左侧导航设计 148
8.4 页面主体设计 151
8.4.1 图片列表 151
8.4.2 提交表单 153
8.4.3 文本列表 156
8.5 页脚设计 158
8.6 本章小结 159
第9章 Bootstrap图片幻灯页面 160
9.1 图片幻灯风格页面设计概述 160
9.2 页眉设计 161
9.3 页面主体设计 163
9.3.1 图片幻灯 163
9.3.2 图标列表 166
9.3.3 图片特辑 167
9.4 本章小结 168
第10章 Bootstrap风格按钮 169
10.1 风格按钮设计概述 169
10.2 形状与尺寸风格按钮 170
10.3 边框风格按钮 172
10.4 下拉菜单风格按钮 174
10.5 按钮组风格 176
10.6 本章小结 177
第11章 Bootstrap响应式表格设计 178
11.1 表格设计概述 178
11.2 Bootstrap基本表格 180
11.3 Bootstrap数组表格 182
11.4 Bootstrap Ajax表格 183
11.5 本章小结 185
第12章 Bootstrap响应式图表设计 186
12.1 图表设计概述 186
12.2 柱状图图表 188
12.3 折线图图表 190
12.4 饼状图图表 195
12.5 本章小结 198
第13章 jQuery UI Bootstrap工具 199
13.1 jQuery UI Bootstrap工具概述 199
13.1.1 jQuery UI工具 199
13.1.2 jQuery UI Bootstrap工具 200
13.1.3 jQuery UI Bootstrap应用 200
13.2 按钮（Button） 201
13.2.1 基本样式按钮 202
13.2.2 Set样式按钮 203
13.2.3 工具条样式按钮 205
13.3 折叠面板（Accordion） 206
13.4 对话框（Dialog） 209
13.4.1 非模态对话框 209
13.4.2 模态对话框 211
13.5 标签页（Tabs） 214
13.5.1 基本样式标签页 214
13.5.2 可编辑样式标签页 217
13.6 Overlay与Shadow 223
13.7 Highlight与Error 224
13.8 日期选择器（Datepicker） 226
13.9 滑块（Slider） 227
13.9.1 水平滑块（Horizontal Slider） 227
13.9.2 垂直滑块（Vertical Slider） 228
13.10 自动完成（Autocomplete） 230
13.11 下拉菜单（Menu） 232
13.12 提示信息（Tooltip） 234
13.13 微调按钮（Spinner） 236
13.14 本章小结 239
第14章 jQuery Mobile 框架与Bootstrap主题风格 240
14.1 jQuery Mobile+Bootstrap概述 240
14.1.1 jQuery Mobile框架 240
14.1.2 Bootstrap主题风格 241
14.1.3 应用开发基础 241
14.2 主页设计 243
14.3 按钮设计 245
14.4 列表设计 248
14.5 导航设计 251
14.6 表单设计 255
14.6.1 输入框 255
14.6.2 滑块 258
14.6.3 切换开关 260
14.6.4 复选框 262
14.6.5 单选框 264
14.6.6 下拉菜单 267
14.6.7 提交按钮 269
14.7 本章小结 273
第15章 实战：应用Bootstrap实现一个贴吧管理页面 274
15.1 项目设计概述 274
15.2 页面布局设计 275
15.2.1 引入Bootstrap框架 275
15.2.2 实现页面布局代码 276
15.3 页面导航栏设计 277
15.3.1 构建导航的整体架构 277
15.3.2 设计标题和导航链接 278
15.3.3 设计搜索框和通知系统 279
15.3.4 设计管理员登录系统 280
15.3.5 设计响应式导航 282
15.4 左侧边栏设计 284
15.5 页面主体设计 285
15.5.1 页面主体功能的头部 286
15.5.2 页面主体功能的帖子列表 287
15.6 本章小结 290
附录 CSS选择器速览 291
目录
第1 章 初识Bootstrap 1
1．1 数量和质量 1
1．1．1 与时俱进 1
1．1．2 LESS 的威力 2
1．2 下载Bootstrap 2
1．3 准备项目模板文件夹 4
1．3．1 下载H5BP 4
1．3．2 删除不必要的样板文件 4
1．3．3 理解样板中的．htaccess 文件 5
1．3．4 更新必要的样板文件 5
1．3．5 更新站点桌面和触摸设备图标 5
1．4 加入Bootstrap 文件 5
1．4．1 字体 6
1．4．2 JavaScript 6
1．4．3 暂时不考虑CSS 文件 9
1．4．4 复制LESS 文件 9
1．5 大盘点 9
1．6 构造HTML 模板 10
1．7 设定站点标题 12
1．7．1 调整过时的浏览器消息 12
1．7．2 设置主结构元素 13
1．8 导航条 14
1．9 编译和链接默认的Bootstrap CSS 15
1．9．1 编译Bootstrap CSS 15
1．9．2 完成响应式导航条 17
1．9．3 排除故障 19
1．9．4 支持IE8 20
1．10 小结 21
第2 章 作品展示站点 23
2．1 设计目标 23
2．2 查看练习文件 26
2．3 搭建传送带 28
2．4 创建响应式分栏 30
2．5 把链接变成按钮 31
2．6 理解LESS 32
2．6．1 嵌套规则 32
2．6．2 变量 33
2．6．3 混入 33
2．6．4 运算式 34
2．6．5 导入文件 34
2．6．6 模块化 35
2．7 根据需要定制Bootstrap 的LESS文件 35
2．8 添加Logo 图片 38
2．9 调整导航项内边距 40
2．10 添加图标 41
2．11 添加Font Awesome 图标 43
2．12 调整导航项图标颜色 45
2．13 调整响应式导航条断点 47
2．14 调整传送带 47
2．14．1 把控件改成使用Font Awesome 图标 48
2．14．2 添加上、下内边距 50
2．14．3 强制图片全宽 50
2．14．4 约束传送带的高度 51
2．14．5 重定位指示器 52
2．14．6 调整指示器外观 54
2．15 调整分栏及其内容 56
2．16 修饰页脚 60
2．17 接下来做什么 62
2．18 小结 63
第3 章 WordPress 主题 64
3．1 下载并重命名Roots 主题 64
3．2 安装主题 66
3．3 配置导航条 69
3．4 添加首页内容 71
3．5 自定义页面模板 75
3．6 理解Roots 的基准模板 76
3．7 创建自定义的基本模板 79
3．8 在自定义结构中使用自定义栏目 81
3．9 创建自定义的内容模板 83
3．9．1 通过自定义栏目构建传送带 84
3．9．2 使用自定义栏目构建三栏内容 87
3．10 加入页脚内容 88
3．11 Roots 的assets 文件夹里有什么 89
3．12 更换设计资源 90
3．13 链接样式表 91
3．14 链接JavaScript 文件 92
3．15 为导航条和页脚添加Logo 图片 94
3．16 添加图标链接 96
3．17 恢复WordPress 特有的样式 97
3．18 小结 99
第4 章 企业网站 100
4．1 准备启动文件 103
4．2 页头区 105
4．2．1 把Logo 放到导航条上方 105
4．2．2 调整导航条 108
4．3 添加实用导航 110
4．4 调整响应式导航 112
4．5 调整配色 115
4．6 调整折叠后的导航条配色 116
4．7 设计复杂的响应式布局 120
4．7．1 调整中、宽布局 122
4．7．2 调整标题、字体大小和按钮 124
4．7．3 增大主栏 126
4．7．4 调整第三栏 128
4．7．5 针对多个视口进行微调 131
4．8 复杂的页脚 131
4．8．1 准备标记 131
4．8．2 调整布局适应平板 132
4．8．3 针对性地清除 134
4．8．4 修整细节 135
4．9 小结 138
第5 章 电子商务网站 139
5．1 商品页的标记 141
5．2面包屑、页面标题和分页导航 142
5．3 调整商品网格 145
5．4 侧边栏和筛选选项 150
5．4．1 基本布局 152
5．4．2 Clearance Sale 按钮 152
5．4．3 选项列表 154
5．4．4 为选项链接添加Font Awesome 图标复选框 156
5．4．5 使用LESS 混入在栏中对齐选项 159
5．4．6 针对平板和手机调整选项列表布局 159
5．4．7 在手机上折叠选项面板 161
5．5 小结 165
第6 章 单页营销网站 166
6．1 概况 166
6．2 初始文件 169
6．3 了解页面内容 169
6．4 调整导航条 170
6．5 定制高清图 171
6．6 美化功能列表 178
6．7 装饰用户评论区 182
6．7．1 定位及美化说明 183
6．7．2 调整说明元素的位置 186
6．7．3 添加Bootstrap 的网格类 187
6．7．4 下载并链接JavaScript 插件 188
6．7．5 初始化Masonry 插件 189
6．7．6 切齐图片 191
6．7．7 适应小微屏幕 194
6．8 吸引人的价目表 194
6．8．1 准备变量、文件和标记 195
6．8．2 表格头 197
6．8．3 表体和表脚 199
6．8．4 为不同的价目表添加不同的样式 200
6．8．5 适配小视口 202
6．8．6 突出重要的表格 205
6．9 最后的调整 209
6．10 为导航条添加ScrollSpy 211
6．11 小结 213
附录A 优化站点资源 214
附录B 实现响应式图片 218
附录C 让传送带支持手势 225
第一部分 Bootstrap 布局 1 Bootstrap 是什么 2 1．1 Bootstrap 简述 21．2 如何使用 Bootstrap 3 1．3 包含内容 4 1．4 简单模板 5 1．5 简单实例 6 2 网格系统 9 2．1 实现原理 9 2．2 工作原理 9 2．3 基本用法 11 2．4 列偏移 12 2．5 列排序 13 2．6 列嵌套 15 3 排版 163．1 标题 163．1．1 大标题 16 3．1．2 小标题 18 3．2 段落 193．3 mark 标签 193．4 del 和 s 标签 193．5 ins 和 u 标签 20 3．6 strong 和 b 标签 20 3．7 em 和 i 标签 213．8 文本对齐方式 213．9 字母大小写 22 3．10 abbr 标签的 title 属性 23 3．11 引用样式 23 3．12 列表 23 3．12．1 有序列表和无序列表 24 3．12．2 去点列表 24 3．12．3 内联列表 253．12．4 定义列表 253．12．5 水平列表 25 3．13 代码 273．14 表格 28 目录 VII 3．14．1 基础表格 283．14．2 斑马线 29 3．14．3 表格边框 30 3．14．4 高亮行 31 3．14．5 紧凑型表格 33 3．14．6 响应式表格 33 第二部分 Bootstrap 表单元素 4 表单 36 4．1 基础表单 36 4．1．1 基本实例 364．1．2 内联表单 37 4．1．3 水平表单 37 4．2 输入框 394．3 下拉框 394．4 文本域 404．5 多选框和单选框 41 4．6 表单焦点 42 4．7 表单禁用 42 4．8 验证样式 44 4．8．1 颜色提示 444．8．2 图标提示 45 4．8．3 文字提示 46 4．9 元素大小 47 4．9．1 高度 47 4．9．2 宽度 49 4．10 按钮 494．10．1 基本按钮 494．10．2 多标签 50 4．10．3 按钮风格 51 4．10．4 按钮大小 52 4．10．5 块状按钮 53 4．10．6 激活和禁用 53 4．11 图片 54 4．12 图标 56 4．13 输入框组 58 5 下拉菜单 625．1 基本用法 625．2 基本原理 635．3 分割线 645．4 菜单标题 64 5．5 对齐方式 65 5．6 菜单状态 68 6 按钮组 706．1 基本按钮组 70 6．2 工具栏 71 6．3 按钮组的大小 74 6．4 嵌套分组 76 6．5 垂直分组 77 6．6 等分按钮 78 6．7 按钮下拉菜单 78 第三部分 Bootstrap 导航 7 导航 847．1 导航基础样式 84 7．2 选项卡导航 86 7．3 Pills 导航 86 7．4 垂直导航 87 7．5 导航状态 88 7．6 自适应导航 88 7．7 导航二级菜单 89 7．8 面包屑导航 90 7．9 导航条 92 VIII Bootstrap 基础教程 7．10 导航条的基本用法 927．11 品牌图标 93 7．12 导航条――表单 947．13 导航条――按钮 967．14 导航条――文本和链接 977．15 导航条中的二级菜单 98 7．16 固定导航条 997．17 响应式导航条 1017．18 反色导航条 1037．19 分页导航 1047．20 标签和徽章 107 第四部分 Bootstrap 内置组件 8 内置组件 1128．1 面板 1128．1．1 基础应用 113 8．1．2 面板的标题和脚注 1148．1．3 基础样式 114 8．1．4 嵌套表格 1168．1．5 嵌套列表 118 8．2 缩略图 1198．3 巨幕 1228．4 页头 1238．5 提示框 124 8．6 进度条 127 8．6．1 基础进度条 127 8．6．2 显示进度 1278．6．3 彩色进度条 1298．6．4 条纹进度条 1308．6．5 堆叠效果 1318．7 媒体对象 132 8．7．1 基本构成 132 8．7．2 对齐方式 133 8．7．3 嵌套对象 134 8．7．4 媒体列表组 1358．8 列表组 136 8．8．1 基础列表组 136 8．8．2 带徽章的列表组 137 8．8．3 链接列表组 1388．8．4 其他元素的支持 1398．8．5 状态设置 1418．8．6 列表组主题 143 第五部分 Bootstrap 对 JavaScript 的支持 9 JavaScript 支持 1469．1 插件库说明 1469．2 编程方式 1479．2．1 data-*属性 147 9．2．2 编程方式 API 149 9．2．3 命名空间冲突 1499．2．4 事件 1499．2．5 版本 1509．3 过渡效果 150 9．4 对话框 1529．4．1 对话框结构 152 9．4．2 对话框的特点 153 9．4．3 弹出框触发方式 156 9．4．4 过渡效果 1589．4．5 触发参数 data-* 1599．4．6 JavaScript触发―― 参数 161 9．4．7 JavaScript触发―― 方法 163 目录 IX 9．4．8 JavaScript触发―― 事件 165 9．5 下拉菜单 167 9．5．1 声明式触发 167 9．5．2 JavaScript 触发 1689．5．3 事件 1699．6 监听滚动 171 9．6．1 组件说明 171 9．6．2 滚动监听实现步骤 1719．6．3 声明式触发 1739．6．4 JavaScript 触发 1759．7 Tab 选项卡 176 9．7．1 选项卡的组成 1779．7．2 声明式触发 1789．7．3 JavaScript 触发 1809．7．4 Pills 导航 181 9．7．5 过渡效果 181 9．7．6 事件 1829．8 Tip 提示 1849．8．1 结构 185 9．8．2 JavaScript 触发 185 9．8．3 data-*属性 187 9．8．4 JavaScript 触发参数 188 9．8．5 事件 189 9．9 提示框 1909．9．1 alert 结构 190 9．9．2 声明式触发 191 9．9．3 JavaScript 触发 192 9．9．4 事件 193 9．10 Popover 弹出框 1939．10．1 弹出框结构 194 9．10．2 声明式属性 194 9．10．3 JavaScript 方式触发 195 9．10．4 事件 197 9．11 按钮 1989．11．1 按钮加载状态 1989．11．2 单选按钮 1999．11．3 多选按钮 2009．11．4 方法 2019．12 折叠/手风琴 Collapse 203 9．12．1 结构 204 9．12．2 声明式触发 2059．12．3 方法 207 9．12．4 事件 2089．13 轮播图 209 9．13．1 轮播图构成 210 9．13．2 声明式触发 213 9．13．3 JavaScript 触发 2159．13．4 事件 2169．14 Affix 插件 2169．14．1 声明属性 217 9．14．2 JavaScript 方法 2179．14．3 事件 220 第六部分 HTML和CSS 3的相关知识 10 HTML 元素 22210．1 表单属性 222 10．2 Input 类型 223 10．3 HTML 5 新标签 22610．3．1 role 属性 22610．3．2 header 标签 226 10．3．3 footer 标签 227 10．3．4 nav 标签 22710．3．5 article 标签 228 10．3．6 section 标签 228 X Bootstrap基础教程 11 CSS 3 样式 230 11．1 选择器 230 11．1．1 完全匹配属性选择器 231 11．1．2 包含匹配选择器 231 11．1．3 首字符匹配选择器 23111．1．4 末字符匹配选择器 23111．2 伪类选择器 23211．3 阴影 232 11．4 背景 233 11．5 圆角边框 23511．6 响应式设计 235 11．6．1 什么是响应式设计 235 11．6．2 响应式设计优缺点 236 11．6．3 Viewport 窗口 23611．6．4 Media Queries 语法 236 12 案例 240 12．1 默认样式的不足 240 12．2 日历控件的使用 24212．3 页面显示代码内容 243 12．4 表格插件 24412．5 图表插件 246附录 A Bootstrap 4．0 以及其他 249 A．1 重大更新 249 A．2 重要链接地址 250
第1章 什么是Bootstrap，为什么要使用它 1
1．1 什么是Web框架 1
1．1．1 框架不仅是一个模板 2
1．1．2 框架的优缺点 5
1．2 什么是Bootstrap 6
1．3 Bootstrap与其他框架有何
不同 6
1．4 为什么应该使用Bootstrap 8
1．5 小结 8
1．6 讨论 8
第2章 下载安装Bootstrap 11
2．1 从哪里得到Bootstrap 11
2．2 获取Bootstrap的其他
途径 13
2．2．1 用Less编写的源代码 13
2．2．2 Sass 15
2．2．3 Bootstrap CDN 16
2．3 小结 16
2．4 讨论 16
第3章 用基本模板构建第一个
BootStrap网站 20
3．1 最小的Bootstrap页面 20
3．2 基本Bootstrap模板 21
3．3 更多Bootstrap模板示例 25
3．3．1 Bootstrap Starter模板 25
3．3．2 Bootstrap主题 27
3．3．3 Bootstrap Jumbotron 27
3．4 小结 28
3．5 讨论 28
第4章 理解Normalize．CSS和
Bootstrap CSS基础知识 31
4．1 什么是Normalize．css 31
4．1．1 什么是CSS重置 32
4．1．2 CSS重置的利弊 32
4．1．3 Normalize．css不仅仅是CSS
重置 32
4．2 理解Bootstrap基础结构 34
4．2．1 Bootstrap使用HTML5 34
4．2．2 移动优先 34
4．2．3 排版和基本链接样式 34
4．3 小结 37
4．4 讨论 37
第5章 网格及其用法 40
5．1 设计中的网格 40
5．1．1 为什么在Web设计中使用
网格 41
5．1．2 三分法 42
5．1．3 黄金分割率 44
5．2 Bootstrap网格系统 45
5．3 如何在Bootstrap中创建网格 45
5．3．1 创建基本网格 45
5．3．2 响应式列重置 49
5．3．3 列的偏移、排序和嵌套 50
5．4 Bootstrap中的响应式Web
布局 51
5．5 小结 52
5．6 讨论 53
第6章 标签、徽章、面板、Well和超大屏幕 56
6．1 标签和徽章 56
6．1．1 标签 56
6．1．2 徽章 59
6．2 Well和面板 60
6．2．1 Well 60
6．2．2 面板 61
6．3 超大屏幕 63
6．4 小结 64
6．5 讨论 65
第7章 Bootstrap排版 68
7．1 Bootstrap中的基本排版 68
7．2 标题 70
7．2．1 标题 70
7．2．2 页眉 74
7．3 正文 75
7．3．1 内联文本 76
7．3．2 元素对齐 77
7．3．3 文本元素转换 78
7．4 其他文本块 79
7．4．1 代码 79
7．4．2 引用语 80
7．4．3 列表 80
7．4．4 缩略语 81
7．4．5 地址 81
7．5 小结 81
7．6 讨论 83
第8章 设置表格样式 86
8．1 基本表格 86
8．2 Bootstrap表格类 88
8．3 包含表格的面板 91
8．4 响应式表格 93
8．5 小结 94
8．6 讨论 94
第9章 设置表单样式 97
9．1 基本表单 97
9．1．1 水平表单 100
9．1．2 内联表单 101
9．2 Bootstrap支持的表单控件 103
9．2．1 基本输入标记 103
9．2．2 复选框和单选按钮 104
9．2．3 下拉菜单 106
9．2．4 设置表单控件的大小 107
9．2．5 帮助块 108
9．3 输入组 108
9．3．1 基本输入组 108
9．3．2 设置输入组的大小 109
9．3．3 奇妙的附加控件 110
9．4 Bootstrap表单的交互性 111
9．4．1 焦点状态 111
9．4．2 禁用和只读状态 112
9．4．3 验证状态 112
9．5 小结 113
9．6 讨论 114
第10章 图像、媒体对象和
Glyphicons 117
10．1 图像 117
10．1．1 响应式图像 118
10．1．2 图像形状 118
10．2 媒体对象 119
10．3 缩略图 122
10．4 Glyphicon 124
10．5 小结 126
10．6 讨论 129
第11章 按钮和按钮组样式设置及
使用 132
11．1 基本按钮 132
11．1．1 按钮标记 133
11．1．2 按钮类和大小 133
11．1．3 按钮状态 135
11．2 按钮组 136
11．2．1 水平按钮组 137
11．2．2 垂直按钮组 138
11．2．3 按钮工具栏 138
11．3 按钮JavaScript 139
11．4 小结 139
11．5 讨论 140
第12章 用Bootstrap创建导航系统 144
12．1 标准导航元素 144
12．2 下拉菜单 147
12．2．1 拆分下拉菜单 148
12．2．2 上拉式变种 150
12．3 导航栏 151
12．3．1 导航栏标题和品牌 153
12．3．2 切换导航开关 153
12．3．3 导航栏中的链接、文本、按钮
和表单 154
12．3．4 改变导航栏的颜色和对齐
方式 158
12．4 面包屑导航和分页 159
12．5 列表组 160
12．6 小结 163
12．7 讨论 164
第13章 Bootstrap实用工具 168
13．1 助手类 168
13．1．1 更改颜色 169
13．1．2 图标 170
13．1．3 布局类 171
13．1．4 显示和隐藏内容 174
13．2 响应式实用工具 174
13．3 打印类 176
13．4 响应式嵌入 176
13．5 Bootstrap中的可访问性 177
13．6 小结 177
13．7 讨论 179
第14章 使用Bootstrap JavaScript
插件 183
14．1 如何使用Bootstrap JavaScript
插件 183
14．2 设置插件选项 184
14．2．1 参数形式的选项 184
14．2．2 数据属性形式的选项 185
14．3 使用JavaScript API 186
14．3．1 事件 187
14．3．2 无冲突 187
14．3．3 禁用JavaScript 187
14．4 小结 188
14．5 讨论 188
第15章 模态窗口 191
15．1 什么是模态窗口 191
15．2 如何构建模态窗口 192
15．2．1 触发模态窗口 192
15．2．2 模态窗口编码 194
15．3 修改模态窗口 197
15．3．1 更改模态窗口的打开
方式 197
15．3．2 更改模态窗口的大小 200
15．3．3 更改布局 201
15．3．4 动态更改模态内容 203
15．4 小结 204
15．5 讨论 206
第16章 附加导航、选项卡和滚动
监听 209
16．1 附加导航 209
16．2 选项卡 212
16．3 滚动监听 215
16．4 结合使用这些插件 216
16．5 小结 217
16．6 讨论 219
第17章 弹出框和工具提示 222
17．1 工具提示 222
17．1．1 工具提示选项 228
17．1．2 工具提示方法 229
17．1．3 工具提示事件 229
17．2 弹出框 229
17．2．1 弹出框选项 232
17．2．2 弹出框方法 233
17．2．3 弹出框事件 233
17．3 小结 233
17．4 讨论 235
第18章 过渡、按钮、警告框和
进度条 239
18．1 过渡 239
18．2 按钮 240
18．2．1 按钮状态 240
18．2．2 切换按钮 241
18．2．3 复选框和单选按钮 241
18．2．4 按钮方法 243
18．3 警告框 243
18．3．1 警告框方法 245
18．3．2 警告框事件 245
18．4 进度条 245
18．4．1 创建进度条 245
18．4．2 设置进度条样式 246
18．5 小结 248
18．6 讨论 249
第19章 折叠插件和折叠面板 254
19．1 折叠插件 254
19．1．1 创建一个可折叠部分 254
19．1．2 水平折叠元素 258
19．1．3 折叠选项 259
19．1．4 折叠方法 259
19．1．5 折叠事件 259
19．2 折叠面板 260
19．2．1 创建折叠面板 260
19．2．2 使用折叠面板导航 263
19．3 小结 265
19．4 讨论 266
第20章 轮播 270
20．1 创建轮播 270
20．1．1 基本轮播 272
20．1．2 更精致的轮播 274
20．2 使用轮播插件 276
20．2．1 添加多个轮播 277
20．2．2 轮播选项 278
20．2．3 轮播方法 279
20．2．4 轮播事件 279
20．3 Web上的轮播 279
20．3．1 轮播最佳实践 279
20．3．2 轮播的问题和解决方案 280
20．4 小结 281
20．5 讨论 282
第21章 自定义Bootsrap和Bootstrap
网站 286
21．1 使用自己的CSS 286
21．2 使用Bootstrap Customizer 290
21．2．1 Less文件和jQuery插件 291
21．2．2 Less变量 292
21．2．3 下载和安装自定义
Bootstrap 294
21．3 使用第三方Bootstrap定制
工具 295
21．4 小结 295
21．5 讨论 295
第22章 提高Bootstrap的可访问性 299
22．1 什么是可访问性 299
22．1．1 可访问性设计实践 300
22．1．2 WAI-ARIA和可访问性 301
22．2 Bootstrap中的可访问设计 301
22．2．1 跳过导航 302
22．2．2 嵌套标题 302
22．2．3 颜色对比 303
22．3 Bootstrap网站可访问性
技巧 303
22．4 小结 304
22．5 讨论 304
第23章 使用Less和Sass与Bootstrap
配合 307
23．1 什么是CSS预处理器 307
23．2 使用Less 308
23．2．1 Less的功能 308
23．2．2 结合使用Less和
Bootstrap 310
23．3 使用Sass 312
23．3．1 Sass的功能 312
23．3．2 结合使用Sass和
Bootstrap 314
23．4 小结 315
23．5 讨论 315
第24章 进一步应用Bootstrap 319
24．1 Bootstrap编辑器 319
24．1．1 Web编辑器 319
24．1．2 主题构建和定制
工具 321
24．2 在WordPress中使用
Bootstrap 322
24．2．1 使用WordPress插件 322
24．2．2 寻找用于WordPress的
Bootstrap主题 323
24．2．3 构建自己的WordPress
主题 323
24．3 用第三方附加程序扩展