Bootstrap基础教程

第1章 Bootstrap是什么 1
1．1　Bootstrap简述　2
1．2　为什么使用Bootstrap　2
1．3　如何使用Bootstrap　3
1．4　下载Bootstrap　3
1．5　简单模板　5
1．6　案例：第一个Bootstrap实例　7
1．7　Bootstrap 4　9
本章小结　9
练习与实训　9
第2章　栅格系统　10
2．1　实现原理　11
2．2　工作原理　11
2．3　使用方法　13
2．3．1　基本用法　13
2．3．2　列偏移　14
2．3．3　列排序　15
2．3．4　列嵌套　17
2．3．5　响应式栅格　18
2．4　案例：招商银行首页　22
本章小结　26
练习与实训　26
第3章　CSS布局　27
3．1　排版　28
3．1．1　标题　28
3．1．2　段落　29
3．1．3　mark标签　30
3．1．4　小号文本　30
3．1．5　del和s标签　30
3．1．6　ins和u标签　30
3．1．7　strong和em标签　31
3．1．8　b和i标签　31
3．1．9　文本对齐方式　31
3．1．10　字母大小写　32
3．1．11　缩略语　32
3．1．12　地址　33
3．1．13　引用　34
3．2　列表　35
3．2．1　无序列表和有序列表　35
3．2．2　无样式列表　35
3．2．3　内联列表　36
3．2．4　描述列表　37
3．3　代码　38
3．4　表格　39
3．4．1　基本表格　39
3．4．2　斑马线表格　40
3．4．3　带边框的表格　41
3．4．4　鼠标悬停高亮行　41
3．4．5　紧凑型表格　42
3．4．6　状态类　43
3．4．7　响应式表格　44
3．5　按钮　45
3．5．1　预定义按钮　45
3．5．2　按钮尺寸　45
3．5．3　块级按钮　46
3．5．4　按钮激活状态　46
3．5．5　按钮禁用状态　46
3．5．6　按钮标签　47
3．6　图像　47
3．6．1　响应式图像　47
3．6．2　图像形状　47
3．7　辅助类　48
3．7．1　情景文本颜色　48
3．7．2　情景文本背景色　48
3．7．3　关闭按钮　49
3．7．4　三角符号　49
3．7．5　快速浮动　50
3．7．6　块级居中显示　50
3．7．7　清除浮动　51
3．7．8　显示或隐藏　51
3．7．9　屏幕阅读器和键盘焦点　52
3．7．10　图像替换　52
3．8　案例：个人简历　52
本章小结　57
练习与实训　57
第4章　表单　58
4．1　基础表单　59
4．1．1　基本实例　59
4．1．2　内联表单　60
4．1．3　水平表单　60
4．2　输入框　62
4．3　下拉框　63
4．4　文本域　64
4．5　复选框和单选按钮　64
4．6　表单焦点　66
4．7　表单禁用　67
4．8　验证样式　69
4．8．1　颜色提示　69
4．8．2　图标提示　70
4．8．3　文字提示　71
4．9　元素大小　72
4．9．1　高度　72
4．9．2　宽度　74
4．10　输入框组　74
4．11　案例：一个表单页面　78
本章小结　80
练习与实训　80
第5章　CSS组件　81
5．1　字体图标　82
5．1．1　可用的字体图标　82
5．1．2　使用字体图标　83
5．1．3　字体图标实例　83
5．1．4　定制字体图标　84
5．2　下拉菜单　84
5．2．1　基本用法　84
5．2．2　对齐　85
5．2．3　标题和分割线　85
5．2．4　菜单状态　86
5．3　按钮组　86
5．3．1　基本按钮组　86
5．3．2　按钮工具栏　87
5．3．3　尺寸　88
5．3．4　嵌套　88
5．3．5　垂直的按钮组　89
5．3．6　两端对齐的按钮组　89
5．4　按钮式弹出菜单　90
5．4．1　单按钮下拉菜单　90
5．4．2　分裂式按钮下拉菜单　90
5．4．3　尺寸　91
5．4．4　向上弹出式菜单　92
5．5　输入框组　92
5．5．1　基本实例　92
5．5．2　尺寸　93
5．5．3　作为额外元素的复选框和单选
按钮　93
5．5．4　作为额外元素的按钮　94
5．5．5　作为额外元素的按钮式下拉菜单　94
5．5．6　作为额外元素的分裂式按钮下拉菜单　95
5．5．7　作为额外元素的多个按钮　95
5．6　导航　96
5．6．1　选项卡导航　96
5．6．2　胶囊式导航　96
5．6．3　两端对齐的导航　97
5．6．4　禁用的链接　98
5．6．5　带有下拉菜单的导航　98
5．7　导航栏　99
5．7．1　默认样式的导航栏　99
5．7．2　品牌图标　100
5．7．3　表单　100
5．7．4　按钮　101
5．7．5　文本　101
5．7．6　非导航的链接　101
5．7．7　对齐方式　102
5．7．8　固定在顶部　103
5．7．9　固定在底部　103
5．7．10　静止在顶部　103
5．7．11　反色导航栏　104
5．7．12　响应式导航栏　104
5．8　路径导航　105
5．9　分页　106
5．9．1　基本实例　106
5．9．2　禁用和激活状态　106
5．9．3　尺寸　107
5．10　翻页　108
5．10．1　基本实例　108
5．10．2　对齐链接　108
5．10．3　可选的禁用状态　109
5．11　标签　109
5．11．1　基本实例　109
5．11．2　多样式的标签　110
5．12　徽章　110
5．13　巨幕　111
5．14　页头　112
5．15　缩略图　113
5．15．1　基本实例　113
5．15．2　自定义内容　114
5．16　警告框　115
5．16．1　基本警告框　115
5．16．2　可关闭的警告框　116
5．16．3　警告框中的链接　116
5．17　进度条　117
5．17．1　基本实例　117
5．17．2　根据情景变化的进度条　117
5．17．3　条纹进度条　118
5．17．4　动画进度条　119
5．17．5　堆叠进度条　120
5．18　媒体对象　120
5．18．1　默认样式　121
5．18．2　对齐方式　122
5．18．3　媒体对象列表　123
5．19　列表组　125
5．19．1　基本实例　125
5．19．2　向列表组添加徽章　125
5．19．3　向列表组添加链接　126
5．19．4　向列表组中添加按钮　126
5．19．5　列表项目禁用状态　127
5．19．6　列表项目情景类　127
5．19．7　向列表组添加自定义内容　128
5．20　面板　128
5．20．1　基本实例　128
5．20．2　带标题的面板　128
5．20．3　带脚注的面板　129
5．20．4　情景效果　129
5．20．5　带表格的面板　130
5．20．6　带列表组的面板　131
5．21　Well　132
5．22　案例：制作一个个人简历页面　133
本章小结　138
练习与实训　138
第6章　JavaScript插件　139
6．1　插件库说明　140
6．2　模态框　140
6．2．1　模态框的结构　141
6．2．2　模态框的特点　142
6．2．3　模态框触发方式　144
6．2．4　过渡效果　145
6．2．5　触发参数data-*　145
6．2．6　JavaScript触发——参数　146
6．2．7　JavaScript触发——方法　148
6．2．8　JavaScript触发——事件　149
6．3　下拉菜单　151
6．3．1　声明式触发　151
6．3．2　JavaScript触发　152
6．3．3　事件　152
6．4　滚动监听　154
6．4．1　组件说明　154
6．4．2　滚动监听实现步骤　155
6．4．3　声明式触发　156
6．4．4　JavaScript触发　158
6．5　选项卡　160
6．5．1　选项卡的组成　161
6．5．2　声明式触发　161
6．5．3　JavaScript触发　162
6．5．4　过渡效果　163
6．5．5　事件　163
6．6　工具提示　165
6．6．1　结构　165
6．6．2　JavaScript触发　165
6．6．3　Data-*属性　166
6．6．4　事件　167
6．7　弹出框　168
6．7．1　弹出框结构　168
6．7．2　声明式属性　169
6．7．3　JavaScript触发　169
6．7．4　事件　170
6．8　警告框　172
6．8．1　Alert结构　172
6．8．2　声明式触发　172
6．8．3　JavaScript触发　173
6．8．4　事件　174
6．9　按钮　175
6．9．1　按钮加载状态　175
6．9．2　单选按钮　176
6．9．3　复选框　176
6．9．4　方法　177
6．10　折叠　178
6．10．1　结构　178
6．10．2　声明式触发　180
6．10．3　方法　181
6．10．4　事件　182
6．11　轮播　183
6．11．1　轮播结构　184
6．11．2　声明式触发　186
6．11．3　JavaScript触发　187
6．11．4　事件　187
6．12　Afflix插件　188
6．12．1　声明属性　188
6．12．2　JavaScript方法　189
6．12．3　事件　190
6．13　案例　190
本章小结　200
练习与实训　200
第7章　第三方扩展　201
7．1　字体图标　202
7．1．1　介绍　202
7．1．2　常规用法　203
7．1．3　List列表上的图标　204
7．1．4　导航上的图标　205
7．1．5　固定角度旋转图标　207
7．1．6　动画图标　207
7．1．7　多图叠加　208
7．2　Buttons　210
7．3　DateTimePicker　217
7．4　Flat UI　222
7．5　案例：特性页面　223
本章小结　225
练习与实训　226
第8章　综合案例　227
8．1　网站概述　228
8．2　开始页面　230
8．3　主要内容的制作　230
8．3．1　制作第一屏　230
8．3．2　制作第二屏　232
8．3．3　制作第三屏　234
8．3．4　制作第四屏　239
8．4　完善网站　240
8．4．1　添加地图　240
8．4．2　添加导航条　242
8．4．3　设置页脚　244
8．4．4　设置滚动监听　245
8．4．5　平滑滚动　245
本章小结　246
练习与实训　246
附录A　Less和Sass　247
附录B　CSS选择器　255
参考文献　258