├── Untitled.md ├── css ├── forms.md ├── images.md ├── tables.md ├── buttons.md ├── using-less.md ├── using-sass.md ├── helper-classes.md ├── responsive-utilities.md ├── code.md ├── overview.md ├── typography.md └── grid-system.md ├── components ├── navs.md ├── alerts.md ├── badges.md ├── dropdowns.md ├── jumbotron.md ├── labels.md ├── navbar.md ├── panels.md ├── wells.md ├── breadcrumbs.md ├── button-groups.md ├── glyphicons.md ├── input-groups.md ├── list-group.md ├── media-object.md ├── page-header.md ├── pagination.md ├── progress-bars.md ├── thumbnails.md ├── button-dropdowns.md └── responsive-embed.md ├── javascript ├── tab.md ├── affix.md ├── alert.md ├── button.md ├── carousel.md ├── collapse.md ├── dropdowns.md ├── modal.md ├── popovers.md ├── scrollspy.md ├── tooltips.md ├── transitions.md └── overview.md ├── customize ├── download.md ├── import.md ├── jquery-plugins.md ├── less-variables.md └── less-components .md ├── getting-started ├── download.md ├── examples.md ├── migrating-from-v2.x-to-v3.x.md ├── tools.md ├── community.md ├── translations.md ├── disabling-responsiveness.md ├── compiling-css-and-javascript.md ├── license-faqs.md ├── basic-template.md ├── third-party-support.md ├── accessibility.md ├── what-included.md └── browser-and-device-support.md ├── images └── bootstrap.jpg ├── README.md └── TOC.md /Untitled.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/forms.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/images.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/tables.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/navs.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/buttons.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/using-less.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/using-sass.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/tab.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/alerts.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/badges.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/dropdowns.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/jumbotron.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/labels.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/navbar.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/panels.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/wells.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/helper-classes.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /customize/download.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /customize/import.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/affix.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/alert.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/button.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/carousel.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/collapse.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/dropdowns.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/modal.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/popovers.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/scrollspy.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/tooltips.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/breadcrumbs.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/button-groups.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/glyphicons.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/input-groups.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/list-group.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/media-object.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/page-header.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/pagination.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/progress-bars.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/thumbnails.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/responsive-utilities.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /customize/jquery-plugins.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /customize/less-variables.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /getting-started/download.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /getting-started/examples.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /javascript/transitions.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/button-dropdowns.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/responsive-embed.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /customize/less-components .md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bootstrap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jikexueyuanwiki/bootstrap/HEAD/images/bootstrap.jpg -------------------------------------------------------------------------------- /getting-started/migrating-from-v2.x-to-v3.x.md: -------------------------------------------------------------------------------- 1 | 从 v2.x 版本升级到 v3.x 版本 2 | 你在找从老版本升级到 Bootstrap v3.x 版本的方法吗？请查看我们整理的升级指南吧。 -------------------------------------------------------------------------------- /getting-started/tools.md: -------------------------------------------------------------------------------- 1 | # 工具 2 | 3 | ## Bootlint 4 | Bootlint 是 Bootstrap 官方所支持的 HTML 检测工具。在使用了 Bootstrap 的页面上（没有对 Bootstrap 做修改和扩展的情况下），它能自动检查某些常见的 HTML 错误。纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。建议将 Bootlint 加入到你的开发工具中，这样就能帮你在项目开发中避免一些简单的错误影响你的开发进度。 5 | 6 | -------------------------------------------------------------------------------- /getting-started/community.md: -------------------------------------------------------------------------------- 1 | # 社区 2 | 3 | Bootstrap 有成熟、强大的社区。如果你希望随时获取 Bootstrap 的最新消息，请关注以下社区资源。 4 | 5 | 阅读并订阅 Bootstrap 官方博客。 6 | 通过 IRC （`irc.freenode.net` 服务器）与其他 Bootstrap 粉丝交流，我们在 ##bootstrap 频道。 7 | 如果使用 Bootstrap 过程中遇到问题，请在 StackOverflow 上交流。请搜索 `twitter-bootstrap-3` 关键词。 8 | 参观其他同学基于 Bootstrap 构建的网站，请进这里：Bootstrap 优站精选. 9 | 你还可以在 Twitter 上关注英文官方账号 @twbootstrap ，这里有最新的八卦和有趣的视频。（ :( 原来和技术不沾边啊！） 10 | 11 | 中国用户请关注我们的官方微博账号：@Bootstrap中文网。我们定期分享新技术和新资讯。 -------------------------------------------------------------------------------- /getting-started/translations.md: -------------------------------------------------------------------------------- 1 | # 文档翻译 2 | 3 | 我们的社区成员已经将 Bootstrap 文档翻译成多种语言版本，请根据你的语言习惯选择自己母语版本的文档做参考。 4 | 5 | Bootstrap 中文文档 (Chinese) 6 | Bootstrap på Dansk (Danish) 7 | Bootstrap en Français (French) 8 | Bootstrap auf Deutsch (German) 9 | Bootstrap in Italiano (Italian) 10 | Bootstrap 한국어 (Korean) 11 | Bootstrap по-русски (Russian) 12 | Bootstrap en Español (Spanish) 13 | Bootstrap українською (Ukrainian) 14 | 15 | Bootstrap 官方不托管各翻译版本的文档，如遇问题，请联系相应的维护人员。？？？？？？？？？？ 16 | 17 | 如果你发现 Bootstrap 中文文档中存在的问题，请发送邮件至：！！待添加 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap 官方文档中文版 2 | 3 | Bootstrap 官方文档（英文原版）： 4 | 5 | - [Getting started](http://getbootstrap.com/getting-started/) 6 | - [CSS](http://getbootstrap.com/css/) 7 | - [Components](http://getbootstrap.com/components/) 8 | - [JavaScript](http://getbootstrap.com/javascript/) 9 | - [customize](http://getbootstrap.com/customize/) 10 | 11 | ## 目的 12 | 13 | 翻译 Bootstrap 官方文档，目录见文件「[TOC.md](TOC.md)」 14 | 15 | ## 极客学院 Wiki 协作规范 16 | 17 | https://github.com/jikexueyuanwiki/guide 18 | 19 | ## 如何添加图片 20 | 21 | 前提：官网上的所有图片都已经下载下来放入「images」文件夹，图片的文件名没做任何修改。 22 | 23 | 1. 请引用「images」文件夹中的图片，不要直接引用官方上的图片链接； 24 | 2. 引用「images」文件夹时，请使用相对文件路径。 25 | -------------------------------------------------------------------------------- /getting-started/disabling-responsiveness.md: -------------------------------------------------------------------------------- 1 | # 禁止响应式布局 2 | 3 | Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面，使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性，就像这个非响应式布局实例页面一样。 4 | 5 | ## 禁止响应式布局有如下几步： 6 | 移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：``。 7 | 通过为 `.container` 类设置一个 `width` 值从而覆盖框架的默认 width 设置，例如 `width: 970px !important;` 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去 !`important` 。 8 | 如果使用了导航条，需要移除所有导航条的折叠和展开行为。 9 | 对于栅格布局，额外增加 `.col-xs-*` 类或替换掉 `.col-md-*` 和 `.col-lg-*`。 不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。 10 | 针对 IE8 仍然需要额外引入 Respond.js 文件（由于仍然利用了浏览器对媒体查询（media query）的支持，因此还需要做处理）。这样就禁用了 Bootstrap 对移动设备的响应式支持。 11 | 12 | ## 禁止响应式特性的 Bootstrap 模版 13 | 我们已经按照上面的步骤制作了一份案例。仔细阅读其源码并对照上面的步骤实践一下吧。 -------------------------------------------------------------------------------- /css/code.md: -------------------------------------------------------------------------------- 1 | ## 代码 2 | 3 | ### 内联代码 4 | 通过 ``标签包裹内联样式的代码片段。 5 | 6 | 7 | 8 | 9 | ``` 10 | For example, <section> should be wrapped as inline. 11 | ``` 12 | ###用户输入 13 | 通过 `` 标签标记用户通过键盘输入的内容。= 14 | 15 | 16 | 17 | ``` 18 | To switch directories, type cd followed by the name of the directory.
19 | To edit settings, press ctrl + , 20 | ``` 21 | ###代码块 22 | 多行代码可以使用 `
` 标签。为了正确的展示代码，注意将尖括号做转义处理。
23 | 
24 | 
25 | 
26 | ```
27 |     
<p>Sample text here...</p>

