Bootstrap入门经典
Bootstrap入门经典
献辞
Bootstrap可以容易地构建复杂网站
如何使用本书
本书的结构
问答、测验和练习
1 什么是Bootstrap，为什么要使用它
1.1 什么是Web框架
1.1.1 框架不仅是一个模板
1.1.2 框架的优缺点
1.2 什么是Bootstrap
1.3 Bootstrap与其他框架有何不同
1.4 为什么应该使用Bootstrap
1.5 小结
1.6 讨论
1.6.1 问答
问：Web框架和模板之间有何不同？
问：设计模式和框架是否相同？
问：Web应用框架和Web框架有何不同？
1.6.2 测验
1.6.3 测验答案
1.6.4 练习
2 下载安装Bootstrap
2.1 从哪里得到Bootstrap
2.2 获取Bootstrap的其他途径
2.2.1 用Less编写的源代码
2.2.2 Sass
2.2.3 Bootstrap CDN
2.3 小结
2.4 讨论
2.4.1 问答
问：我可以在ASP.Net网站上安装BootStrap吗？
问：WordPress如何处理？我能在WordPress主题中安装Bootstrap吗？
2.4.2 测验
2.4.3 测验答案
2.4.4 练习
3 用基本模板构建第一个BootStrap网站
3.1 最小的Bootstrap页面
3.2 基本Bootstrap模板
3.3 更多Bootstrap模板示例
3.3.1 Bootstrap Starter模板
3.3.2 Bootstrap主题
3.3.3 Bootstrap Jumbotron
3.4 小结
3.5 讨论
3.5.1 问答
问：如果使用Bootstrap，我的网页将和其他所有Bootstrap网站一样。如何避免这种情况？
问：Bootstrap是响应式的吗？
问：Bootstrap主题相比基本的Bootstrap CSS有何好处？
3.5.2 测验
3.5.3 测验答案
3.5.4 练习
4 理解Normalize.CSS和Bootstrap CSS基础知识
4.1 什么是Normalize.css
4.1.1 什么是CSS重置
4.1.2 CSS重置的利弊
4.1.3 Normalize.css不仅仅是CSS重置
4.2 理解Bootstrap基础结构
4.2.1 Bootstrap使用HTML5
4.2.2 移动优先
4.2.3 排版和基本链接样式
4.3 小结
4.4 讨论
4.4.1 问答
问：如果我使用Normalize.css，为什么需要Bootstrap？
问：如果想要重置Normalize.css中的样式，该怎么做？
问：您只提到了一些Bootstrap应用的基本样式，还有其他样式吗？
4.4.2 测验
4.4.3 测验答案
4.4.4 练习
5 网格及其用法
5.1 设计中的网格
5.1.1 为什么在Web设计中使用网格
5.1.2 三分法
5.1.3 黄金分割率
5.2 Bootstrap网格系统
5.3 如何在Bootstrap中创建网格
5.3.1 创建基本网格
5.3.2 响应式列重置
5.3.3 列的偏移、排序和嵌套
5.4 Bootstrap中的响应式Web布局
5.5 小结
5.6 讨论
5.6.1 问答
问：如果我不希望页面是响应式的该怎么办？可以在Bootstrap中关闭响应式设计吗？
问：网格是Bootstrap响应式设计的唯一特征吗？
5.6.2 测验
5.6.3 测验答案
5.6.4 练习
6 标签、徽章、面板、Well和超大屏幕
6.1 标签和徽章
6.1.1 标签
6.1.2 徽章
6.2 Well和面板
6.2.1 Well
6.2.2 面板
6.3 超大屏幕
6.4 小结
6.5 讨论
6.5.1 问答
问：如何使徽章在数字变化时更新？
问：如果我不喜欢Well的默认背景色，可以更换吗？
问：使用.jumbtron类会改变容器中内容的样式吗？
6.5.2 测验
6.5.3 测验答案
6.5.4 练习
7 Bootstrap排版
7.1 Bootstrap中的基本排版
7.2 标题
7.2.1 标题
7.2.2 页眉
7.3 正文
7.3.1 内联文本
7.3.2 元素对齐
7.3.3 文本元素转换
7.4 其他文本块
7.4.1 代码
7.4.2 引用语
7.4.3 列表
7.4.4 缩略语
7.4.5 地址
7.5 小结
7.6 讨论
7.6.1 问答
问：当我对元素应用.pull-right或.pull-left类时，它们仍然占据整个页面的宽度，这该如何解决？
问：我是否必须使用为助手类定义的颜色，如.bg-warning 和.text-info？
7.6.2 测验
7.6.3 测验答案
7.6.4 练习
8 设置表格样式
8.1 基本表格
8.2 Bootstrap表格类
8.3 包含表格的面板
8.4 响应式表格
8.5 小结
8.6 讨论
8.6.1 问答
问：您提到有其他方法能够实现响应式表格，但是我无法想到任何一种方法。有哪些方法？
8.6.2 测验
8.6.3 测验答案
8.6.4 练习
9 设置表单样式
9.1 基本表单
9.1.1 水平表单
9.1.2 内联表单
9.2 Bootstrap支持的表单控件
9.2.1 基本输入标记
9.2.2 复选框和单选按钮
9.2.3 下拉菜单
9.2.4 设置表单控件的大小
9.2.5 帮助块
9.3 输入组
9.3.1 基本输入组
9.3.2 设置输入组的大小
9.3.3 奇妙的附加控件
9.4 Bootstrap表单的交互性
9.4.1 焦点状态
9.4.2 禁用和只读状态
9.4.3 验证状态
9.5 小结
9.6 讨论
9.6.1 问答
问：禁用和只读表单控件有何不同？
问：静态控件和只读控件有何不同？
问：Bootstrap表单验证状态是否在屏幕阅读器中出现？
9.6.2 测验
9.6.3 测验答案
9.6.4 练习
10 图像、媒体对象和Glyphicons
10.1 图像
10.1.1 响应式图像
10.1.2 图像形状
10.2 媒体对象
10.3 缩略图
10.4 Glyphicon
10.5 小结
10.6 讨论
10.6.1 问答
问：为图像添加.img-responsive类似乎不足以使其变成响应式对象，如何使之生效？
问：我可以用Bootstrap将图像转换为其他形状吗？
10.6.2 测验
10.6.3 测验答案
10.6.4 练习
11 按钮和按钮组样式设置及使用
11.1 基本按钮
11.1.1 按钮标记
11.1.2 按钮类和大小
11.1.3 按钮状态
11.2 按钮组
11.2.1 水平按钮组
11.2.2 垂直按钮组
11.2.3 按钮工具栏
11.3 按钮JavaScript
11.4 小结
11.5 讨论
11.5.1 问答
问：如何让按钮完成某种工作？
问：我喜欢使用标记创建按钮，这有没有问题？
问：我能否将复选框和单选按钮转换为按钮？
11.5.2 测验
11.5.3 测验答案
11.5.4 练习
12 用Bootstrap创建导航系统
12.1 标准导航元素
12.2 下拉菜单
12.2.1 拆分下拉菜单
12.2.2 上拉式变种
12.3 导航栏
12.3.1 导航栏标题和品牌
12.3.2 切换导航开关
12.3.3 导航栏中的链接、文本、按钮和表单
12.3.4 改变导航栏的颜色和对齐方式
12.4 面包屑导航和分页
12.5 列表组
12.6 小结
12.7 讨论
12.7.1 问答
问：nav元素和navbar元素有何不同？
问：我使用Bootstrap 2，注意到.nav-list和.nav-header类已经被删除，要用什么来替代它们？
12.7.2 测验
12.7.3 测验答案
12.7.4 练习
13 Bootstrap实用工具
13.1 助手类
13.1.1 更改颜色
13.1.2 图标
13.1.3 布局类
13.1.4 显示和隐藏内容
13.2 响应式实用工具
13.3 打印类
13.4 响应式嵌入
13.5 Bootstrap中的可访问性
13.6 小结
13.7 讨论
13.7.1 问答
问：您似乎在说，我们不应该使用响应式实用工具类，如.hidden-sm或.visible-lg-block。但是，如果使用它们不是好主意，为什么Bootstrap要提供这些类？
问：为什么对不同元素有许多不同的上下文类，如.btn-warning、.has-success和.text-info？
问：您所提出的可访问性指导方针似乎对于少数人来说是个大麻烦，它们真的很重要吗？
13.7.2 测验
13.7.3 测验答案
13.7.4 练习
14 使用Bootstrap JavaScript插件
14.1 如何使用Bootstrap JavaScript插件
14.2 设置插件选项
14.2.1 参数形式的选项
14.2.2 数据属性形式的选项
14.3 使用JavaScript API
14.3.1 事件
14.3.2 无冲突
14.3.3 禁用JavaScript
14.4 小结
14.5 讨论
14.5.1 问答
问：如果我不想在页面上使用任何插件，该怎么做？
问：我关心下载的速度。这些插件不会使页面加载变慢吗？
14.5.2 测验
14.5.3 测验答案
14.5.4 练习
15 模态窗口
15.1 什么是模态窗口
15.2 如何构建模态窗口
15.2.1 触发模态窗口
15.2.2 模态窗口编码
15.3 修改模态窗口
15.3.1 更改模态窗口的打开方式
15.3.2 更改模态窗口的大小
15.3.3 更改布局
15.3.4 动态更改模态内容
15.4 小结
15.5 讨论
15.5.1 问答
问：模态窗口只是个灯箱吗？
问：在模态窗口中列出的其他属性有何作用，如role="dialog"、aria-labelledby=" myModalLabel"和aria-hidden="true"？
问：我希望使用remote选项加载外部网页，如何使用它？
15.5.2 测验
15.5.3 测验答案
15.5.4 练习
16 附加导航、选项卡和滚动监听
16.1 附加导航
16.1.1 使用附加导航
16.2 选项卡
16.2.1 使用选项卡
16.3 滚动监听
16.3.1 使用滚动监听
16.4 结合使用这些插件
16.5 小结
16.6 讨论
16.6.1 问答
问：为什么所有事件名称中都有.bs?
问：您始终以ID的形式指定目标，可以用其他方式标识目标元素吗？
问：当我使用ScrollSpy时，不需要data-target。这个属性确实是必需的吗？
16.6.2 测验
16.6.3 测验答案
16.6.4 练习
17 弹出框和工具提示
17.1 工具提示
17.1.1 工具提示选项
17.1.2 工具提示方法
17.1.3 工具提示事件
17.2 弹出框
17.2.1 弹出框选项
17.2.2 弹出框方法
17.2.3 弹出框事件
17.3 小结
17.4 讨论
17.4.1 问答
问：模态窗口、弹出框和工具提示有何区别？
问：弹出框和工具提示看起来非常相似，它们真的是不同的东西吗？
问：使用工具提示或者弹出框是不是好主意？人们不会觉得它们很讨厌吗？
17.4.2 测验
17.4.3 测验答案
17.4.4 练习
18 过渡、按钮、警告框和进度条
18.1 过渡
18.2 按钮
18.2.1 按钮状态
18.2.2 切换按钮
18.2.3 复选框和单选按钮
18.2.4 按钮方法
18.3 警告框
18.3.1 警告框方法
18.3.2 警告框事件
18.4 进度条
18.4.1 创建进度条
18.4.2 设置进度条样式
18.5 小结
18.6 讨论
18.6.1 问答
问：在按钮图像示例中，您创建了和网站设计颜色相同的复选框图像。如何做到这一点？
问：何时应该在页面上使用警告框？
问：我希望根据定时器或者其他功能自动更新滚动条。如何做到这一点？
18.6.2 测验
18.6.3 测验答案
18.6.4 练习
19 折叠插件和折叠面板
19.1 折叠插件
19.1.1 创建一个可折叠部分
19.1.2 水平折叠元素
19.1.3 折叠选项
19.1.4 折叠方法
19.1.5 折叠事件
19.2 折叠面板
19.2.1 创建折叠面板
19.2.2 使用折叠面板导航
19.3 小结
19.4 讨论
19.4.1 问答
问：为什么不使用Bootstrap button.js插件更改TRY IT YOURSELF环节中的博客帖子按钮状态？
问：我打算更新一个使用Bootstrap的旧网站，网站上的折叠面板无法在Internet Explorer 9中正常工作。我该怎么办？
问：我希望在标题上添加一个图标，表示元素打开或者关闭。但是添加图标之后，它不会变化，如何解决？
19.4.2 测验
19.4.3 测验答案
19.4.4 练习
20 轮播
20.1 创建轮播
20.1.1 基本轮播
20.1.2 更精致的轮播
20.2 使用轮播插件
20.2.1 添加多个轮播
20.2.2 轮播选项
20.2.3 轮播方法
20.2.4 轮播事件
20.3 Web上的轮播
20.3.1 轮播最佳实践
20.3.2 轮播的问题和解决方案
20.4 小结
20.5 讨论
20.5.1 问答
问：我构建了代码清单20-1、代码清单20-2和代码清单20-3中的轮播，它看上去不像图20-1中所展示的轮播，这是为什么？
问：轮播指标总是出现在幻灯片的底部，如果我想要将其放在顶部该怎么做？
20.5.2 测验
20.5.3 测验答案
20.5.4 练习
21 自定义Bootsrap和Bootstrap网站
21.1 使用自己的CSS
21.2 使用Bootstrap Customizer
21.2.1 Less文件和jQuery插件
21.2.2 Less变量
21.2.3 下载和安装自定义Bootstrap
21.3 使用第三方Bootstrap定制工具
21.4 小结
21.5 讨论
21.5.1 问答
问：当我添加自己的CSS时，它没有覆盖Bootstrap样式，我该怎么做？
问：为什么我应该使用自定义CSS?这看起来有许多缺点。
21.5.2 测验
21.5.3 测验答案
21.5.4 练习
22 提高Bootstrap的可访问性
22.1 什么是可访问性
22.1.1 可访问性设计实践
22.1.2 WAI-ARIA和可访问性
22.2 Bootstrap中的可访问设计
22.2.1 跳过导航
22.2.2 嵌套标题
22.2.3 颜色对比
22.3 Bootstrap网站可访问性技巧
22.4 小结
22.5 讨论
22.5.1 问答
问：关于网站可访问性有哪些法规？
问：有没有什么特殊的手段能提高视频的可访问性？
22.5.2 测验
22.5.3 测验答案
22.5.4 练习
23 使用Less和Sass与Bootstrap配合
23.1 什么是CSS预处理器
23.2 使用Less
23.2.1 Less的功能
23.2.2 结合使用Less和Bootstrap
23.3 使用Sass
23.3.1 Sass的功能
23.3.2 结合使用Sass和Bootstrap
23.4 小结
23.5 讨论
23.5.1 问答
问：从哪里可以学习更多关于Less和Sass的知识？
问：如果我自定义Bootstrap变量，Bootstrap出现新变量时将会发生什么？
23.5.2 测验
23.5.3 测验答案
23.5.4 练习
24 进一步应用Bootstrap
24.1 Bootstrap编辑器
24.1.1 Web编辑器
24.1.2 主题构建和定制工具
24.2 在WordPress中使用Bootstrap
24.2.1 使用WordPress插件
24.2.2 寻找用于WordPress的Bootstrap主题
24.2.3 构建自己的WordPress主题
24.3 用第三方附加程序扩展Bootstrap
24.3.1 Bootstrap主题
24.3.2 Bootstrap插件
24.3.3 Bootstrap社区
24.3.4 漂亮的Bootstrap网站
24.4 小结
24.5 讨论
24.5.1 问答
问：主题和模板有何不同？
问：如果我无法找到喜欢的Bootstrap插件，可以使用jQuery插件吗？
24.5.2 测验
24.5.3 测验答案
24.5.4 练习
思维导图
防止博客图床图片失效，防止图片源站外链：
http://www.processon.com/chart_image/5e5b2ad8e4b0d4dc8776c0e1.png)
思维导图在线编辑链接：
