下载

Bootstrap (当前 v3.3.1) 提供了几种可以帮你快速上手的方式,每种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容,看看哪种方式适合你的需求吧。

Bootstrap

编译和压缩 CSS, JavaScript, 和 fonts(愚人码头注释:字体,iconfont). 文档或源文件都没有包括在内。

下载 Bootstrap

源代码

Less, JavaScript, 和 font 源文件 , 包括文档。 需要 Less 编译器 和 一些设置

下载源文件

Sass

Bootstrap 从 Less 移植到 Sass 可方便地加入 Rails, Compass, 或 Sass-only 项目。

下载 Sass

Bootstrap CDN

MaxCDN为Bootstrap 的CSS和JavaScript 免费提供了CDN加速服务。只需要使用这些Bootstrap CDN链接就可以了

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

用 Bower 安装

Bower 安装和管理 Bootstrap 的 Less, CSS, JavaScript, 和 fonts。

$ bower install bootstrap

What's included

Bootstrap提供了两种形式的压缩包,在下载下来的压缩包内可以看到以下目录和文件,这些文件按照类别放到了不同的目录内,并且提供了压缩与未压缩两种版本。

jQuery 依赖

请注意,所有 JavaScript 插件都依赖 jQuery,因此jQuery必须在Bootstrap之前引入, 就像在 基础模版中所展示的一样。 bower.json文件 中列出了Bootstrap所支持的jQuery版本。

预编译 Bootstrap

下载压缩包之后,将其解压缩到任意目录即可看到 Bootstrap(编译后)的目录结构。 你会看到类似这样:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了编译后 (bootstrap.*)的CSS和JS文件,以及编译并且压缩后(bootstrap.min.*)的CSS和JS文件。字体图标文件来自于Glyphicons,作为可选的 Bootstrap 主题。

Bootstrap 源码

Bootstrap源码下载包包含了预先编译的CSS、JavaScript和font文件,并且还有LESS、JavaScript和文档的源码。更具体地说,它包括以下内容:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/js/fonts/ 分别包含了CSS、JS和字体图标的源码。dist/ 目录包含了上面所说的预编译Bootstrap包内的所有文件。docs-assets/examples/ 和所有 *.html 文件是文档的源码文件。除了前面提到的这些文件,还包含package定义文件、许可证文件等。

编译 CSS 和 JavaScript

Bootstrap使用Grunt来构建系统, 在框架有便利的方法来工作。 我们如何编译我们的代码, 运行测试,等等。

安装 Grunt

要安装Grunt, 你必须首先下载和安装node.js (它已经包含了npm)。npm是node 封装模块 ,并且是node.js管理开发依赖的一个途径。

然后,在命令行中:
  1. npm install -g grunt-cli 全局环境下安装grunt-cli
  2. /bootstrap/根目录下, 然后运行npm install。 npm会查看package.json文件  并自动安装package.json中所列出的必要的本地依赖资源。

完成后,你就可以在命令行中运行提供的各种 Grunt 命令。

可用的 Grunt 命令

grunt dist (只编译 CSS 和 JavaScript)

重新生成 /dist/ 目录下编译和压缩后的CSS和JavaScript文件。  作为一个 Bootstrap 用户,这是你想要的常用命令。

grunt watch (监视)

监视 Less 源文件,并且当你保存修改的时候自动编译 Less 源文件为CSS文件。

grunt test (运行测试)

运行 JSHint 和在PhantomJS中运行QUnit 测试headlessly。

grunt (构建一切并运行测试)

编译并压缩 CSS和JavaScript, 构建文档网站, 针对文档运行HTML5验证, 重新生成定制资源,等等。 通常只有在你移动 Bootstrap 时才有必要使用。

排除故障

如果在您安装的依赖关系或运行Grunt命令是遇到问题的话, 首先删除由 npm 生成的/node_modules/目录。 然后,重新运行npm install

基础模板

从这个基本的HTML模板开始,或修改这些示例。  我们希望您定制我们的模板和示例,调整它们来满足您的需求。

