JSP2.0技术手册完整版.pdf

发布时间：2022-06-14 发布人：admin 分类：说明书资料大小：11.33M 资料格式：pdf 举报版权申诉

5c62d8c7-7204-4f20-80d3-a328d2b10993.pdf-第1页.png

第1页 / 共237页

5c62d8c7-7204-4f20-80d3-a328d2b10993.pdf-第2页.png

第2页 / 共237页

5c62d8c7-7204-4f20-80d3-a328d2b10993.pdf-第3页.png

第3页 / 共237页

5c62d8c7-7204-4f20-80d3-a328d2b10993.pdf-第4页.png

第4页 / 共237页

5c62d8c7-7204-4f20-80d3-a328d2b10993.pdf-第5页.png

第5页 / 共237页

5c62d8c7-7204-4f20-80d3-a328d2b10993.pdf-第6页.png

第6页 / 共237页

5c62d8c7-7204-4f20-80d3-a328d2b10993.pdf-第7页.png

第7页 / 共237页

5c62d8c7-7204-4f20-80d3-a328d2b10993.pdf-第8页.png

第8页 / 共237页

扉页

前言

第1章初识Bootstrap

1.1　数量和质量

1.1.1　与时俱进

1.1.2　LESS的威力

1.2　下载Bootstrap

1.3　准备项目模板文件夹

1.3.1　下载H5BP

1.3.2　删除不必要的样板文件

1.3.3　理解样板中的.htaccess文件

1.3.4　更新必要的样板文件

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

1.4　加入Bootstrap文件

1.4.1　字体

1.4.2　JavaScript

1.4.3　暂时不考虑CSS文件

1.4.4　复制LESS文件

1.5　大盘点

1.6　构造HTML模板

1.7　设定站点标题

1.7.1　调整过时的浏览器消息

1.7.2　设置主结构元素

1.8　导航条

1.9　编译和链接默认的Bootstrap CSS

1.9.1　编译Bootstrap CSS

1.9.2　完成响应式导航条

1.9.3　排除故障

1.9.4　支持IE8

1.10　小结

第2章作品展示站点

2.1　设计目标

2.2　查看练习文件

2.3　搭建传送带

2.4　创建响应式分栏

2.5　把链接变成按钮

2.6　理解LESS

2.6.1　嵌套规则

2.6.2　变量

2.6.3　混入

2.6.4　运算式

2.6.5　导入文件

2.6.6　模块化

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

2.8　添加Logo图片

2.9　调整导航项内边距

2.10　添加图标

2.11　添加Font Awesome图标

2.12　调整导航项图标颜色

2.13　调整响应式导航条断点

2.14　调整传送带

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

2.14.2　添加上、下内边距

2.14.3　强制图片全宽

2.14.4　约束传送带的高度

2.14.5　重定位指示器

2.14.6　调整指示器外观

2.15　调整分栏及其内容

2.16　修饰页脚

2.17　接下来做什么

2.18　小结

第3章 WordPress 主题

3.1　下载并重命名Roots主题

3.2　安装主题

3.3　配置导航条

3.4　添加首页内容

3.5　自定义页面模板

3.6　理解Roots的基准模板

3.7　创建自定义的基本模板

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

3.9　创建自定义的内容模板

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

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

3.10　加入页脚内容

3.11　Roots的assets文件夹里有什么

3.12　更换设计资源

3.13　链接样式表

3.14　链接JavaScript文件

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

3.16　添加图标链接

3.17　恢复WordPress特有的样式

3.18　小结

第4章企业网站

4.1　准备启动文件

4.2　页头区

4.2.1　把Logo放到导航条上方

4.2.2　调整导航条

4.3　添加实用导航

4.4　调整响应式导航

4.5　调整配色

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

4.7　设计复杂的响应式布局

4.7.1　调整中、宽布局

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

4.7.3　增大主栏

4.7.4　调整第三栏

4.7.5　针对多个视口进行微调

4.8　复杂的页脚

4.8.1　准备标记

4.8.2　调整布局适应平板

4.8.3　针对性地清除

4.8.4　修整细节

4.9　小结

第5章电子商务网站

5.1　商品页的标记

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

5.3　调整商品网格

5.4　侧边栏和筛选选项

5.4.1　基本布局

5.4.2　Clearance Sale按钮

5.4.3　选项列表

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

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

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

5.4.7　在手机上折叠选项面板

5.5　小结

第6章单页营销网站

6.1　概况

6.2　初始文件

6.3　了解页面内容

6.4　调整导航条

6.5　定制高清图

6.6　美化功能列表

6.7　装饰用户评论区

6.7.1　定位及美化说明

6.7.2　调整说明元素的位置

6.7.3　添加Bootstrap的网格类

6.7.4　下载并链接JavaScript插件

6.7.5　初始化Masonry插件

6.7.6　切齐图片

6.7.7　适应小微屏幕

