前言

前言

2011年8月,Twitter Bootstrap横空出世。如今,这个被称为Bootstrap的框架,俨然已成为前端设计领域最受欢迎的辅助技术。

在和Bootstrap打了5年多的交道后,我很高兴能写作本书并与你分享自己的经验。在CSS和HTML领域,Bootstrap引领我使用相关的最佳实践。它在帮助交付稳定成果的同时,也大大提升了我的工作效率。毫无疑问,Bootstrap使我成为了更优秀的Web开发人员。

Bootstrap 4是又一个里程碑式的版本,它针对现代浏览器优化了核心代码。使用Bootstrap,即可用一套代码来搭建在各种设备类型和设备尺寸上都有良好表现的网站与应用。

Bootstrap是基于MIT许可证而发布的开源软件,它的网站托管、开发与维护均在GitHub上进行。

本书详细介绍Bootstrap的使用方法。全书简明易懂,循序渐进,让你时时处处体验到自定义和重编译Bootstrap的Sass文件的强大威力,同时掌握应用Bootstrap的JavaScript插件设计专业用户界面的技巧。

最后,本书并不局限于Bootstrap。Bootstrap只是一个工具,一种达到目标的手段。学完这本书之后,你将成为一位更加熟练、高效的Web设计师。

本书内容

第1章“初识Bootstrap”,教大家如何下载Bootstrap,如何基于HTML5 Boilerplate设置站点模板,以及如何把Bootstrap的Sass文件编译为CSS。

第2章“用Gulp打造自己的构建流程”,教大家如何用Gulp来创建Bootstrap项目的构建流程。你可将这一流程重用于自己的新项目。构建流程会把自己的Sass代码编译成CSS代码,准备JavaScript代码,以及运行静态网页服务器以测试结果。

第3章“用Bootstrap和Sass定制博客站点”,带大家初识Sass。你将学习如何使用Sass来定制Bootstrap组件。本章将为Web日志开发一个网页,并以不同的策略用Sass来调整样式。

第4章“WordPress主题”,学习把个人作品展示站点转换成一个WordPress主题。本章要利用知名的JBST 4 Starter Theme,还会定制模板文件、Sass、CSS和JavaScript,以满足自身的需要。

第5章“作品展示站点”,开始学习创建简单的个人作品展示站点,包括全宽的传送带切换效果、三栏文本布局,以及使用Font Awesome的字体图标——通过自定义Bootstrap的Sass文件以及增加自己的Sass文件来实现。

第6章“企业网站”,学习如何创建复杂的页头区,添加下拉菜单和实用导航,以及构建复杂的三栏布局和四栏页脚,同时还要确保所有这些内容具有完全的响应能力。

第7章“电子商务网站”,带领大家探索商品展示页面的设计,学会在复杂的响应式网格中管理多行商品。与此同时,还要实现一个响应式设计的选项,可根据目录、品牌等筛选商品。

第8章“单页面营销网站”,教大家如何设计一个漂亮的单页面滚动式营销网站,包括大字欢迎语、带大图标的商品特征列表、图片墙式的用户评论区,以及三个精美的价目表。

第9章“用Bootstrap搭建Angular应用”,学习如何用Bootstrap 4来创建Angular应用。本章最后将介绍一些用于项目部署的其他工具。

本书要求

要完成本书各章的项目,需要安装下列软件:

  • 现代浏览器;
  • 文本或代码编辑器;
  • 在系统中安装Node.js。

 写作本书时,我们使用最新的Bootstrap稳定版:Alpha 4。之后的重要更新则会包含在Bootstrap 4的正式发行版中。

读者对象

本书适合已经熟练掌握HTML和CSS基础,且熟悉规范的HTML5标记和样式表的写法的读者。了解JavaScript的基础知识会更好,因为本书会用到Bootstrap的jQuery插件。本书经常会用LESS来自定义、编写和编译样式表,因此熟悉LESS的读者在处理其细节时会感觉更轻松一些。不过,即便从来没有使用过LESS,本书由浅入深的介绍,也会让你顺利入门。

本书约定

本书正文中有很多种版式,以区分不同的信息。以下是这些版式的举例及其意义的解释。

代码段将以等宽字体印刷,比如:

.btn-tomato {
  color: white;
  background-color: tomato;
  border-color: white;
}

