本书是面向移动Web开发学习者的一本入门教材,以通俗易懂的语言、丰富实用的案例,详细讲解Bootstrap的开发技术。 本书共8章,第1~3章讲解Bootstrap和移动Web开发的基础知识;第4章讲解移动端页面布局的相关知识;第5~7章讲解Bootstrap的核心知识,包括栅格系统、常用组件和布局样式的相关内容;第8章通过一个综合项目—潮流穿搭网站,讲解如何利用Bootstrap相关技术开发响应式网站。 本书既可作为高等教育本、专科院校计算机相关专业的教材,也可作为网站开发爱好者的参考读物。

第 1章 初识Bootstrap001 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