Bootstrap是一组用于网站和网络应用程式开发的开源前端(所谓“前端”,指的是展现给最终用户的界面。与之对应的“后端”是在伺服器上面运行的代码)框架,包括HTML、CSS及JavaScript的框架,提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展,旨在使动态网页和Web应用的开发更加容易。
此条目过于依赖第一手来源。 (2018年5月16日) |
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]。
2021年5月5日,Bootstrap 5正式发布。[9]
功能
Bootstrap与最新版的Google Chrome、Firefox、Internet Explorer、Opera和Safari浏览器兼容,尽管有些浏览器并不是支持所有操作系统。[10]
从2.0版本开始,Bootstrap支持响应式网页设计(RWD)。页面布局可以根据显示网页的装置(桌面、平板电脑、手机)来进行动态调整。
从3.0版本开始,Bootstrap将移动设备优先作为设计方针,更加强调了响应式设计。
从 4 版本开始,添加Sass和Flexbox的支持,更重要的是加入了utilities CSS 的新概念[11]。
从 5 版本开始,不支持IE[12],脱离了jQuery的依赖,大大提升原生 JavaScript 及各前端框架的支持,并更加完善了无障碍的相关辅助[13][14]。
Bootstrap是开源软件,可以从GitHub上面找到[15]。开发者被鼓励参与项目,并且对项目做出自己的贡献。
结构和功能
![]() |
![Thumb](http://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Twitter_Bootstrap_Under_Firefox_32.png/640px-Twitter_Bootstrap_Under_Firefox_32.png)
Bootstrap采用模块化设计,并且用LESS样式表语言来实现各种组件和工具。一个名为bootstrap.less的文件包括了这些组件和工具,开发者可以修改这个文件,自行决定项目需要哪些组件。
通过一个基本配置文件可以进行有限的定制,此外也可以进行更加深入的定制。
LESS语言支持变量、函数、运算符、组合选择器和一个叫做Mixin(混入)的功能。
从Bootstrap 2.0开始,Bootstrap文档包括一个叫做“自定义”的特别选项,开发者可以根据自己的实际需要来选择包含的组件和效果,然后生成和下载已经编译好的包。
网格系统和响应式设计以1170像素宽为基准。此外开发者也可以自定义基准。这两种情况下,Bootstrap都能提供四种变体:手机竖屏、手机横屏和平板电脑、PC低分辨率、高分辨率,每个变体都会自动调整网格宽度。
Bootstrap对一系列HTML组件的基本样式进行了定义,并且为文本、表格和表单元素设计了一套独特的、现代化的样式。
除了基本HTML元素,Bootstrap还包括了其他常用的界面元素,例如带有高级功能的按钮(例如按钮组合、带有下拉菜单选项的按钮、导航栏、水平和垂直标签组、导航、分页等等)、标签、高级排版、缩略图、警告资讯、进度条等。
这些组件都使用CSS的类实现。在页面中需要将其对应到特定的HTML元素上面。
通过jQuery,Bootstrap加入了一些JavaScript组件。它们提供了例如对话框、工具提示、轮播等功能。此外还增强了一些用户界面元素的功能,例如输入框的自动完成。Bootstrap 2.0支持以下JavaScript插件:Modal(模态对话框)、Dropdown(下拉菜单)、Scrollspy(滚动监听)、Tab(标签页)、Tooltip(工具提示)、Popover(浮动提示)、Alert(警告)、Button(按钮)、Collapse(折叠)、Carousel(轮播)、Typeahead(输入提示)、Affix(附加导航)。
Sass 和Less都是CSS预处理器,它们允许开发者使用变量、嵌套、混入等高级功能来更轻松地编写和维护CSS代码。Sass 代表语法很棒的样式表。Sass 是 CSS 的扩展,完全兼容所有版本的 CSS,并减少了CSS 的重复,从而节省了时间。Sass 由 Hampton Catlin 设计,由 Natalie Weizenbaum 于 2006 年开发。Less代表精简样式表。Less 只对 CSS 语言做了一些方便的补充,因此它是较为容易学习的。
Bootstrap提供了基于Sass和Less的源文件,使开发者能够使用这些预处理器。使用Sass或Less,开发者可以修改变量、覆盖默认样式、添加自定义组件和样式,以满足特定项目的需求。这种支持使得Bootstrap更加灵活,开发者可以根据项目的要求自定义Bootstrap的样式。
Bootstrap 图标库
Bootstrap v5第一次拥有自己的开源 SVG 图标库,旨在与 Bootstrap 组件配合使用,但它们也可以使用到任何项目中。这些图标是 SVG 格式的,因此它们可以被快速轻松地缩放、可以通过多种方式使用、并且可以使用 CSS 设置样式。
官方主题
官方 Bootstrap 主题市场提供了许多高级主题,让 Bootstrap 提升到了一个新的水平。这些主题是基于 Bootstrap 构建的,并作为他们自己的扩展框架,包含了丰富的新组件和插件、文档以及构建工具。
参见
参考文献
外部链接
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.