《Bootstrap开发精解:原理、技术、工具及最佳实践》一导读

简介: 本书就是这样一份内容丰富的资源,它用浅显易懂的方式,让大家掌握各种技术诀窍,进而了解Bootstrap的各种复杂细节。


2c50cf3d3b049a6a11d594fceb131ec60b76a60f

前 言 

Bootstrap是一种能够增强前端网页设计的强大框架,它的第3版引入了更多的特性,包括移动优先(mobile-first)的响应式栅格、LESS变量、特制的组件以及一些可以帮助用户设计动态用户界面的插件等。随着移动网页开发时代的到来,移动和平板设备逐渐成为人们使用Internet的事实标准。所以,我们有必要先从移动优先的角度设计网站,继而再考虑台式和笔记本电脑上更大的屏幕。Bootstrap也可谓是功能丰富,它集成了各种精良的解决方案和特性,可以帮助开发人员快速轻松地实现困难的任务。除了这些内置的特性,社区还对一些附加的资源和第三方工具提供了有力的支持。当我们在构建企业级和美观的网页应用程序时,会用到许多复杂的布局样式,利用这些资源和工具就可以避免在设计中出现大量不确定性因素。本书就是这样一份内容丰富的资源,它用浅显易懂的方式,让大家掌握各种技术诀窍,进而了解Bootstrap的各种复杂细节。
本书内容
第1章是对Bootstrap的简单介绍。本章解释了我们使用Bootstrap的必要性,此外还阐述了Bootstrap为简化网页设计所采用的移动优先方法的相关范例。
第2章以实际演练的方式讨论了Bootstrap的安装和定制,内容涵盖了定制样式、Bootstrap的深度定制和LESS文件的编译。
第3章首先介绍了Bootstrap栅格类的使用,从中我们可以学到如何添加行、列与偏移,如何嵌套列,如何使用不同的变量和mixin。最后,我们将通过一个实际的例子,创建一个自定义的博客布局来进行总结。
第4章首先介绍了排版的相关内容,然后逐一介绍CSS的各种知识,包括表格、表单、按钮和各种响应式工具,也包括在Bootstrap中广泛应用的辅助类工具。
第5章将学习字体图标(glyphicon)和路径导航(breadcrumb)这类流行的组件,此外还将学习一些不同的导航组件,比如导航标签页(nav tab)、胶囊式标签页(nav pill)和下拉菜单,这些组件将帮助大家构建出交互式的网页。
第6章将对其他一些组件进行广泛深入的介绍,包括Well、标签、进度条、徽章、面板、警告框和分页,这些组件是“现代”网站的关键所在,我们藉此可以构建出美观的网站。
第7章将讨论一些官方的和选配的插件,可以实现模态窗(modal)、轮播(carousel)、工具提示(tooltip)和折叠面板(accordion),我们可以利用它们快速开发出动态的网页,而不需要为了实现这些特性而编写很多复杂的代码。
第8章将介绍一些令我们受益的第三方工具和主题,它们简化了Bootstrap的网页设计体验。这部分内容是一个一站式的解决方案,提供了大量的资源,比如模板、自定义布局以及一些代码片段,能够使我们快速轻松地实现可靠的用户界面。本章还对Bootstrap的未来、下一步的发展以及它与WordPress、Joomla这类“未来”的网页设计的重要框架的种种兼容性问题进行了概述。
附加章节向大家逐步描述了构建现代电子商务网站的全过程,有助于大家理解现实场景中的网页设计。这一章是一个样例,供希望能够利用较为轻量的系统和高效的方式构建企业级网站的读者以参考。本章通过网络提供给大家,地址是:https://www.packtpub.com/sites/default/files/downloads/Building%20an%20e-commerce%20Website%20with%20Bootstrap.pdf
阅读本书需要准备的知识
我们除了需要掌握HTML、CSS和JavaScript的基础知识之外,还需要一个编辑器。可以用记事本或Notepad++来处理书中的示例。虽然大部分的代码都是在记事本中编写的,但你可能更喜欢使用Notepad++,因为它是开源的,功能也更为强大,还具有语法高亮和语法折叠等特性,能够帮助我们井然有序地进行编码。
本书阅读对象
本书既适用于初学者,也适用于那些经验丰富的网页设计师和希望构建具有专业外观的动态网站的开发者。对于希望能把Bootstrap应用在开发中的有追求的用户而言,除了HTML、HTML5和CSS的基础知识之外,还要掌握一些(非常基本的)JavaScript知识。读者在阅读本书之前并不需要掌握Bootstrap的有关知识,因为本书将会把Bootstrap应用到你的“宝贝”项目中所需要的所有诀窍都教给你。
格式约定
如果我们希望你关注代码块的某一特定部分,相关的代码行或条目将会加粗显示。
新术语和重要文字将以粗体显示。所有我们在屏幕上看到的文字,比如出现在菜单或对话框中的文本,都将以如下格式显示:“单击下载Bootstrap按钮,文件将会以ZIP格式下载。”
出现在此框中的文字表示警告或重要的注意事项。
出现在此框中的文字表示提示或技巧。
下载示例代码

