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

编译后的CSS、JS和字体文件

获取Bootstrap最快速的方式就是下载经过编译和压缩的CSS、JavaScript文件,另外还包含字体文件。但是不包含文档和源码文件。

下载Bootstrap

额外的下载渠道

下载源码

从GitHub可以直接下载到Bootstrap最新版本的LESS和JavaScript源码。

Clone or fork via GitHub

访问我们的Github源码库,你可以克隆整个项目,或者fork整个项目到你自己的账号。

通过Bower工具安装

通过Bower可以安装并管理Bootstrap的样式、JavaScript文件和文档。

bash$ bower install bootstrap

Bootstrap CDN

NetDNA为Bootstrap免费提供了CDN加速服务。使用Bootstrap CDN提供的链接即可引入Bootstrap文件。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

编译Bootstrap的LESS源码文件

如果你下载的是源码文件,那就需要将Bootstrap的LESS源码编译为可以使用的CSS代码,目前,Bootstrap官方仅支持Recess编译工具,这是Twitter提供的基于less.js构建的编译、代码检测工具。

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

下载压缩包之后,将其解压缩到任意目录即可看到以下目录结构:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── 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

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

对jQuery的依赖

请注意,所有JavaScript插件都依赖jQuery,在页面中的引入顺序可以参考基本模版bower.json中列出了Bootstrap所支持的jQuery版本。

使用以下给出的这份超级简单的HTML模版,或者修改这些案例。我们强烈建议你对这些案例按照自己的需求进行修改,而不要简单的复制、粘贴。

拷贝并粘贴下面给出的HTML代码,这就是一个最简单的Bootstrap页面了。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

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

下面这些案例都是基于上面给出的基本模版并结合Bootstrap组件制作的。后续我们还会讲解如何定制这些组件。

基本模版

只有一些最基本的东西:引入了未压缩版的CSS和JavaScript文件,页面只有一个container容器。

栅格系统

多个栅格系统布局的案例展示。

Jumbotron

Build around the jumbotron with a navbar and some basic grid columns.

Narrow jumbotron

Build a more custom page by narrowing the default container and jumbotron.

导航条

Super basic template that includes the navbar along with some additional content.

置于页面顶部的导航条

Super basic template with a static top navbar along with some additional content.

固定位置的导航条

Super basic template with a fixed top navbar along with some additional content.

登录页面

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

页脚固定在底部

将固定高度的页脚钉在页面可视区域的最下方。

Sticky footer with navbar

Attach a footer to the bottom of the viewport with a fixed navbar at the top.

两端对齐的导航条

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

Offcanvas

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

大屏轮播

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

非响应式的Bootstrap

按照我们给出的方式可以很容易禁用Bootstrap的响应式特性。

Bootstrap主题

页面额外加载了一套Bootstrap主题,加强了页面的视觉效果

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

禁用响应式布局的步骤

  1. 移除此处提到的(或者不要添加)viewport <meta>
  2. 通过为.container设置一个width值从而覆盖框架的默认width设置,例如width: 970px !important;。请确保这些设置全部放在默认的Bootstrap CSS后面。注意,你也可以略去!important
  3. 如果使用了导航条,需要移除所有导航条的折叠和展开行为。
  4. 对于栅格布局,额外增加.col-xs-* classe或替换掉.col-md-*.col-lg-*。不要担心,针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。

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

禁用响应式特性的Bootstrap模版

我们已经按照上面的步骤制作了一份案例。仔细阅读其源码并对照上面的步骤实践一下吧。

非响应式页面案例

Bootstrap 3并不向后兼容Bootstrap v2.x。下面章节列出的内容可以作为从v2.x升级到v3.0的通用指南。如果需要更多信息,可以查看更新记录这篇官方博文。

class的主要变化

表格中列出了v2.x 和 v3.0之间样式表的变更。

Bootstrap 2.x Bootstrap 3.0
.container-fluid .container
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop .visible-md
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop .hidden-md
.input-small .input-sm
.input-large .input-lg
.control-group .form-group
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.thumbnail .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*

新增class

我们新增了一些页面元素,同时也对一些原有的元素进行了修改。下面列出了新增或更新之后的样式表。

