Bootstrap3起步

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

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

用于生产环境的 Bootstrap

下载地址:Bootstrap v3全系列文件库 | Bootstrap v3.3.7.zip下载地址

最快速的开始方式:编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。 【目录结构】

源文件下载

下载地址:https://github.com/twbs/bootstrap/archive/v3-dev.zip

从GitHub直接下载最新版本,获取所有CSS和JavaScript的源文件, 以及文档。


引用方式,以新浪公共库为例:

<!-- 此处只为演示,请自行更换适用的版本文件 -->
 
<!-- Bootstrap3 核心 CSS 文件 -->
<link rel="stylesheet" href="http://lib.sinaapp.com/js/bootstrap/v3.0.0/css/bootstrap.min.css">
 
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://lib.sinaapp.com/js/bootstrap/v3.0.0/css/bootstrap-theme.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入, 请选择自己认为合适的jQuery文件 -->
<script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
 
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="http://lib.sinaapp.com/js/bootstrap/v3.0.0/js/bootstrap.min.js"></script>
Bootstrap3_基本模板.html
<!DOCTYPE html>
<html lang="zh-cn">
    <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>
        <!-- Bootstrap3 核心 CSS 文件 -->
        <link rel="stylesheet" href="http://lib.sinaapp.com/js/bootstrap/v3.0.0/css/bootstrap.min.css">
        <!-- 可选的Bootstrap主题文件(一般不用引入) -->
        <link rel="stylesheet" href="http://lib.sinaapp.com/js/bootstrap/v3.0.0/css/bootstrap-theme.min.css">
    </head>
    <body>
        <h1>你好,世界!</h1>
 
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入, 请选择自己认为合适的jQuery文件 -->
        <script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
 
        <!-- Bootstrap 核心 JavaScript 文件 -->
        <script src="http://lib.sinaapp.com/js/bootstrap/v3.0.0/js/bootstrap.min.js"></script>
    </body>
</html>

请注意,Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap js 之前引入,就像在基本模版中所展示的一样。

以下实例全部基于前面所讲的基本模板并配合 Bootstrap 的众多组件开发而成。我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。


Bootstrap 框架的基本用法

入门级模板
只有基本的东西:引入了预编译版的 CSS 和 JavaScript 文件,页面只包含了一个 container 元素。

bootstrap主题
加载可选的 Bootstrap 主题,获得增强的视觉体验。

栅格演示
多个关于栅格布局方面的实例,涉及到层级(tier)、嵌套(nesting)等等。

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

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

被支持的浏览器

特别注意,我们坚决支持这些浏览器的最新版本 。在 Windows 平台,我们支持 Internet Explorer 8-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 上的表现也是很不错的,虽然官方不对其进行维护支持。


Internet Explorer 8 和 9

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

CSS3 特性 Internet Explorer 8 Internet Explorer 9
border-radius 不支持 支持
box-shadow 不支持 支持
transform 不支持 支持,但是需要添加 -ms 前缀
transition 不支持
placeholder 不支持

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


Internet Explorer 8 与 Respond.js

在开发环境和生产(线上)环境需要支持 Internet Explorer 8 时,请务必注意下面给出的警告。


Respond.js 与 跨域(cross-domain) CSS 的问题

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


Respond.js 与 file:// 协议

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


Respond.js 与 @import 指令

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


Internet Explorer 8 与 box-sizing 属性

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


Internet Explorer 8 与 @font-face

IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.


IE 兼容模式

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

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

按 F12键打开 IE 的调试工具,就可以看到 IE 当前的渲染模式是什么。

此 meta 标签被包含在了所有 Bootstrap 文档和实例页面中,为的就是在每个被支持的 IE 版本中拥有最好的绘制效果。

请参考 这个发表在 StackOverflow 上的问题


国产浏览器高速模式

国内浏览器厂商一般都支持兼容模式(即 IE 内核)和高速模式(即 webkit 内核),不幸的是,所有国产浏览器都是默认使用兼容模式,这就造成由于低版本 IE (IE8 及以下)内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。幸运的是,国内浏览器厂商逐渐意识到了这一点,某些厂商已经开始有所作为了!

将下面的 <meta> 标签加入到页面中,可以让部分国产浏览器默认采用高速模式渲染页面:

<meta name="renderer" content="webkit">

目前只有360浏览器支持此 <meta> 标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代!


IE10 和 Windows (Phone) 8

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

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

然而,这样做并不能对 Windows Phone 8 Update 3 (a.k.a. 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 and Device-Width 以了解更多信息。

作为提醒,我们将上面的代码加入到了所有 Bootstrap 文档和实例页面中。


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

OS X 上搭载的 v7.1 以前 Safari 和 iOS v8.0 上搭载的 Safari 浏览器的绘制引擎对于处理 .col-*-1 类所对应的很长的百分比小数存在 bug。也就是说,如果你在一行(row)之中定义了12个单独的列(.col-*-1),你就会看到这一行比其他行要短一些。除了升级 Safari/iOS 外,有以下几种方式来应对此问题:

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

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


模态框、导航条和虚拟键盘

Overflow and scrolling

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


虚拟键盘

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


导航条上的下拉菜单

在 iOS 设备上,由于导航组件(nav)的复杂的 z-indexing 属性,.dropdown-backdrop 元素并未被使用。因此,为了关闭导航条上的下拉菜单,必须直接点击下拉菜单上的元素(或者任何其他能够触发 iOS 上 click 事件的元素)。


浏览器的缩放功能

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


打印机的视口(viewport)

即使在新版的浏览器上,打印功能仍然有问题。具体来说,从 Chrome v32 版本开始,不管设置的边距(margin)是多少,打印页面时 Chrome 所用的视口(viewport)宽度都比实际的纸张此存窄很多。这就导致 Bootstrap 激活并展示出针对超小屏幕设备的样式。请查看编号 #12078 的 Bug 详情。 我们建议的解决方案:

  • Embrace the extra-small grid and make sure your page looks acceptable under it.
  • Customize the values of the @screen-* Less variables so that your printer paper is considered larger than extra-small.
  • Add custom media queries to change the grid size breakpoints for print media only.

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

box-sizing 属性

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

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

/* 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 - Assistive Technology)上网的人群访问你的站点。

跳过导航区

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

<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 CodeSniffer and Penn State's AccessAbility.

扩展阅读

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

允许你:

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

禁止你:

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

需要你:

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

不需要你:

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

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