28 | ```
29 | 还可以使用 `.pre-scrollable` 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
30 | 
31 | 变量
32 | 通过 `` 标签标记变量。
33 | 
34 | 
35 | 
36 | 
37 | ```
38 |     y = mx + b
39 | ```
40 | 程序输出
41 | 通过  标签来标记程序输出的内容。
42 | 
43 | 
44 | 
45 | 
46 | ```
47 |     This text is meant to be treated as sample output from a computer program.
48 | ```
49 | 


--------------------------------------------------------------------------------
/getting-started/compiling-css-and-javascript.md:
--------------------------------------------------------------------------------
 1 | # 编译 CSS 和 JavaScript 文件
 2 | 
 3 | Bootstrap 使用 Grunt 作为编译系统，并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。
 4 | 
 5 | ## 安装 Grunt
 6 | 安装 Grunt 前，你需要首先下载并安装 node.js （npm 已经包含在内）。npm 是 node packaged modules 的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。
 7 | 
 8 | 然后在命令行中输入以下命令：
 9 | 在全局环境中安装 `grunt-cli` ：`npm install -g grunt-cli `。
10 | 进入 `/bootstrap/` 根目录，然后执行 `npm install` 命令。npm 将读取 `package.json` 文件并自动安装此文件中列出的所有被依赖的扩展包。
11 | 上述步骤完成后，你就可以运行 Bootstrap 所提供的各个 Grunt 命令了。
12 | 
13 | ## 可用的 Grunt 命令
14 | `grunt dist` （仅编译 CSS 和 JavaScript 文件）
15 | 重新生成 `/dist/` 目录，并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。作为一名 Bootstrap 用户，大部分情况下你只需要执行这一个命令。
16 | 
17 | `grunt watch` （监测文件的改变，并运行指定的 Grunt 任务）
18 | 监测 Less 源码文件的改变，并自动重新将其编译为 CSS 文件。
19 | 
20 | `grunt test` （运行测试用例）
21 | 在 PhantomJS 环境中运行 JSHint 和 QUnit 自动化测试用例。
22 | 
23 | `grunt docs` （编译并测试文档中的资源文件）
24 | 编译并测试 CSS、JavaScript 和其他资源文件。在本地环境下通过 jekyll serve 运行 Bootstrap 文档时需要用到这些资源文件。
25 | 
26 | `grunt` （重新构建所有内容并运行测试用例）
27 | 编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等，都需要 Jekyll 工具。这些只有在你对 Bootstrap 深度研究时才有用。
28 | 
29 | ## 除错
30 | 如果你在安装依赖包或者运行 Grunt 命令时遇到了问题，请首先删除 npm 自动生成的 `/node_modules/` 目录，然后，再次运行 `npm install `命令。


--------------------------------------------------------------------------------
/getting-started/license-faqs.md:
--------------------------------------------------------------------------------
 1 | # 许可证 FAQ
 2 | 
 3 | Bootstrap 遵守 MIT 许可证进行发布，2015 Twitter 版权所有。归结为以下几点：
 4 | 
 5 | 必须遵守：
 6 | 
 7 | Include the license and copyright notice in your works
 8 | 赋予你的权力：
 9 | 
10 | Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
11 | Use Bootstrap in packages or distributions that you create
12 | Modify the source code
13 | Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license
14 | 禁止以下行为：
15 | 
16 | Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
17 | Hold the creators or copyright holders of Bootstrap liable
18 | Redistribute any piece of Bootstrap without proper attribution
19 | Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
20 | Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question
21 | It does not require you to:
22 | 
23 | 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
24 | Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)
25 | Bootstrap 完整的许可证包含在 项目仓库中，请参考。
26 | 
27 | 


--------------------------------------------------------------------------------
/getting-started/basic-template.md:
--------------------------------------------------------------------------------
 1 | # 基本模板
 2 | 
 3 | 使用以下给出的这份超级简单的 HTML 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。
 4 | 
 5 | 拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。
 6 | 
 7 | ```
 8 | 
 9 | 
