编辑推荐
基于Bootstrap 4全新撰写,助你轻松刚创建各种网站。
内容简介
Boostrap是Twitter公司内部的一个工具,开源之后迅速得到了各方的认可。本书基于最新Bootstrap 4撰写,在简单介绍了安装与配置之后就直奔主题,分别讨论了构建流程、博客站点、WordPress 主题、个人作品展示站点、企业网站、电子商务网站、单页面营销网站和Angular应用等几个最具代表性的应用案例,结合这些案例细致地剖析Bootstrap的使用方式和技巧。
作者简介
作者巴斯·乔布森(Bass Jobsen),拥有20多年软件开发经验,Bootstrap布道者,2016年为Bootstrap 4发布了CLI。
章节目录
版权信息
内容提要
前言
第1章 初识Bootstrap
1.1 数量和质量
1.1.1 与时俱进
1.1.2 Sass的威力
1.1.3 下载已编译代码
1.1.4 支持Flexbox的版本
1.1.5 仅包含网格系统的版本
1.1.6 从CDN加载运行Bootstrap
1.2 下载Bootstrap源文件
1.2.1 下载后的文件
1.2.2 下载安装Bootstrap的其他方法
1.3 工具配置
1.4 使用Bootstrap CLI
1.5 准备新的Bootstrap项目
1.6 设置主结构元素
1.7 浏览器支持
1.7.1 浏览器引擎前缀
1.7.2 弹性盒模型
1.8 Yeoman工作流
1.9 排错
1.10 小结
第2章 用Gulp打造自己的构建流程
2.1 开发目标
2.2 Bootstrap构建流程
2.3 在项目中安装Gulp
2.3.1 创建包含任务信息的Gulpfile.js
2.3.2 清理任务
2.4 配置开发环境和生产环境
2.5 用Bower安装Bootstrap
2.6 创建本地Sass文件结构
2.6.1 将Bootstrap的Sass代码编译成CSS代码
2.6.2 使用CSS调试sourcemap
2.6.3 运行postCSS前缀自动添加插件
2.6.4 处理CSS代码以适配生产环境
2.6.5 对SCSS代码进行静态检查
2.7 准备JavaScript插件
2.8 模块化HTML
2.8.1 新建Gulp任务,编译Panini模板
2.8.2 校验编译后的HTML代码
2.9 创建静态Web服务器
2.9.1 监听文件的修改
2.9.2 复制并压缩图片
2.10 归纳汇总,创建default任务
2.11 使用构建流程,完成项目
2.11.1 布局模板
2.11.2 页眉
2.12 调整产品特性的样式
2.13 调整页脚的样式
2.14 用Bootstrap CLI运行模板
2.15 JavaScript任务管理器不是必需品
2.16 在GitHub上发布成果
2.17 小结
第3章 用Bootstrap和Sass定制博客站点
3.1 预期结果及搭建顺序
3.2 项目配置与要求
3.3 Sass在项目开发中的威力
3.3.1 规则嵌套
3.3.2 变量
3.3.3 混入
3.3.4 操作
3.4 文件引入
3.5 使用SCSS检查工具编写更简洁易读的代码
3.6 Sass定制策略
3.6.1 用变量进行定制
3.6.2 扩展Bootstrap的预定义CSS类
3.6.3 使用/复用Bootstrap中的混入
3.6.4 Sass函数
3.6.5 复用他人的代码
3.7 编写自己的定制SCSS代码
3.7.1 配色方案
3.7.2 准备HTML模板
3.7.3 调整页眉样式
3.7.4 调整导航条样式
3.8 博客页面主体部分
3.9 调整博客文章的样式
3.10 调整侧边栏的样式
3.11 页脚
3.11.1 页脚中的左侧栏
3.11.2 页脚中的右侧栏
3.12 复用社交媒体按钮的SCSS代码
3.13 本章源代码
3.14 小结
第4章 WordPress主题
4.1 安装WordPress及相关依赖
4.1.1 安装WordPress
4.1.2 Node.js、Gulp和Bower
4.2 安装JBST 4主题
4.3 安装主题
4.4 复用Sass代码
4.5 WordPress与Bootstrap之间的冲突——预定义CSS类
4.5.1 将导航菜单转换成Bootstrap导航条
4.5.2 关于网格
4.6 配置导航条
4.6.1 更新HTML代码
4.6.2 将照片置于导航条正中间
4.7 设置博客的页眉
4.8 不要忘了页脚
4.9 调整博客文章的样式
4.10 博客中的侧边栏
4.11 滑入式侧边栏
4.12 调整按钮的样式
4.13 在页面上调整评论的样式
4.14 在页面中添加传送带效果
4.15 在主题中使用Font Awesome字体图标库
4.16 使用网格砌体模板
4.17 子主题
4.18 从GitHub上下载
4.19 小结
第5章 作品展示站点
5.1 设计目标
5.2 查看练习文件
5.3 搭建传送带
5.4 创建响应式分栏
5.5 把链接变成按钮
5.6 理解Sass
5.7 根据需要定制Bootstrap的Sass文件
5.8 添加logo图片
5.9 添加图标
5.10 调整传送带样式
5.10.1 添加上、下内边距
5.10.2 重定位传送带指示器
5.10.3 调整指示器样式
5.11 调整分栏及其内容
5.12 调整页脚样式
5.13 接下来做什么
5.14 小结
第6章 企业网站
6.1 准备启动文件
6.2 搭建基础设计
6.2.1 在导航条中添加下拉菜单
6.2.2 用holder.js添加图片
6.3 创建复杂的页头区
6.3.1 把logo放到导航条上方
6.3.2 调整导航条
6.4 添加实用导航
6.5 调整响应式导航
6.6 调整配色
6.7 调整折叠后的导航条样式
6.8 调整水平导航条
6.9 增加对Flexbox的支持
6.10 设计复杂的响应式布局
6.10.1 调整大屏幕和超大屏幕中的布局
6.10.2 调整平板视口的中型布局
6.10.3 调整标题、字号和按钮
6.10.4 增大主栏
6.10.5 调整第三栏
6.10.6 针对多个视口进行微调
6.11 复杂的页脚
6.12 准备标记
6.12.1 调整布局适应平板
6.12.2 针对性地清除
6.12.3 修整细节
6.13 小结
第7章 电子商务网站
7.1 商品页面的标记
7.2 面包屑、页面标题和分页导航
7.3 调整商品网格
7.4 侧边栏和筛选选项
7.4.1 基本样式
7.4.2 调整Clearance Sale链接样式
7.4.3 调整选项列表样式
7.4.4 为选项链接添加Font Awesome图标复选框
7.4.5 使用Sass混入在栏中对齐选项
7.4.6 针对平板和手机调整选项列表布局
7.4.7 在手机上折叠选项面板
7.5 添加搜索表单
7.6 小结
第8章 单页面营销网站
8.1 概况
8.2 研究初始文件
8.3 了解页面内容
8.4 添加Font Awesome图标字体至项目
8.5 调整导航条
8.6 定制高清图
8.7 美化功能列表
8.8 装饰用户评论区
8.8.1 定位及美化说明
8.8.2 调整说明元素的位置
8.9 吸引人的价目表
8.9.1 准备变量、文件和标记
8.9.2 美化表格头
8.9.3 调整表体和表脚样式
8.9.4 为不同的价目表添加不同的样式
8.9.5 适配小视口
8.9.6 给表格以视觉层次
8.10 最后的调整
8.11 为导航条添加ScrollSpy
8.12 小结
第9章 用Bootstrap搭建Angular应用
9.1 概述
9.2 首次搭建Angular应用
9.3 在应用中添加路由
9.4 配置导航
9.5 在应用程序中添加Bootstrap的标记代码
9.6 在应用程序中集成Bootstrap的CSS代码
9.6.1 设置Sass编译器
9.6.2 添加后置处理器
9.6.3 使用ng-bootstrap指令
9.7 下载完整的代码
9.8 使用Angular CLI
9.9 在React.js中使用Bootstrap
9.10 其他用于部署Bootstrap 4的工具
9.11 小结
Bootstrap实战(第2版)是2019年由人民邮电出版社·图灵出品出版,作者[荷] 巴斯·乔布森。
得书感谢您对《Bootstrap实战(第2版)》关注和支持,如本书内容有不良信息或侵权等情形的,请联系本网站。