82 lines
5.0 KiB
Markdown
82 lines
5.0 KiB
Markdown
---
|
||
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)的网页`<head>`内的`<link>`元素添加Bootstrap CSS:
|
||
|
||
`<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">`
|
||
|
||
添加Bootstrap的JavaScript元素与通常放置在'底部'的`<script>`元素类似 ' 标签。您可能需要先包含一些依赖项。特别注意列出的顺序:
|
||
|
||
```html
|
||
|
||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||
```
|
||
|
||
_注意:这些仅是示例,如有更改,恕不另行通知。请参阅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.0/examples/)完整文档和[用于入门](https://getbootstrap.com/docs/4.0/getting-started/introduction/)的[HTML模板](https://getbootstrap.com/docs/4.0/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/) |