页面元素 描述
Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groups .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Extra small grid (<768px) .col-xs-*
Small grid (≥768px) .col-sm-*
Medium grid (≥992px) .col-md-*
Large grid (≥1200px) .col-lg-*
Responsive utility classes (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Push .col-sm-push-* .col-md-push-* .col-lg-push-*
Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input groups .input-group .input-group-addon .input-group-btn
Form controls .form-control .form-group
Button group sizes .btn-group-xs .btn-group-sm .btn-group-lg
Navbar text .navbar-text
Navbar header .navbar-header
Justified tabs / pills .nav-justified
Responsive images .img-responsive
Contextual table rows .success .danger .warning .active
Contextual panels .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Thumbnail image .img-thumbnail
Well sizes .well-sm .well-lg
Alert links .alert-link

被移除的class

以下列出的页面元素已经在v3.0版本中被去除或修改。

页面元素 从2.x版本中去除 3.0版本中对应的元素
Form actions .form-actions N/A
Search form .form-search N/A
Fluid container .container-fluid .container (no more fixed grid)
Fluid row .row-fluid .row (no more fixed grid)
Controls wrapper .controls N/A
Controls row .controls-row .row or .form-group
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right .tabs-below N/A
Nav lists .nav-list .nav-header No direct equivalent, but List groups and .panel-groups are similar.

额外注意

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

有些v3.0中的多修改并不能从表面直接看到。我们对基本class、关键样式和行为都进行了调整,使其更灵活并且适应移动设备优先这一目标。下面是一个部分列表:

  • 文本表单控件全部预设为100%宽度。用<div class="col-*"></div>包裹输入框即可控制器宽度。
  • .badge不再保留状态相关的class(-success、-primary等)。
  • .btn必须和 .btn-default一起使用才能获得“默认”样式的按钮。
  • .container.row目前是基于百分比定义的宽度。
  • 默认情况下,图片不具有由响应式特性,需要使用.img-responsive才能让<img>实现响应式可变大小。
  • 图标,.glyphicon,演变为字体图标。每个图标都需要一个基本class和一个代表特定图标的class(例如, .glyphicon .glyphicon-asterisk
  • 与输入组件被移除,建议使用Twitter Typeahead组件。
  • 模态框组件的HTML结构发生了很大的改变。.modal-header.modal-body.modal-footer部分目前包含在了.modal-content.modal-dialog中,为的是增强移动设备上的样式和行为特性。
  • The HTML loaded by the remote modal option is now injected into the .modal instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
  • JavaScript事件目前全部都应用了命名空间。例如,模态框的"show"事件的名称为'show.bs.modal'。标签页组件的"shown"事件名称为'shown.bs.tab',还有很多其它事件名称也是类似。

可以在Bootply社区网站获取更多升级至v3.0的信息和代码示例。

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

被支持的浏览器

特别注意,我们坚决支持这些浏览器的最新版本:

  • Chrome (Mac、Windows、iOS和Android)
  • Safari (只支持Mac和iOS版,Windows版已经基本死掉了)
  • Firefox (Mac、Windows)
  • Internet Explorer
  • Opera (Mac、Windows)

Bootstrap在Chromium和Internet Explorer 7上的表现也是很不错的,虽然我们不对其进行官方支持。

Internet Explorer 8 和 9

Internet Explorer 8 和 9 是被支持的,然而,你要知道,很多CSS3属性和HTML5元素 -- 例如,圆角矩形和投影 -- 是肯定不被支持的。另外,Internet Explorer 8 需要respond.js配合才能实现对媒体查询(media query)的支持。

Feature Internet Explorer 8 Internet Explorer 9
border-radius Not supported Supported
box-shadow Not supported Supported
transform Not supported Supported, with -ms prefix
transition Not supported
placeholder Not supported

请参考Can I use...以获取详细的CSS3和HTML5特性在各个浏览器上的支持情况。

Internet Explorer 8 与 box-sizing

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

IE兼容模式

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

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

参见StackOverflow上对此问题的解答

>Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

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

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

然而,这样做会导致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.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}

请查看Windows Phone 8 and Device-Width以了解更多信息。

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

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

最新的Mac版Safari浏览器所包含的绘制引擎对于处理.col-*-1所对应的很长的百分比小数存在bug,这就意味着,如果你在一行(row)之中定义了12个单独的列(.col-*-1),你就会看到这一行比其他行要短一些。我们目前解决不了这个问题(see #9282),但是你可以避免:

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

我们将会继续跟踪此问题,如果有更简易的解决方案,我们会更新代码。

模态框和移动设备

超出范围和滚动

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

虚拟键盘

还有,如果你正在模态框上面输入内容 -- iOS还有一个绘制上的bug,当触发虚拟键盘之后,其不会更新fixed元素的位置。这里有几种解决方案,包括将fixed元素转变为position: absolute或启动一个定时器手工修正其位置。这些没有加入Bootstrap中,因此,需要由你自己选择最好的解决方案并加入到你的应用中。

浏览器缩放

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

虽然我们并不官方支持任何第三方插件,我们还是提供一些建议,帮你避免可能在你的项目中会出现的问题。

Box-sizing

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

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

/* Box-sizing resets
 *
 * 为了避免Bootstrap设置的全局盒模型所带来的影响,可以重置单个页面元素或覆盖整个区域的盒模型。
 * 两种选择 - 覆盖单个页面元素和重置整个区域 -  都可以纯CSS或LESS代码实现。
 */

/* Option 1A: 通过CSS覆盖单个页面元素的盒模型 */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: 通过使用Bootstrap LESS mixin覆盖单个页面元素的盒模型 */
.element {
  .box-sizing(content-box);
}

/* Option 2A: 通过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: 通过使用自定义的LESS mixin重置整个区域 */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

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

跳过导航

如果你的导航部分包含很多链接,并且在DOM结构上也是排列在主内容之前,那么建议在紧跟<body>标签之后添加一个跳转到主内容的链接。(这里解释了这样做的原因)

<body>
  <a href="#content" class="sr-only">Skip to content</a>
  <div class="container" id="content">
    The main page content.
  </div>
</body>

标题嵌套

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

Learn more at HTML CodeSniffer and Penn State's AccessAbility.

扩展阅读

Bootstrap遵守Apache 2许可证进行分发,版权归 Twitter2013所有。归结为以下几点:

允许你:

  • 自由的下载并使用部分或完整的Bootstrap框架,允许用于私人、公司内部或商业目的
  • 将Bootstrap放入你自己创建的安装包或分发中

禁止你:

  • 在没有合适的权力声明的情况下重新分发Bootstrap的任意部分
  • 以任何方式(声明或暗示Twitter已经为你的分发背书)使用Twitter拥有的任何商标
  • 以任何方式(声明或暗示你创建了此软件)使用任何Twitter拥有的商标

需要你:

  • 在你的包含了Bootstrap的分发中包含一份许可证文件
  • 对你所包含的Bootstrap进行准确的声明,其权利归属于Twitter

不需要你:

  • 在你的分发中包含Bootstrap源码或你对其进行的任何修改
  • 向Bootstrap项目提交你对Bootstrap的修改(虽然我们鼓励你提交并回馈)

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

如果你将Bootstrap作为你所依赖的工具库中的一个组成部分,那么,对Bootstrap进行定制将是非常好的方式。这样做能够确保将来的升级更容易。

一旦你将下载下来的Bootstrap样式和脚本文件引入到页面内,你就可以定制这些组件。这需要再创建一份新的样式表(可以是LESS,或者是CSS)用于覆盖Bootstrap中已经存在的样式。

压缩版还是非压缩版?

除非你需要阅读CSS代码,否则请使用压缩版。其中包含的代码是一样的,只是更精简了。压缩过的样式文件可以降低带宽的占用,尤其对线上环境有益。

到此,包含所需的Bootstrap组件和HTML内容即可创建生成页面所需的模版。

定制组件

有几种不同程度的定制方式,但是,基本可以归为两类:轻量级定制深度定制。这两种方式都有很多第三方案例可供参考。

我们将轻量级定制定义为外观层面的改变,比如修改现有Bootstrap组件的颜色和字体之类。Twitter翻译中心 (由@mdo开发)就是一个很好地案例。下面就让我们看看这个网站是如何定制按钮.btn-ttc的。

使用Bootstrap自带的按钮,只需一个简单的class即可,即.btn。我们现在需要增加自己的class来为其做些修改,class名称为.btn-ttc。现在就可以花费比较少的时间做外观定制。

我们定制的按钮如下:

<button type="button" class="btn btn-ttc">Save changes</button>

注意.btn-ttc是如何添加到标准的.btn class中的。

在定制的样式表中,增加如下CSS代码:

/* 定制按钮
-------------------------------------------------- */

/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #007da7;
}

/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ttc {
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
  ...
}

/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ttc:hover {
  background-position: 0 -15px;
}

简单来说,就是从样式表代码中复制出需要修改的部分。

以下就是基本工作流程:

  • 对于每个需要定制的元素,在Bootstrap CSS文件(未压缩版)中找到其出现的位置。
  • 将需要定制的样式代码拷贝并粘贴到你自己的文件中。例如,定制导航条(navbar)的背景(background),只需要拷贝.navbar样式。
  • 在你自己的样式表文件中修改拷贝过来的CSS代码。不需要增加新的class或使用!important属性。尽量简单就好。
  • 重复上述过程,直到自己满意为止。

一旦你熟悉了轻量定制,再进行深度定制将会手到擒来。例如Karma网站,他们就是将Bootstrap作为一个CSS reset文件,并进行了大量的修改,其中涉及到当量的工作。他们在定制过程中遵循了同样的原理:将Bootstrap的默认样式表引入页面中,然后使用自己定制的样式。

可选的定制方式

虽然不推荐初级Bootstrap开发者使用,我们还是列出两种可选方式。第一种是修改 .less源码文件(将来升级时将会超级困难);第二种是通过mixin将LESS源码映射到你自己定义的class上。由于时间关系,不在此一一详细说明。

去除没用的代码

并不是所有的网站和应用需要使用Bootstrap提供的所有功能,尤其是在生产环境,带宽的增加意味着花费更多金钱。我们鼓励你通过定制功能去除任何没用的代码。

利用定制功能,可以简单的将不需要的组件、特性或资源去除掉。点击下载按钮,将下载下来的文件替换掉默认的Bootstrap文件即可。这样你就获得了完全满足自己需求的Bootstrap,没有丝毫你不需要的代码。所有定制的Bootstrap也都包含压缩和未压缩两个版本的文件,根据你自己的需要使用吧。