Bootstrap是由Twitter公司的设计师Mark Otto(马克·奥托)和Jacob Thornton(雅各布·桑顿)合作开发的开源框架,该框架基于HTML、CSS和JavaScript语言编写,于2011年8月在GitHub上发布,一经推出就颇受欢迎。Bootstrap具有简单、灵活的特性,常用于开发响应式布局和移动设备优先的Web项目,能够帮助开发者快速搭建前端页面。
到目前为止,Bootstrap已经发布了多个版本,在本书编写时Bootstrap的最新版本是4.4.1。
小提示:
所谓框架,顾名思义就是一套架构,它有一套比较完整的解决方案,而且控制权在框架本身。Bootstrap是一款用于网页开发的框架,它拥有样式库、组件和插件,使用者需要按照框架所规定的某种规范进行开发。
通过Bootstrap框架结合HTML、CSS和JavaScript技术,可以构建出非常优雅的前端页面,而且占用资源较小。Bootstrap框架的特点如下。
Bootstrap框架为用户提供了一套响应式的移动设备优先的流式栅格系统,拥有完备的框架结构,项目开发方便、快捷,提高了开发效率。
随着移动设备的使用者越来越多,自Bootstrap 3开始,框架设计理念发生了改变,转为以移动设备优先为目标,Bootstrap 3默认样式为移动设备提供了友好的支持。
目前主流浏览器都支持Bootstrap框架,包括IE、Firefox、Chrome、Safari等。Bootstrap 4兼容IE 10+和iOS 7+。
学习Bootstrap框架的门槛不高,只需要读者具备HTML、CSS和JavaScript的基础知识即可。Bootstrap框架拥有完善的文档,在开发中便于查找,使用起来比较方便。Bootstrap还具有强大的扩展性,能够很好地与现实中的Web开发项目相结合。
CSS预编译的工作原理是,提供便捷的语法和特性以便开发者编写源码,然后使用专门的编译工具将源码转化为CSS语法。Bootstrap 4中使用Sass(一种CSS扩展语言)进行CSS编写和预编译,减少了冗余代码,使CSS样式代码更容易维护和扩展。
Bootstrap框架发展比较成熟,它不断适应Web技术的发展,在原有的基础上进行更新迭代和完善,并在大量的项目中被广泛使用,并通过不断测试得以完善。
Bootstrap框架提供了功能强大的组件与插件,如小图标、按钮组、菜单导航、标签页等。丰富的组件和插件可以使开发人员快速搭建前端页面。开发人员还可以根据实际需要进行组件和插件的定制。
Bootstrap预定义了一套CSS样式库和一套对应的JavaScript代码,在使用时只需提供基本的HTML结构,并添加Bootstrap预先提供的class名称,就可以实现指定的效果。在熟悉了Bootstrap的基本概念后,下面介绍Bootstrap的主要组成部分。
Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。
Bootstrap自带全局的CSS样式,并预先定义了基本的HTML元素样式、可扩展的class,以及一个先进的栅格布局系统。Bootstrap的全局样式在Normalize.css(一款用来重置浏览器默认样式的样式库)的基础上,进行了一些改良,目的是让其更符合Bootstrap的设计思想。
Bootstrap包含了丰富的组件库,提供了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等。
Bootstrap提供了一些基于jQuery(一个用于简化JavaScript库)构建的可选插件,用于实现某些功能,如分页、文件选择、日期选择等。
小提示:
Bootstrap框架还允许开发人员自由定制Bootstrap的组件、Sass变量和jQuery插件,从而得到一套自定义的版本,提高了开发的灵活性。