Bootstrap
Bootstrap是一组用于网站和网络应用程序开发的开源前端(所谓“前端”,指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码)框架,包括HTML、CSS及JavaScript的框架,提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件,旨在使动态网页和Web应用的开发更加容易。
原作者 | Mark Otto, Jacob Thornton |
---|---|
開發者 | Bootstrap Core Team |
初始版本 | 2011年8月19日 |
穩定版本 | 4.6.0[1] (2021年1月19日,33天前) |
源代码库 | |
编程语言 | HTML、CSS、LESS、Sass 和 JavaScript |
系統平台 | 排版引擎 |
类型 | 基于HTML和CSS的设计模板 |
许可协议 | MIT許可證(3.1.0版前為Apache许可证 2.0) |
网站 | getbootstrap |
Bootstrap是GitHub上面被标记为“Starred”次数排名第四多的项目。Starred次数超过133,000,而分支次数超过了65,000次。[2]
起源
Bootstrap原名Twitter Blueprint,由Twitter的Mark Otto和Jacob Thornton编写,本意是制作一套可以保持一致性的工具和框架。在Bootstrap之前,开发界面需要使用不同的代码库,这样很容易导致不一致的问题,从而增加了维护的负担。Twitter开发者Mark Otto说:
“我和几个开发者一起设计建立一个新的内部使用的工具,然后我们发现有机会可以做更多的事。从那之后,我们发现我们设计的工具比别人设计的更强大。几个月之后,我们做出了Bootstrap的原型,在公司内分享文档、设计和资源。”[3]
经过一个小组几个月之后的努力,Twitter的许多开发者把它当作Hack Week(在Twitter开发者中流行的类似于黑客松的一星期)的一部分,开始参与开发。大家把Twitter Blueprint改名为Bootstrap,并且在2011年8月19日将其作为开源项目发布。[4] 此后项目继续由Mark Otto、Jacob Thornton和一个核心开发小组维护,此外还有众多来自社区的贡献者。[5]
在2012年1月31日,Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件,并且对许多组件进行了修改。[6] Bootstrap 3于2013年8月19日发布,开始将移动设备优先作为方针,并且开始使用扁平化设计。[6]
2015年4月23日,Mark Otto宣布正在开发Bootstrap 4[7]。Bootstrap 4的第一个alpha版本部署在2015年8月19日[8]。
Bootstrap 5 Alpha于2020年6月16日正式发布,[9]。Bootstrap 5 Alpha版本的首次使用案例仅在正式首映后几天出现,其中最著名的包 - MDB 5-用于Bootstrap 5的Material Design UI Kit [10]
功能
Bootstrap与最新版的Google Chrome、Firefox、Internet Explorer、Opera和Safari浏览器兼容,尽管有些浏览器并不是支持所有操作系统。[11]
从2.0版本开始,Bootstrap支持响应式网页设计(RWD)。页面布局可以根据显示网页的设备(桌面、平板电脑、手机)来进行动态调整。
从3.0版本开始,Bootstrap将移动设备优先作为设计方针,更加强调了响应式设计。
4.0 alpha版本添加Sass和Flexbox的支持[12]。
Bootstrap是开源软件,可以从GitHub上面找到[13]。开发者被鼓励参与项目,并且对项目做出自己的贡献。
结构和功能
Bootstrap采用模块化设计,并且用LESS样式表语言来实现各种组件和工具。一个名为bootstrap.less的文件包括了这些组件和工具,开发者可以修改这个文件,自行决定项目需要哪些组件。
通过一个基本配置文件可以进行有限的定制,此外也可以进行更加深入的定制。
LESS语言支持变量、函数、运算符、组合选择器和一个叫做Mixin(混入)的功能。
从Bootstrap 2.0开始,Bootstrap文档包括一个叫做“自定义”的特别选项,开发者可以根据自己的实际需要来选择包含的组件和效果,然后生成和下载已经编译好的包。
网格系统和响应式设计以1170像素宽为基准。此外开发者也可以自定义基准。这两种情况下,Bootstrap都能提供四种变体:手机竖屏、手机横屏和平板电脑、PC低分辨率、高分辨率,每个变体都会自动调整网格宽度。
CSS
Bootstrap对一系列HTML组件的基本样式进行了定义,并且为文本、表格和表单元素设计了一套独特的、现代化的样式。
可重用组件
除了基本HTML元素,Bootstrap还包括了其他常用的界面元素,例如带有高级功能的按钮(例如按钮组合、带有下拉菜单选项的按钮、导航栏、水平和垂直标签组、导航、分页等等)、标签、高级排版、缩略图、警告信息、进度条等。
这些组件都使用CSS的类实现。在页面中需要将其对应到特定的HTML元素上面。
JavaScript组件
通过jQuery,Bootstrap加入了一些JavaScript组件。它们提供了例如对话框、工具提示、轮播等功能。此外还增强了一些用户界面元素的功能,例如输入框的自动完成。Bootstrap 2.0支持以下JavaScript插件:Modal(模态对话框)、Dropdown(下拉菜单)、Scrollspy(滚动监听)、Tab(标签页)、Tooltip(工具提示)、Popover(浮动提示)、Alert(警告)、Button(按钮)、Collapse(折叠)、Carousel(轮播)、Typeahead(输入提示)、Affix(附加导航).
参考文献
- https://blog.getbootstrap.com/2021/01/19/bootstrap-4.6.0/;检索日期:2021年1月28日;出版日期:2021年1月19日。
- . GitHub. [8 Jan 2017].
- Otto, Mark. . Mark Otto. 17 January 2012 [2015-08-18]. (原始内容存档于2020-05-12).
- Otto, Mark. . Developer Blog. Twitter. 19 August 2011 [2015-08-18]. (原始内容存档于2017-02-23).
- . Bootstrap. [2015-08-18]. (原始内容存档于2015-08-19).
- . GitHub. [26 June 2015].
- Otto, Mark. . Bootstrap Blog. [21 August 2015]. (原始内容存档于2016-07-24).
- Otto, Mark. . Bootstrap Blog. [20 August 2015]. (原始内容存档于2015-08-21).
- . Developer Blog. June 22, 2020 [2020-07-24]. (原始内容存档于2020-07-18).
- . MDBootstrap.com. June 22, 2020 [2020-07-24]. (原始内容存档于2020-07-22).
- . Bootstrap. [2015-08-18]. (原始内容存档于2015-08-18).
- . Bootstrap. [2016-05-23]. (原始内容存档于2015-08-21).
- . twbs/bootstrap. [2016-05-23]. (原始内容存档于2016-07-04).
外部链接
- Bootstrap官方網站页面存档备份,存于(英文) - 包括文档和下载
- Bootstrap繁體中文網站(繁體中文) - 由陳傳興維護,包括Bootstrap網站的繁體中文翻譯版本,以及相關的框架
- Bootstrap簡體中文網站页面存档备份,存于(简体中文) - 由社区维护,包括Bootstrap网站的簡體中文翻译版本,以及相关的框架
- Bootstrap Blog页面存档备份,存于 - 由开发者Mark Otto维护的官方日志
- Bootstrap文档手册实例网页面存档备份,存于 - Bootstrap查找文档和GitHub实例
- Bootstrap 用户界面套件页面存档备份,存于(英文) - Bootstrap响应式页面模板,布局,组件和小部件,可快速构建网页。