imported>糯米花：使用DisamAssist清理消歧義連結：Opera（連結至Opera (瀏覽器)）。

2025-05-11T17:15:05Z

使用DisamAssist清理消歧義連結：Opera（連結至Opera (瀏覽器)）。

新页面

{{primarysources|time=2018-05-16T07:22:53+00:00}}
{{NoteTA|G1=IT|G2=FL}}
{{Infobox software
| logo = Bootstrap logo.svg
| platform = [[排版引擎]]
| released = {{Start date and age|2011|08|19}}
| author = Mark Otto, Jacob Thornton
| developer = [https://getbootstrap.com/about/#team Bootstrap Core Team]
| programming language = [[HTML]]、[[层叠样式表|CSS]]、[[LESS (层叠样式表)|LESS]]、[[Sass (样式表语言)|Sass]] 和 [[JavaScript]]
| genre = 基于[[HTML]]和[[CSS]]的设计模板
| license = [[MIT許可證]]（3.1.0版前為[[Apache许可证]] 2.0）
}}
'''Bootstrap'''是一组用于[[网站]]和[[网络应用程序]]开发的[[自由及开放源代码软件|开源]][[前端和后端|前端]]（所谓“前端”，指的是展现给最终用户的界面。与之对应的“后端”是在[[服务器]]上面运行的代码）[[Web应用框架|框架]]，包括[[HTML]]、[[层叠样式表|CSS]]及[[JavaScript]]的框架，提供[[字体排印学|字體排印]]、表單、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使[[動態網頁|动态网页]]和[[网络应用程序|Web应用]]的开发更加容易。

Bootstrap是[[GitHub]]上面被标记为“Starred”次数排名第四多的项目。Starred次数超过133,000，而[[复刻 (软件工程)|分支]]次数超过了65,000次。<ref name="moststarred">{{Cite web|title = Search · stars:>1|url = https://github.com/search?l=&o=desc&q=stars%3A%3E1&ref=advsearch&s=stars&type=Repositories|website = GitHub|accessdate = 8 Jan 2017|archive-date = 2015-12-12|archive-url = https://web.archive.org/web/20151212194317/https://github.com/search?l=&o=desc&q=stars%3A%3E1&ref=advsearch&s=stars&type=Repositories}}</ref>

== 起源 ==
Bootstrap原名'''Twitter Blueprint'''，由[[Twitter]]的Mark Otto和Jacob Thornton编写，本意是制作一套可以保持一致性的工具和框架。在Bootstrap之前，开发界面需要使用不同的代码库，这样很容易导致不一致的问题，从而增加了维护的负担。Twitter开发者Mark Otto说：

{{quote|“我和几个开发者一起设计建立一个新的内部使用的工具，然后我们发现有机会可以做更多的事。从那之后，我们发现我们设计的工具比别人设计的更强大。几个月之后，我们做出了Bootstrap的原型，在公司内分享文档、设计和资源。”<ref name="bootstrap a list apart">{{cite web|last1=Otto|first1=Mark|title=Bootstrap in A List Apart No. 342|url=http://www.markdotto.com/2012/01/17/bootstrap-in-a-list-apart-342|website=Mark Otto|date=17 January 2012|accessdate=2015-08-18|archive-date=2020-05-12|archive-url=https://web.archive.org/web/20200512195533/https://markdotto.com/2012/01/17/bootstrap-in-a-list-apart-342/|dead-url=no}}</ref>}}

经过一个小组几个月之后的努力，Twitter的许多开发者把它当作Hack Week（在Twitter开发者中流行的类似于[[黑客松]]的一星期）的一部分，开始参与开发。大家把Twitter Blueprint改名为Bootstrap，并且在2011年8月19日将其作为开源项目发布。<ref name="release-announcement">{{cite web|last1=Otto|first1=Mark|title=Bootstrap from Twitter|url=https://blog.twitter.com/2011/bootstrap-twitter|website=Developer Blog|publisher=Twitter|date=19 August 2011|accessdate=2015-08-18|archive-date=2017-02-23|archive-url=https://web.archive.org/web/20170223125113/https://blog.twitter.com/2011/bootstrap-twitter|dead-url=no}}</ref> 此后项目继续由Mark Otto、Jacob Thornton和一个核心开发小组维护，此外还有众多来自社区的贡献者。<ref name="about">{{cite web|title=About|url=http://getbootstrap.com/about/|website=Bootstrap|accessdate=2015-08-18|archive-date=2015-08-19|archive-url=https://web.archive.org/web/20150819190103/http://getbootstrap.com/about/|dead-url=no}}</ref>

在2012年1月31日，Bootstrap 2发布。这一版增加了十二列网格布局和[[响应式网页设计|响应式]]组件，并且对许多组件进行了修改。<ref name="bootstrap3">{{Cite web|title = Search · stars:>1|url = https://github.com/search?l=&o=desc&q=stars%3A%3E1&ref=advsearch&s=stars&type=Repositories|website = GitHub|accessdate = 26 June 2015|archive-date = 2015-12-12|archive-url = https://web.archive.org/web/20151212194317/https://github.com/search?l=&o=desc&q=stars%3A%3E1&ref=advsearch&s=stars&type=Repositories}}</ref> Bootstrap 3于2013年8月19日发布，开始将移动设备优先作为方针，并且开始使用[[扁平化设计]]。<ref name="bootstrap3"/>

2015年4月23日，Mark Otto宣布正在开发Bootstrap 4<ref name=bs4dev>{{cite web|last1=Otto|first1=Mark|title=Bootstrap 3.3.0 released|url=http://blog.getbootstrap.com/2014/10/29/bootstrap-3-3-0-released/|website=Bootstrap Blog|accessdate=21 August 2015|archive-date=2016-07-24|archive-url=https://web.archive.org/web/20160724153923/http://blog.getbootstrap.com/2014/10/29/bootstrap-3-3-0-released/|dead-url=no}}</ref>。Bootstrap 4的第一个alpha版本部署在2015年8月19日<ref name=bs4alpha>{{cite web|last1=Otto|first1=Mark|title=Bootstrap 4 alpha|url=http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/|website=Bootstrap Blog|accessdate=20 August 2015|archive-date=2015-08-21|archive-url=https://web.archive.org/web/20150821025116/http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/|dead-url=no}}</ref>。

2021年5月5日，Bootstrap 5正式发布。<ref name="bootstrap5">{{cite web|url=https://blog.getbootstrap.com/2021/05/05/bootstrap-5/|last1=Otto|first1=Mark|title=Bootstrap 5|website=Bootstrap Blog|accessdate=5 May 2021|archive-date=2022-05-20|archive-url=https://web.archive.org/web/20220520143538/https://blog.getbootstrap.com/2021/05/05/bootstrap-5/|dead-url=no}}</ref>

== 功能 ==
Bootstrap与最新版的[[Google Chrome]]、[[Firefox]]、[[Internet Explorer]]、[[Opera (瀏覽器)|Opera]]和[[Safari]]浏览器兼容，尽管有些浏览器并不是支持所有操作系统。<ref>{{cite web|title=Supported browsers|url=http://getbootstrap.com/getting-started/#support-browsers|website=Bootstrap|accessdate=2015-08-18|archive-date=2015-08-18|archive-url=https://web.archive.org/web/20150818085327/http://getbootstrap.com/getting-started/#support-browsers|dead-url=no}}</ref>

从2.0版本开始，Bootstrap支持[[响应式网页设计]](RWD)。页面布局可以根据显示网页的设备（桌面、平板电脑、手机）来进行动态调整。

从3.0版本开始，Bootstrap将[[响应式网页设计|移动设备优先]]作为设计方针，更加强调了响应式设计。

從 4 版本開始，添加[[Sass]]和{{le|CSS Flex Box Layout|CSS Flex Box Layout|Flexbox}}的支持，更重要的是加入了utilities CSS 的新概念<ref>{{cite web|title=Bootstrap 4 alpha|url=http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/|website=Bootstrap|accessdate=2016-05-23|archive-date=2015-08-21|archive-url=https://web.archive.org/web/20150821025116/http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/|dead-url=no}}</ref>。

從 5 版本開始，不支援IE<ref>{{cite web|title=Browsers and devices|url=https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#internet-explorer|website=Bootstrap|accessdate=2023-07-01|archive-date=2023-07-22|archive-url=https://web.archive.org/web/20230722100045/https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#internet-explorer|dead-url=no}}</ref>，脫離了jQuery的依賴，大大提升原生 JavaScript 及各前端框架的支援，並更加完善了無障礙的相關輔助<ref>{{cite web|title=Bootstrap 5 JavaScript|url=https://getbootstrap.com/docs/5.3/getting-started/javascript/|website=Bootstrap|accessdate=2022-11-22|archive-date=2023-10-20|archive-url=https://web.archive.org/web/20231020180003/https://getbootstrap.com/docs/5.3/getting-started/javascript/|dead-url=no}}</ref><ref>{{cite web|title=Bootstrap 5 Accessibility|url=https://getbootstrap.com/docs/5.3/getting-started/accessibility/|website=Bootstrap|accessdate=2022-11-22|archive-date=2023-10-05|archive-url=https://web.archive.org/web/20231005201603/https://getbootstrap.com/docs/5.3/getting-started/accessibility/|dead-url=no}}</ref>。

Bootstrap是开源软件，可以从GitHub上面找到<ref>{{cite web|title=Bootstrap GitHub Repository|url=https://github.com/twbs/bootstrap|website=twbs/bootstrap|accessdate=2016-05-23|archive-date=2016-07-04|archive-url=https://web.archive.org/web/20160704212327/https://github.com/twbs/bootstrap|dead-url=no}}</ref>。开发者被鼓励参与项目，并且对项目做出自己的贡献。

== 结构和功能 ==

{{Unreferenced section}}

[[File:Twitter_Bootstrap_Under_Firefox_32.png|alt=Example of a webpage using Bootstrap framework|thumb|445x445px|由[[Firefox|Mozilla Firefox]]渲染的Bootstrap示例页面]]
Bootstrap采用模块化设计，并且用[[LESS (层叠样式表)|LESS样式表语言]]来实现各种组件和工具。一个名为bootstrap.less的文件包括了这些组件和工具，开发者可以修改这个文件，自行决定项目需要哪些组件。<span class="cx-segment" data-segmentid="134"></span>

通过一个基本配置文件可以进行有限的定制，此外也可以进行更加深入的定制。

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

== 参见 ==
{{portal|自由軟體}}
* [[CSS框架]]
* [[响应式网页设计]] (RWD)
* [[层叠样式表|CSS]]
* [[HTML]]
* [[JavaScript]]
* [[jQuery]]

== 参考文献 ==
{{reflist|2}}

== 外部链接 ==
* [http://getbootstrap.com/ Bootstrap官方網站]{{Wayback|url=http://getbootstrap.com/ |date=20141226085427 }}{{en}} - 包括文档和下载
* [https://web.archive.org/web/20161019113215/https://kkbruce.tw/bs3/ Bootstrap繁體中文網站]{{zh-tw}} - 由陳傳興維護，包括Bootstrap3網站的繁體中文翻譯版本，以及相關的框架
* [https://bootstrap5.hexschool.com/] {{Wayback|url=https://bootstrap5.hexschool.com/ |date=20210326235347 }}-Bootstrap5繁體中文網站(由六角學院翻譯)
* [http://www.bootcss.com/ Bootstrap簡體中文網站]{{Wayback|url=http://www.bootcss.com/ |date=20150804075040 }}{{zh-cn}} - 由社区维护，包括Bootstrap网站的簡體中文翻译版本，以及相关的框架
* [http://blog.getbootstrap.com/ Bootstrap Blog]{{Wayback|url=http://blog.getbootstrap.com/ |date=20170522214854 }} - 由开发者Mark Otto维护的官方日志
* [http://www.lisa33xiaoq.net/bootstrapbase/bootstrap.html Bootstrap文档手册实例网]{{Wayback|url=http://www.lisa33xiaoq.net/bootstrapbase/bootstrap.html |date=20180529121819 }} - Bootstrap查找文档和GitHub实例
* [https://mdbootstrap.com/ Bootstrap 用户界面套件]{{Wayback|url=https://mdbootstrap.com/ |date=20200722004859 }}{{en}} - Bootstrap响应式页面模板，布局，组件和小部件，可快速构建网页。
[[Category:层叠样式表]]
[[Category:自由軟體計劃]]
[[Category:HTML]]
[[Category:JavaScript函式庫]]
[[Category:使用MIT许可证的软件]]
[[Category:网页设计]]
[[Category:CSS框架]]
[[Category:Twitter]]
[[Category:2011年软件]]
[[Category:用JavaScript編程的自由軟體]]

Bootstrap - 版本历史

imported>糯米花：​使用DisamAssist清理消歧義連結：Opera（連結至Opera (瀏覽器)）。

imported>糯米花：使用DisamAssist清理消歧義連結：Opera（連結至Opera (瀏覽器)）。