复制下面的HTML,用一个最简单的 Bootstrap 文档开始工作。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

示例

下面这些案例都是基于上面给出的基本模版并结合 Bootstrap 的许多组件构建的。另请参阅定制 Bootstrap来维护你自己的 Bootstrap 变体 。

使用框架

入门模板

没什么内容,但是是基础知识:编译CSS和JavaScript以及一个容器。

Bootstrap 主题

载入可选的 Bootstrap 主题,增强视觉体验。

栅格

多个栅格布局实例 ,包含所有四个四排,嵌套等。

宽屏展示

用一个导航栏和一些基本的栅格列构建一个宽屏页面。

窄屏展示

通过缩小默认容器和屏幕建立更多的自定义页面 。

导航栏

导航栏

包含导航栏和一些额外内容的超基础模板。

静止的顶部导航栏

包含静止的顶部导航栏和一些额外内容的超基础模板。

固定定位的导航栏

包含固定定位的导航栏和一些额外内容的超基础模板。

定制组件

封面

一个构建简洁、美观主页的单页模板。

旋转木马(轮播)

定制了导航条和轮播组件,并添加了一些自定义的新组件。

博客

用导航栏,标题和类型定制简单的两栏博客布局。

控制面板

用固定侧边栏和导航栏构建一个管理控制面板的基础结构。

登录页面

使用到了自定义的表单布局和设计构建基本的登录页面。

Justified nav

Create a custom navbar with justified links. Heads up! Not too WebKit friendly.

页脚固定在底部

当内容比可视区域短的时候,页脚依附在可视区域的底部。

固定底部和导航栏

页脚依附在可视区域的底部,固定定位的导航栏在顶部。

实验

非响应式的 Bootstrap

按照我们的文档,可以轻松地禁用Bootstrap的响应式特性。

Offcanvas

Build a toggleable off-canvas navigation menu for use with Bootstrap.

Tools

Bootlint

Bootlint 是 Bootstrap 官方所支持的 HTML 检测工具。在使用了 Bootstrap 的页面上,它能自动检查某些常见的 HTML 错误。纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。建议将 Bootlint 加入到你的开发工具中,这样就能帮你在项目开发中避免一些简单的错误影响你的开发进度。

社区

保持更新最新的 Bootstrap 的发展和 这些有用的资源入到社区。

你可以关注Twitter 上的 @twbootstrap 来获取最新资讯和最棒的音乐视频。

禁用响应式布局

Bootstrap会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性,就像这个页面一样:非响应式布局案例

禁用响应式布局的步骤

  1. 移除CSS 文档中提到的(或者不要添加)viewport <meta>
  2. 覆盖.container上的width,为每个栅格列设置一个单独的宽度,例如width: 970px !important;。请确保这些设置全部放在默认的 Bootstrap CSS后面。你也可以使用媒体查询(media queries)或选择器权重省去!important
  3. 如果使用了导航条,需要移除所有导航条的折叠和展开行为。
  4. 对于栅格布局,额外增加.col-xs-* class 或替换掉.col-md-*.col-lg-*。不要担心,针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。

针对IE8需要额外引入Respond.js文件 (由于仍然有媒体查询代码,因此还需要做处理)。这样就禁用了Bootstrap对小屏幕设备的响应式支持。

响应式布局被禁用的 Bootstrap 模板

我们已经应用了这些步骤的例子。 阅读它的源代码,看看具体实施的变化。

查看无响应式布局的示例

从2.x迁移到3.0版本

希望从旧版本的 Bootstrap 迁移到V3.X? 查看 我们的迁移指南.

浏览器和设备支持

Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现,这意味着,在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同,但是功能是完整的。

被支持的浏览器

具体来说, 我们支持以下浏览器和平台的最新版本 。 在Windows上, 我们支持的Internet Explorer8-11。更具体的支持信息如下。

