BOOTSTRAP从入门到项目实战

第1章　开发框架Bootstrap 4简介 001
1.1　Bootstrap概述 001
1.1.1 Bootstrap发展历史 001
1.1.2 Bootstrap的优势 002
1.1.3 Bootstrap 4介绍 003
1.1.4 Bootstrap 4浏览器支持 004
1.2　Bootstrap特性 005
1.2.1 Bootstrap 4的构成 005
1.2.2 Bootstrap的特色 007
1.3　Bootstrap应用浏览 007
1.3.1 Bootstrap网站 008
1.3.2 Bootstrap插件 009
1.4　Bootstrap开发工具和资源 010
1.4.1 Bootstrap开发工具 010
1.4.2 Bootstrap资源 011
第2章　使用*新的框架Bootstrap 4 012
2.1　下载Bootstrap 012
2.2　Bootstrap 的结构 014
2.2.1 源码版Bootstrap文件结构 014
2.2.2 编译版Bootstrap文件结构 015
2.3　安装 Bootstrap 016
2.3.1 本地安装016
2.3.2 在线安装017
2.4　案例实训1—设计网页按钮 017
2.5　案例实训2—设计网页轮播组件 018
第3章　快速掌握Bootstrap 4布局 021
3.1　布局基础021
3.1.1 布局容器021
3.1.2 响应断点023
3.1.3 z-index 023
3.2　网格系统024
3.2.1 网格选项024
3.2.2 自动布局列025
3.2.3 响应类028
3.2.4 重排序031
3.2.5 列嵌套034
3.3　布局工具类 035
3.4　案例实训1—仿QQ登录界面 036
3.5　案例实训2—开发电商网站特效 041
第4章　Bootstrap 4的新布局—弹性盒子 045
4.1　定义弹性盒子 045
4.2　排列方向047
4.2.1 水平方向排列047
4.2.2 垂直方向排列047
4.3　内容排列048
4.4　项目对齐050
4.5　自动对齐051
4.6　自动相等053
4.7　等宽变换053
4.8　自动浮动054
4.8.1 水平方向浮动054
4.8.2 垂直方向浮动055
4.9　弹性布局—包裹 056
4.10　排列顺序057
4.11　对齐内容 057
第5 章　核心工具库—CSS 通用样式类 061
5.1　文本处理061
5.1.1 文本对齐061
5.1.2 文本换行063
5.1.3 文本转换064
5.1.4 粗细和斜体065
5.1.5 其他一些文本类066
5.2　颜色 066
5.2.1 文本颜色066
5.2.2 链接文本颜色068
5.2.3 背景颜色069
5.3　边框 069
5.3.1 添加边框070
5.3.2 边框颜色071
5.3.3 圆角边框072
5.4　宽度和高度 074
5.4.1 相对于父元素074
5.4.2 相对于视口076
5.5　边距 077
5.5.1 边距的定义077
5.5.2 响应式边距078
5.6　浮动 079
5.6.1 实现浮动079
5.6.2 响应式浮动080
5.7　display 属性类 081
5.7.1 实现display 属性 081
5.7.2 响应式的隐藏或显示元素082
5.8　嵌入 083
5.9　内容溢出084
5.10　定位 085
5.11　阴影 086
5.12　关闭图标087
第6 章　Bootstrap 4 的新版式 088
6.1　初始化与CSS 重置 088
6.2　排版 090
6.2.1 标题090
6.2.2 段落093
6.2.3 强调094
6.2.4 缩略语095
6.2.5 引用096
6.3　代码 097
6.4　图片 100
6.5　表格 102
6.5.1 表格默认风格103
6.5.2 设计个性化风格104
6.6　案例实训— 设计后台人员管理页面 108
第7 章　认识CSS 组件 111
7.1　正确使用CSS 组件 111
7.2　按钮 114
7.2.1 定义按钮114
7.2.2 设计按钮风格114
7.3　按钮组 117
7.3.1 定义按钮组117
7.3.2 定义按钮组工具栏118
7.3.3 设计按钮组布局和样式119
7.4　下拉菜单121
7.4.1 定义下拉菜单121
7.4.2 设计下拉按钮的样式123
7.4.3 设计下拉菜单的样式124
7.5　导航 128
7.5.1 定义导航128
7.5.2 设计导航的布局129
7.5.3 设计导航的风格131
7.5.4 设计导航选项卡135
7.6　超大屏幕137
7.6.1 定义超大屏幕137
7.6.2 设计风格138
7.7　案例实训—设计广告牌 139
第8 章　深入掌握CSS 组件 141
8.1　徽章 141
8.1.1 定义徽章141
8.1.2 设置颜色143
8.1.3 椭圆形徽章143
8.1.4 链接徽章144
8.2　警告框 145
8.3　媒体对象148
8.3.1　媒体版式149
8.3.2 媒体嵌套149
8.3.3　对齐方式150
8.3.4　排列顺序151
8.3.5　媒体列表152
8.4　进度条 153
8.4.1 定义进度条153
8.4.2 设计进度条样式154
8.4.3 设计进度条风格156
8.5　导航栏 158
8.5.1 定义导航栏158
8.5.2 定位导航栏163
8.5.3 设计导航栏配色164
8.5.4 扩展导航栏内容165
8.6　案例实训—设计动态进度条 167
第9 章　高级的CSS 组件 169
9.1　表单 169
9.1.1 定义表单控件169
9.1.2 设计单选按钮/ 复选框布局和样式173
9.1.3 表单布局风格176
9.1.4 帮助文本180
9.1.5 禁用表单180
9.2　列表组 181
9.2.1 定义列表组181
9.2.2 设计列表组的风格样式182
9.2.3 定制内容185
9.3　面包屑 186
9.3.1 定义面包屑186
9.3.2 设计分隔符187
9.4　分页 188
9.4.1 定义分页188
9.4.2 使用图标189
9.4.3 设计分页风格190
第10 章　Bootstrap 4 的新增组件—旋转器和卡片 194
10.1　旋转器特效 194
10.1.1 定义旋转器194
10.1.2 设计旋转器风格195
10.1.3 对齐旋转器196
10.1.4 按钮旋转器198
10.2　卡片 199
10.2.1 定义卡片199
10.2.2 卡片的内容类型200
10.2.3 控制卡片的宽度203
10.2.4 文本对齐方式205
10.2.5 添加导航206
10.2.6 图像背景208
10.2.7 卡片风格208
10.2.8 卡片排版211
10.3　案例实训1—仿云巴网站 215
10.4　案例实训2—动态进度条及百分比数字显示 218
第11 章　快速认识JavaScript 插件 223
11.1　插件概述 223
11.1.1 插件分类 223
11.1.2 安装插件 224
11.1.3 调用插件 225
11.1.4 事件 226
11.2　按钮 226
11.2.1 切换状态 227
11.2.2 按钮式复选框和单选框 227
11.3　警告框 230
11.3.1 关闭警告框 230
11.3.2 添加用户行为 232
11.4　下拉菜单 233
11.4.1 调用下拉菜单 233
11.4.2 添加用户行为 235
11.5　模态框 237
11.5.1 定义模态框 237
11.5.2 模态框布局和样式 239
11.5.3 调用模态框 243
11.5.4 添加用户行为 245
11.6　标签页 246
11.6.1 定义标签页 247
11.6.2 调用标签页 248
11.6.3 添加用户行为 249
11.7　案例实训1—仿淘宝抢红包 251
11.8　案例实训2—仿京东商品推荐区 252
第12 章　深入精通JavaScript 插件 257
12.1　折叠 257
12.1.1 定义折叠257
12.1.2 控制多目标258
12.1.3 设计手风琴效果259
12.1.4 调用折叠261
12.1.5 添加用户行为261
12.2　工具提示263
12.2.1 定义工具提示263
12.2.2 工具提示方向264
12.2.3 调用工具提示266
12.2.4 添加用户行为267
12.3　弹窗 269
12.3.1 定义弹窗269
12.3.2 弹窗方向271
12.3.3 调用弹窗271
12.3.4 添加用户行为273
12.4　轮播 275
12.4.1 定义轮播275
12.4.2 设计轮播风格278
12.4.3 调用轮播279
12.4.4 添加用户行为282
12.5　滚动监听283
12.5.1 定义滚动监听283
12.5.2 调用滚动监听289
12.5.3 添加用户行为290
12.6　实战实训1—设计折叠搜索框 291
12.7　实战实训2—仿小米内容展示 293
第13 章　项目实训1—招聘网中的简历模板 295
13.1　案例概述295
13.1.1 案例结构295
13.1.2 设计效果296
13.1.3 设计准备298
13.2　设计布局298
13.3　设计左侧信息栏 299
13.4　设计导航条 300
13.5　设计主页301
13.5.1 工作经历301
13.5.2 专业技能302
13.5.3 教育经历303
13.5.4 综合概述304
13.6　设计联系页 306
13.7　设计相册页 306
第14 章　项目实训2—仿星巴克网站 308
14.1　网站概述308
14.1.1 网站结构308
14.1.2 设计效果308
14.1.3 设计准备310
14.2　设计首页布局 310
14.3　设计可切换导航 311
14.4　主体内容317
14.4.1 设计轮播广告区317
14.4.2 设计产品推荐区319
14.4.3 设计登录注册区和Logo 319
14.4.4 设计特色展示区320
14.4.5 设计产品生产流程区321
14.5　设计底部隐藏导航 324
第15 章　项目实训3—相册类博客项目 326
15.1　案例概述326
15.1.1 案例结构326
15.1.2 设计效果327
15.1.3 设计准备328
15.2　设计导航栏 329
15.3　首页 330
15.3.1 设计相册展示330
15.3.2 添加Swipebox 灯箱插件333
15.4　分类页 337
15.4.1 设计相册分类展示337
15.4.2 添加Swipebox 灯箱插件340
15.5　博客 341
15.6　联系页 343
15.6.1 设计布局343
15.6.2 添加工具提示345
第16 章　项目实训4—设计流行企业网站 347
16.1　网站概述347
16.2　设计主页349
16.3　设计侧边导航栏 360
16.4　设计登录页 362
第17 章　项目实训5—Web 设计与定制网站 365
17.1　网站概述365
17.1.1 网站结构365
17.1.2 网站布局365
17.1.3 设计准备366
17.2　设计主页面导航 366
17.3　设计主页面内容 369
17.3.1 设计首页369
17.3.2 “关于我们”页面设计370
17.3.3 “我们的团队”页面设计372
17.3.4 “我们的服务”页面设计375
17.3.5 “我们的博客”页面设计376
17.3.6 “我们的定制”页面设计377
17.4　设计脚注379
第18 章　项目实训6—开发神影视频网站 380
18.1　网站概述380
18.2　设计主页面 382
18.2.1 设计头部内容382
18.2.2 设计轮播384
18.2.3 设计分类列表384
18.2.4 设计“视频内容”页面386
18.2.5 设计脚注391