freeCodeCamp

5.0 KiB

Raw Blame History

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资源：

Bootstrap的官方博客 Bootstrap网站的灵感展示使用Bootstrap构建的网站使用Bootstrap的项目的HTML linter Bootstrap的设计元素和代码片段 Bootstrap的代码，主题和附加资源

5.0 KiB Raw Blame History Unescape Escape

引导