6.8　吸引人的价目表

6.8.1　准备变量、文件和标记

6.8.2　表格头

6.8.3　表体和表脚

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

6.8.5　适配小视口

6.8.6　突出重要的表格

6.9　最后的调整

6.10　为导航条添加ScrollSpy

6.11　小结

附录

附录A　优化站点资源

附录B　实现响应式图片

附录C　让传送带支持手势

Bootstra Bootstrap Site Blueprints ［美］David Cochran著李松峰译 Ian Whitley 人民邮电出版社北京

内容提要 Bootstrap 是前端开发中应用非常广泛的一个框架，最早是 Twitter 公司内部的一个工具，开源之后迅速得到了各方的认可。本书基于最新的 Bootstrap 3 撰写，在简单介绍了安装与配置之后就直奔主题，分别讨论了个人作品站点、WordPress 主题、企业网站、电子商务网站和单页营销网站等几个最具代表性的应用案例，结合这些案例细致地剖析了 Bootstrap 还有 LESS 的使用方式和技巧。本书适合所有前端开发人员及个人网站设计者阅读参考。 ◆ ◆ ◆ 著　　　　[美] David Cochran [美] Ian Whitley 译　　　　李松峰责任编辑　岳新欣责任印制　杨林杰人民邮电出版社出版发行　　北京市丰台区成寿寺路11号邮编　100164　　电子邮件　315@ptpress.com.cn 网址　http://www.ptpress.com.cn 北京　　　　　　印刷开本：800×1000　1/16 印张：15 字数：273千字印数：1 — 3 500册 2015年 5 月第 1 版 2015年 5 月北京第 1 次印刷著作权合同登记号图字：01-2014-8582号读者服务热线：(010)51095186转600　印装质量热线：(010)81055316 定价：49.00元反盗版热线：(010)81055315 广告经营许可证：京崇工商广字第 0021 号

错误！文档中没有指定样式的文字。 1 版权声明 Copyright © 2014 Packt Publishing. First published in the English language under the title Bootstrap Site Blueprints. Simplified Chinese-language edition copyright © 2015 by Posts & Telecom Press. All rights reserved. 本书中文简体字版由Packt Publishing授权人民邮电出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。版权所有，侵权必究。 XVW Upup 1 2 3 4 5 6 7 8 9 10 11 12 13

前言 1 前言 2011 年 8 月，Twitter Bootstrap 横空出世。如今，这个被称为 Bootstrap 的框架，俨然已成为前端设计领域最受欢迎的辅助技术。Bootstrap 3 又是一个里程碑式的版本，增加了移动优先的响应式网格、新的强大的 LESS 混入，而且还针对现代浏览器对核心代码进行了优化。本书详细介绍 Bootstrap 的使用方法。全书简明易懂，循序渐进，让读者时时处处体验到自定义和重编译 Bootstrap 的 LESS 文件的强大威力，同时掌握应用 Bootstrap 的 JavaScript 插件设计专业用户界面的技巧。这本书并不局限于 Bootstrap。Bootstrap 只是一个工具，一个达到目标的手段。学习完这本书之后，读者将成为一位更加高效、熟练的 Web 设计师。本书内容第 1 章“初识 Bootstrap”，教给大家如何下载 Bootstrap，如何基于 HTML5 Boilerplate 设置站点模板，并且掌握把 Bootstrap 的 LESS 文件编译为 CSS 的方法。第 2 章“作品展示站点”，开始学习创建简单的个人作品展示网站，包括全宽的传送带切换效果，三栏文本布局，以及使用 Font Awesome 的字体图标——通过自定义 Bootstrap 的 LESS 文件。第 3 章“WordPress 主题”，学习把第 2 章的个人作品展示站点转换成一个 WordPress 主题。这一章要利用有名的 Roots Theme，根据我们的需要，还会涉及自定义模板文件、 LESS、CSS 和 JavaScript。第 4 章“企业网站”，将通过创建一个企业级网站学习如何创建复杂的页头区，添加下拉菜单和实用导航，以及构建复杂的三栏布局和四栏页脚，同时还要确保所有这些内容具有完全的响应能力。第 5 章“电子商务网站”，带领大家探索商品展示页面的设计，学会在复杂的响应式网格中控制多行商品。与此同时，还要实现一个响应式的商品筛选工具。第 6 章“单页营销网站”，这一章教给大家构建时尚的单页营销网站，包括带高清图的大 1 2 3 4 5 6 7 8 9