Chrome Firefox Internet Explorer Opera Safari
Android 支持 支持 N/A 不支持 N/A
iOS 支持 N/A 不支持 支持
Mac OS X 支持 支持 支持 支持
Windows 支持 支持 支持 支持 不支持

Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的,虽然没有对他们其进行官方支持。

对于某些浏览器bug,Bootstrap 整理了一个列表, 看到我们的浏览器的bug列表

Internet Explorer 8 和 9

Internet Explorer 8 和 9 是被支持的,尽管如此, 请注意,一些CSS3属性和HTML5元素没有完全被这些浏览器支持。 另外,Internet Explorer 8 需要Respond.js配合才能实现对媒体查询(media query)的支持。

特性 Internet Explorer 8 Internet Explorer 9
border-radius 不支持 支持
box-shadow 不支持 支持
transform 不支持 支持, 使用 -ms 前缀
transition 不支持
placeholder 不支持

请参考我可以使用吗...以获取详细的CSS3和HTML5特性在各个浏览器上的支持情况。

Internet Explorer 8 和 Respond.js

在开发环境和生产(线上)环境中Internet Explorer 8使用Respond.js时,请注意以下警告。

Respond.js 和 跨域的CSS

如果 Respond.js 和 CSS 文件被托管在不同的域名或子域名下(例如,使用CDN)时需要一些额外的设置。请参考 Respond.js 文档 获取详细信息。

Respond.js 和 file://

由于浏览器的安全规则问题,Respond.js 不能通过 file:// 协议(打开本地HTML文件所用的协议)访问的页面上发挥正常的功能。如果需要测试IE8下面的响应式特性,必须用http服务器(例如apache、nginx)托管HTML页面才可以。请参考 Respond.js 文档 获取更多信息。

Respond.js 和 @import

Respond.js 不支持通过 @import 引入的CSS文件。例如,Drupal 一般被配置为通过 @import 引入CSS文件,Respond.js对其将无法起到作用。 请参考Respond.js 文档获取更多信息。

Internet Explorer 8 和 box-sizing

IE8不能完全支持box-sizing: border-box;min-widthmax-widthmin-heightmax-height一同使用。由于此原因,从Bootstrap v3.0.1版本开始,我们不再为.container使用max-width

Internet Explorer 8 和 @font-face

IE8中@font-face:before结合使用时有一些问题。Bootstrap组合其Glyphicons(字形图标)使用。如果页面被缓存,并且加载时鼠标没有移到窗口(即点击刷新按钮,或在iframe中加载一些内容),那么页面会在字体加载完成之前渲染。将鼠标悬停在页面上(body)将表现出一些图标并且徘徊在剩余的图标将显示这些为好。将鼠标悬停在页面(体)将表现出一定的图标和鼠标悬停在剩余的图标上将显示剩余的这些图标。请参见 问题13863了解详细信息。

IE兼容模式

Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式,建议将此 <meta> 标签加入到你的页面中:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

通过打开调试工具确认文档模式: 按 F12键并选中“文档模式”。

这个标签包含在所有文档页面和案例页面中,确保每个被支持的Internet Explorer版本中保持最好的页面展现效果。

参见StackOverflow上对此问题的解答

Windows 8 和 Windows Phone 8中Internet Explorer 10

Internet Explorer 10并没有将设备屏幕宽度(device width)视口宽度(viewport width)区别开,这就导致Bootstrap中的媒体查询并不能很好的发挥作用。为了解决这个问题,你可以引入下面列出的这段CSS暂时修复此问题:

@-ms-viewport       { width: device-width; }

尽管如此,这并不适用那些运行早于Update 3 (又名 GDR3)版本的Windows Phone 8设备上,因为它会导致这些设备按照桌面浏览器的方式呈现页面,而不是较窄的“手机”呈现方式。 为了解决这个问题,你还需要加入以下CSS和JavaScript代码,直到修复此问题

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

想了解更多信息和使用指南,请阅读Windows Phone 8 和设备宽度

作为提醒,我们将其加入到Bootstrap文档中作为一个案例。