命令行中的输入和输出会以下面的方式来显示:

npm install --global gulp-cli

新术语和重要的词汇将采用黑体字。

 这个图标表示警告或需要特别注意的内容。

 这个图标表示提示或技巧。

读者反馈

欢迎提出反馈,你对本书有任何想法,喜欢它什么,不喜欢它什么,请告诉我们。要写出真正对大家有帮助的图书,你的反馈很重要。一般的反馈,请发送电子邮件至feedback@packtpub. com,并在邮件主题中注明书名。如果你掌握某个主题的专业知识,并且有兴趣写成或帮助促成一本书,请参考我们的作者指南:http://www.packtpub.com/authors

客户支持

现在,你是一位令我们自豪的Packt图书的拥有者,我们会尽全力帮你充分利用你手中的书。

下载示例代码1

1你可以直接访问本书中文版页面,下载本书项目的源代码:http://ituring.cn/book/1961。——编者注

你可以用你的账户从http://www.packtpub.com下载本书的示例代码文件。如果你从其他地方购买的本书,可以访问http://www.packtpub.com/support并注册,我们将通过电子邮件把文件发送给你。

可以按以下步骤来下载源代码文件。

(1) 在我们的网站上,用电子邮箱和密码登录或注册。

(2) 将鼠标悬浮到页面顶部的SUPPORT标签上。

(3) 点击“Code Download & Errata”。

(4) 在Search搜索框中输入本书书名。

(5) 选择需要下载源代码的相应图书。

(6) 在下拉菜单中选择购买本书的途径。

(7) 点击“Code Download”。

文件下载完成后,请用以下软件的最新版本将其解压缩成文件夹:

  • 在Windows上,使用WinRAR / 7-Zip
  • 在Mac上,使用Zipeg / iZip / UnRarX
  • 在Linux上,使用7-Zip / PeaZip

本书的代码同时还托管在GitHub上,地址为https://github.com/PacktPublishing/Bootstrap-4-Site-Blueprints。通过访问https://github.com/PacktPublishing/,还可以下载其他更多图书与视频所附带的源代码。试一下吧!

下载本书中的彩图

本书还提供了一个PDF文件,其中包括了书中所使用到的截图/图表的彩图。这些彩图可以帮助你更好地理解输出的变化。可以从以下地址下载该文件:http://www.packtpub.com/sites/default/files/downloads/Bootstrap4SiteBlueprints_ColorImages.pdf

勘误表

虽然我们已尽力确保本书内容正确,但出错仍旧在所难免。如果你在我们的书中发现错误,不管是文本还是代码,希望能告知我们,我们不胜感激。这样做,你可以使其他读者免受挫败,以及帮助我们改进本书的后续版本。如果你发现任何错误,请访问http://www.packtpub.com/submit-errata提交。2选择书名,点击Errata Submission Form链接,并输入详细说明。勘误一经核实,你的提交将被接受,此勘误将上传到本公司网站或添加到现有勘误表。

2本书中文版的勘误请到http://ituring.cn/book/1961查看和提交。——编者注

如需查看已提交的勘误,可以访问https://www.packtpub.com/books/content/support,在搜索区输入书名进行搜索。勘误信息会显示在Errata区域中。

侵权行为

版权材料在互联网上的盗版是所有媒体都要面对的问题。Packt非常重视保护版权和许可证。如果你发现我们的作品在互联网上被以任何形式非法复制,请立即为我们提供地址或网站名称,以便我们可以寻求补救。

请把可疑盗版材料的链接发到copyright@packtpub.com

非常感谢你帮助我们维护作者,以及我们给你带来有价值内容的能力。

问题

如果你对本书内容存有疑问,不管是哪个方面,都可以通过questions@packtpub.com联系我们,我们将尽最大努力来解决。

电子书

扫描如下二维码,即可购买本书电子版。

{%}

目录

  • 版权声明
  • 前言
  • 第 1 章 初识Bootstrap
  • 第 2 章 用Gulp打造自己的构建流程
  • 第 3 章 用Bootstrap和Sass定制博客站点
  • 第 4 章 WordPress主题
  • 第 5 章 作品展示站点
  • 第 6 章 企业网站
  • 第 7 章 电子商务网站
  • 第 8 章 单页面营销网站
  • 第 9 章 用Bootstrap搭建Angular应用