10 |   
11 |     
12 |     
13 |     
14 |     Bootstrap 101 Template
15 | 
16 |     
17 |     
18 | 
19 |     
20 |     
21 |     
25 |   
26 |   
27 |     
你好，世界！

28 | 
29 |     
30 |     
31 |     
32 |     
33 |   
34 | 
35 | ```


--------------------------------------------------------------------------------
/getting-started/third-party-support.md:
--------------------------------------------------------------------------------
 1 | # 对第三方组件的支持
 2 | 
 3 | 虽然我们并不官方支持任何第三方插件，我们还是提供一些建议，帮你避免可能在你的项目中会出现的问题。
 4 | 
 5 | ## box-sizing 属性
 6 | 某些第三方软件，包括 Google 地图和 Google 定制搜索引擎都会由于 `* { box-sizing: border-box; }` 的设置而产生冲突，这一设置使 `padding `不影响页面元素最终宽度的计算。更多信息请参考 盒模型与尺寸计算 - CSS Tricks。
 7 | 
 8 | 根据不同情况，你可能需要根据情况覆盖（第1种选择）或为所有区域设置（第2种选择）。
 9 | 
10 | ```
11 |     /* Box-sizing resets
12 |      *
13 |      * 为了避免 Bootstrap 设置的全局盒模型所带来的影响，可以重置单个页面元素或覆盖整个区域的盒模型。
14 |      * 你有两种选择：覆盖单个页面元素或重置整个区域。它们都可以通过纯 CSS 或 LESS 代码的形式实现。
15 |      */
16 | 
17 |     /* Option 1A: 通过 CSS 代码覆盖单个页面元素的盒模型 */
18 |     .element {
19 |       -webkit-box-sizing: content-box;
20 |          -moz-box-sizing: content-box;
21 |               box-sizing: content-box;
22 |     }
23 | 
24 |     /* Option 1B: 通过使用 Bootstrap 提供的 LESS mixin 覆盖单个页面元素的盒模型 */
25 |     .element {
26 |       .box-sizing(content-box);
27 |     }
28 | 
29 |     /* Option 2A: 通过 CSS 代码重置整个区域 */
30 |     .reset-box-sizing,
31 |     .reset-box-sizing *,
32 |     .reset-box-sizing *:before,
33 |     .reset-box-sizing *:after {
34 |       -webkit-box-sizing: content-box;
35 |          -moz-box-sizing: content-box;
36 |               box-sizing: content-box;
37 |     }
38 | 
39 |     /* Option 2B: 通过使用自定义的 LESS mixin 重置整个区域 */
40 |     .reset-box-sizing {
41 |       &,
42 |       *,
43 |       *:before,
44 |       *:after {
45 |         .box-sizing(content-box);
46 |       }
47 |     }
48 |     .element {
49 |       .reset-box-sizing();
50 |     }
51 | ```


--------------------------------------------------------------------------------
/getting-started/accessibility.md:
--------------------------------------------------------------------------------
 1 | # 可访问性
 2 | 
 3 | Bootstrap 遵循统一的 web 标准，另外，通过做一些少量的修改，还可以让使用 辅助设备（AT - ASSISTIVE TECHNOLOGY）上网的人群访问你的站点。
 4 | 
 5 | ##跳过导航区
 6 | 如果你的导航部分包含很多链接，并且在 DOM 结构上也是排在主内容之前，那么，建议在导航前面添加一个 Skip to main content（直接进入主内容区） 的链接，(这里解释了这样做的原因)。 Using the .sr-only class will visually hide the skip link, and the .sr-only-focusable class will ensure that the link becomes visible once focused (for sighted keyboard users).
 7 | 
 8 | ```
 9 | 
