目 录
第1章 Bootstrap从何而来 1
1.1 初识Bootstrap 1
1.2 什么是响应式设计 2
1.3 响应式设计四大原则 3
1.3.1 移动优先还是PC优先 3
1.3.2 内容流 4
1.3.3 位图还是矢量图 4
1.3.4 相对单位还是固定单位 5
1.4 Bootstrap设计目标 5
1.4.1 优先针对移动设备 5
1.4.2 浏览器支持 6
1.4.3 响应式设计 6
1.5 本章小结 6<p><span style="font-family: 宋体;">目</span> <span style="font-family: 宋体;">录</span></p> <p><span style="font-family: 宋体;">第</span>1<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">从何而来 </span><span style="font-family: Calibri;">1</span></p> <p>1.1 <span style="font-family: 宋体;">初识</span><span style="font-family: Calibri;">Bootstrap 1</span></p> <p>1.2 <span style="font-family: 宋体;">什么是响应式设计 </span><span style="font-family: Calibri;">2</span></p> <p>1.3 <span style="font-family: 宋体;">响应式设计四大原则 </span><span style="font-family: Calibri;">3</span></p> <p>1.3.1 <span style="font-family: 宋体;">移动优先还是</span><span style="font-family: Calibri;">PC</span><span style="font-family: 宋体;">优先 </span><span style="font-family: Calibri;">3</span></p> <p>1.3.2 <span style="font-family: 宋体;">内容流 </span><span style="font-family: Calibri;">4</span></p> <p>1.3.3 <span style="font-family: 宋体;">位图还是矢量图 </span><span style="font-family: Calibri;">4</span></p> <p>1.3.4 <span style="font-family: 宋体;">相对单位还是固定单位 </span><span style="font-family: Calibri;">5</span></p> <p>1.4 Bootstrap<span style="font-family: 宋体;">设计目标 </span><span style="font-family: Calibri;">5</span></p> <p>1.4.1 <span style="font-family: 宋体;">优先针对移动设备 </span><span style="font-family: Calibri;">5</span></p> <p>1.4.2 <span style="font-family: 宋体;">浏览器支持 </span><span style="font-family: Calibri;">6</span></p> <p>1.4.3 <span style="font-family: 宋体;">响应式设计 </span><span style="font-family: Calibri;">6</span></p> <p>1.5 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">6</span></p> <p><span style="font-family: 宋体;">第</span>2<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">开发环境 </span><span style="font-family: Calibri;">7</span></p> <p>2.1 Bootstrap<span style="font-family: 宋体;">开发环境概述 </span><span style="font-family: Calibri;">7</span></p> <p>2.1.1 <span style="font-family: 宋体;">下载</span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">开发包 </span><span style="font-family: Calibri;">7</span></p> <p>2.1.2 Bootstrap<span style="font-family: 宋体;">开发包目录结构 </span><span style="font-family: Calibri;">9</span></p> <p>2.1.3 <span style="font-family: 宋体;">在网站中使用</span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">框架 </span><span style="font-family: Calibri;">10</span></p> <p>2.2 <span style="font-family: 宋体;">调用</span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">样式 </span><span style="font-family: Calibri;">11</span></p> <p>2.3 <span style="font-family: 宋体;">调用</span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">组件 </span><span style="font-family: Calibri;">14</span></p> <p>2.4 <span style="font-family: 宋体;">调用</span><span style="font-family: Calibri;">Bootstrap JS</span><span style="font-family: 宋体;">** </span><span style="font-family: Calibri;">16</span></p> <p>2.5 <span style="font-family: 宋体;">实战:一个</span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">实现的响应式页面 </span><span style="font-family: Calibri;">17</span></p> <p>2.6 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">19</span></p> <p><span style="font-family: 宋体;">第</span>3<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">脚手架 </span><span style="font-family: Calibri;">20</span></p> <p>3.1 Bootstrap<span style="font-family: 宋体;">全局样式 </span><span style="font-family: Calibri;">20</span></p> <p>3.1.1 <span style="font-family: 宋体;">什么是全局样式 </span><span style="font-family: Calibri;">20</span></p> <p>3.1.2 <span style="font-family: 宋体;">基于</span><span style="font-family: Calibri;">HTML5</span><span style="font-family: 宋体;">文档类型 </span><span style="font-family: Calibri;">20</span></p> <p>3.1.3 <span style="font-family: 宋体;">屏幕、排版与链接 </span><span style="font-family: Calibri;">21</span></p> <p>3.1.4 <span style="font-family: 宋体;">用</span><span style="font-family: Calibri;">Normalize</span><span style="font-family: 宋体;">重置样式 </span><span style="font-family: Calibri;">22</span></p> <p>3.2 <span style="font-family: 宋体;">栅格系统 </span><span style="font-family: Calibri;">22</span></p> <p>3.2.1 <span style="font-family: 宋体;">默认栅格系统 </span><span style="font-family: Calibri;">22</span></p> <p>3.2.2 <span style="font-family: 宋体;">流式栅格系统 </span><span style="font-family: Calibri;">26</span></p> <p>3.3 <span style="font-family: 宋体;">页面布局 </span><span style="font-family: Calibri;">29</span></p> <p>3.3.1 <span style="font-family: 宋体;">固定布局 </span><span style="font-family: Calibri;">29</span></p> <p>3.3.2 <span style="font-family: 宋体;">流式布局 </span><span style="font-family: Calibri;">30</span></p> <p>3.4 <span style="font-family: 宋体;">响应式设计 </span><span style="font-family: Calibri;">30</span></p> <p>3.4.1 <span style="font-family: 宋体;">启用响应式特性 </span><span style="font-family: Calibri;">30</span></p> <p>3.4.2 <span style="font-family: 宋体;">响应式</span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">特点 </span><span style="font-family: Calibri;">31</span></p> <p>3.4.3 Bootstrap<span style="font-family: 宋体;">支持的设备 </span><span style="font-family: Calibri;">31</span></p> <p>3.4.4 <span style="font-family: 宋体;">响应式布局辅助类 </span><span style="font-family: Calibri;">32</span></p> <p>3.4.5 <span style="font-family: 宋体;">如何应用响应式布局 </span><span style="font-family: Calibri;">32</span></p> <p>3.5 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">32</span></p> <p><span style="font-family: 宋体;">第</span>4<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">样式设计 </span><span style="font-family: Calibri;">33</span></p> <p>4.1 Bootstrap<span style="font-family: 宋体;">排版 </span><span style="font-family: Calibri;">33</span></p> <p>4.1.1 <span style="font-family: 宋体;">标题 </span><span style="font-family: Calibri;">33</span></p> <p>4.1.2 <span style="font-family: 宋体;">页面主体 </span><span style="font-family: Calibri;">36</span></p> <p>4.1.3 <span style="font-family: 宋体;">强调 </span><span style="font-family: Calibri;">37</span></p> <p>4.1.4 <span style="font-family: 宋体;">缩略语 </span><span style="font-family: Calibri;">39</span></p> <p>4.1.5 <span style="font-family: 宋体;">地址 </span><span style="font-family: Calibri;">40</span></p> <p>4.1.6 <span style="font-family: 宋体;">引用 </span><span style="font-family: Calibri;">40</span></p> <p>4.1.7 <span style="font-family: 宋体;">列表 </span><span style="font-family: Calibri;">42</span></p> <p>4.1.8 <span style="font-family: 宋体;">描述 </span><span style="font-family: Calibri;">45</span></p> <p>4.1.9 <span style="font-family: 宋体;">代码 </span><span style="font-family: Calibri;">47</span></p> <p>4.2 Bootstrap<span style="font-family: 宋体;">表格 </span><span style="font-family: Calibri;">49</span></p> <p>4.2.1 <span style="font-family: 宋体;">默认样式表格 </span><span style="font-family: Calibri;">49</span></p> <p>4.2.2 <span style="font-family: 宋体;">斑马纹样式表格 </span><span style="font-family: Calibri;">51</span></p> <p>4.2.3 <span style="font-family: 宋体;">圆角边框样式表格 </span><span style="font-family: Calibri;">52</span></p> <p>4.2.4 <span style="font-family: 宋体;">鼠标悬停样式表格 </span><span style="font-family: Calibri;">53</span></p> <p>4.2.5 <span style="font-family: 宋体;">带行属性样式表格 </span><span style="font-family: Calibri;">55</span></p> <p>4.3 Bootstrap<span style="font-family: 宋体;">按钮 </span><span style="font-family: Calibri;">56</span></p> <p>4.3.1 <span style="font-family: 宋体;">默认样式按钮 </span><span style="font-family: Calibri;">56</span></p> <p>4.3.2 <span style="font-family: 宋体;">按钮大小样式 </span><span style="font-family: Calibri;">58</span></p> <p>4.3.3 <span style="font-family: 宋体;">特殊样式按钮 </span><span style="font-family: Calibri;">59</span></p> <p>4.4 Bootstrap<span style="font-family: 宋体;">图片 </span><span style="font-family: Calibri;">61</span></p> <p>4.5 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">61</span></p> <p><span style="font-family: 宋体;">第</span>5<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">组件设计 </span><span style="font-family: Calibri;">62</span></p> <p>5.1 Bootstrap<span style="font-family: 宋体;">下拉菜单 </span><span style="font-family: Calibri;">62</span></p> <p>5.1.1 <span style="font-family: 宋体;">标签 </span><span style="font-family: Calibri;">62</span></p> <p>5.1.2 <span style="font-family: 宋体;">对齐方式 </span><span style="font-family: Calibri;">63</span></p> <p>5.1.3 <span style="font-family: 宋体;">禁用 </span><span style="font-family: Calibri;">64</span></p> <p>5.1.4 <span style="font-family: 宋体;">子下拉菜单 </span><span style="font-family: Calibri;">65</span></p> <p>5.2 Bootstrap<span style="font-family: 宋体;">按钮组 </span><span style="font-family: Calibri;">69</span></p> <p>5.2.1 <span style="font-family: 宋体;">基本按钮组 </span><span style="font-family: Calibri;">69</span></p> <p>5.2.2 <span style="font-family: 宋体;">工具栏按钮组 </span><span style="font-family: Calibri;">69</span></p> <p>5.2.3 <span style="font-family: 宋体;">垂直按钮组 </span><span style="font-family: Calibri;">71</span></p> <p>5.3 Bootstrap<span style="font-family: 宋体;">按钮式下拉菜单 </span><span style="font-family: Calibri;">71</span></p> <p>5.4 Bootstrap<span style="font-family: 宋体;">导航 </span><span style="font-family: Calibri;">75</span></p> <p>5.4.1 <span style="font-family: 宋体;">默认标签导航 </span><span style="font-family: Calibri;">75</span></p> <p>5.4.2 pills<span style="font-family: 宋体;">标签导航 </span><span style="font-family: Calibri;">76</span></p> <p>5.4.3 <span style="font-family: 宋体;">堆叠式标签导航 </span><span style="font-family: Calibri;">76</span></p> <p>5.4.4 <span style="font-family: 宋体;">下拉菜单式标签导航 </span><span style="font-family: Calibri;">77</span></p> <p>5.4.5 <span style="font-family: 宋体;">导航列表 </span><span style="font-family: Calibri;">78</span></p> <p>5.4.6 <span style="font-family: 宋体;">标签页式导航 </span><span style="font-family: Calibri;">80</span></p> <p>5.5 Bootstrap<span style="font-family: 宋体;">导航条 </span><span style="font-family: Calibri;">81</span></p> <p>5.5.1 <span style="font-family: 宋体;">默认样式导航条 </span><span style="font-family: Calibri;">81</span></p> <p>5.5.2 <span style="font-family: 宋体;">导航条表单 </span><span style="font-family: Calibri;">82</span></p> <p>5.5.3 <span style="font-family: 宋体;">响应式导航条 </span><span style="font-family: Calibri;">84</span></p> <p>5.6 Bootstrap<span style="font-family: 宋体;">分页 </span><span style="font-family: Calibri;">86</span></p> <p>5.6.1 <span style="font-family: 宋体;">标准分页方式 </span><span style="font-family: Calibri;">86</span></p> <p>5.6.2 <span style="font-family: 宋体;">翻页分页方式 </span><span style="font-family: Calibri;">87</span></p> <p>5.7 Bootstrap<span style="font-family: 宋体;">标签与徽章 </span><span style="font-family: Calibri;">88</span></p> <p>5.8 Bootstrap<span style="font-family: 宋体;">进度条 </span><span style="font-family: Calibri;">89</span></p> <p>5.8.1 <span style="font-family: 宋体;">基本样式进度条 </span><span style="font-family: Calibri;">89</span></p> <p>5.8.2 <span style="font-family: 宋体;">斜条纹样式进度条 </span><span style="font-family: Calibri;">90</span></p> <p>5.8.3 <span style="font-family: 宋体;">堆叠样式进度条 </span><span style="font-family: Calibri;">91</span></p> <p>5.9 Glyphicons<span style="font-family: 宋体;">字体图标 </span><span style="font-family: Calibri;">92</span></p> <p>5.10 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">93</span></p> <p> </p> <p><span style="font-family: 宋体;">第</span>6<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">插件设计 </span><span style="font-family: Calibri;">94</span></p> <p>6.1 Bootstrap<span style="font-family: 宋体;">插件概述 </span><span style="font-family: Calibri;">94</span></p> <p>6.1.1 <span style="font-family: 宋体;">单个或全部引入 </span><span style="font-family: Calibri;">94</span></p> <p>6.1.2 data<span style="font-family: 宋体;">属性 </span><span style="font-family: Calibri;">95</span></p> <p>6.1.3 <span style="font-family: 宋体;">事件 </span><span style="font-family: Calibri;">95</span></p> <p>6.2 Bootstrap<span style="font-family: 宋体;">模态对话框 </span><span style="font-family: Calibri;">95</span></p> <p>6.2.1 <span style="font-family: 宋体;">模态对话框说明 </span><span style="font-family: Calibri;">96</span></p> <p>6.2.2 <span style="font-family: 宋体;">静态模态对话框 </span><span style="font-family: Calibri;">96</span></p> <p>6.2.3 <span style="font-family: 宋体;">动态模态对话框 </span><span style="font-family: Calibri;">97</span></p> <p>6.3 Bootstrap<span style="font-family: 宋体;">下拉菜单(**版) </span><span style="font-family: Calibri;">100</span></p> <p>6.4 Bootstrap<span style="font-family: 宋体;">滚动监听 </span><span style="font-family: Calibri;">103</span></p> <p>6.5 Bootstrap<span style="font-family: 宋体;">可切换式标签页 </span><span style="font-family: Calibri;">106</span></p> <p>6.6 Bootstrap<span style="font-family: 宋体;">提示框 </span><span style="font-family: Calibri;">109</span></p> <p>6.6.1 <span style="font-family: 宋体;">工具提示框 </span><span style="font-family: Calibri;">109</span></p> <p>6.6.2 <span style="font-family: 宋体;">弹出框 </span><span style="font-family: Calibri;">112</span></p> <p>6.6.3 <span style="font-family: 宋体;">警告框 </span><span style="font-family: Calibri;">116</span></p> <p>6.7 Bootstrap<span style="font-family: 宋体;">按钮 </span><span style="font-family: Calibri;">117</span></p> <p>6.7.1 <span style="font-family: 宋体;">状态按钮 </span><span style="font-family: Calibri;">118</span></p> <p>6.7.2 <span style="font-family: 宋体;">复选按钮 </span><span style="font-family: Calibri;">119</span></p> <p>6.7.3 <span style="font-family: 宋体;">单选按钮 </span><span style="font-family: Calibri;">120</span></p> <p>6.8 Bootstrap<span style="font-family: 宋体;">折叠 </span><span style="font-family: Calibri;">122</span></p> <p>6.9 Bootstrap<span style="font-family: 宋体;">幻灯 </span><span style="font-family: Calibri;">125</span></p> <p>6.10 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">126</span></p> <p><span style="font-family: 宋体;">第</span>7<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">响应式多媒体 </span><span style="font-family: Calibri;">127</span></p> <p>7.1 Bootstrap<span style="font-family: 宋体;">图标的响应式 </span><span style="font-family: Calibri;">127</span></p> <p>7.2 Bootstrap<span style="font-family: 宋体;">图像的响应式 </span><span style="font-family: Calibri;">129</span></p> <p>7.2.1 <span style="font-family: 宋体;">可适配的图像 </span><span style="font-family: Calibri;">129</span></p> <p>7.2.2 <span style="font-family: 宋体;">图像网格 </span><span style="font-family: Calibri;">131</span></p> <p>7.3 Bootstrap<span style="font-family: 宋体;">视频的响应式 </span><span style="font-family: Calibri;">137</span></p> <p>7.4 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">137</span></p> <p><span style="font-family: 宋体;">第</span>8<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">扁平化风格页面 </span><span style="font-family: Calibri;">138</span></p> <p>8.1 <span style="font-family: 宋体;">扁平化设计概述 </span><span style="font-family: Calibri;">138</span></p> <p>8.1.1 <span style="font-family: 宋体;">介绍 </span><span style="font-family: Calibri;">138</span></p> <p>8.1.2 <span style="font-family: 宋体;">设计理念 </span><span style="font-family: Calibri;">139</span></p> <p>8.1.3 <span style="font-family: 宋体;">页面架构 </span><span style="font-family: Calibri;">139</span></p> <p>8.2 <span style="font-family: 宋体;">页眉设计 </span><span style="font-family: Calibri;">141</span></p> <p>8.2.1 <span style="font-family: 宋体;">导航条 </span><span style="font-family: Calibri;">141</span></p> <p>8.2.2 <span style="font-family: 宋体;">导航条图标 </span><span style="font-family: Calibri;">141</span></p> <p>8.2.3 <span style="font-family: 宋体;">导航条功能菜单 </span><span style="font-family: Calibri;">143</span></p> <p>8.2.4 <span style="font-family: 宋体;">页眉标题 </span><span style="font-family: Calibri;">147</span></p> <p>8.3 <span style="font-family: 宋体;">左侧导航设计 </span><span style="font-family: Calibri;">148</span></p> <p>8.4 <span style="font-family: 宋体;">页面主体设计 </span><span style="font-family: Calibri;">151</span></p> <p>8.4.1 <span style="font-family: 宋体;">图片列表 </span><span style="font-family: Calibri;">151</span></p> <p>8.4.2 <span style="font-family: 宋体;">提交表单 </span><span style="font-family: Calibri;">153</span></p> <p>8.4.3 <span style="font-family: 宋体;">文本列表 </span><span style="font-family: Calibri;">156</span></p> <p>8.5 <span style="font-family: 宋体;">页脚设计 </span><span style="font-family: Calibri;">158</span></p> <p>8.6 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">159</span></p> <p><span style="font-family: 宋体;">第</span>9<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">图片幻灯页面 </span><span style="font-family: Calibri;">160</span></p> <p>9.1 <span style="font-family: 宋体;">图片幻灯风格页面设计概述 </span><span style="font-family: Calibri;">160</span></p> <p>9.2 <span style="font-family: 宋体;">页眉设计 </span><span style="font-family: Calibri;">161</span></p> <p>9.3 <span style="font-family: 宋体;">页面主体设计 </span><span style="font-family: Calibri;">163</span></p> <p>9.3.1 <span style="font-family: 宋体;">图片幻灯 </span><span style="font-family: Calibri;">163</span></p> <p>9.3.2 <span style="font-family: 宋体;">图标列表 </span><span style="font-family: Calibri;">166</span></p> <p>9.3.3 <span style="font-family: 宋体;">图片特辑 </span><span style="font-family: Calibri;">167</span></p> <p>9.4 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">168</span></p> <p><span style="font-family: 宋体;">第</span>10<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">风格按钮 </span><span style="font-family: Calibri;">169</span></p> <p>10.1 <span style="font-family: 宋体;">风格按钮设计概述 </span><span style="font-family: Calibri;">169</span></p> <p>10.2 <span style="font-family: 宋体;">形状与尺寸风格按钮 </span><span style="font-family: Calibri;">170</span></p> <p>10.3 <span style="font-family: 宋体;">边框风格按钮 </span><span style="font-family: Calibri;">172</span></p> <p>10.4 <span style="font-family: 宋体;">下拉菜单风格按钮 </span><span style="font-family: Calibri;">174</span></p> <p>10.5 <span style="font-family: 宋体;">按钮组风格 </span><span style="font-family: Calibri;">176</span></p> <p>10.6 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">177</span></p> <p><span style="font-family: 宋体;">第</span>11<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">响应式表格设计 </span><span style="font-family: Calibri;">178</span></p> <p>11.1 <span style="font-family: 宋体;">表格设计概述 </span><span style="font-family: Calibri;">178</span></p> <p>11.2 Bootstrap<span style="font-family: 宋体;">基本表格 </span><span style="font-family: Calibri;">180</span></p> <p>11.3 Bootstrap<span style="font-family: 宋体;">数组表格 </span><span style="font-family: Calibri;">182</span></p> <p>11.4 Bootstrap Ajax<span style="font-family: 宋体;">表格 </span><span style="font-family: Calibri;">183</span></p> <p>11.5 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">185</span></p> <p> </p> <p><span style="font-family: 宋体;">第</span>12<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">响应式图表设计 </span><span style="font-family: Calibri;">186</span></p> <p>12.1 <span style="font-family: 宋体;">图表设计概述 </span><span style="font-family: Calibri;">186</span></p> <p>12.2 <span style="font-family: 宋体;">柱状图图表 </span><span style="font-family: Calibri;">188</span></p> <p>12.3 <span style="font-family: 宋体;">折线图图表 </span><span style="font-family: Calibri;">190</span></p> <p>12.4 <span style="font-family: 宋体;">饼状图图表 </span><span style="font-family: Calibri;">195</span></p> <p>12.5 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">198</span></p> <p><span style="font-family: 宋体;">第</span>13<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">jQuery UI Bootstrap</span><span style="font-family: 宋体;">工具 </span><span style="font-family: Calibri;">199</span></p> <p>13.1 jQuery UI Bootstrap<span style="font-family: 宋体;">工具概述 </span><span style="font-family: Calibri;">199</span></p> <p>13.1.1 jQuery UI<span style="font-family: 宋体;">工具 </span><span style="font-family: Calibri;">199</span></p> <p>13.1.2 jQuery UI Bootstrap<span style="font-family: 宋体;">工具 </span><span style="font-family: Calibri;">200</span></p> <p>13.1.3 jQuery UI Bootstrap<span style="font-family: 宋体;">应用 </span><span style="font-family: Calibri;">200</span></p> <p>13.2 <span style="font-family: 宋体;">按钮(</span><span style="font-family: Calibri;">Button</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">201</span></p> <p>13.2.1 <span style="font-family: 宋体;">基本样式按钮 </span><span style="font-family: Calibri;">202</span></p> <p>13.2.2 Set<span style="font-family: 宋体;">样式按钮 </span><span style="font-family: Calibri;">203</span></p> <p>13.2.3 <span style="font-family: 宋体;">工具条样式按钮 </span><span style="font-family: Calibri;">205</span></p> <p>13.3 <span style="font-family: 宋体;">折叠面板(</span><span style="font-family: Calibri;">Accordion</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">206</span></p> <p>13.4 <span style="font-family: 宋体;">对话框(</span><span style="font-family: Calibri;">Dialog</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">209</span></p> <p>13.4.1 <span style="font-family: 宋体;">非模态对话框 </span><span style="font-family: Calibri;">209</span></p> <p>13.4.2 <span style="font-family: 宋体;">模态对话框 </span><span style="font-family: Calibri;">211</span></p> <p>13.5 <span style="font-family: 宋体;">标签页(</span><span style="font-family: Calibri;">Tabs</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">214</span></p> <p>13.5.1 <span style="font-family: 宋体;">基本样式标签页 </span><span style="font-family: Calibri;">214</span></p> <p>13.5.2 <span style="font-family: 宋体;">可编辑样式标签页 </span><span style="font-family: Calibri;">217</span></p> <p>13.6 Overlay<span style="font-family: 宋体;">与</span><span style="font-family: Calibri;">Shadow 223</span></p> <p>13.7 Highlight<span style="font-family: 宋体;">与</span><span style="font-family: Calibri;">Error 224</span></p> <p>13.8 <span style="font-family: 宋体;">日期选择器(</span><span style="font-family: Calibri;">Datepicker</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">226</span></p> <p>13.9 <span style="font-family: 宋体;">滑块(</span><span style="font-family: Calibri;">Slider</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">227</span></p> <p>13.9.1 <span style="font-family: 宋体;">水平滑块(</span><span style="font-family: Calibri;">Horizontal Slider</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">227</span></p> <p>13.9.2 <span style="font-family: 宋体;">垂直滑块(</span><span style="font-family: Calibri;">Vertical Slider</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">228</span></p> <p>13.10 <span style="font-family: 宋体;">自动完成(</span><span style="font-family: Calibri;">Autocomplete</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">230</span></p> <p>13.11 <span style="font-family: 宋体;">下拉菜单(</span><span style="font-family: Calibri;">Menu</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">232</span></p> <p>13.12 <span style="font-family: 宋体;">提示信息(</span><span style="font-family: Calibri;">Tooltip</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">234</span></p> <p>13.13 <span style="font-family: 宋体;">微调按钮(</span><span style="font-family: Calibri;">Spinner</span><span style="font-family: 宋体;">) </span><span style="font-family: Calibri;">236</span></p> <p>13.14 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">239</span></p> <p><span style="font-family: 宋体;">第</span>14<span style="font-family: 宋体;">章 </span><span style="font-family: Calibri;">jQuery Mobile </span><span style="font-family: 宋体;">框架与</span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">主题风格 </span><span style="font-family: Calibri;">240</span></p> <p>14.1 jQuery Mobile Bootstrap<span style="font-family: 宋体;">概述 </span><span style="font-family: Calibri;">240</span></p> <p>14.1.1 jQuery Mobile<span style="font-family: 宋体;">框架 </span><span style="font-family: Calibri;">240</span></p> <p>14.1.2 Bootstrap<span style="font-family: 宋体;">主题风格 </span><span style="font-family: Calibri;">241</span></p> <p>14.1.3 <span style="font-family: 宋体;">应用开发基础 </span><span style="font-family: Calibri;">241</span></p> <p>14.2 <span style="font-family: 宋体;">主页设计 </span><span style="font-family: Calibri;">243</span></p> <p>14.3 <span style="font-family: 宋体;">按钮设计 </span><span style="font-family: Calibri;">245</span></p> <p>14.4 <span style="font-family: 宋体;">列表设计 </span><span style="font-family: Calibri;">248</span></p> <p>14.5 <span style="font-family: 宋体;">导航设计 </span><span style="font-family: Calibri;">251</span></p> <p>14.6 <span style="font-family: 宋体;">表单设计 </span><span style="font-family: Calibri;">255</span></p> <p>14.6.1 <span style="font-family: 宋体;">输入框 </span><span style="font-family: Calibri;">255</span></p> <p>14.6.2 <span style="font-family: 宋体;">滑块 </span><span style="font-family: Calibri;">258</span></p> <p>14.6.3 <span style="font-family: 宋体;">切换开关 </span><span style="font-family: Calibri;">260</span></p> <p>14.6.4 <span style="font-family: 宋体;">复选框 </span><span style="font-family: Calibri;">262</span></p> <p>14.6.5 <span style="font-family: 宋体;">单选框 </span><span style="font-family: Calibri;">264</span></p> <p>14.6.6 <span style="font-family: 宋体;">下拉菜单 </span><span style="font-family: Calibri;">267</span></p> <p>14.6.7 <span style="font-family: 宋体;">提交按钮 </span><span style="font-family: Calibri;">269</span></p> <p>14.7 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">273</span></p> <p><span style="font-family: 宋体;">第</span>15<span style="font-family: 宋体;">章 实战:应用</span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">实现一个贴吧管理页面 </span><span style="font-family: Calibri;">274</span></p> <p>15.1 <span style="font-family: 宋体;">项目设计概述 </span><span style="font-family: Calibri;">274</span></p> <p>15.2 <span style="font-family: 宋体;">页面布局设计 </span><span style="font-family: Calibri;">275</span></p> <p>15.2.1 <span style="font-family: 宋体;">引入</span><span style="font-family: Calibri;">Bootstrap</span><span style="font-family: 宋体;">框架 </span><span style="font-family: Calibri;">275</span></p> <p>15.2.2 <span style="font-family: 宋体;">实现页面布局代码 </span><span style="font-family: Calibri;">276</span></p> <p>15.3 <span style="font-family: 宋体;">页面导航栏设计 </span><span style="font-family: Calibri;">277</span></p> <p>15.3.1 <span style="font-family: 宋体;">构建导航的整体架构 </span><span style="font-family: Calibri;">277</span></p> <p>15.3.2 <span style="font-family: 宋体;">设计标题和导航链接 </span><span style="font-family: Calibri;">278</span></p> <p>15.3.3 <span style="font-family: 宋体;">设计搜索框和通知系统 </span><span style="font-family: Calibri;">279</span></p> <p>15.3.4 <span style="font-family: 宋体;">设计管理员登录系统 </span><span style="font-family: Calibri;">280</span></p> <p>15.3.5 <span style="font-family: 宋体;">设计响应式导航 </span><span style="font-family: Calibri;">282</span></p> <p>15.4 <span style="font-family: 宋体;">左侧边栏设计 </span><span style="font-family: Calibri;">284</span></p> <p>15.5 <span style="font-family: 宋体;">页面主体设计 </span><span style="font-family: Calibri;">285</span></p> <p>15.5.1 <span style="font-family: 宋体;">页面主体功能的头部 </span><span style="font-family: Calibri;">286</span></p> <p>15.5.2 <span style="font-family: 宋体;">页面主体功能的帖子列表 </span><span style="font-family: Calibri;">287</span></p> <p>15.6 <span style="font-family: 宋体;">本章小结 </span><span style="font-family: Calibri;">290</span></p> <p><span style="font-family: 宋体;">附录</span> CSS<span style="font-family: 宋体;">选择器速览 </span><span style="font-family: Calibri;">291</span></p>显示全部信息前 言前 言前 言<br />Bootstrap是由Twitter公司推出的一款前端开发框架,在当前的Web和移动Web应用设计领域中非常受欢迎。基于Bootstrap框架可以实现前端UI设计与后台业务逻辑设计的协作开发,可以**地实现响应式布局界面,可以无缝适配如PC、平板和手机等多种设备终端,可以说Bootstrap是所有前端开发框架中的集大成者。目前图书市场关于Bootstrap框架开发的图书不少,但真正从实际应用出发,通过具体案例来指导读者提高应用开发水平的图书却不多。本书便是以实战为主旨,通过大量的代码实例与项目实例,让读者全面、深入、透彻地理解Bootstrap框架开发的各种热门技术及各种主流框架及其整合使用,提高实际开发水平和项目实战能力。关于Bootstrap框架? Bootstrap不仅是一个CSS框架我们知道,Bootstrap框架是基于CSS标准构建的,但如果仅仅认为其是一个前端CSS框架就太狭隘了。Bootstrap框架*初是由Twitter公司的两个员工发布的,旨在能够让Web应用适应各种不同的设备终端,一经推出就受到业内开发人员的广泛关注。随着Bootstrap框架的快速发展,很快成为开发跨平台和跨设备应用的**前端技术。目前,Bootstrap已经是一款集成HTML5、CSS3和JavaScript技术的开发框架,自身已经构成了独立的开发体系,基于Bootstrap二次开发的插件也非常受欢迎。因此,Bootstrap不再仅仅是一个CSS框架,其涵盖的内容已经十分广泛了。? Bootstrap框架的主流地位Bootstrap框架在学习上需要花费一定的功夫,但在使用上还是照顾设计人员的常规思路,对于有一定的前端开发基础的设计人员还是易学易用的。Bootstrap框架的移动开发特性与当前移动互联网在蓬勃发展的大背景下,二者是相得益彰、相互助力。一方面,随着移动应用程序的大行其道,促使了Bootstrap框架的不断改进与完善;另一方面,随着Bootstrap框架性能的不断提升,可以帮助前端设计开发人员利用Bootstrap框架开发出更强大的移动应用程序。可以说,Bootstrap框架已经占据了移动应用开发的主流地位。? 本书与Bootstrap框架许多人在学习Bootstrap框架的时候经常会搞混一些概念和用法。从某种角度来说,Bootstrap框架是一系列前端技术的集合,并且是不断向前发展的技术。为了帮助那些对移动开发感兴趣的读者能够在较短的时间内掌握Bootstrap框架开发技术,笔者编写了本书。本书首先从Bootstrap框架的基础入手,让读者理解Bootstrap框架究竟如何使用。然后针对Bootstrap框架的内容由浅入深一一进行了讲解,尤其是在移动开发中的应用,以期读者能够掌握Bootstrap框架的核心内容。*后再讲解了基于Bootstrap框架的开发实战,让读者可以快速成为一位**而专业的***。本书特色? 内容丰富,覆盖面广本书基本涵盖Bootstrap框架开发的所有常用知识点及开发工具。无论是初学者,还是有一定基础的Web开发从业人员,通过阅读本书都将获益匪浅。? 注重实践,快速上手本书不以枯燥乏味的理论知识作为讲解的**,而是从实践出发,将必要的理论知识和大量的开发实例相结合,并将笔者多年的实际项目开发经验贯穿于全书的讲解中,让读者可以在较短的时间内理解和掌握所学的知识。? 内容深入、专业本书直击要害,先从标准文档入手,深入浅出地讲解了Web技术的原理;然后结合移动Web开发的相关工具,介绍了实际的移动Web开发,让读者学有所用。? 实例丰富,随学随用本书提供了大量来源于真实Web开发项目的实例,并给出了丰富的程序代码及注释。读者通过研读这些例子,可以了解实际开发中编写代码的思路和技巧,而且还可以将这些代码直接复用,以提高自己的开发效率。本书体系**篇 Bootstrap基础(第1~2章)本篇涵盖的内容包括Bootstrap框架的基础知识和开发入门等内容。第二篇 Bootstrap框架(第3~12章)本篇主要介绍了Bootstrap框架的脚手架、样式设计、组件设计、插件设计与多媒体设计等相关的内容。第三篇 Bootstrap实战(第13~15章)本篇详细讲解了使用Bootstrap框架开发Web应用与移动应用的实战方法,包括多个Web应用与移动应用的案例。代码下载本书代码下载地址(注意数字和英文字母大小写)如下:https://pan.baidu.com/s/1jIzG0Hg(密码:etjr)如果下载有问题,请联系电子邮箱booksaga@163.com,邮件主题为“Bootstrap代码”。本书读者? 需要全面学习移动应用开发技术的人员? Bootstrap初学者? 有一定基础的Web开发人员? Web前端开发工程师? 移动应用开发人员? 浏览器开发人员? 大中专院校的学生? 相关培训班的学员本书作者(封面)杨旺功,男,博士在读,北京印刷学院新媒体学院数字媒体艺术专业教师,主要研究方向是信息与交互设计、虚拟现实、数字娱乐和新媒体艺术等,具有丰富的数字媒体交互产品设计和移动应用UI设计的教学经验。在数字艺术与设计领域成果显著,发表数字艺术论文8篇,出版著作6部。本书由杨旺功主笔,参与本书创作的还有王立平、刘祥淼、彭霁、樊爱宛、张泽娜、曹卉、林江闽、沈超、李阳、李雷霆、韩广义、孙亚南、熊伟,在此表示感谢。由于编者水平有限,书中不足之外在所难免,欢迎广大读者批评指正。<br /><br /><br />作者2017年6月显示全部信息媒体评论评论免费在线读