Bootstrap实战 内容简介

Bootstrap实战 内容简介

Bootstrap实战 目录

Bootstrap实战 精彩文摘

基于Bootstrap 3.0撰写五大应用实例,全面掌握Bootstrap使用技巧学会重编辑LESS文件和使用Bootstrap的JS插件Bootstrap是前端开发中应用非常广泛的一个框架,是Twitter公司内部的一个工具,开源之后迅速得到了各方的认可。本书基于Bootstrap 3撰写,在简单介绍了安装与配置之后就直奔主题,分别讨论了个人作品站点、WordPress主题、企业网站、电子商务网站和单页营销网站等几个具代表性的应用案例,结合这些案例细致地剖析了Bootstrap还有LESS的使用方式和技巧。第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章 初识Bootstrap1.1 数量和质量1.1.1 与时俱进1.1.2 LESS的威力1.2 下载Bootstrap1.3 准备项目模板文件夹1.3.1 下载H5BP1.3.2 删除不必要的样板文件1.3.3 理解样板中的.htaccess文件1.3.4 更新必要的样板文件1.3.5 更新站点桌面和触摸设备图标1.4 加入Bootstrap文件1.4.1 字体1.4.2 JavaScript1.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 CSS1.9.1 编译Bootstrap CSS1.9.2 完成响应式导航条1.9.3 排除故障1.9.4 支持IE81.10 小结第2章 作品展示站点2.1 设计目标2.2 查看练习文件2.3 搭建传送带2.4 创建响应式分栏2.5 把链接变成按钮2.6 理解LESS2.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 为导航条添加ScrollSpy6.11 小结附录A 优化站点资源附录B 实现响应式图片附录C 让传送带支持手势初识Bootstrap作为Web前端开发框架,Bootstrap的流行很容易理解。它为大多数标准的UI设计场景提供了用户友好、跨浏览器的解决方案。它现成可用且经受了社区考验的HTML标记、CSS样式及JavaScript行为的组合,极大提高了Web前端界面的开发效率,创造了令人愉悦效果。有了这些基本的元素,开发人员就有了构建自己定制方案的坚实基础。不过,流行、高效、有效也不一定都是好事。由于工具便捷而导致人们养成坏习惯的例子屡见不鲜。然而,Bootstrap却没有这个问题,至少不一定存在这个问题。从它面世就一直关注它的人都知道,它的早期版本和更新有时候会更侧重实际效率,而非最佳实践。事实上,一些最佳实践不管是语义标记还是移动优先的设计,抑或资源性能优化,都需要额外的时间和精力才能实现。不过,流行、高效、有效也不一定都是好事。由于工具便捷而导致人们养成坏习惯的例子屡见不鲜。然而,Bootstrap却没有这个问题,至少不一定存在这个问题。从它面世就一直关注它的人都知道,它的早期版本和更新有时候会更侧重实际效率,而非最佳实践。事实上,一些最佳实践不管是语义标记还是移动优先的设计,抑或资源性能优化,都需要额外的时间和精力才能实现。1.1 数量和质量运用得当的情况下,我认为Bootstrap无论从质量还是效率角度说,都是Web开发社区的一大福利。随着越来越多的开发者使用这个框架,越来越多的人也加入了这个社区,从而逐步接受了前沿的最佳实践。Bootstrap从一开始就鼓励可靠、成熟的及面向未来的CSS方案,比如Nicholas Galagher的Normalize.css和用CSS3方案解决图片过多的问题。此外,它也支持HTML5语义标记。

类似文章

发表评论

您的电子邮箱地址不会被公开。