Bootstrap实战

第1章　初识Bootstrap1

1.1 数量和质量1

1.1.1 与时俱进1

1.1.2 LESS的威力2

1.2 下载Bootstra...

第1章　初识Bootstrap1

1.1 数量和质量1

1.1.1 与时俱进1

1.1.2 LESS的威力2

1.2 下载Bootstrap2

1.3 准备项目模板文件夹4

1.3.1 下载H5BP4

1.3.2 删除不必要的样板文件4

1.3.3 理解样板中的.htaccess文件5

1.3.4 更新必要的样板文件5

1.3.5 更新站点桌面和触摸设备图标5

1.4 加入Bootstrap文件5

1.4.1 字体6

1.4.2 JavaScript6

1.4.3 暂时不考虑CSS 文件9

1.4.4 复制LESS文件9

1.5 大盘点9

1.6 构造HTML模板10

1.7 设定站点标题12

1.7.1 调整过时的浏览器消息12

1.7.2 设置主结构元素13

1.8 导航条14

1.9 编译和链接默认的Bootstrap CSS15

1.9.1 编译Bootstrap CSS15

1.9.2 完成响应式导航条17

1.9.3 排除故障19

1.9.4 支持IE820

1.10 小结21

第2章　作品展示站点23

2.1 设计目标23

2.2 查看练习文件26

2.3 搭建传送带28

2.4 创建响应式分栏30

2.5 把链接变成按钮31

2.6 理解LESS32

2.6.1 嵌套规则32

2.6.2 变量33

2.6.3 混入33

2.6.4 运算式34

2.6.5 导入文件34

2.6.6 模块化35

2.7 根据需要定制Bootstrap的LESS文件35

2.8 添加Logo图片38

2.9 调整导航项内边距40

2.10 添加图标41

2.11 添加Font Awesome图标43

2.12 调整导航项图标颜色45

2.13 调整响应式导航条断点47

2.14 调整传送带47

2.14.1 把控件改成使用Font Awesome图标48

2.14.2 添加上、下内边距50

2.14.3 强制图片全宽50

2.14.4 约束传送带的高度51

2.14.5 重定位指示器52

2.14.6 调整指示器外观54

2.15 调整分栏及其内容56

2.16 修饰页脚60

2.17 接下来做什么62

2.18 小结63

第3章　WordPress主题64

3.1 下载并重命名Roots主题64

3.2 安装主题66

3.3 配置导航条69

3.4 添加首页内容71

3.5 自定义页面模板75

3.6 理解Roots的基准模板76

3.7 创建自定义的基本模板79

3.8 在自定义结构中使用自定义栏目81

3.9 创建自定义的内容模板83

3.9.1 通过自定义栏目构建传送带84

3.9.2 使用自定义栏目构建三栏内容87

3.10 加入页脚内容88

3.11 Roots的assets文件夹里有什么89

3.12 更换设计资源90

3.13 链接样式表91

3.14 链接JavaScript文件92

3.15 为导航条和页脚添加Logo图片94

3.16 添加图标链接96

3.17 恢复WordPress特有的样式97

3.18 小结99

第4章　企业网站100

4.1 准备启动文件103

4.2 页头区105

4.2.1 把Logo放到导航条上方105

4.2.2 调整导航条108

4.3 添加实用导航110

4.4 调整响应式导航112

4.5 调整配色115

4.6 调整折叠后的导航条配色116

4.7 设计复杂的响应式布局120

4.7.1 调整中、宽布局122

4.7.2 调整标题、字体大小和按钮 124

4.7.3 增大主栏126

4.7.4 调整第三栏128

4.7.5 针对多个视口进行微调131

4.8 复杂的页脚131

4.8.1 准备标记131

4.8.2 调整布局适应平板132

4.8.3 针对性地清除134

4.8.4 修整细节135

4.9 小结138

第5章　电子商务网站139

5.1 商品页的标记141

5.2 面包屑、页面标题和分页导航142

5.3 调整商品网格145

5.4 侧边栏和筛选选项150

5.4.1 基本布局152

5.4.2 Clearance Sale按钮152

5.4.3 选项列表154

5.4.4 为选项链接添加Font Awesome图标复选框156

5.4.5 使用LESS混入在栏中对齐选项159

5.4.6 针对平板和手机调整选项列表布局159

5.4.7 在手机上折叠选项面板161

5.5 小结165

第6章　单页营销网站166

6.1 概况166

6.2 初始文件169

6.3 了解页面内容169

6.4 调整导航条170

6.5 定制高清图171

6.6 美化功能列表178

6.7 装饰用户评论区182

6.7.1 定位及美化说明183

6.7.2 调整说明元素的位置186

6.7.3 添加Bootstrap的网格类187

6.7.4 下载并链接JavaScript插件188

6.7.5 初始化Masonry插件189

6.7.6 切齐图片191

6.7.7 适应小微屏幕194

6.8 吸引人的价目表194

6.8.1 准备变量、文件和标记195

6.8.2 表格头197

6.8.3 表体和表脚199

6.8.4 为不同的价目表添加不同的样式200

6.8.5 适配小视口202

6.8.6 突出重要的表格205

6.9 最后的调整209

6.10 为导航条添加ScrollSpy211

6.11 小结213

附录A　优化站点资源214

附录B　实现响应式图片218

附录C　让传送带支持手势225

下载Bootstrap的途径很多，但通过这些途径下载的文件并不完全一样。为了后面考虑，我们必须保证下载到LESS文件，因为这些文件可以为我们提供定制和创意的基础。在这里，我们直接溯本求源，打开GetBootstrap.com。 打开网站，一眼就能看到大大的“Download Bootstrap”按钮。翻译本书时，最新的版本为v3.2.0。点击这个按钮，进入下载页面： 可以看到中间那个“...

(查看全部试读)