Bootstrap响应式Web开发

第 1章　初识Bootstrap\t001
1．1　Bootstrap概述　001
1．1．1　什么是Bootstrap　001
1．1．2　Bootstrap的特点　001
1．1．3　Bootstrap的组成　002
1．2　浏览器　003
1．2．1　PC端的浏览器　003
1．2．2　移动端设备　003
1．2．3　移动端的浏览器　005
1．3　Visual Studio Code编辑器　005
1．3．1　什么是Visual Studio Code　005
1．3．2　下载和安装Visual Studio Code　005
1．3．3　使用Visual Studio Code　006
1．4　移动Web开发的主流方案　007
1．4．1　单独制作移动端页面　008
1．4．2　制作响应式页面　008
本章小结　010
课后练习　010
第　2章 移动Web开发基础（上）　012
2．1　视口　012
2．1．1　什么是视口　012
2．1．2　利用Chrome浏览器模拟手机
屏幕　013
2．1．3　利用标签设置视口　016
2．1．4　视口的常用设置　017
2．2　移动Web页面的样式编写　017
2．2．1　利用Normalize．css初始化默认
样式　017
2．2．2　设置box-sizing为border-box　019
2．2．3　设置移动端的特殊样式　021
2．3　分辨率和设备像素比　022
2．3．1　分辨率　022
2．3．2　设备像素比　023
2．4　二倍图　023
2．4．1　什么是二倍图　023
2．4．2　背景图片的缩放　024
2．4．3　实现背景图片的二倍图　027
2．5　SVG矢量图　027
2．5．1　什么是SVG　028
2．5．2　标签和样式　028
2．5．3　从外部引入SVG文件　029
本章小结　031
课后练习　031
第3章　移动Web开发基础（下）　033
3．1　HTML5常用API　033
3．1．1　检测网络连接　033
3．1．2　全屏操作　035
3．1．3　文件读取　037
3．1．4　地理定位　041
3．1．5　拖曳　052
3．1．6　Web存储　055
3．1．7　播放视频和音频　059
3．2　移动端常用事件　065
3．2．1　touch事件概述　065
3．2．2　touch事件实现轮播图效果　067
3．2．3　模拟移动端单击事件　071
3．3　移动端常用插件　072
3．3．1　Fastclick插件的使用　072
3．3．2　利用Fastclick处理点透事件　073
3．3．3　iScroll插件的使用　075
3．3．4　Swipe插件的使用　077
3．3．5　Swiper插件的使用　079
本章小结　081
课后练习　081
第4章　移动端页面布局　083
4．1　移动端页面常用布局　083
4．2　流式布局　084
4．3　弹性盒布局　086
4．3．1　什么是弹性盒布局　086
4．3．2　弹性盒布局常用属性　087
4．4　媒体查询　091
4．4．1　什么是媒体查询　091
4．4．2　响应式布局容器　091
4．5　Rem适配布局　093
4．5．1　rem单位　093
4．5．2　通过媒体查询和rem单位实现
元素大小动态变化　094
4．6　Sass　095
4．6．1　什么是Sass　095
4．6．2　在Node．js环境中使用Sass　096
4．6．3　Sass语法格式　097
4．6．4　Sass编译　098
4．6．5　Sass嵌套　098
4．6．6　Sass运算　099
4．7　Less　100
4．7．1　什么是Less　100
4．7．2　Less语法格式　100
4．7．3　Less编译　101
4．8　Bootstrap响应式布局　102
4．8．1　下载Bootstrap　102
4．8．2　预编译的Bootstrap　103
4．8．3　Bootstrap源文件　104
4．8．4　使用Bootstrap CDN　104
4．8．5　Bootstrap初体验　105
本章小结　106
课后练习　107
第5章　Bootstrap栅格系统　108
5．1　栅格系统简介　108
5．1．1　栅格系统概述　108
5．1．2　动手实现简单版栅格系统　109
5．2　Bootstrap布局容器　111
5．2．1　布局容器　111
5．2．2　．container-fluid类　112
5．2．3　．container类　113
5．3　栅格系统的基本使用　114
5．3．1　栅格系统的行和列　114
5．3．2　学生信息表格案例　115
5．4　栅格系统的屏幕适配　117
5．4．1　栅格系统的类前缀　117
5．4．2　使用类前缀设置列的宽度　117
5．4．3　利用栅格系统实现导航栏效果　119
5．5　栅格系统中列的操作　121
5．5．1　栅格系统中的列嵌套　121
5．5．2　栅格系统中的列偏移　122
本章小结　124
课后练习　124
第6章　Bootstrap框架常用组件　126
6．1　组件基础　126
6．1．1　什么是组件　126
6．1．2　组件的优势　126
6．1．3　Bootstrap组件的依赖文件　127
6．2　Bootstrap常用组件　127
6．2．1　引入依赖文件　128
6．2．2　按钮　128
6．2．3　导航　130
6．2．4　面包屑导航　131
6．2．5　分页　132
6．2．6　列表　133
6．2．7　表单　134
6．2．8　按钮组　135
6．2．9　输入框组　136
6．3　Bootstrap实现菜单功能　137
6．3．1　引入依赖文件　137
6．3．2　折叠菜单　138
6．3．3　下拉菜单　139
6．4　Bootstrap实现轮播图功能　140
6．4．1　什么是轮播图　141
6．4．2　轮播图的功能分析　141
6．4．3　轮播图活动信息　142
6．4．4　轮播图左侧箭头　143
6．4．5　轮播图右侧箭头　143
6．4．6　轮播图指示器　144
本章小结　144
课后练习　144
第7章　Bootstrap常用布局样式　146
7．1　内容布局　146
7．1．1　标题类　146
7．1．2　文本类　149
7．1．3　列表类　154
7．2　代码和图文布局　157
7．2．1　代码样式　157
7．2．2　图文样式　158
7．3　表格布局　163
7．4　辅助样式　165
7．4．1　边框样式　165
7．4．2　背景颜色　166
本章小结　167
课后练习　168
第8章　综合项目——潮流穿搭网站　169
8．1　项目分析　169
8．1．1　项目展示　169
8．1．2　创建项目目录结构　172
8．2　前期准备　172
8．2．1　设置元素间距　172
8．2．2　设置字体图标　173
8．2．3　页面初始化　174
8．2．4　页面结构　174
8．3　代码讲解　175
8．3．1　导航栏模块　175
8．3．2　轮播图模块　178
8．3．3　潮流穿搭技巧模块　180
8．3．4　潮流穿搭风格模块　182
8．3．5　潮流穿搭新闻模块　184
8．3．6　合作伙伴和著作权声明模块　185
本章小结　187
课后练习　187