维基百科

Bootstrap

网页前端框架

Bootstrap是一组用于网站和网络应用程序开发的开源前端（所谓“前端”，指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码）框架，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使动态网页和Web应用的开发更加容易。

Bootstrap
原作者Mark Otto, Jacob Thornton
開發者Bootstrap Core Team
首次发布2011年8月19日，​13年前​（2011-08-19）
当前版本
  • 5.3.3（2024年2月20日；穩定版本）[1]
編輯維基數據鏈接
源代码库
編輯維基數據鏈接
编程语言HTML、CSS、LESS、Sass 和 JavaScript
平台排版引擎
类型基于HTML和CSS的设计模板
许可协议MIT許可證（3.1.0版前為Apache许可证 2.0）
网站getbootstrap.com 编辑维基数据

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（英语：CSS Flex Box Layout）的支持，更重要的是加入了utilities CSS 的新概念[11]。

從 5 版本開始，不支援IE[12]，脫離了jQuery的依賴，大大提升原生 JavaScript 及各前端框架的支援，並更加完善了無障礙的相關輔助[13][14]。

Bootstrap是开源软件，可以从GitHub上面找到[15]。开发者被鼓励参与项目，并且对项目做出自己的贡献。

结构和功能

编辑
 
由Mozilla Firefox渲染的Bootstrap示例页面

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（附加导航）。

Sass和Less支持

编辑

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 构建的，并作为他们自己的扩展框架，包含了丰富的新组件和插件、文档以及构建工具。

参见

编辑

参考文献

编辑
  1. ^ Release 5.3.3. 2024年2月20日 [2024年2月20日]. 
  2. ^ Search · stars:>1. GitHub. [8 Jan 2017]. （原始内容存档于2015-12-12）. 
  3. ^ Otto, Mark. Bootstrap in A List Apart No. 342. Mark Otto. 17 January 2012 [2015-08-18]. （原始内容存档于2020-05-12）. 
  4. ^ Otto, Mark. Bootstrap from Twitter. Developer Blog. Twitter. 19 August 2011 [2015-08-18]. （原始内容存档于2017-02-23）. 
  5. ^ About. Bootstrap. [2015-08-18]. （原始内容存档于2015-08-19）. 
  6. ^ 6.0 6.1 Search · stars:>1. GitHub. [26 June 2015]. （原始内容存档于2015-12-12）. 
  7. ^ Otto, Mark. Bootstrap 3.3.0 released. Bootstrap Blog. [21 August 2015]. （原始内容存档于2016-07-24）. 
  8. ^ Otto, Mark. Bootstrap 4 alpha. Bootstrap Blog. [20 August 2015]. （原始内容存档于2015-08-21）. 
  9. ^ Otto, Mark. Bootstrap 5. Bootstrap Blog. [5 May 2021]. （原始内容存档于2022-05-20）. 
  10. ^ Supported browsers. Bootstrap. [2015-08-18]. （原始内容存档于2015-08-18）. 
  11. ^ Bootstrap 4 alpha. Bootstrap. [2016-05-23]. （原始内容存档于2015-08-21）. 
  12. ^ Browsers and devices. Bootstrap. [2023-07-01]. （原始内容存档于2023-07-22）. 
  13. ^ Bootstrap 5 JavaScript. Bootstrap. [2022-11-22]. （原始内容存档于2023-10-20）. 
  14. ^ Bootstrap 5 Accessibility. Bootstrap. [2022-11-22]. （原始内容存档于2023-10-05）. 
  15. ^ Bootstrap GitHub Repository. twbs/bootstrap. [2016-05-23]. （原始内容存档于2016-07-04）. 

外部链接

编辑
检索自“https://zh.wiki.x.io/w/index.php?title=Bootstrap&oldid=79694362”