前言
为什么要写这本书
Boostrap是Twitter公司开发的一个基于HTML、CSS和JavaScript的技术框架,集合了最新的前端技术,为实现Web应用程序快速开发提供了一套前端工具包,包括布局、栅格、表格、按钮、表单、导航、提示等。使用Bootstrap可以构建出非常优雅的前端界面,且占用资源非常少。
Bootstrap是目前非常流行的前端开发工具包,具有以下特色:
❑由业内权威专家开发。Twitter是互联网领域的技术先驱,引领时代技术潮流,Twitter前端开发团队是公认的最棒的团队之一,整个Bootstrap项目由经验丰富的工程师和设计师奉献。
❑拥有庞大的用户基础和实践基础,值得信赖。
❑学习和应用门槛比较低,适合各种技术水平的人。
❑跨设备、跨浏览器,为移动开发提供了平稳的开发平台。
❑提供12列栅格布局,使网页布局变得很简单。
❑支持响应式设计,满足不同设备的显示需求。
❑样式化的文档,使学习和参考变得直观、方便。
❑开放式代码库,使Bootstrap成为众多业内好手展示的舞台,也极大丰富了Bootstrap代码库。
❑与jQuery完美融合,可定制jQuery插件。
❑选用LESS构建动态样式,使动态样式开发成为可能,降低了时间成本,却可以编写更快、更灵活的CSS样式表。
❑支持HTML5标签和语法,要求在HTML5文档类型基础上进行设计和开发。
❑支持CSS3所有属性和标准,逐步改进组件以达到最终效果。
Bootstrap始于2011年8月,至今才刚满两年,但是Bootstrap旋风却已刮遍了整个互联网。各种较小的网站就不提了,国内外很多较有名的网站也采用了Bootstrap。对于设计能力不强也没有太多时间去设计前端界面的用户来说,Bootstrap价值巨大。Bootstrap的目的就是帮助开发人员快速开发原型,避免经常从零开始绘制白底黑边的裸图。
Bootstrap框架提供一级的视觉效果,且应用视觉效果是一致的,这一点其实是很难实现的。使用Bootstrap可以确保整个Web应用程序的风格完全一致,用户体验一致,操作习惯一致。如果希望整个网站的链接、按钮、提醒都有统一的视觉效果,那就应该毫不犹豫地选择Bootstrap,此外它还可以对不同级别的提醒使用不同的颜色。
快速应用,简单而优雅,Bootstrap会让Web应用程序看起来与Windows或GNOME下的程序一样,按钮一样,对话框一样,运行快速。越来越多的Web应用程序被直接放在桌面上运行,应用的一致性是趋势,开发人员可以把精力放在业务上,而不是UI设计上。
本书主要内容和特色
本书系统讲解Bootstrap技术的体系结构、基础知识、基本用法,以及各种深度应用。它不是一本语法书,也不是技术全能书,不会告诉读者怎么编写HTML、CSS和JavaScript代码,但它会告诉读者如何驾驭Bootstrap,让Bootstrap成为你的设计宝典、你的前端开发基地。在此基础上,读者可以拓展个人插件,让设计成为一种分享和积累。
简单来说,本书具有如下几个特点(也许这些特点并不都适合你,但是只要满足一条或几条,那么阅读本书或者把本书作为参考都是很合适的):
❑快速上手。Bootstrap是一个比较复杂的前端技术框架,对于基础薄弱的读者来说,初步使用Bootstrap会面临很多困难和障碍。本书从下载Bootstrap框架开始,手把手地说明和演示,帮助读者快速上手,旨在教会读者正确使用Bootstrap,并应用Bootstrap所提供的全部功能。
❑扎实全面。Bootstrap是HTML、CSS和JavaScript技术框架,使用时应具备一定的基础才能够活学活用。本书知识点和技能点兼顾,系统而全面,确保读者在无基础的前提下能够轻松阅读、顺畅理解、心领神会。
❑深入解码。本书对于Bootstrap的剖析不仅关注知识面的系统,更强调技术的深度,特别是Bootstrap插件技术的开发;不仅对Bootstrap内部插件进行深入讲解和剖析,还对插件的设计原理、途径和方法进行解密,以帮助读者用好Bootstrap插件,开发自己的Bootstrap插件。
下面就本书主要内容进行简单说明和梳理。
第1章 为什么要学习Bootstrap
该章从知识角度重点介绍Bootstrap框架的前世今生,以及为什么要学习Bootstrap,如何开始学习等。
第2章 使用Bootstrap的准备
该章重点介绍如何使用Bootstrap,从下载Bootstrap框架、了解Bootstrap工具包类型和内部构成,到如何在页面中正确使用Bootstrap,手把手帮你实现第一个Bootstrap开发示例。
第3章 Bootstrap框架解析
Bootstrap框架主要由动态CSS语言编写,经过Node.js编译后,Bootstrap就是众多CSS的合集。该章就Bootstrap框架进行探索,以期帮助读者掌握该框架的基本实现方式和设计思路,主要包括全局样式表、栅格系统、Bootstrap布局、响应式设计等核心内容。
第4章 优化CSS样式
CSS本身没有可优化的,但是浏览器解析的默认标签样式却不敢恭维。Bootstrap对常用标签样式进行优化,使其更耐看,更精致。Bootstrap的基础CSS(Base CSS)提供了优雅、一致的多种基础HTML页面要素,包括排版、表格、表单、按钮等,能够满足前端工程师的基本设计需求。
第5章 CSS动态样式——LESS
LESS是一种半自动化的动态语言,它使CSS具备了初步编程的能力,在CSS的语法基础之上,引入了变量、混合、运算和函数等特性,大大提升了CSS动态开发能力,降低了CSS的维护成本。就像它的名称所表达的意思,LESS可以让我们用更少的代码做更多的事情。
第6章 使用Bootstrap组件
Bootstrap作为完整的前端工具集,内建了大量强大、优雅且可重用的组件。该章详细介绍按钮(button)、导航(navigation)、标签(label)、徽章(badge)、排版(typography)、缩略图(thumbnail)、提醒(alert)、进度条(progress bar)、杂项(miscellaneous)组件的结构和基本应用。
第7章 使用Bootstrap插件
Bootstrap自带了13个JavaScript插件,这些插件为Bootstrap组件赋予了生命,因此用户在学习使用Bootstrap组件的同时,还必须学习使用Bootstrap插件。该章将详细介绍这些插件的使用技法。
第8章 Bootstrap扩展
虽然Bootstrap自带很多JavaScript插件,但是一些常用的控件却没有,如Datepicker等。该章将介绍几款比较流行的Bootstrap扩展插件,帮助读者认识如何设计和使用Bootstrap外部插件,以弥补Bootstrap的不足之处。
第9章 使用Bootstrap快速开发社区分享网站
该章中的示例构建的主题是一个基本单词分享的学习型网站,旨在帮助读者学习如何用Bootstrap制作自己的响应式社区网站。Bootstrap是一个响应式框架,用它创建一个响应式Web应用程序将是一个伟大的起点。
第10章 Bootstrap内核解码
该章从Bootstrap应用阶段上升到源码分析阶段,帮助读者掌握Bootstrap设计原理,为Bootstrap二次开发打好基础。
读者对象
本书适合以下读者阅读:
❑打算学习DIV+CSS的设计人员。
❑打算学习JavaScript的开发人员。
❑有意提升自己网站设计水平和Web应用程序开发能力的Web开发人员。
❑希望全面深入理解Bootstrap框架的初学者。
❑没有UI设计经验的程序员。
❑希望快速搭建界面的网页设计人员。
此外,本书也适合熟悉下列相关技术的读者阅读:
❑PHP/ASP/JSP
❑jQuery
❑AJAX
❑HTML/XML
❑CSS
❑JavaScript
对于没有计算机基础知识的初学者,以及只想快速搭建网站UI和交互功能的读者,阅读本书前建议先阅读HTML、CSS和JavaScript基础教程类图书。
如何阅读本书
“工欲善其事,必先利其器”,在“善其事”之前,要先检查“器”是否已经磨得足够锋利,是否能够在前进的道路上披荆斩棘。无论将来的职业发展方向是架构师、设计师、分析师、管理者,还是其他职位,只要与Web设计打交道,就有必要打好技术基础。本书涉及的是核心的Bootstrap框架技术,如果能全部理解并付诸实践,一定可以提升读者的Web设计和开发水平。
要用好本书,读者应当准备一些HTML基础知识,如果熟悉CSS样式,将更容易理解一些设计规则。由于Bootstrap是一个前端综合技术框架,因而如果读者希望系统掌握Bootstrap,并开发自己的Bootstrap插件,则应该掌握JavaScript语言基础;如果仅仅是为了用好Bootstrap,则可以不考虑。
资源和勘误
本书编写过程中得到了以下人员的帮助:马本连、吴建华、江淑军、李斌、李经键、郑伟、田蜜、陆颖、王慧明、张炜、陈锐、王幼平、杨龙贵、苏震巍、崔鹏飞等,非常感谢他们。由于作者的水平有限,加之编写时间仓促,书中难免会出现一些错误或不准确的地方,恳请读者批评指正。书中的全部源文件可以从华章网站(www.hzbook.com)下载。如果您有任何意见和建议,欢迎发送邮件至邮箱js_code@126.com,期待得到您的真诚反馈。
致谢
感谢机械工业出版社华章公司策划编辑杨福川在这一年多的时间中始终支持我的写作,他的鼓励和帮助让我顺利完成了本书。
最后感谢我的父母,感谢他们的养育之恩,感谢他们时时刻刻给我信心和力量!
谨以此书献给我最爱的家人,以及众多热爱网页设计的朋友们!
成林