Safari下百分比数字凑整的问题

在OS X下的Safari v7.1和iOS下的 Safari v8.0之前,Safari浏览器渲染引擎在处理我们带有百分比小数的.col-*-1栅格样式时有存在一些问题。所以,如果你有12个单独栅格列,你会发现有一列比其他列要窄一些。除了升级Safari浏览器/iOS,还有一些可供选择的解决方法:

  • 为最后一个栅格列添加.pull-right样式类,让其强制向右对齐
  • 手动调整百分比数字,让其针对Safari表现更好(这比第一种方式更困难)

模态框,导航栏,和虚拟键盘

超出范围和滚动

在iOS和Android中,<body>元素上对overflow: hidden的支持很有限。为此,在这两种设备上的浏览器中,当你滚动屏幕超过模态框的顶部或底部时, <body>中的内容将开始随着滚动。

虚拟键盘

还有,请注意,如果你正在模态框或导航栏上面输入内容 -- iOS还有一个渲染bug,那就是当虚拟键盘被触发后,其不会更新固定(fixed)元素的位置。这里有几种解决方案,包括将固定(fixed)元素转变为position: absolute或启动一个定时器尝试手动校正其定位。这些没有加入Bootstrap中,因此,需要由你来决定哪个解决方案最适合您的应用。

导航栏下拉框

.dropdown-backdrop元素没有使用iOS的导航上是因为复杂的z-index 层级索引。 因此,收起导航栏中的下拉框, 您必须直接单击下拉元素 ( 或触发iOS中任何其他元素的click事件)。

浏览器缩放

页面缩放功能不可避免的会将某些组件搞得乱七八糟,不光是Bootstrap,整个互联网上的所有网站都是这样。针对具体问题,我们或许可以修复它(如果有必要的话,请先搜索一下你的问题,看看是否已有解决方案,然后在向我们提交issue)。然而,我们更倾向于忽略这些问题,由于这些问题除了一些hack手段,一般没有直接的解决方案。

打印

即使在一些现代的浏览器下, 打印有时候也会出现奇怪的问题。

特别地, Chrome v32下无论如何设置边距, 在Chrome使用媒体查询(media queries)解析打印网页时,视口宽度明显窄于物理纸张大小。 这可能会导致Bootstrap的extra-small 栅格在打印时被意外激活。 请参阅#12078的一些细节。 建议的解决方法:

  • 包含extra-small 栅格,并且确保它在你的页面下面,这样看起来可以接受。
  • 自定义@screen-* Less 变量的值 让您的打印纸被认为extra-small大很多。
  • 专门为打印介质添加自定义媒体查询(media queries)来改变栅格视图大小。

此外,如Safari V8.0,固定宽度的.container,打印时可能会导致Safari浏览器使用一个非常小字体。见#14868了解详情。一个潜在的解决方法是增加以下CSS:

@media print {
  .container {
    width: auto;
  }
}

Android 系的浏览器

开箱即用,Android 4.1 甚至一些较新的版本)附带的浏览器应用程序作为首选的默认Web浏览器 (非Chrome)。 不幸的是, 一般情况下,这些浏览器应用程序有很多bug和CSS不一致的地方。

选择菜单

如果<select>元素应用了border-radius 和/或 borderCSS属性,Android系的浏览器将不会显示侧边控件 。 (详情请参阅此StackOverflow问题。)使用下面的代码片段来删除有问题的CSS并且在Android系的浏览器上,<select>呈现为无样式元素。 使用用户代理(user agent)检测来避免干扰的Chrome,Safari和Mozilla浏览器。

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

想查看示例?迁出 JS Bin中的 demo.

Validators(验证器)

为了在古老的浏览器上提供最佳的体验,Bootstrap 在某些浏览器的特殊几个版本中使用了CSS 浏览器 hacks ,以解决浏览器本身的缺陷。这些 hacks 可能导致CSS验证器警告:他们是无效的。在几个场景中,我们还使用尚未完全规范的前沿CSS功能,但这些纯粹是为了渐进增强。

