Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。它包含了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局。简介栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
使用以下给出的这份超级简单的 HTML 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <
Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。Bootstrap 插件全部依赖 jQuery请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。在 bower.
案例滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面，看看左侧导航的变化。先把实现的代码上了，你可以通过测试代码先来看看效果。<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。默认样式默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。<div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" src="...
在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li></ol>
把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。插件依赖：按钮式下拉菜单依赖下拉菜单插件 ，因此需要将此插件包含在你所使用的 Bootstrap 版本中。单按钮下拉菜单只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。<!-- Single button --><div class="btn-group"> <
虽然 Bootstrap 是基于 Less 构建的，我们还提供了一套官方支持的 Sass 移植版代码。我们将这个版本放在单独的 GitHub 仓库中进行维护，并通过脚本处理源码更新。包含的内容由于 Sass 移植版存放于单独的仓库，并针对不同的使用群体，这个项目中的内容与 Bootstrap 主项目有很大不同。这也是为了保证 Sass 移植版与更多基于 Sass 的系统相兼容。
Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言，支持变量、mixin、函数等额外功能。对于希望使用 Less 源码而非编译而来的 CSS 文件的用户，Bootstrap 框架中包含的大量变量、mixin 将非常有价值。针对栅格系统的变量和 mixin 包含在栅格系统章节。
为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。
虽然我们并不官方支持任何第三方插件，我们还是提供一些建议，帮你避免可能在你的项目中会出现的问题。box-sizing 属性某些第三方软件，包括 Google 地图和 Google 定制搜索引擎都会由于 * { box-sizing: border-box; } 的设置而产生冲突，这一设置使 padding不影响页面元素最终宽度的计算。更多信息请参考 盒模型与尺寸计算 - CSS Tricks。
Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。被支持的浏览器特别注意，我们坚决支持这些浏览器的最新版本。在 Windows 平台，我们支持 Internet Explorer 8-11。请看下面列出的详细信息。
你在找从老版本升级到 Bootstrap v3.x 版本的方法吗？请查看我们整理的升级指南吧。
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面，使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性，就像这个非响应式布局实例页面一样。禁止响应式布局有如下几步：移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：<meta>。通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important;
Bootstrap 使用 Grunt 作为编译系统，并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。安装 Grunt安装 Grunt 前，你需要首先下载并安装 node.js （npm 已经包含在内）。npm 是 node packaged modules 的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。本教程根据官方最新版本（V3.3.4）改编，对原文做了精简，突出了学习的重点，帮助读者快速掌握 Bootstrap 3 的最新更新的内容。适用人群只要您具备 HTML 和 CSS 的基础知识，您就可以阅读本教程，进而开发出自己的网站。
如何使用出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。不要和其他组件混合使用图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span>
关注时代Java