2 前言字欢迎语、带大图标的商品功能列表、图片墙式的用户评论区，以及三个精美的价目表，最终完成一个支持动态滚动导航的漂亮的单页网站。附录 A“优化站点资源”，以第 2 章的网站资源为例，介绍了为最终部署网站而优化 Bootstrap LESS/CSS 及 JavaScript 等静态资源的基本流程和工具。这个附录对所有 Bootstrap 项目都一样有用。附录 B“实现响应式图片”，介绍最前沿的响应式图片解决方案 Picturefill，仍然以第 2 章项目中的作品图片传送带为例。这个附录对其他项目也一样有用。附录 C“让传送带支持手势”，介绍在 Bootstrap 的传送带中使用一款先进的插件 Hammer.js，实现传送带图片的轻扫切换功能。本书要求要完成本书各章的项目，需要安装下列软件：  现代浏览器（包括 Internet Explorer 8 及以上版本）；  代码编辑器；  LESS 编译器，其 less.js 的版本至少是 1.3.3。读者对象本书适合已经熟练掌握 HTML 和 CSS 基础的读者，最好是熟悉规范的 HTML5 和样式表的写法。了解 JavaScript 的基本知识，包括 Bootstrap 的 jQuery 插件用法更好。本书经常会涉及自定义 LESS 文件，因此熟悉 LESS 的读者会感觉更轻松一些。不过，即便从来没有使用过 LESS，本书由浅入深的介绍，也会让你顺利入门。本书约定本书正文中会涉及很多种版式，以区分不同的信息。以下是这些版式的解释。正文中的代码将以代码体印刷，比如： Header set Access-Control-Allow-Origin "*" 新术语和重要的词汇将以楷体印刷。截屏、对话框或菜单中的词汇，会保留英文原文。比如，“请单击 Download 按钮”。

前言 3 这个图标表示警告或需要特别注意的内容。这个图标表示提示或技巧。读者反馈欢迎提出反馈，你对本书有任何想法，喜欢它什么，不喜欢它什么，请让我们知道。要写出真正对大家有帮助的图书，读者的反馈很重要。一般的反馈，请发送电子邮件至 feedback@packtpub.com，并在邮件主题中包含书名。如果你有某个主题的专业知识，并且有兴趣写成或帮助促成一本书，请参考我们的作者指南 http://www.packtpub.com/authors。客户支持现在，你是一位令我们自豪的 Packt 图书的拥有者，我们会尽全力帮你充分利用你手中的书。下载示例代码① 你可以用你的账户从 http://www.packtpub.com 下载所有已购买 Packt 图书的示例代码文件。如果你从其他地方购买本书，可以访问 http://www.packtpub.com/support 并注册，我们将通过电子邮件把文件发送给你。勘误表② 虽然我们已尽力确保本书内容正确，但出错仍旧在所难免。如果你在我们的书中发现错误，不管是文本还是代码，希望能告知我们，我们不胜感激。这样做，你可以使其他读者免受挫败，帮助我们改进本书的后续版本。如果你发现任何错误，请访问 http://www.packtpub.com/submit-errata 提交，选择你的书，点击勘误表提交表单的链接，并输入详细说明。勘误一经核实，你的提交将被接受，此勘误将上传到本公司网站或添加到现有勘误表。从 http://www.packtpub.com/support 选择书名就可以查看现有的勘误表。 —————————— ① 读者可以直接访问本书中文版页面，下载本书项目的源代码：http://ituring.cn/book/1418。——编者注 ② 对中文版的勘误，请读者直接到本书中文版页面提交：http://ituring.cn/book/1418。——编者注 1 2 3 4 5 6 7 8 9

4 前言侵权行为版权材料在互联网上的盗版是所有媒体都要面对的问题。Packt 非常重视保护版权和许可证。如果你发现我们的作品在互联网上被非法复制，不管以什么形式，都请立即为我们提供位置地址或网站名称，以便我们可以寻求补救。请把可疑盗版材料的链接发到 copyright@packtpub.com。非常感谢你帮助我们保护作者，以及保护我们给你带来有价值内容的能力。问题如果你对本书内容存有疑问，不管是哪个方面，都可以通过 questions@packtpub.com 联系我们，我们将尽最大努力来解决。

目录 1 目录第 1 章初识 Bootstrap ...................................1 1.1 数量和质量 ................................................1 1.1.1 与时俱进 ........................................1 1.1.2 LESS 的威力 ..................................2 1.2 下载 Bootstrap ...........................................2 1.3 准备项目模板文件夹.................................4 1.3.1 下载 H5BP .....................................4 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 JavaScript .......................................6 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 CSS ..........15 1.9.1 编译 Bootstrap CSS......................15 1.9.2 完成响应式导航条.......................17 1.9.3 排除故障 ......................................19 1.9.4 支持 IE8 .......................................20 1.10 小结 .......................................................21 第 2 章作品展示站点 ...................................23 2.1 设计目标..................................................23 2.2 查看练习文件 ..........................................26 2.3 搭建传送带..............................................28 2.4 创建响应式分栏 ......................................30 2.5 把链接变成按钮 ......................................31 2.6 理解 LESS ...............................................32 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 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

分享到：

赞收藏

资料库

JSP2.0技术手册完整版.pdf

相关推荐

开发技术

热门标签

最新资料