Bootstrap从入门到项目实战

\\\"《Bootstrap从入门到项目实战》从零基础开始讲解，用实例引导读者深入学习，深入浅出地讲解了Bootstrap 4网页设计的各项技术及实战技能。 本书共18章，主要内容包括：开发框架Bootstrap 4简介、使用新的架Bootstrap 4、快速掌握Bootstrap 4布局、Bootstrap 4的新布局—弹性盒子、核心工具库—CSS通用样式类、Bootstrap 4的新版式、认识CSS组件、深入掌握CSS组件、高级的CSS组件、Bootstrap 4的新增组件—旋转器和卡片、快速认识JavaScript插件、深入精通JavaScript插件等。之后讲解了6个行业热点项目实训，包括招聘网中的简历模板、仿星巴克网站、相册类博客项目、设计流行企业网站、Web设计与定制网站、开发神影视频网站。 《Bootstrap从入门到项目实战》适合任何想学习Bootstrap网页设计的读者，无论您是否从事相关行业，是否接触过Bootstrap网页设计，通过学习本书内容均可快速掌握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