10 |   Skip to main content
11 |   ...
12 |   

13 |     
14 |   

15 | 
16 | ```
17 | 
18 | ## 标题嵌套
19 | 当标题嵌套时 (`
 `- `
`)，你的文档的主标题应该是 `
` 标签。随后的标题逻辑上就应该使用 `
` - `
 `，这样，屏幕阅读器就可以构造出页面的内容列表了。
20 | 
21 | 更多信息请参考： HTML CodeSniffer and Penn State's AccessAbility.
22 | 
23 | ## Color contrast
24 | Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks, the `.bg-primary` contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.
25 | 
26 | 扩展阅读
27 | "HTML Codesniffer" bookmarklet for identifying accessibility issues
28 | Chrome's Accessibility Developer Tools extension
29 | Colour Contrast Analyser
30 | The A11Y Project
31 | MDN accessibility documentation
32 | 


--------------------------------------------------------------------------------
/getting-started/what-included.md:
--------------------------------------------------------------------------------
 1 | # 包含的内容
 2 | 
 3 | Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。
 4 | 
 5 | `Bootstrap 插件全部依赖 jQuery`
 6 | 请注意，**Bootstrap 的所有 JavaScript 插件都依赖 jQuery**，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。在 `bower.json `文件中 列出了 Bootstrap 所支持的 jQuery 版本。
 7 | ##预编译版
 8 | 下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：
 9 | 
10 | ```
11 | bootstrap/
12 | ├── css/
13 | │   ├── bootstrap.css
14 | │   ├── bootstrap.css.map
15 | │   ├── bootstrap.min.css
16 | │   ├── bootstrap-theme.css
17 | │   ├── bootstrap-theme.css.map
18 | │   └── bootstrap-theme.min.css
19 | ├── js/
20 | │   ├── bootstrap.js
21 | │   └── bootstrap.min.js
22 | └── fonts/
23 |     ├── glyphicons-halflings-regular.eot
24 |     ├── glyphicons-halflings-regular.svg
25 |     ├── glyphicons-halflings-regular.ttf
26 |     ├── glyphicons-halflings-regular.woff
27 |     └── glyphicons-halflings-regular.woff2
28 | ```        
29 | 上面展示的就是 Bootstrap 的基本文件结构：预编译文件可以直接使用到任何 web 项目中。我们提供了编译好的 CSS 和 JS (`bootstrap.*`) 文件，还有经过压缩的 CSS 和 JS (`bootstrap.min.*`) 文件。同时还提供了 CSS 源码映射表 (`bootstrap.*.map`) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。
30 | 
31 | ##Bootstrap 源码
32 | Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下：
33 | 
34 | ```
35 | bootstrap/
36 | ├── less/
37 | ├── js/
38 | ├── fonts/
39 | ├── dist/
40 | │   ├── css/
41 | │   ├── js/
42 | │   └── fonts/
43 | └── docs/
44 |     └── examples/
45 | ```
46 | `less/`、`js/` 和 `fonts/` 目录分别包含了 CSS、JS 和字体图标的源码。`dist/` 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。`docs/` 包含了所有文档的源码文件，`examples/` 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。


--------------------------------------------------------------------------------
/css/overview.md:
--------------------------------------------------------------------------------
 1 | # 概览
 2 | 
 3 | 深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。
 4 | 
 5 | ## HTML5 文档类型
 6 | Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
 7 | 
 8 | ```
 9 |     
