---
title: Bootstrap
localeTitle: 引导
---
## 引导
Bootstrap是一个流行的Web开发前端框架。它包含用于设置HTML内容样式的预构建组件和设计元素。 Chrome，Firefox，Opera，Safari和Internet Explorer等现代浏览器都支持Bootstrap。
Bootstrap包括一个用于不同布局的响应式网格系统。这是建立移动友好网站的一个很好的起点。它还包括可选的JavaScript功能，如可折叠内容，轮播和模态。
#### 版本历史
Twitter最初开发了Bootstrap框架作为内部工具。他们在2011年8月将其作为开源项目发布。
Bootstrap 2于2012年1月发布。其中一个主要功能是引入了12列响应式网格系统。 Bootstrap 3于2013年8月出现，转而采用扁平设计和移动优先方式。 Bootstrap 4自2017年8月开始提供测试版，现在包括Sass和Flexbox。
Bootstrap 4正在开发两年，然后在2017年发布了一些beta版本，而第一个稳定版本在2018年1月发布。一些值得注意的变化包括：
* 从Less移到Sass;
* 移至Flexbox并改进了网格系统;
* 添加卡片（替换孔，缩略图和面板）;
* 以及更多！
在撰写本文时，Bootstrap的最新版本是\[4.1.3\]（http://blog.getbootstrap.com/2018/07/24/bootstrap-4-1-3/ ）。如果您想了解任何公告新闻，请[在此处关注](http://blog.getbootstrap.com/) 。
#### 安装
将Bootstrap添加到Web项目有两个主要选项。您可以链接到公开可用的来源，也可以直接下载框架。
##### 链接到另一个来源
您可以使用引用内容交付网络（CDN）的网页``内的``元素添加Bootstrap CSS：
``
添加Bootstrap的JavaScript元素与通常放置在'底部'的`
```
_注意：这些仅是示例，如有更改，恕不另行通知。请参阅CDN以获取要包含在项目中的当前链接。_
##### 下载/安装
您可以使用Bower，Composer，Meteor或npm下载和安装Bootstrap源文件。这允许更好的控制以及根据需要包括或排除模块的选项。
`npm install bootstrap`
`gem 'bootstrap', '~> 4.1.3'`
\_注意：这些只是示例，如有更改，恕不另行通知。请参阅\_ [Bootstrap网站](https://getbootstrap.com/) \_获取最新链接.\_
#### Bootstrap网格系统
网格系统是一个移动优先的flexbox系统，用于快速构建适用于所有设备的各种形状和大小的布局。它基于12列布局，具有多个层，每个层对应一个媒体查询范围。
Bootstrap带有预定义的网格类，供您在标记中使用。有关详细信息和示例，请访问https://getbootstrap.com/docs/4.1/layout/grid/
### Boostrap功能
* Bootstrap 3支持最新版本的Google Chrome，Firefox，Internet Explorer，Opera和Safari（Windows除外）。它还支持IE8和最新的Firefox扩展支持版本（ESR）。\[12\]
* 从版本2.0开始，Bootstrap支持响应式网页设计。这意味着网页布局会动态调整，同时考虑到所用设备的特性（台式机，平板电脑，手机)。
* 从版本3.0开始，Bootstrap采用了移动优先设计理念，默认强调响应式设计。
* 版本4.0增加了Sass和flexbox支持。
#### 更多信息：
Bootstrap包含许多[示例的](https://getbootstrap.com/docs/4.1/examples/)完整文档和[用于入门](https://getbootstrap.com/docs/4.1/getting-started/introduction/)的[HTML模板](https://getbootstrap.com/docs/4.1/getting-started/introduction/) （此模板仅包含脚本;如果您正在寻找，则不包含网格系统的设置）。
此外，您还可以找到[免费](https://bootswatch.com/)和[付费](https://themes.getbootstrap.com/) 基于Bootstrap框架的主题，提供更加个性化和时尚的外观。
#### Bootstrap资源：
[Bootstrap的官方博客](http://blog.getbootstrap.com/) [Bootstrap网站的灵感](http://expo.getbootstrap.com/) [展示使用Bootstrap构建的网站](http://builtwithbootstrap.com/) [使用Bootstrap的项目的HTML linter](https://github.com/twbs/bootlint) [Bootstrap的设计元素和代码片段](https://bootsnipp.com/) [Bootstrap的代码，主题和附加资源](http://expo.getbootstrap.com/resources/)