5.0 KiB
title | localeTitle |
---|---|
Bootstrap | 引导 |
引导
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/ )。如果您想了解任何公告新闻,请在此处关注 。
安装
将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>
元素类似 ' 标签。您可能需要先包含一些依赖项。特别注意列出的顺序:
<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网站 _获取最新链接._
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包含许多示例的完整文档和用于入门的HTML模板 (此模板仅包含脚本;如果您正在寻找,则不包含网格系统的设置)。
此外,您还可以找到免费和付费 基于Bootstrap框架的主题,提供更加个性化和时尚的外观。
Bootstrap资源:
Bootstrap的官方博客 Bootstrap网站的灵感 展示使用Bootstrap构建的网站 使用Bootstrap的项目的HTML linter Bootstrap的设计元素和代码片段 Bootstrap的代码,主题和附加资源