目 录

第1章 Bootstrap入门
1.1 移动优先的设计
1.2 为什么选择Bootstrap
1.3 小结
第2章 Bootstrap的安装与定制
2.1 在HTML文件中包含Bootstrap
2.2 Bootstrap CDN
2.3 用自定义的CSS进行覆盖
2.4 使用Bootstrap定制程序
2.5 Bootstrap的深度定制
2.6 下载Bootstrap源代码
2.7 编译LESS文件
2.8 整合
2.9 小结
第3章 使用Bootstrap栅格
3.1 使用Bootstrap栅格类
3.1.1 添加行与列
3.1.2 为小型设备定制栅格
3.1.3 为列添加偏移
3.1.4 推拉列
3.1.5 嵌套列
3.2 使用Bootstrap变量和mixin
3.2.1 Bootstrap栅格变量
3.2.2 Bootstrap栅格mixin
3.3 使用Bootstrap栅格mixin和变量创建博客布局
3.4 小结
第4章 使用基本CSS样式
4.1 实现Bootstrap基本CSS样式
4.1.1 标题
4.1.2 页面主体
4.1.3 排版元素
4.1.4 表格
4.1.5 按钮
4.1.6 表单
4.1.7 代码
4.1.8 图片
4.1.9 字体系列
4.1.10 字体尺寸
4.2 使用LESS变量自定义基本CSS样式
4.3 小结

相关文章
|
6月前
|
存储 前端开发 JavaScript
|
6月前
|
前端开发 JavaScript
Javascript知识【BootStrap技术实现商品页面】(下)
Javascript知识【BootStrap技术实现商品页面】
|
前端开发 开发者 容器
Bootstrap- 响应式工具|学习笔记
快速学习 Bootstrap- 响应式工具
116 0
Bootstrap- 响应式工具|学习笔记
|
10月前
|
前端开发 JavaScript 开发者
前端封装库/工具库的UI框架之Bootstrap
随着互联网时代的到来,对于Web应用的UI设计和开发变得越来越重要。而为了更高效地进行UI开发,前端封装库/工具库的出现成为了一个非常好的解决方案。其中一个颇受欢迎的UI框架就是Bootstrap。
121 0
|
JSON 前端开发 JavaScript
地图集web项目_技术学习(二)_bootstrap分页的例子
地图集web项目_技术学习(二)_bootstrap分页的例子
110 0
|
前端开发
bootstrap 原理以及使用方式
bootstrap 原理以及使用方式
|
前端开发
bootstrap 组件之分页 提示框 提示工具组件
bootstrap 组件之分页 提示框 提示工具组件
|
前端开发 JavaScript
bootstrap简介 原理
字体的大小要使用rem, em作为单位, rem是根节点字体的相对大小,是一个相对单位,不是一个绝对单位, 根节点的大小需要使用根据的用户的屏幕尺寸来动态计算font-size的大小
|
JavaScript 前端开发 NoSQL
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
128 0
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
|
前端开发 JavaScript 容器
Bootstrap响应式框架,组件化开发
Bootstrap响应式框架,组件化开发
140 0