基本模版
使用以下给出的这份超级简单的HTML模版，或者修改。我们强烈建议你对这些案例按照自己的需求进行修改，而不要简单的复制、粘贴。
拷贝并粘贴下面给出的HTML代码，这就是一个最简单的Bootstrap页面了。
Bootstrap 101 Template Hello, world!
案例
下面这些案例都是基于上面给出的基本模版并结合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!
Offcanvas
Build a toggleable off-canvas navigation menu for use with Bootstrap.
大屏轮播
定制了导航条和轮播组件，并添加了一些自定义的新组件。
非响应式的Bootstrap
按照我们给出的可以很容易禁用Bootstrap的响应式特性。
Bootstrap主题
页面额外加载了一套Bootstrap主题，加强了页面的视觉效果
禁用响应式布局
Bootstrap会自动帮你针对不同的屏幕尺寸调整你的页面，使其在个尺寸屏幕上表现良好。下面我们列出了如何禁用这一特性，就像这个页面一样：。
禁用响应式布局的步骤
- 移除提到的（或者不要添加）viewport
<meta>。 - 通过为
.container设置一个width值从而覆盖框架的默认width设置，例如width: 970px !important;。请确保这些设置全部放在默认的Bootstrap CSS后面。注意，你也可以略去!important。 - 如果使用了导航条，需要移除所有导航条的折叠和展开行为。
- 对于栅格布局，额外增加
.col-xs-*classe或替换掉.col-md-*和.col-lg-*。不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。
针对IE8需要额外引入Respond.js文件 （由于仍然有媒体查询代码，因此还需要做处理）。这样就禁用了Bootstrap对小屏幕设备的响应式支持。
禁用响应式特性的Bootstrap模版
我们已经按照上面的步骤制作了一份案例。仔细阅读其源码并对照上面的步骤实践一下吧。
从2.x升级到3.0版本
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 | Split into .visible-md .visible-lg |
.hidden-phone | .hidden-xs |
.hidden-tablet | .hidden-sm |
.hidden-desktop | Split into .hidden-md .hidden-lg |
.input-small | .input-sm |
.input-large | .input-lg |
.control-group | .form-group |
.control-group.warning .control-group.error .control-group.success | .form-group.has-* |
.checkbox.inline .radio.inline | .checkbox-inline .radio-inline |
.input-prepend .input-append | .input-group |
.add-on | .input-group-addon |
.img-polaroid | .img-thumbnail |
ul.unstyled | .list-unstyled |
ul.inline | .list-inline |
.muted | .text-muted |
.label | .label .label-default |
.label-important | .label-danger |
.text-error | .text-danger |
.table .error | .table .danger |
.bar | .progress-bar |
.bar-* | .progress-bar-* |
.accordion | .panel-group |
.accordion-group | .panel .panel-default |
.accordion-heading | .panel-heading |
.accordion-body | .panel-collapse |
.accordion-inner | .panel-body |
新增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 |
| Form group with info | .control-group.info | 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 and 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、关键样式和行为都进行了调整，使其更灵活并且适应移动设备优先这一目标。下面是一个部分列表：
- 默认情况下，文本类型的表单控件只被赋予了最少的样式。将
.form-controlclass赋予这些控件可以使其具有高亮（在获得焦点时）和圆角样式。 - 添加了
.form-controlclass的文本表单控件默认预设为100%宽度。用<div class="col-*"></div>包裹输入框（input）即可控制其宽度。 .badge不再保留状态相关的class（-success、-primary等）。.btn必须和.btn-default一起使用才能获得“默认”样式的按钮。.container和.row目前是基于百分比定义的宽度。- 默认情况下，图片不具有由响应式特性，需要使用
.img-responsive才能让<img>实现响应式可变大小。 - 图标，
.glyphicon，演变为字体图标。每个图标都需要一个基本class和一个代表特定图标的class（例如，.glyphicon .glyphicon-asterisk） - 与输入组件被移除，建议使用组件。
- 模态框组件的HTML结构发生了很大的改变。
.modal-header、.modal-body和.modal-footer部分目前包含在了.modal-content和.modal-dialog中，为的是增强移动设备上的样式和行为特性。 - The HTML loaded by the
remotemodal option is now injected into the.modalinstead 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'，还有很多其它事件名称也是类似。
可以在社区网站获取更多升级至v3.0的信息和代码示例。
浏览器支持
Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。
被支持的浏览器
特别注意，我们坚决支持这些浏览器的最新版本：
- Chrome (Mac、Windows、iOS和Android)
- Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
- Firefox (Mac、Windows)
- Internet Explorer
- Opera (Mac、Windows)
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的，虽然我们不对其进行官方支持。
Internet Explorer 8 和 9
Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多CSS3属性和HTML5元素 -- 例如，圆角矩形和投影 -- 是肯定不被支持的。另外，Internet Explorer 8 需要配合才能实现对媒体查询（media query）的支持。
| CSS特性 | 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 和 跨域（cross-domain） CSS 的问题
如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面（例如，使用CDN）时需要一些额外的设置。请参考 获取详细信息。
Respond.js 和 file://
由于浏览器的安全规则问题，Respond.js 不能通过 file:// 协议（打开本地HTML文件所用的协议）访问的页面上发挥正常的功能。如果需要测试IE8下面的响应式特性，必须用http服务器（例如apache、nginx）托管HTML页面才可以。请参考 获取更多信息。
Respond.js 和@import
Respond.js 不支持通过 @import 引入的CSS文件。例如，Drupal 一般被配置为通过 @import 引入CSS文件，Respond.js对其将无法起到作用。 请参考获取更多信息。
Internet Explorer 8 与 box-sizing
IE8不能完全支持box-sizing: border-box;与min-width、max-width、min-height或max-height一同使用。由于此原因，从Bootstrap v3.0.1版本开始，我们不再为.container使用max-width。
IE兼容模式
Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此 <meta> 标签加入到你的页面中：
此标签被加入到所有文档页面和案例页面中，以确保在每个被支持的IE浏览器中保持最好的页面展现效果。
参见。
Windows 8 中的 Internet Explorer 10 和 Windows Phone 8
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)} 请查看以了解更多信息。
作为提醒，我们将其加入到Bootstrap文档中作为一个案例。
Safari对百分比数字凑整的问题
从OS X版Safari v6.1和iOS v7.0.1版Safari开始，Safari浏览器所包含的绘制引擎对于处理.col-*-1所对应的很长的百分比小数存在bug。也就是说，如果你在一行（row）之中定义了12个单独的列（.col-*-1），你就会看到这一行比其他行要短一些。我们目前解决不了这个问题()，但是你可以避免：
- 为最后一列添加
.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不影响页面元素最终宽度的计算。更多信息请参考。
根据不同情况，你可能需要根据情况覆盖（第一种选择）或为所有区域设置（第二种选择）。
/* 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>标签之后添加一个Skip to main content的链接。
Skip to main content The main page content. 标题嵌套
当标题嵌套时(<h1> - <h6>)，你的文档的主标题应该是<h1>。随后的标题逻辑上就应该使用<h2> - <h6>，这样，屏幕阅读器就可以构造出页面的内容列表。
Learn more at and .
扩展阅读
许可证FAQ
Bootstrap遵守Apache 2许可证进行分发，版权归 Twitter2014所有。归结为以下几点：
允许你：
- 自由的下载并使用部分或完整的Bootstrap框架，允许用于私人、公司内部或商业目的
- 将Bootstrap放入你自己创建的安装包或分发中
禁止你：
- 在没有合适的权力声明的情况下重新分发Bootstrap的任意部分
- 以任何方式（声明或暗示Twitter已经为你的分发背书）使用Twitter拥有的任何商标
- 以任何方式（声明或暗示你创建了此软件）使用任何Twitter拥有的商标
需要你：
- 在包含了Bootstrap的分发中包含一份许可证文件
- 对所包含的Bootstrap进行准确的声明，其权利归属于Twitter
不需要你：
- 在分发中包含Bootstrap源码或你对其进行的任何修改
- 向Bootstrap项目提交你对Bootstrap的修改(虽然我们鼓励你提交并回馈)
Bootstrap完整的许可包含在。
定制Bootstrap
如果你将Bootstrap作为你所依赖的工具库中的一个组成部分，那么，对Bootstrap进行定制将是非常好的方式。这样做能够确保将来的升级更容易。
一旦你将下载下来的Bootstrap样式和脚本文件引入到页面内，你就可以定制这些组件。这需要再创建一份新的样式表（可以是LESS，或者是CSS）用于覆盖Bootstrap中已经存在的样式。
压缩版还是非压缩版？
除非你需要阅读CSS代码，否则请使用压缩版。其中包含的代码是一样的，只是更精简了。压缩过的样式文件可以降低带宽的占用，尤其对线上环境有益。
到此，包含所需的Bootstrap组件和HTML内容即可创建生成页面所需的模版。
定制组件
有几种不同程度的定制方式，但是，基本可以归为两类：轻量级定制和深度定制。这两种方式都有很多第三方案例可供参考。
我们将轻量级定制定义为外观层面的改变，比如修改现有Bootstrap组件的颜色和字体之类。 (由@mdo开发)就是一个很好地案例。下面就让我们看看这个网站是如何定制按钮.btn-ttc的。
使用Bootstrap自带的按钮，只需一个简单的class即可，即.btn。我们现在需要增加自己的class来为其做些修改，class名称为.btn-ttc。现在就可以花费比较少的时间做外观定制。
我们定制的按钮如下：
注意.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属性。尽量简单就好。 - 重复上述过程，直到自己满意为止。
一旦你熟悉了轻量定制，再进行深度定制将会手到擒来。例如网站，他们就是将Bootstrap作为一个CSS reset文件，并进行了大量的修改，其中涉及到当量的工作。他们在定制过程中遵循了同样的原理：将Bootstrap的默认样式表引入页面中，然后使用自己定制的样式。
可选的定制方式
虽然不推荐初级Bootstrap开发者使用，我们还是列出两种可选方式。第一种是修改 .less源码文件（将来升级时将会超级困难）；第二种是通过mixin。由于时间关系，不在此一一详细说明。
去除没用的代码
并不是所有的网站和应用需要使用Bootstrap提供的所有功能，尤其是在生产环境，带宽的增加意味着花费更多金钱。我们鼓励你通过去除任何没用的代码。
利用定制功能，可以简单的将不需要的组件、特性或资源去除掉。点击下载按钮，将下载下来的文件替换掉默认的Bootstrap文件即可。这 样你就获得了完全满足自己需求的Bootstrap，没有丝毫你不需要的代码。所有定制的Bootstrap也都包含压缩和未压缩两个版本的文件，根据你 自己的需要使用吧。