Bootstrap
下载Bootstrap （当前版本 v3.3.4）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。 用于生产环境的 Bootstrap编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。 Bootstrap 源码Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。 Sass这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。 使用 Bootstrap 中文网提供的免费 CDN 加速服务Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库。 复制 <!--?新?Bootstrap?核心?CSS?文件?-->?<link?rel="stylesheet"?href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">?<!--?可选的Bootstrap主题文件（一般不用引入）?-->?<link?rel="stylesheet"?href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">?<!--?jQuery文件。务必在bootstrap.min.js?之前引入?-->?<script?src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>?<!--?最新的?Bootstrap?核心?JavaScript?文件?-->?<script?src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> ? 通过 Bower 进行安装还可以通过 Bower 安装并管理 Bootstrap 的 Less、CSS、JavaScript 和字体文件。 复制 $?bower?install?bootstrap ? 通过 npm 进行安装你还可以利用 npm 工具来安装 Bootstrap： 复制 $?npm?install?bootstrap ?
Bootstrap 的
编译 Less/Sass 源码需要注意的事项Bootstrap 利用 Autoprefixer 自动为 某些 CSS 属性添加针对特定厂商的前缀。 如果你是从 Less/Sass 源码编译 Bootstrap 的，并且没有使用 Bootstrap 自带的 Gruntfile ?文件，那你就必须将 Autoprefixer 集成到你的编译工具和编译过程中。如果你使用的是我们预先编译好的 Bootstrap ?文件或者使用的是我们提供的 Gruntfile 文件，那就无需操心了，我们已经将这些工作替你搞定了。 包含的内容Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。 Bootstrap 插件全部依赖 jQuery请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 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 项目中。我们提供了编译好的 CSS 和 JS ( Bootstrap 源码Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下： 复制 bootstrap/?├──?less/?├──?js/?├──?fonts/?├──?dist/?│???├──?css/?│???├──?js/?│???└──?fonts/?└──?docs/?????└──?examples/ ?
编译 CSS 和 JavaScript 文件Bootstrap 使用 Grunt 作为编译系统，并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。 安装 Grunt安装 Grunt 前，你需要首先下载并安装 node.js （npm 已经包含在内）。npm 是 node packaged modules 的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。 然后在命令行中输入以下命令：
上述步骤完成后，你就可以运行 Bootstrap 所提供的各个 Grunt 命令了。 可用的 Grunt 命令
|
| 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）的支持。
| Feature | Internet Explorer 8 | Internet Explorer 9 |
|---|---|---|
border-radius |
不支持 | 支持 |
box-shadow |
不支持 | 支持 |
transform |
不支持 | 支持,with -ms prefix |
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-width、max-width、min-height 或 max-height 一同使用时，IE8 不能完全支持 box-sizing 属性。由于此原因，从 Bootstrap v3.0.1 版本开始，我们不再为 .container 赋予 max-width 属性。
Internet Explorer 8 与 @font-face
当 @font-face 与 :before 在 IE8 ?下共同使用时会出现问题。由于 Bootstrap 对 Glyphicons ?的样式设置使用了这一组合方式，如果某个页面被浏览器缓存了，并且此页面不是通过点击“刷新”按钮或通过 iframe ?加载的，那么就会导致字体文件尚未加载的情况下就开始绘制此页面。当鼠标滑过页面（body）时，页面上的某些图标就会显现，鼠标滑过其他没有显现的图标 时，这些图标就能显示出来了。请参考 issue #13863 了解详细信息。
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> 标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代！
Windows 8 中的 Internet Explorer 10 和 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表现更好（这比第一种方式更困难）
模态框、导航条和虚拟键盘
超出范围和滚动
<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 手段，一般没有直接的解决方案。
移动设备上应用 :hover/:focus
尽管在大多数触摸屏上没有真正的悬停状态，大部分移动设备浏览器模拟了悬停（hover）状态并让 :hover 状态"多展现一会儿"。换句话说，轻触元素后开始应用 :hover 样式，并且在用户轻触其他的元素之后停止应用 :hover 样式。在这些浏览器中，Bootstrap 的 :hover 状态可能不是你所期望的。某些移动浏览器中的 :focus 状态也存在同样的问题。对于这些问题，除了完全清除这些样式，目前还没有简单的解决方法。
打印
即便是在某些很现代的浏览器中，打印页面功能也还是存在很多陷阱。
举个例子，从 Chrome v32 开始，打印一个支持媒体查询的页面时，不管如何设置留白，Chrome ?总是使用一个远远小于实际页面尺寸的视口宽度的值作为页面宽度。这就导致被打印的页面总是被呈现为在超小屏幕（extra-small）上的效果（也就是 激活了 Bootstrap 针对超小屏幕的栅格排布方式）。 参考 #12078 了解更多信息。 推荐解决方案：
让你的页面在超小（extra-small）屏幕上看起来不那么太差劲。
修改
@screen-*Less 变量的值，让你的页面总是大于 extra-small添加额外的媒体查询代码，针对打印机修改栅格阈值。
另外，从Safari v8.0 开始，固定宽度的 .container 会导致 Safari 使用非常小的字号来打印页面。参见 #14868 了解跟多信息。下面这段 CSS 代码提供了一个临时解决方案：
复制
@media?print?{???.container?{?????width:?auto;???}?}
?
Android 系统默认浏览器
Android 4.1 （甚至某些较新版本）系统的默认浏览器被设置为默认打开页面的应用程序（不同于 Chrome）。不幸的是， 一般情况下，这些浏览器有很多bug以及和CSS标准不一致的地方。
选择菜单
如果 <select> 元素应用了 border-radius 和/或 border 样式，Android 系统默认的浏览器将不会显示侧边栏控件。（详见 这个 StackOverflow 上的问题 。） 使用下面的代码片段来删除有问题的CSS并且在Android系统默认的浏览器上，<select> as an呈现为无样式元素。可以通过检测用户代理（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。
W3C 页面源码校验
为了在老旧的浏览器上尽量提供最好的展现，Bootstrap 针对浏览器使用了一些 CSS hack 手段，为的是针对特定浏览器版本弥补浏览器自身的 bug。这些 CSS hack 手段在 CSS 校验器那里会被认为是无效代码。还有一些地方，我们使用了某些未被完全标准化的 CSS 特性，纯粹是为了实现渐进式增强的思路。
上面提到的这些校验器报告的警告信息并不会对实际使用造成影响，因为非 hack 部分的 CSS 是完全合格的，hack 部分不会对非 hack 部分的功能产生影响，这就是我们故意无视这些校验器警告的原因。
同样，我们的 HTML 文档中也有一些针对 Firefox bug 的 hack 代码，在 HTML 校验时也会被警告。
对第三方组件的支持
虽然我们并不官方支持任何第三方插件，我们还是提供一些建议，帮你避免可能在你的项目中会出现的问题。
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 结构上也是排在主内容之前，那么，建议在导航前面添加一个 Skip to main content（直接进入主内容区） 的链接（这篇文章 A11Y Project article on skip navigation links给了简要的解释）。 通过使用 .sr-only 类可以让 “Skip to main content（直接进入主内容区）” 链接在视觉上是不可见的，而 .sr-only-focusable 类可以让这个链接在获得焦点的时候变为可见（对于使用键盘导航的用户）。
Due to long-standing shortcomings/bugs in Chrome (see issue 262171 in the Chromium bug tracker) and Internet Explorer (see this article on in-page links and focus order),you will need to make sure that the target of your skip link is at least programmatically focusable by adding tabindex="-1".
In addition,you may want to explicitly suppress a visible focus ?indication on the target (particularly as Chrome currently also sets ?focus on elements with tabindex="-1" when they are clicked with the mouse) with #content:focus { outline: none; }.
Note that this bug will also affect any other in-page links your ?site may be using,rendering them useless for keyboard users. You may ?consider adding a similar stop-gap fix to all other named anchors / ?fragment identifiers that act as link targets.
复制
<body>???<a?href="#content"?class="sr-only?sr-only-focusable">Skip?to?main?content</a>???...???<div?class="container"?id="content"?tabindex="-1">?????<!--?The?main?page?content?-->???</div>?</body>
?
标题嵌套
当标题嵌套时 (<h1> - <h6>)，你的文档的主标题应该是 <h1> 标签。随后的标题逻辑上就应该使用 <h2> - <h6> ，这样，屏幕阅读器就可以构造出页面的内容列表了。
更多信息请参考： HTML CodeSniffer and Penn State's AccessAbility.
色彩对比
当前，Bootstrap 使用的默认颜色组合的对比度（例如各种 styled button 类；一些 基本代码块高亮代码所用的颜色；.bg-primary 上下文背景色 辅助类；和白色背景下默认的链接颜色）都比较低（低于 推荐比例 4.5:1）。这会导致视力低下和色盲用户在使用时产生困难。这些默认颜色可能需要进行修改，以增强对比度和清晰度。
扩展阅读
"HTML Codesniffer" bookmarklet for identifying accessibility issues
Chrome's Accessibility Developer Tools extension
Colour Contrast Analyser
The A11Y Project
MDN accessibility documentation
许可证 FAQ
Bootstrap 遵守 MIT 许可证进行发布，2015 Twitter 版权所有。归结为以下几点：
必须遵守：
Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works
赋予你的权力：
Freely download and use Bootstrap,in whole or in part,for personal,private,company internal,or commercial purposes
Use Bootstrap in packages or distributions that you create
Modify the source code
Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license
禁止以下行为：
Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
Hold the creators or copyright holders of Bootstrap liable
Redistribute any piece of Bootstrap without proper attribution
Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
It does not require you to:
Include the source of Bootstrap itself,or of any modifications ?you may have made to it,in any redistribution you may assemble that ?includes it
Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
Bootstrap 完整的许可证包含在 项目仓库中，请参考。
文档翻译
我们的社区成员已经将 Bootstrap 文档翻译成多种语言版本，请根据你的语言习惯选择自己母语版本的文档做参考。
Bootstrap 中文文档 (Chinese)
Bootstrap p? Dansk (Danish)
Bootstrap en Fran?ais (French)
Bootstrap auf Deutsch (German)
Bootstrap in Italiano (Italian)
Bootstrap ??? (Korean)
Bootstrap по-русски (Russian)
Bootstrap en Espa?ol (Spanish)
Bootstrap укра?нською (Ukrainian)
Bootstrap b?ng ti?ng Vi?t (Vietnamese)
Bootstrap 官方不托管各翻译版本的文档，如遇问题，请联系相应的维护人员。
如果你发现 Bootstrap 中文文档中存在的问题，请发送邮件至：admin@bootcss.com
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!