10 |     
11 |       ...
12 |     
13 | ```
14 | ## 移动设备优先
15 | 在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，**Bootstrap 是移动设备优先的**。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
16 | 
17 | 为了确保适当的绘制和触屏缩放，需要在 `` 之中**添加 viewport 元数据标签**。
18 | 
19 | ```
20 |     
21 | ```
22 | 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 `user-scalable=no` 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
23 | 
24 | ```
25 |     
26 | ```
27 | ## 排版与链接
28 | Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
29 | 
30 | 为 `body` 元素设置 `background-color: #fff`;
31 | 使用 `@font-family-base`、`@font-size-base` 和 `@line-height-base` a变量作为排版的基本参数
32 | 为所有链接设置了基本颜色 `@link-color` ，并且当链接处于 `:hover` 状态时才添加下划线
33 | 这些样式都能在 `scaffolding.less` 文件中找到对应的源码。
34 | 
35 | ## Normalize.css
36 | 为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。
37 | 
38 | 布局容器
39 | Bootstrap 需要为页面内容和栅格系统包裹一个 `.container` 容器。我们提供了两个作此用处的类。注意，由于 `padding` 等属性的原因，这两种 容器类不能互相嵌套。
40 | 
41 | `.container` 类用于固定宽度并支持响应式布局的容器。
42 | 
43 | ```
44 |     

45 |       ...
46 |     

47 | ```
48 | `.container-fluid` 类用于 100% 宽度，占据全部视口（viewport）的容器。
49 | 
50 | ```
51 |     

52 |       ...
53 |     

54 | ```
55 | 