这些验证警告是无关紧要的,因为我们并充分验证了hack部分不会干扰非hack部分的正常运行,因此我们可以忽略这些特定的警告。

由于我们对某些 Firefox bug使用了变通的办法,所以我们的HTML文档也有一些琐碎和无关紧要的HTML验证警告。

第三方支持

虽然我们没有正式支持任何第三方插件或加载项, 我们还是提供了一些有用的建议,以帮助您在项目避免潜在问题。

Box-sizing

一些第三方软件,包括Google地图和Google定制搜索引擎都会由于* { box-sizing: border-box; }样式和Bootstrap冲突,一规则使padding不影响页面元素最终宽度的计算。 更多信息请参考盒模型与尺寸计算 - CSS Tricks

根据不同情况,你可能需要根据情况覆盖(第一种选择)或为所有区域设置(第二种选择)。

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

可访问性

Bootstrap遵循统一的web标准,另外,通过做一些少量的修改,还可以让使用AT的人群访问你的站点。

跳过导航

如果你的导航部分包含很多链接,并且在DOM结构上也是排列在主内容之前,那么建议在紧跟<body>标签之后添加一个Skip to main content的链接。(这里解释了这样做的原因)。 使用.sr-only 类将在视觉上隐藏跳过链接,使用.sr-only-focusable类 将确保一单获取焦点该链接将变为可见(对于sighted键盘用户)。

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content(直接进入主内容区)</a>
  ...
  <div class="container" id="content">
    <!-- 页面的主要内容。 -->
  </div>
</body>

标题嵌套

当标题嵌套时(<h1> - <h6>),你的文档的主标题应该是<h1>。随后的标题逻辑上就应该使用<h2> - <h6>,这样,屏幕阅读器就可以构造出页面的内容列表。

学习更多: HTML CodeSnifferPenn State's AccessAbility.

色彩对比

目前,Bootstrap提供一些具有低对比度(推荐比率是4.5:1)的默认的颜色组合(比如各种风格的按钮样式,一些用于高亮代码的 基本代码块.bg-primary 上下文背景色辅助类,还有在白色背景上用的默认链接颜色)。这可能会导致低视力用户和色盲使用时候有困难。这些默认颜色可能需要进行修改,以增加它们的对比度和清晰度。

扩展阅读

许可证FAQ

Bootstrap遵守MIT许可下发布的,版权归2015所有。归结为更小的内容块, 它可以用下面的情况进行说明。

要求你:

  • 在你的作品中包括许可和版权声明

允许你:

  • 自由下载和使用Bootstrap, 全部或部分, 允许用于个人, 私人, 公司内部, 或商业用途
  • 将Bootstrap放入你自己创建的安装包或分发中
  • 修改源代码
  • 授权许可 将修改和分发后不包含在许可Bootstrap给第三方使用(Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license)

禁止你:

  • 持有 作者和许可拥有人 不承担 Bootstrap 损害赔偿责任,不提供维护
  • 持有 Bootstrap 创作者或版权持有人 法律责任
  • 在没有合适的权力声明的情况下重新分发Bootstrap的任意部分
  • 以任何方式(声明或暗示Twitter已经为你的分发背书)使用Twitter拥有的任何商标
  • 以任何方式(声明或暗示你创建了此软件)使用任何Twitter拥有的商标

不要求你:

  • 包括Bootstrap本身的源码, 或者你可能已经做的任何修改, 在重新分配可能会组装,包括它
  • 向Bootstrap项目提交你对Bootstrap的修改(虽然我们鼓励你提交并回馈)

Bootstrap完整的许可包含在项目仓库中

翻译

社区成员翻译Bootstrap的文档成各种语言。 没有被官方支持并且他们可能不总是最新的。

我们不帮助组织或个人翻译,我们只是链接到他们。

完成了一个新的或更好的翻译?打开pull请求将其添加到我们的列表。