--------------------------------------------------------------------------------
/javascript/overview.md:
--------------------------------------------------------------------------------
  1 | # 概览 - Overview
  2 | 
  3 | ## 单个还是全部引入
  4 | 
  5 | JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 `*.js` 文件），或者一次性全部引入（使用 `bootstrap.js` 或压缩版的 `bootstrap.min.js`）。
  6 | 
  7 | >
  8 | **建议使用压缩版的 JavaScript 文件**  
  9 | `bootstrap.js` 和 `bootstrap.min.js` 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。
 10 | 
 11 | >
 12 | **插件之间的依赖关系**  
 13 | 某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 `bower.json` 文件中列出了 Bootstrap 所支持的 jQuery 版本。
 14 | 
 15 | ## data 属性
 16 | 
 17 | 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。
 18 | 
 19 | 话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 `data-api` 为命名空间并绑定在文档上的事件。就像下面这样：
 20 | 
 21 | ```
 22 | $(document).off('.data-api')
 23 | ```
 24 | 
 25 | 另外，如果是针对某个特定的插件，只需在 `data-api` 前面添加那个插件的名称作为命名空间，如下：
 26 | 
 27 | ```
 28 | $(document).off('.alert.data-api')
 29 | ```
 30 | 
 31 | >
 32 | **Only one plugin per element via data attributes**   
 33 | Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.
 34 | 
 35 | ## 编程方式的 API
 36 | 
 37 | 我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。
 38 | 
 39 | ```
 40 | $('.btn.danger').button('toggle').addClass('fat')
 41 | ```
 42 | 
 43 | 所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：
 44 | 
 45 | ```
 46 | $('#myModal').modal()                      // 以默认值初始化
 47 | $('#myModal').modal({ keyboard: false })   // initialized with no keyboard
 48 | $('#myModal').modal('show')                // 初始化后立即调用 show 方法
 49 | ```
 50 | 
 51 | 每个插件还通过 `Constructor` 属性暴露了其原始的构造函数：`$.fn.popover.Constructor`。如果你想获取某个插件的实例，可以直接通过页面元素获取：`$('[rel="popover"]').data('popover')`。
 52 | 
 53 | 默认设置
 54 | 
 55 | 每个插件都可以通过修改其自身的 `Constructor.DEFAULTS` 对象从而改变插件的默认设置：
 56 | 
 57 | ```
 58 | $.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false
 59 | ```
 60 | 
 61 | ## 避免命名空间冲突
 62 | 
 63 | 某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果不幸发生了这种情况，你可以通过调用插件的 `.noConflict` 方法恢复其原始值。
 64 | 
 65 | ```
 66 | var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
 67 | $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
 68 | ```
 69 | 
 70 | ## 事件
 71 | 
 72 | Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 `show`）表示其在事件开始时被触发；而过去式动词（例如 `shown`）表示在动作执行完毕之后被触发。
 73 | 
 74 | 从 3.0.0 版本开始，所有 Bootstrap 事件的名称都采用命名空间方式。
 75 | 
 76 | 所有以不定式形式的动词命名的事件都提供了 `preventDefault` 功能。这就赋予你在动作开始执行前将其停止的能力。
 77 | 
 78 | ```
 79 | $('#myModal').on('show.bs.modal', function (e) {
 80 |   if (!data) return e.preventDefault() // 阻止模态框的展示
 81 | })
 82 | ```
 83 | 
 84 | ## Version numbers
 85 | 
 86 | The version of each of Bootstrap's jQuery plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:
 87 | 
 88 | ```
 89 | $.fn.tooltip.Constructor.VERSION // => "3.3.4"
 90 | ```
 91 | 
 92 | ## 未对禁用 JavaScript 的浏览器提供补救措施
 93 | 
 94 | Bootstrap 插件未对禁用 JavaScript 的浏览器提供补救措施。如果你对这种情况下的用户体验很关心的话，请添加 `